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

Apple Watch以一种从未有的交互形式,开启了人机交互的新篇章.同样Apple Watch也是苹果迄今为止设计的最具个性化的设备.

Overview

当您准备开始设计Watch项目时,必须要先了解Apple Watch的设计理念:

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


轻量级交互

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


整体的设计

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


个性化

Gestures

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


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

Force Touch

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



视频地址: Force Touch

关于Menu下文会详细介绍: Menu 或者 Menu官方文档翻译.

Digital Crown

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



视频地址: Force Touch

Side Button

用户可以通过Side Button(Watch侧面的方形的按钮)访问Friend界面.在Friend界面可以给联系人打电话,发短信或者发送sketch,tap,心跳. 但是开发者自己的app不能访问Side Button.



视频地址: Force Touch

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

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 Face

注: 这部分内容是我自己添加的,先带大家了解一下Watch的表面.因为如果大家不了解表面样式的话,那下面的Complications部分就会很迷糊
  • 实用表面


  • 模块表面


  • 简约表面


  • 动态表面


  • 延时摄影表面


  • 天文表面


  • 彩色表面


  • 相薄表面


  • 太阳表面


  • 计时码表表面


  • 米奇表面


  • 大文字表面


Complications



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

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

这里写图片描述

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

这里写图片描述

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

这里写图片描述

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

这里写图片描述

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

这里写图片描述

  1. 支持很多的组件组(就是一组组件)
    开发所有的组件组来确保您的组件在所有的表面上可以使用.对于您没有支持的表面,系统会用您app的名字或者icon代替.
  2. 显示有用且重要的数据
    表面只能显示很少的组件.如果您的组件没有为用户提供重要的数据,用户很少会安装它.一般重要有用的组件的信息是随着时间的变化而变化的.比如天气温度湿度等..
  3. 决定要显示什么数据和什么时候显示
    每一个时间轴条目都有一个时间值来决定什么时间显示怎样的数据.不同的数据可能需要不同的时间类型.比如一个会议app可能需要在会议开始之前就提示相关信息.而一个天气的app可能需要显示某一时间的天气.选择合适的时间来增强信息的实用性.
  4. 考虑Time Travel 对您数据的影响.
    在Time Travel 时,相对的日期和时间在改变.与其指定相对的日期和时间,最好使用固定的值.比如:与其说”1小时”不如具体到”在上午10点”.当您必须以相对值显示日期和时间的时候,使用一个相对的日期来测试保证您的值会被正确的更新.永远不要使用自己生成的相对的时间字符串,因为这些字符串一般是不准确的,尤其是在Time Travel的时候.
  5. 图片的大小要和模板匹配
    在组件中使用的图片必须和当前模板相匹配.具体参考 Complication Images.
  6. 为您的组件设置没有内容或者内容加载失败时的图片(默认图片)
    当组件的数据不可用或者加载失败时,系统会显示默认图片.具体参考 Complication Images.
  7. 为您的数据提供一个圆形的样式来显示.
    使用一个闭合的圆形的形式来表示该值占总体的百分比.比如电量.使用开环的圆形来显示当最大值和最小值不确定或不代表整体的百分比的时候.例如速度指示器.

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

Fundamental Navigation

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

Page-based



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

Hierarchical



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

  1. 如果需要,使用modal sheet来拓展您的界面
    尽管您只能使用一种基本导航结构,但是您可以以任何的形式present出一个modal sheet.
  2. 聚焦在本质的内容上
    您的Watch app应该是对iPhone app的补充,而不是单纯的模拟它.包含太多的界面只会让加载更耗时,让用户更迷惑.所以您app的交互设计一定要快速和简单.

Alerts and 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),一个关闭弹框的按钮.
注意: Alert只能放一个按钮.

