applewatch人机界面指南(中文版)

1、Apple Watch 人机界面指南 微博无线设计团队 版权所有 1 Apple Watch 人机界面指南（中文版） 微博 UDC-M Apple Watch 人机界面指南 微博无线设计团队 版权所有 2 翻译说明 本文译自 Apple 官方推出的设计指南Apple Watch Human Interface Guidelines （2014-11-19 版本，原文地址见：http:/ 免存在错误和疏漏，若有问题，欢迎联系微博 UDC-M 反馈建议 微博无线设计团队 2014 年 11 月 21 日 Apple Watch 人机界面指南 微博无线设计团队 版权所有 3 目录 UI 基础 4 为 Apple Watch 设计 .4 应用间的适配 5 Glances .6 通知 7 模态界面（Modal Sheets） 9 布局 . 10 颜色和字体 . 12 动效 . 14 品牌 . 14 UI 元素 15 标签 . 15 图像 . 16 组 . 17 表格 . 17 按钮 . 18 开关 . 19 滑块 . 20 地图 . 20 日期和计时器 . 22 菜单 . 23 图标和图像设计

2、. 25 图标和图像尺寸 . 25 菜单图像 . 27 Apple Watch 人机界面指南 微博无线设计团队 版权所有 4 UI 基础基础 为 Apple Watch 设计 Apple Watch遵循以下设计宗旨： 个性化个性化。由于Apple Watch是为穿戴设计，它的UI将贴合使用者的生活。在佩戴者抬起手肘时将显示时间 和新的提示。数码化的输入特别是心率测算以及草图功能，使得不可思议的新型个性化沟通方式成为 可能。加速度传感器和一个心脏速率传感器提供着使用者每天行为的个性化信。在以往，没有任何Apple 设备能够如此贴近用户，当你为Apple Watch设计应用时，重点考虑这种贴近用户的联系。 整体性整体性。Apple Watch是设计用来模糊软硬件之间界限的产品。数码旋钮（Digital Crown）是一个用于微 调的硬件，同时用来实现精妙的软件界面导航。Taptic发动机可产生与屏幕上的通知和交互行为相关联的 微妙物理反馈。并且，由硬件驱动的物理手势Force Touch，揭示了软件控制方式的另一个新维度。 Retina显示屏使得UI设计的物理边界也被有效地模糊至不可见。周

3、到的应用设计应该致力于软硬件之间无 缝的体验。 轻量型轻量型。快捷和轻量级的交互可以最大化利用手腕上有限的呈现面积和位置。能够快捷简单地接收和取消 信息，在私密性和可用性上都是有益的。比如，消息的缩略预览（The notification Short Look），被设计 用来提供通知的最小化呈现，只在佩戴者想要保持进一步参与的情况下才展示更多信息，并提供易于确认 Apple Watch 人机界面指南 微博无线设计团队 版权所有 5 和轻扫的缩略信息浏览界面。为Apple Watch设计的应用应该尊重佩戴者的使用情境：在小尺寸表面上简 易，随时地呈现一切。 Watch app应该是对于你的iOS app的补充，而不是替代。如果你用分钟计量iOS应用的交互敏捷度，那么 你应该以秒计量Apple Watch上的交互敏捷度，也就是说，Apple Watch上的一切交互行为都应该更简洁， 一切交互界面都应该更简单。 应用间的适配 Apple Watch 应该与佩戴者的 iPhone 一起配合着让你的应用更好地运行。 界面风格 Watch应用支持2种方式的导航： 层级导航层级导航（Hierarch

