Apple Watch Human Interface Guidelines (Watch 人机交互指南) (官方文档翻译)

Apple Watch Human Interface Guidelines (Watch 人机交互指南) 官方文档翻译

Apple Watch 开启了人机交互的新篇章.这是苹果迄今为止设计的最具个性化的设备,并且使用了前所未有的交互方式.
由于CSDN Markdown编辑器有问题,所以完整版请看这里:完整版

Overview

当您准备设计Watch项目的时候,必须先了解Apple Watch是基于什么框架设计的:

轻量级交互

Apple Watch是为了让用户能够和信息进行快速的交互设计的. Apple Watch直接把信息显示在用户的手腕上,从而使得信息能够简单快速的被用户获取或忽略.好的app应该专注于让用户能够和他们最关心的内容进行快速的交互.

整体的设计

Apple Watch 的设计模糊了设备和软件之间的界限.比如 Force Touch 和 Digital Crown 直接让用户和屏幕上内容无缝的交互.在您自己的app中也应该潜移默化的给用户这样的感觉:硬件和软件是一体的.

个性化

因为 Apple Watch 是穿戴式设备,所以它的设计更注重用户的仪表差异.之前可从没有一款苹果设备如此贴近用户.

手势

用户通过手势和触摸事件同手表进行交互,但是和 iOS APP不同的是, 您的Watch app 并不直接处理这些事件,而是通过系统的以下几种方式自动的响应所有的touch 事件和手势:

• tap
• 垂直滚动当前的屏幕
• 在page-based(分页)结构中,水平滑动显示以上一页或下一页的界面
• 在hierarchical(分层)结构中,轻扫左侧边缘导航栏返回层级结构中的上一级界面(就是导航栏的返回)
  当用户tap一个button或者一个control的时候, Apple Watch 会调用与之对应的方法,从而响应用户的操作.

Force Touch

Apple Watch 不仅能感知手指的触摸,还能感知触摸压力的大小.当稍用力的按下的时候,Apple Watch会显示当前屏幕的menu(菜单)(如果有的话). 您可以使用menu在不占用当前屏幕空间的前提下向用户展示一些相关的操作.
关于menu请看这里: Menu官方文档翻译

Digital Crown (数字表冠)

Digital Crown 可以在不影响用户观看的情况下滚动其内容. 此外,Digital Crown 还可以通过您创建的自定义选择界面(picker)访问app.除了上面两种情况,app不能直接访问Digital Crown的数据.

Side Button (Watch侧边的那个长方形的按钮)

用户可以通过按 watch 侧面的按钮访问Friend界面.在这个界面,您可以给您的联系人打电话,发短信或者发送sketch,tap,心跳. 但是开发者自己的app不能访问侧边的这个按钮.

App Components (应用组件)

用户主要通过以下四个途径和您的app进行交互: 通知,glance,查看组件,直接同app进行交互.

Notifications (通知)

Apple Watch 上的通知是高质量和及时的信息.通知以两种方式显示—short looks 和 long looks. 当手腕抬起的时候显示的是包含简要信息的short look.如果用户保持抬起的这个动作,Apple Watch 就会显示包含详细信息的long look.
如果您的iPhone app 支持通知,Apple Watch 会自动的给您提供short look 和 long look 通知.您可以自定义您 app 的 long-look界面,比如包含的图片,动画的图片,额外的内容或者是自定义的颜色.
不管您用自定义的通知界面还是系统的界面,通知包含的内容必须是对用户有用的.

Short looks

Short looks 出现时间的时间很短,只够用户看清这个通知是关于什么和从哪个app发出的. short look 的显示界面是系统提供的. 由通知的标题,您app的名字和icon组成.app的名字的颜色是您app的global tint color.

1. 确保title简短易懂: title的空间是有限的,所以确保title简明扼要,详细的内容放在通知的body中就好了.
2. 注意隐私: short looks 内容应该严谨,只提供基本信息就好.通知的标题不能括潜在的敏感文字.

Long looks

long looks 为收到的通知显示更多的内容. 当用户保持手腕抬起的动作或者点击short look的时候会显示long look. 当用户手腕放下的时候,long look自动消失.用户也可用手动的关闭掉(关闭按钮或者向下拉).