Side-by-side alerts



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

  1. 使用Action sheet来给用户一系列的选项
    一个Action sheet可以展示用户可以进行的所有操作.使用该弹框请求用户将要接下来进行怎样的操作.比如当收到一个消息的时候,使用该弹框请求用户是忽略还是查看该信息.
  2. 尽可能少的使用弹框
    尽可能少的使用弹框或者不用.
  3. 必须有一个取消按钮
    必须给用户一个可以无条件关闭该弹框的按钮.您的取消按钮的文字可以不是”取消”,但是必须使用取消按钮的样式.
  4. 根据您的按钮个数来选择正确的弹框
    一个Alert有且仅有一个取消按钮.side-by-side alert有且仅有两个按钮.
  5. action sheets按钮个数避免超过四个
    因为少量的按钮可以让用户不滚动就能一下子看到所有的选项.但是这些按钮中必须有一个取消按钮.
  6. title和message要简明扼要
    title和message必须简明扼要的传达发生的状况和需要用户进行怎样的操作.
  7. 尽可能的让title能在一行显示
    标题肯定要简洁.
  8. message没有必要的情况下尽可能不要显示
    您可以使用message表达重要详细的信息.但是如果title就能表达清楚,那就省略掉message.Action sheets建议不要使用message.
  9. 适当的使用大写和标点符号

这里写图片描述

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

Custom Modal Sheets

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

  1. 可以更改关闭按钮的文字


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

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


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

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


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

  1. 不能在一个弹框上再弹一个框
    当用户点击弹框上的按钮的时候是想回到app的主界面,您在一个弹框的基础上再弹一个是相当变态的.
    视频地址: Modal sheet
  2. 不要滥用modal sheet
    只有在需要临时打断当前工作和需要进行某些关键人物的情况下才能使用modal sheet.不能使用modal sheet仅仅作为您app内容的引导用.
  3. 在适当的情况下使用系统的alerts和action sheets
    把alerts和action sheets用于他们本来的目的.不要用自定义的modal sheet代替.具体信息请看下午: Alert & Action Sheets

Handoff



Apple Watch可以让用户快速的获得信息,但是有时用户可能想在其他设备上更深入的了解该信息,这时就可以使用Handoff来将当前设备的活动传到其他的设备上.在iOS设备上,用户可以在锁屏状态下通过向上扫左下角的app icon来打开handoff的请求.可以让用户继续他们在Apple Watch的活动.

Visual Design

Watch app不管在形式还是功能上都和其他app有着本质上的不同.较小的显示屏幕和定制的交互方式需要特殊的设计和用户体检的考虑.

Display Sizes

Apple Watch有38mm和42mm两种尺寸.



  1. 不同尺寸的屏幕显示相同的内容
    使用相对布局和动态类型来保证元素能自然的拉伸.
  2. 两种尺寸使用相同的图片资源
    两套图片的话会占用更多的资源.如果一个图片能在两种屏幕上都正常显示的情况下就使用一个图片资源.当一张图片实在不能同时解决的时候再使用两张.

Layout

在两种屏幕上显示相同的元素.使用相对位置来让元素扩大来填充可用的空间.界面中的元素对其方式是从上到下从左到右.

  1. 不要一次加载太多的元素
    用户想要立即看到最重要的信息,所以放不重要的信息只会让屏幕闲的杂乱.用户可以通过滚动查看次级重要的信息.


  1. 创建可视化的分组帮助用户找到他们想要的内容
    比如使用负间隔和分割线来将元素和信息放到不同的区域中.


  1. 充分使用屏幕的宽度
    苹果的表面提供了一个自然的可视边距,所以您不需要在内容外边添加额外的边距.而且最好减小元素之间的间距来避免浪费.


  1. 适当的情况下用menu代替按钮组
    Menu是专为存放一系列的按钮设计的.使用menu代替按钮组可以为您的内容释放更多的空间.


  1. 限制side-by-side按钮的个数
    在side-by-side的按钮上图片比文字更有效.显示side-by-side按钮的个数不超过3个.尽管两个有短文本的按钮可以并排放一起.但是最好让按钮占屏幕的整个宽度.


  1. 元素使用左对齐
    左对齐可以让文本更容易阅读.


Color

颜色的使用可以提供视觉的连续性,凸显您的品牌和广告等.每一个app都有一个可以用来配置用来反映您app主色调的global tint color.但是确保文字使用浅色调来保证清晰度和差异性.



  1. app使用黑色的背景色
    黑色的背景色可以和Apple Watch的表面融为一体从而达到一个无边框的效果.


  1. 注意色盲和不同文化对待颜色的差异性
    每个人看到的颜色都不一样.确保您使用的颜色是有效的并且能够传达正确的信息.


视频地址: Color

  1. 不要把颜色作为交互性的唯一途径
    带圆角的按钮和list才是传达可交互的主要途径.


Customization