4、ical）。）。与iOS的层级导航一致，适合于多级信息的呈现。在多级导航应用中，用户通 过在每个界面中做一次选择进行导航，直到到达目标界面。如果需要到达另一个目的界面，用户通常需要 逐级返回或全部返回至初始界面，做不同的选择。 对于复杂的应用来说，层级导航在传统意义上通常优于平级，分页导航模型。 基于页面间的导航基于页面间的导航（Page-based）。）。分页界面能够让用户通过横滑来导航不同页面的内容。基于页面的 导航方式适用于简单数据模型的应用，并且每一页的数据模型彼此并不紧密相关。 位于每个分页界面下方的点状指示器显示了用户在所有分页中的当前位置，最小化呈现分页总数量，从而 简化导航。 你不能混合使用层级导航和分页导航。在设计构思阶段，你应该选定最适合你的应用的内容与设计的导航 方式。 使用这2种导航形式都可以模式化呈现内容，标准的模式化界面能够让用户专注地完成任务或获取信息， 但是暂时阻止用户与其余应用进行交互，更多信息参见模式化表单（Modal Sheets） Apple Watch 人机界面指南 微博无线设计团队 版权所有 6 用户交互 基于行为的事件基于行为的事件（Act

5、ion-based events）。单击手势是用户与你的应用进行交互的主要手势，列表栏， 按钮，滑块以及其他控件均将通过单击被激活。这些单击行为将被包括进你的WatchKit代码中。 手势手势（Gestures）。你不能为你的应用单独定义新的手势。而是应该采用系统定义好的手势，并利用这些 手势去执行标准的行为： 垂直轻扫，滚动内容界面 在分页导航界面中，横滑切换上一页下一页 至左边界边缘的横滑将自动返回初始导航界面 点击表明着选择或交互行为，点击行为由系统进行处理，报告给你的WatchKit的行为方法库 Apple Watch 不支持捏放等多指手势。 按压触摸（按压触摸（Force Touch）。小屏幕可以容纳的控件有限，因此Apple Watch引入了一种全新的交互模 式：按压触摸。和感应点触一样，Retina屏幕也能感应压力。按压触摸用于呈现与当前内容相关的情境操 作菜单（如果有的话）。 数数码码旋钮旋钮（The Digital Crown）。为微调设计，在不占用Apple Watch屏幕面积下提高滚动浏览效率，尤 其便于翻阅长页面。 Glances 在Apple Watch中，G

6、lance是app一系列内容的预览视图，理想情况下，它是实时的并与情境相关的。整 体来看，Glances是Watch所有app提供的有意义信息的浏览集合。Glances是拉取，而不是推送，所以不 同于推送到设备上的通知，Glances站在使用者的角度进行拉取信息。 Glances是： Apple Watch 人机界面指南 微博无线设计团队 版权所有 7 基于模板基于模板的的。Glance有很多上部呈现或下部呈现的模板版式，使用Xcode选定一个你需要的模板版 式，并让你的内容设计遵循相应模板版式的规范。 不支持滚动不支持滚动的的。所有内容必须在1屏显示。 只提供阅览只提供阅览的的。点击Glance的任何地方都将打开app。 可选的可选的。不是所有app都需要Glances，并且用户可以选择需要显示的Glances。 Glances 底部的空间需预留给分页点状指示器。 基于用户当前使用情境去考虑基于用户当前使用情境去考虑Glance。不实时以及不相关的信息将会降低Glance的可用性，尽可能多地 考虑与用户实时相关的时间和地理位置信息。 Glances可以深层关联相应的可以深层关联相应的

7、app。Glances能够通过切换告诉app当用户点击呈现过哪些缩略视图。app 可以根据这些信息呈现不同的界面或者灵活呈现现有的界面。 缩略视图必须显示对用户最有用的信息缩略视图必须显示对用户最有用的信息。不要将Glance简单当作启动你的应用的一种方式。 通知 Apple Watch中的通知快捷便利，并有着轻量级的交互方式，体现在2个方面：Short Look和Long Look。 Short Look会在一个实时的本地或远程通知需要呈现给用户时出现。Short Look提供最精简的信息一 定程度上保护用户的隐私。如果佩戴者放下TA的手腕，Short Look便会消失。Long Look会在佩戴者手腕 一直处于抬起状态或者佩戴者点击Short Look时出现。Long Look状态下会提供更多的细节信息和更多的 功能并且它必须通过佩戴者执行取消操作后消失。 仔细考虑你发送给用户通知的频率仔细考虑你发送给用户通知的频率。用户可能会认为过于频繁的通知是烦扰的，并因此禁用你的app通知 在Watch上呈现。始终要确保呈现出的信息是用户想要的。 Short Look 通知 Short Lo