自定义的long look分动态和静态两种.静态的界面可用来让您显示通知的内容和一些静态的文字和图片.动态的界面可以为您提供更多的选项来配置界面的显示,可以让您显示通知的全部内容.
静态和动态的long look的内容是可以定制的.但是它们的显示界面却必须使用系统提供的模板.系统提供的模板是在顶部显示 app 的 icon 和名字.您可用定制界面的颜色或者给它一个模糊的外观.自定义的按钮在内容的底部显示.系统会默认在您自定义按钮的最后面加一个关闭的按钮.
通知的内容最好简明扼要,但是您如果显示很多内容的话,用户也可以通过垂直的滑动或者用Digital Crown来滚动查看包含长内容的long look.
1. 最多能添加四个自定义的按钮
Apple Watch可用共享您iPhone app中已经注册的通知.并且为它们配置任意自定义的动作按钮.系统根据通知的类型来决定您自定义按钮的显示方式,除了您自定义的按钮外,系统还会默认增加一个关闭的按钮.

1. 配置界面的颜色.
   您可用定制界面的颜色来使其更符合您的品牌.如果在long look的内容区域顶部显示的是一个图片,选择模糊界面选项,界面就会有一个轻微模糊,半透明的效果.从而让图片有一种重影效果.
2. 选择背景色.
   默认情况下,long look的背景色是透明的. 一般设置控制器界面的背景色18%的白色透明来和系统的其他通知相协调.当然您也可以选择一个符合您品牌的颜色.
3. 提供一个静态的和动态(optional)的界面.
   动态的界面是可自定义的.但这两种界面都支持特定应用程序的自定义.当动态界面不可用的时候,系统会默认显示静态界面.具体请看这里: Apple Watch开发指南 (稍后也会翻译的)
4. 动态界面中避免使用动态生成或下载的图片.
   尽可能的使用预先准备好的图片,或者是在使用之前先下载好这些图片.动态的界面是有有限是时间来准备和显示他们的内容的.如果动态的界面没有及时的准备好,系统会默认显示静态界面.
5. 提前设计好静态图片
   您必须为您的静态界面预先创建好图片资源并打进应用程序的包里面.

Glances (一瞥)

Glance是一些用户比较喜欢的可快速浏览的app的集合.Glance可以让用户快速的浏览app中的内容.
并不是所有的app都需要glance.用户可以选择他们想要的app放在glance中.所以glance应该提供一些实质性重要的东西.好的glance应该显示精心设计过的简单重要的内容.
1. Glance要上下文有联系.
glance 应该无时不刻能给用户提供有用的信息.比如,您可以根据时间和地点的变化提供相应的信息.避免将您的glance设计成仅仅是一个app启动的launcher.
2. 使内容快速和容易阅读.
通过使用图片,稍大字体和少量的内容来实现这一目的.如果一个glance还需要用户停下来仔细查看,那这个glance的设计就是多余的.
3. glance的内容使用左对齐方式.
左对齐可以使所有的glance看起来都比较好看.还可以保证用户在视觉上的一致性.从而让用户在浏览的时候快速的获取他们想要的信息.
使用系统的模板可以让glance们有一个统一的布局和结构.glance上面和下面的部分为中间的内容提供了基线.右上角是系统保留用于显示系统的状态的区域.如果您创建的 glance和其他 app不协调的话, 就会使您的app glance看起来很突兀,很可能导致用户删除它.

Watch Apps

相对与glance和通知,一个 Watch app 可以给用户提供更详细的信息和功能.
您的 Watch app 是对您 iPhone app 的补充,旨在让用户能够和您的内容进行快速的交互.使用您的 Watch app 来展示重要的内容可以让用户更加快捷的和这些信息进行交互 .如果需要还可以利用Handoff将当前的任务切换到其他设备上.

表面

这部分内容是博主添加的,先带大家了解一下Watch的表面,因为如果大家不了解表面样式的话,那下面的Complications部分大家就会很迷糊

• 实用表面

• 模块表面

• 简约表面

• 动态表面

• 延时摄影表面

• 天文表面

• 彩色表面

• 相薄表面

• 太阳表面

• 计时码表表面

• 米奇表面

• 大文字表面

Complications