使用能彰显您品牌的字体,颜色和图片可以为您的app创建一个独一无二的样式.



  1. 避免在您的app中展示您的logo
    Apple Watch的空间是有限的,所以不要浪费在展示您的品牌元素上.
  2. 不要使用lanch界面
    Apple Watch的交互旨在快速.所以用户想立即看到内容.
  3. 确保自定义的文字清晰易读
    自定义的字体可以彰显您品牌的特性,但是清晰是首要前提.在显示大文字的时候可以使用自定义字体,必要是时候还是使用系统的字体.具体请参考: Typography
  4. 将您品牌的颜色用作global tint color
    Apple Watch可以自动的将您的global tint color用于界面元素中.所以这是一个很好的办法来凸显您的品牌.如果您的品牌颜色也是黑色的话,可能在黑色的背景上没有清晰的对比度.此时可以考虑减轻或者饱和您的global tint color的颜色,
  5. 不能用logo或者品牌颜色来填充背景区域
    背景使用黑色界面元素使用颜色.要保证背景简单来提高文字的清晰度.

Typography

一个好的UI设计基本要素是排版清晰,创造视觉的层次感并清楚的传达信息.

Fonts

Apple Watch的系统字体是SF Compact.SF Compact又包括两种形式: SF Compact Text和SF Compact Display.当您为label的text或者其他系统的界面元素指定字体的时候,Apple Watch会根据当前屏幕的点(不知道点的请自行爬梯)来自动适配合适的字体,而且还会根据需要动态的切换.

  1. 选择正确的字体
    当字体小于等于19点时使用SF Compact Text字体.当字体大于等于20个点的时候使用Choose SF Compact Display字体.


  1. app中只能使用一种字体
    尽管支持自定义的字体,但是使用太多会让界面看起来杂乱,而且您需要使用大点的字体来保证其清晰度,还要自己实现类似动态类型的特性.


  1. 字体要清晰
    用户经常会在走路或者跑步的时候查看内容.所以调整字体的大小来确保用户在移动的时候也能看清.
  2. 强调重要的信息
    使用加粗,大小,颜色来凸显重要的信息.
  3. 小字体不能使用轻薄字体
    系统字体会自动忽略20点以下轻薄的字体,因为小字体使用瘦体显示不清楚.所以您自定义字体的时候也要注意这一点.

Built-In Type Styles

只有内置的字体不仅可以让您直观的表达您的内容还能充分利用排版的特性,比如动态类型.



正确的使用内置的类型:



  1. 尽可能的使用内置类型
    内置的类型支持动态类型,可以自动调节字体的tracking和leading.这种类型也充分利用了排版特性的其他优点.更多信息请看: Font Tracking.

Dynamic Type

SF Compact字体即使在小号字体上也能清晰的显示.动态类型还能根据字体的大小额外的调整.



Font Tracking

20pt(@2x / 144 ppi)以下使用SF Compact Text. 大于等于20pt的使用SF Compact Display.相应的tracking如下.



Animation

精妙和流畅的动画可以给用户更多的交互感和动感.动画不仅可以传递状态,提供反馈,让用户专注于您app的某一位置,还能为您的app注入活力.

创建动画的方式有以下几种:帧动画通过播放一系列的静态图片来创造一个单次或循环的动画;还可以通过改变元素的大小,对其方式,颜色或者位置来实现动画效果.当设计动画的时候要遵循以下准则:

  1. 动画要尽可能短
    短动画可以传达需要的信息的同时又不至于让用户等待.短小的动画还能给人一种轻量级和不被打扰的感觉.
  2. 创建的动画要有特殊的作用
    动画应该和内容有关,吸引用户对某一位置的注意或者让用户关注于屏幕的某一部分.使用动画可以让您的app更具活力和参与性.注意不要为了您能写动画就给加个动画(就是不要装那啥😂).
  3. 在glance和通知界面不要使用布局动画
    只能在Watch app中才能使用布局动画.当时可以使用帧动画.
  4. 最小化同时进行的动画数量
    同时运行太多的动画影响其流畅度和app的响应时间.

Animated Image Sequences