8、ok让用户知道通知来自于哪个app，并精简地呈现出来。Short Look界面是基于模板的，其中包含 通知来源App的名称，图标，通知标题，系统将会以app的关键色展示app名称。 Apple Watch 人机界面指南 微博无线设计团队 版权所有 8 让通知标题简短专注让通知标题简短专注。用于呈现通知标题的空间有限，因此尽可能让通知标题简明达意。标题字段不需要 提供太多通知详情，只需要提供通知的内容的概要说明。 自定义的Long Look通知 Long Look将提供通知的更多细节信息。系统提供默认的Long Look呈现样式，但是各个app可以根据自身 的品牌，代表图形去自定义Long Look的呈现样式。Long Look的结构对于所有app都是一致的，系统会提 供一个浮于上层的边框用于承载app的图标和名称，并在底部提供取消按钮和app定义的操作按钮。顶部 app图标和底部操作按钮区域中间用于呈现app内容。 Apple Watch 人机界面指南 微博无线设计团队 版权所有 9 app内容可以与系统提供的承载app图标的边框位于一行，通过高斯模糊蒙层呈现，也可以在其下方开始呈 现

9、。一般高斯模糊蒙层呈现适用于图片或其他图形化内容。对于文本型的通知内容，使用Xcode的偏移通 知内容选项来使得app内容正好从app图标边框下方开始呈现。 对于自定义的Long Look界面，app必须提供一个静态界面，在此基础上可以选择配置一个动态界面。动态 界面比静态界面更加灵活呈现信息，但是请确保静态界面和动态界面呈现同样类型的通知内容。静态界面 将为暂时读取不到的动态界面提供占位。 Long Look视图下的通知能够最多呈现视图下的通知能够最多呈现4个自定义操作按钮个自定义操作按钮。Apple Watch会根据你提交的通知中自定义操 作按钮类型呈现相应的操作按钮。 取消按钮始终存在取消按钮始终存在。取消按钮会在最多数量为4的操作按钮下存在。 想知道更多静态视图和动态视图信息，以及怎样配置操作按钮的信息，请参阅WatchKit 编程指南。 模态界面（Modal Sheets） 模态界面有优点也有缺点。它提供给用户一种暂时隔绝与其他app交互的情境，让用户去完成任务，在不 被干扰的情况下获取信息，或是继续完成当前菜单下的操作选择。 当然，最理想的情况是你能够尽量减少模态视图的出现，建议只在以下情况下考虑创建模态情境： 当前获得用户注意力很重要 Apple Watch 人机界面指南 微博无线设计团队 版权所有 10 必须用户明确表示完成或明确表示放弃的任务，以便更好地判断是保存还是丢弃用户的数据 在分页模式中，模态界面可以只包含单屏界面，也可以包含多屏界面。单屏界面和多屏界面唯一的不同点 只是有无配置界面下方的点状指示器。 模态视图左上角的位置是预留给关闭按钮的。模态视图左上角的位置是预留给关闭按钮的。当用户点击关闭按钮，或横滑至最左边缘时，系统便会立即 关闭模态视图。关闭按钮是必须呈现的，但是你可以改变按钮的文案以便更好地传达语义。你不需要在内 容主体中放置关闭按钮。通常关闭按钮的文案为“关闭”和“取消”。且文案始终用白色呈现。 如果一项任务需要用户确认，那么请在模态视图主体中提供确认按钮如果一项任务需要用户确认，那么请在模态视图主体中提供确认按钮。请使用标准的按钮去

《applewatch人机界面指南(中文版)》由会员第***分享，可在线阅读，更多相关《applewatch人机界面指南(中文版)》请在金锄头文库上搜索。