Complications 是在watch表面显示及时重要信息的组件.和glance一样,Complications可以让用户快速的看到特定应用程序的重要信息.上图所示,表面中的时间13:58和日期7就是系统的组件.
一些 watch 表面不显示任何的组件,但是大多数至少显示几个.组件分为5种:circular, modular small, modular large, utilitarian small, 和 utilitarian large. 每种模块决定了它在屏幕上呈现怎样的信息.
您的应用程序为组件提供基于时间轴的数据.然后系统根据这个时间轴来决定当前时间显示怎样的数据.时间轴也可以用于Time Travel(可以让用户看昨天今天和明天的任何时间相对应的事件).系统为每个app保存一个有限数量的时间轴.
组件使用定义好的布局模板显示时间轴对应的数据.同时每一个组件组又有多个模板可以选择.

Circular

显示在彩色表面角上的一个小的图片或者几个字符.

上图为彩色表面.上图四个角的小组件就是Circular形式.

Modular small

适用于在模块表面显示一个icon和内容,或者一个圆形的图表,或者一个单独的大点的条目.至多两行.

Modular large

为模块表面提供一个大的区域来显示至多三行的内容.

Utility smal

该模板在实用表面和米奇表面的左上角和右上角显示的矩形组件.或者显示在计时码表表面的除右下角的其他三个角.简约表面的四个角.内容可以显示符号或者icon或者圆形图表.

Utility large

显示在实用表面和米奇表面底部的模板.

支持很多的组件组(就是一组组件)

开发所有的组件组来确保您的组件在所有的表面上可以使用.对于您没有支持的表面,系统会用您app的名字或者icon代替.

显示有用重要的数据

表面只能显示很少的组件.如果您的组件没有为用户提供重要的数据,用户很少会安装它.一般重要有用的组件的信息是随着时间的变化而变化的.比如天气温度湿度等..

决定要显示什么数据和什么时候显示

每一个时间轴条目都有一个时间值来决定什么时间显示怎样的数据.不同的数据可能需要不同的时间类型.比如一个会议app可能需要在会议开始之前就提示相关信息.而一个天气的app可能需要显示某一时间的天气.选择合适的时间来增强信息的实用性.

考虑Time Travel 对您数据的影响.

在Time Travel 时,相对的日期和时间在改变.与其指定相对的日期和时间,最好使用固定的值.比如:与其说”1小时”不如具体到”在上午10点”.当您必须以相对值显示日期和时间的时候,使用一个相对的日期来测试保证您的值会被正确的更新.永远不要使用自己生成的相对的时间字符串,因为这些字符串一般是不准确的,尤其是在Time Travel的时候.

图片的大小要和模板匹配

在组件中使用的图片必须和当前模板相匹配.具体格式会在下面介绍.

为您的组件设置没有内容或者内容加载失败时的图片(默认图片)

当组件的数据不可用或者加载失败时,系统会显示默认图片.具体格式下面会介绍.

为您的数据提供一个圆形的样式来显示.

使用一个闭合的圆形的形式来表示该值占总体的百分比.比如电量.使用开环的圆形来显示当最大值和最小值不确定或不代表整体的百分比的时候.例如速度指示器.

导航

您 Watch app 的结构决定了用户找到信息的形式.选择一个合适的导航结构并且展示最重要的信息可以让用户更简单快速的找到他们需要的内容.

基本的导航控制器

一个 Watch app 可能包含一个或更多的 screen. 在这种情况下,选择一个最符合您需要的导航结构就很重要啦.导航栏的基本结构有两种: page-based (分页)和 hierarchy (分层). 注意: 您的一个app中只能选择这两种基本结构中的一种.

Page-based

这种导航结构最适合那种不同界面中放同级内容的结构.在这种结构中,每一单独界面都可以垂直的滚动.界面之间可以通过水平滑动来进行页面间的跳转.下面的小白点用来指示当前在哪个界面.由于加载太多的界面会很耗时,所以在您的设计中一定要限制页面的数量.

Hierarchical

这种导航适合那些 master-detail 或者需要显示一系列导航选项列表的结构.这种结构可以让您以后更加方便的扩展您的app或者增加新的内容.当用户点击了当前层级结构中的一个item,会跳到一个显示该界面详细信息的新screen.层级最好不要超过2或3层,因为太深的层级结构会让用户不知道自己已经跳哪里了.