帧动画是由两张以上的独立的图片按时间顺序播放.每一张图片构成一个单独的帧,整个动画运行在一个loop中,除非您在运行时改变播放状态.您可以控制image和Group的播放速度,方向和帧率.其他的界面元素只能显示一个完整的动画.
视频地址:Animated Image Sequences

  1. 帧动画的图片要放到bundle中.
    将图片存到app的bundle中可以在加载和播放的时候减小延迟时间.这也是您app设计的一部分.
  2. 优化图片
    被优化的图片可以占用更小的空间和被更快速的加载.关于优化图片: Image Optimizations.
  3. 对于需要被正方向和反方向播的动画使用同样的图片资源
    帧动画能够在运行时被反向播放.所以使用一套图片资源就好.

Layout and Appearance Animations

您可以改变所有界面元素的位置和外观.布局动画可以让您动态的改变元素的大小或外观.您可以移动元素的位置或者改变其内容的对其方式.您也可以动态的改变其外观:背景色和透明度等.布局动画可以让您创建一个动态的界面来响应用户的交互和提供更好的反馈.所以的动画在开始和结束是时候都会默认加淡入淡出效果.您不能关闭或者自定义该效果.
下面是界面元素可以动态改变的属性:Opacity,Height,Width,Group Insets,Alignment,Background Color,Tint Color.



视频地址:Layout and Appearance Animations.

Icons and Images

作为用户体验的一部分,您的icon和image至关重要.它们能够快速的指引用户找到它们想要的内容.

Home Screen Icons

主界面的icon是必须的.您必须同时提供iPhone和Apple Watch的icon.和您的iOS app icon不同的是,Apple Watch的icon的圆形的而且下面没有app的名字.



Menu包含用户可以操作的一些选项.每一个选项都需要一个Label和一个Icon.Menu的Label不能超过两行,所以Label的text必须简短.menu的icon必须都是Template Image(使用图片的alpha通道而非其color通道来定义的图形).

  1. 设置线条粗至少为4像素来保证他们能够清晰的显示
    根据不同设备的大小和icon的复杂度使用对应合适的线宽度.
  2. 必须使用PNG格式
    关于Menu请看这里: Menus

Complication Images

当设计Complication的内容的时候要根据模板使用不同的图片大小.



每一种组件都必须提供一组相对应的默认图片,当没有数据时显示默认图片.下面表列举的是没有内容时显示的图片.



  1. 线宽最小为4像素来确保其清晰度
    在不同的大小的设备上使用适当的线宽和复杂度适当的图片.
  2. 使用PNG格式
    只能使用PNG格式.

Image Optimizations

优化您app中的图片资源可以提高程序的性能.根据情况在能达到您想要的视觉效果下使图片尽可能的更小.

  1. 避免使用透明度
    提供一个黑色遮罩的不透明图片比一个在黑色背景上显示一个透明的图片会更高效.
  2. 对于PNG图片使用8位的调色板就好(不需要使用完整的24位颜色)
    当为您的app创建PNG图片的时候,使用8位的调色板可以在不降低图片质量的情况下减小文件的大小(注意这不适用与照片).
  3. 在文件的大小和质量之间找到平衡点
    大多数的JPEG文件可以被无明显降级的情况下压缩.即使是很少量的压缩都可以对磁盘空间存在重要的意义.通过实验找到一个文件大小和质量之间最合适的压缩值.
  4. 对于平面作品使用SVG格式
    因为SVG格式能在保持图片高质量的情况下输出不同大小的图像.

Interface Elements

界面元素构成了您的app.使用他们来显示您app的内容和加快用户的交互.

Labels

设计label最重要的一点就是清晰度.文字使用浅色调和动态类型来保证文字能被正确的设置大小.系统内置的字体技能保证其清晰度也支持动态类型.如果非要自定义字体,注意不能设计的过于个性化.具体请看这里: Typography.



Images

虽然在iOS中image可以支持多种格式,但是在Watch中最好是PNG格式.



  1. 在38mm和42mm显示的图片大小
    您可以在两种尺寸上使用一个图片资源只有能在这两种尺寸上正常显示.
  2. 创建@2x的格式
    Apple Watch是Retina屏,所以不需要创建标准的图片资源.只需要@2x的图片.
  3. 设置placeholder图片
    placeholder是在图片还没有加载完成的时候显示的占位图片.placeholder可以让您快速的加载界面的同时还能有时间去准备您所需要的图片.
  4. 优化图片资源
    在图片大小的质量之间找到一个平衡点.具体请看这里: Image Optimizations.

Group