如果需要,使用modal sheet来拓展您的界面

尽管您只能使用一种基本导航结构,但是您可以以任何的形式present出一个modal sheet.

聚焦在本质的内容上

您的Watch app 应该是对iPhone app 的补充,而不是单纯的模拟它.包含太多的界面只会让加载更耗时,让用户更迷惑.所以您app的交互设计一定要快速和简单.

Alerts 和 action sheets

Alerts 和 action sheets 是用来给用户传递信息和反馈结果的全屏显示的弹框.Action sheets可以让您提示用户将要进行什么样的操作.Alert用来显示一些错误或者关于app状态,活动的重要信息.和iPhone 开发一样,您可以在app的任何界面弹出Alert或者Action sheet.
Alert和Action sheet有三种样式,每一种都有特别的用处.

Action sheet

Action sheet 可以给用户一系列的选项.一个Action sheet 包含一个title,一个message(optional),一个或多个可供选择的选项按钮.左上角总是会显示一个取消按钮,您可以自定义取消按钮的文字.

Alerts

Alert一般用来向用户展示错误或异常信息.一个Alert包含一个title,一个message(optional),一个关闭弹框的按钮.使用title和message清晰的传递发生的状态,Alert只能放一个按钮.

Side-by-side alerts

和alert唯一不同的就是这个可以显示两个按钮.但是左边的按钮必须是取消按钮.
Alert和Action sheet的按钮都有相关联样式来表达该按钮的目的.大多数按钮都使用默认的样式,用来表明这个按钮没有特殊的意义. destructive 样式(就是那个红色的删除按钮)来表示这是个危险的动作,这个按钮可能会删除用户的一些数据.取消按钮的样式表示这个按钮会无条件的关闭弹框.按钮的样式影响其他弹框中的样式和位置.

使用Action sheet来给用户一系列的选项

一个Action sheet可以展示用户可以进行的所有操作.使用该弹框请求用户将要进行怎样的操作.比如当收到一个消息的时候,使用该弹框请求用户是忽略该信息还是查看该信息.

尽可能少的使用弹框

尽可能少的使用弹框或者不用.

必须有一个取消按钮

必须给用户一个可以无条件关闭该弹框的按钮.您的取消按钮的文字可以不是”取消”,但是必须使用取消按钮的样式.

根据您的按钮个数来选择正确的弹框

一个Alert有且仅有一个取消按钮. side-by-side alert 有且仅有两个按钮.

action sheets 按钮个数避免超过四个

因为少量的按钮可以让用户不滚动就能一下子看到所有的选项.这些按钮中必须有一个取消按钮.

title和message要简明扼要

title和message必须简明扼要的传达发生的状况和需要用户进行怎样的操作.按钮的title的表述应该清楚简明扼要.

尽可能的让title能在一行显示

标题肯定要简洁.

message没有必要的情况下尽可能不要显示

您可以使用message表达重要详细的信息.但是如果title就能表达清楚,那就省略掉message.Action sheets建议不要使用message.

适当的使用大写和标点符号

1. 在一个短语或者单个陈述句中使用Title-style样式,不加标点符号.
2. 在一个单独的问句中使用Sentence-style样式,后面加一个问号.
3. 包括两个以上的句子的时候使用Sentence-style样式,每个句子的最后都要加标点符号.

自定义sheet

一个自定义的sheet是一个显示在您app当前界面上的全屏的弹框.您可以自义其界面来显示您的内容,但是左上角必须是关闭按钮,用来关闭弹框.而且关闭按钮的文字必须是白色.

可以更改关闭按钮的文字

系统为关闭按钮提供了固定的文字,但是如果您想更改也是可以的.最常用的文字有:关闭,完成,dismiss等.

关闭按钮的文字不能使用”返回”或者”<”

“返回”或者”<”的话可能会误导用户这个弹框在您app的层级结构中.

按钮的文字不能是界面的标题

如果关闭按钮的文字很像是一个界面或者app的标题或者为空的话,用户可能不知道怎么关闭这个弹框.

不能在一个弹框上再弹一个框

当用户点击弹框上的按钮的时候是想回到app的主界面,您在一个弹框的基础上再弹一个是相当变态的.

由于CSDN Markdown编辑器有问题,所以完整版请看这里:完整版