Group可以帮助您对界面元素进行布局.Group可以指定位置,大小,间距和其他相对布局的属性.还可以设置背景图片,颜色和圆角,可以把Group转换成一个可视的元素.

  1. 使用Group水平或垂直的组织元素
    Group中的所以元素都在相同的水平或垂直线上对其.使用Group的inter-item间距可以给Group中的元素添加间距.使用Group的margin可以给group之间和group与周边元素之间添加间隔.
  2. 嵌套使用横向和纵向的group
    您可以嵌套使用Group来为实现特定的布局.比如您可以在一个水平的group中放多个垂直的group.


  1. 对用于group的背景图片进行优化
    在图片大小的质量之间找到一个平衡点.具体请看这里: Image Optimizations.

Pickers

Picker是一个选择器,还能使用Digital Crown转动选择选项.Picker有以下三种样式:
List style



官网视频地址: List style
在一个滚动列表中显示文字和图片.这种样式会同时显示上一个和下一个选项(如果有的话).

Stack style



官网视频地址: Stack style
将图片以一堆卡片的样式显示.这种样式最适合用于相册浏览器.

Sequence style



官网视频地址: Sequence style
选中一堆图片中的一张图片.当用户转到Digital Crown的时候,picker选中图片序列中的上一个或下一张图片(没有动画).这种样式适用于使用自己的图片自定义的picker.
Pickers可以有outline(提纲),caption(标题)或者scrolling indicator(滚动指示器).这些元素可以帮助用户区别屏幕上的picker.

  1. 利用标题来阐明picker本身或者其内容的含义


您可以为那些不明确含义的元素指定一个唯一的标题.还可以为所有的item指定相同的标题来阐明该picker本身的含义.

  1. 当内容需要滚动时显示一个滚定指示器


和tableview类似,当内容太多时显示一个滚动指示器.

Tables

Table的内容是动态的,可以在任何时间改变.Table本身是可以滚动的,并且能设置背景色和图片.



  1. 行的风格保持一致
    尽管支持多种行的风格,但是显示风格应保持一致.使用您注意内容使用的行风格,其他类型的内容可以放在header或者footer中.注意header,footer和row中的内容不能用混.
  2. Table不能超过20行
    行数越少越容易快速浏览,并且把重要的内容放在上面.
  3. 不要把Table放在group中
    Table会根据行数自定的调整大小.如果放在group中高度会有问题.
  4. 不要在行中包含”∧形或”∨形标志
    行的背景色就能说明行本身是可以点击的.所以不要包含”∧形或”∨形标志或文字来指示该行是可以点击的.

Buttons

一个按钮可以包含一个label,一个image或者一个group对象.可以设置按钮的背景色和圆角.



  1. 按钮的宽度最好是屏幕的宽度
    按钮全屏的宽度更容易浏览和点击.如果两个按钮必须并排放的话,两个按钮使用相同的高度并且按钮的内容最好是image或者短文本.
  2. 垂直放的一系列按钮使用相同的高度
    为了保持视觉的一致性,按钮的高度最好保持一致.
  3. 使用标准的圆角
    标准的圆角是6个点.使用标准的圆角可以保持app之间的一致性并且更能表明这是一个按钮.
  4. 按钮的点击区域要足够大
    按钮要容易被点击,以下是按钮的最小值标准:


Switches



Switch可以让用户在两个互斥的或者状态之间选择一个.比如开或者关.Switch旁边必须有一个label用来标示这个Switch的目的.

Sliders



一个Slider可以让用户对一个值进行调整.可以使用自定义图片来表明该Slider的用处.

Maps

Map是对一些地理位置的静态截图.您可以在设计的时候把Map放到界面中,但是WatchKit extension必须在运行时配置显示区.显示的界面是不可交互的,但是tap的时候会打开Apple Watch的Maps app.
您可以给地图加大头针,标准的是绿色,红色和紫色,也可以显示自定义的图片.一个地图最多加5个注释.

  1. map的大小要合适
    让用户在不滚动的情况下看到所以的内容.


  1. 显示的区域要为包含大头针的最小区域


地图本身包含的元素是不可以滚动的.所以所以的预定内容都必须包含在指定区域内.

Movies

一个Movie显示一个海报,当点击的时候弹出音频或视频内容.使用该Movie元素来播放一些媒体片段.媒体文件的播放是由系统控制的.



官网视频地址: Movies

  1. 海报要能彰显Movies的内容
    海报决定了用户是否有兴趣看这个媒体文件.不要使用毫无关联或者没有意义的图片.
  2. 海报的图片不要看起来像系统的控制界面
    Movies可以让音频或者视频看起来像您界面的一部分.当然您也可以使用按钮(代替Movie)来弹出媒体文件.
  3. 媒体文件要尽可能短
    片段不能超过30s.而且越短越好.长的媒体文件会占用更多的磁盘空间,并且需要用户保持抬腕动作更长的时间(这样纸是很累的).
  4. 视频片段的大小要合适
    尽可能的使用推荐的大小.具体请看: Audio & Video

Date & Timer Labels

Date和timer labels显示的是Apple Watch上真正的时间.

  1. Date Label


Date Label显示的是当前的日期或者时间或者两者的结合.Date Label可以被配置成多种格式,日历和时区.当配置完成后,Date Label的值会被系统自动的更新.

  1. Timer Label


Timer Label显示的是一个计时或者倒计时的计时器.同样计时器也可以被设计成多种格式.当配置完成后,系统会自动的对其进行更新.

在Apple Watch稍微用力的按压的时候,会唤出当前屏幕的menu(如果有的话).一个menu可显示多达四个相关的按钮.而又不占用当前屏幕空间(意思就是menu是当前screen唤出的一个新的界面.所有的按钮在screen唤出的menu界面上,所以不会占用screen的位置).

  1. 当前界面有相关的操作的时候使用menu
    Menu的实现是可选的.如果当前screen没有实现menu,当用户用力稍用力按压的时候系统会播放一个默认的动画.
  2. 用一个label和一个icon来表达menu中每一个按钮的用处
    Label和Icon都是必须的.Label最多显示两行,所以label的text必须短.
  3. 使用menu应符合它本身被设计处理的目的
    menu是用来修改当前控制器界面内容的一种方法.不要把menu用作您app的导航方式(意思就是我们menu中显示的就是用来操作当前控制器中的一些按钮,不能用我们来进行界面之间的跳转什么的).
  4. 不要在app中使用和menu类似的视觉效果
    如果您的app必须使用类似的布局,给您的界面添加颜色或者把其包含的item用区别于menu的形式排列.
    这里写图片描述
    关于如何设计menu的icon,请看这里: Menu Icons.

Watch Technologies

Apple Watch的技术为用户提供了更多的交互方式.使用这些技术可以大大的提升用户体验.

Haptic Feedback

触觉的反馈是吸引用户注意和传递重要信息的重要途径.每一个由Taptic Engine产生的反馈都伴有一个听得见的音调.这两个元素共同作用来传达相同的信息.每一个反馈都有特殊的使用情景.每一个反馈都只用来表达一个特殊的意思:官方视频地址: Haptic Feedback



















注意: 触觉反馈要尽可能少用,并且同时只能用一个.

  1. 限制触觉反馈的使用
    触觉反馈只用在很重要的事上.过度的使用会导致引起混淆并且减小触觉反馈的有用性.
  2. 每一种反馈只能用于表示其本身的目的
    每一个触觉反馈都有特殊的目的,混用的话会给用户带来混淆.
  3. 提供相应的视觉效果
    当触发一个触觉反馈的时候提供相应的界面更新.并且同时提供触觉和视觉的反馈会更容易吸引用户的注意力.
  4. 在合适的时间触发触觉反馈
    触觉反馈通常会有一点延迟,所以最好第一步就触发触觉反馈.

Accelerometer

对于健康相关的活动,运动和加速度数据是最重要的.您可以使用运动时间来衡量用户的活动等级并且记录运动的类型.比如说在运动过程中的手臂运动.Apple Watch可以让您记录多天的传感器数据,因此您能辨别一个长时间的运动模式.

  1. 使用运动数据要给用户提供实际的益处
    不要为了采集数据而采集数据.
  2. 不能使用加速度直接操作您的app界面.
    触摸事件,Force Touch menus和Digital Crown才是操作您界面的主要方式.一些基于运动的手势可能很难复制,可能给用户的操作带来困难.而且还会使屏幕变暗.

Health and Fitness

健康类app能够在一个运动过程中使用workout sessions使app一直运行在前台.当用户抬腕的时候Apple Watch一般会显示表面.但是如果您的app有一个活动的workout sessions的话,当用户抬腕的时候会显示您的app.workout sessions只对健康类app可用,并且只能在运动过程中使用.然而一个活动的workout sessions并不能保证用户在抬腕的时候就显示您的app.如果用户切换到其他app,虽然workout sessions会继续,但是系统会默认显示表面.
官网视频地址: Health and Fitness

  1. 为workout sessions提高明显的开始和结束标志
    当workout开始或结束的时候要提高明显的反馈.
  2. 不能将对workout的控制只放在menu中
    必须把对workout的控制按钮放在主界面让用户能够清楚的知道.使用不同的布局或者明显的外观来告诉用户在不同的模式.在随后的用户抬腕时,要清楚的表明用户现在在一个workout session中.
  3. 在workout中使用更大的更清楚的文字
    确保用户在运动时要能看清.
  4. 在一个workout session结束的时候给用户提高确认
    当用户结束一个workout session的时候,给用户提供一个包括记录的信息的确认按钮.

Audio and Video

当app在前台运行并且处于激活状态时,app可以播放短媒体文件.您可以使用Movie元素直接在界面中媒体片段或者使用系统播放.可以控制媒体的开始结束或者改变播放状态,但是媒体的播放总是由系统控制的.当app没在激活状态时可以通过蓝牙耳机播放长音频.这是专为音乐,音频书籍或者其他形式的长音频可以在后台播放设计的.您的app初始化audio的播放,但是通过系统管理.

  1. 前台运行的媒体文件要尽可能短
    不能超过30s.而且越短越好.长视频会占用更多的磁盘空间并且需要用户一直保持抬腕状态.这会造成用户的疲劳.
  2. 提供合适的结束时间
    提供合适的结束时间来便于用户继续观看上次的媒体文件.
  3. 使用恰当的编码
    以下是编码格式:


Resources

Templates(模板),guides(指南),bezels(边框),fonts(字体)的设计保证了苹果体验的一致性.
资源下载地址: Resources

Bezels

边框内是您Apple Watch内容的存放区域.先在小模板上设计来保证其清晰度再移到大尺寸上.



Guides

指南帮助您设计app中的元素.



Templates

模板提供了精确的布局规格来摆放您界面中元素的位置.



Typeface

Apple Watch使用的是SF Compact字体,并有两种形式的变形:Display和Text.这些字体是专为在小屏幕上也能清晰的显示设计的.



文章目录
  1. 1. Overview
    1. 1.1. Gestures
    2. 1.2. Force Touch
    3. 1.3. Digital Crown
    4. 1.4. Side Button
  2. 2. App Components
    1. 2.1. Notifications
    2. 2.2. Glances
    3. 2.3. Watch Apps
    4. 2.4. Watch Face
    5. 2.5. Complications
  3. 3. Navigation
    1. 3.1. Fundamental Navigation
    2. 3.2. Alerts and action sheets
    3. 3.3. Custom Modal Sheets
    4. 3.4. Handoff
  4. 4. Visual Design
    1. 4.1. Display Sizes
    2. 4.2. Layout
    3. 4.3. Color
    4. 4.4. Customization
  5. 5. Typography
    1. 5.1. Fonts
    2. 5.2. Built-In Type Styles
    3. 5.3. Dynamic Type
    4. 5.4. Font Tracking
  6. 6. Animation
    1. 6.1. Animated Image Sequences
    2. 6.2. Layout and Appearance Animations
  7. 7. Icons and Images
    1. 7.1. Home Screen Icons
    2. 7.2. Menu Icons
    3. 7.3. Complication Images
    4. 7.4. Image Optimizations
  8. 8. Interface Elements
    1. 8.1. Labels
    2. 8.2. Images
    3. 8.3. Group
    4. 8.4. Pickers
    5. 8.5. Tables
    6. 8.6. Buttons
    7. 8.7. Switches
    8. 8.8. Sliders
    9. 8.9. Maps
    10. 8.10. Movies
    11. 8.11. Date & Timer Labels
    12. 8.12. Menus
  9. 9. Watch Technologies
    1. 9.1. Haptic Feedback
    2. 9.2. Accelerometer
    3. 9.3. Health and Fitness
    4. 9.4. Audio and Video
  10. 10. Resources
    1. 10.1. Bezels
    2. 10.2. Guides
    3. 10.3. Templates
    4. 10.4. Typeface