Watch App 开发之 Interface Elements 详解

iWatch 原生态支持的控件主要有以下类型,下面对每个类型一一解刨。

Labels
Images
Groups
Pickers
Tables
Buttons
Switches
Sliders
Maps
Movies
Date and Timer Labels
Menus

Labels – WKInterfaceLabel

Labels 使用静态的文本来传达简短的消息，是你App中最常见的一个元素之一。它能支持多行显示也可通过代码动态更新内容。

iWatch ,设计一个标签事，首先应该把精力集中在 易读性 ,使用更亮的颜色和使用动态类型（ Dynamic Type ）来保证文本尺寸的正确，内置已经提供了最佳的易读性和自动的动态的类型支持。假如需要使用自定义的字体，应该避免使用过度格式化的。

更多信息查看：Typography

Images – WKInterfaceImage

一个 Image 元素用来显示单张图片或者一系列动画图片。Images 支持在 iOS 上的的任何格式，但是跟偏向于 PNG 格式。动画系列图片可以通过代码控制启停。

38mm 和 42mm 共用一套图片资源，只要内容能够表达清晰。

Apple Watch 支持高清屏显示，所有没有必要创建一个标准的分辨率图片，在图片名应该包括 @2x 。

当图片正在加载时，应该使用占位图片来占据它的空间。

优化图片查看：Image Optimizations

Groups – WKInterfaceGroup

Group 这个概念是专为有限空间的 iWatch 打造的，可以帮你对其他元素进行布局。它有 postion , size , marigns 以及其他布局相关的接口，一个 Group 对象本身也是一个可见的元素，它也有背景图片，颜色，圆角半径等属性。

支持水平 horizontally 和垂直 vertically 布局，可以让放在里面的项目实现相应的布局，可以使用 spacing 属性来设置内部项目之间的间距，使用 margins 来控制 Group 和它周边的元素的距离。

Group 支持镶嵌操作，你可以通过镶嵌来指定你想要的布局样式。

你应该优化你的 Group 的背景图片来获得更好的体验，因为太大可能使你的 App 变得卡顿。优化请参考：Image Optimizations

外观大概这样:

Pickers – WKInterfacePicker

Pickers 能够显示一个可以使用数字表冠导航的列表。这意味着你可以使用一种更精确和迷人的方式选择。 Pickers 可以通过下面三种方式的一种来展示它们的项目：

List style ,可以显示文本或者图片在一个滚动列表里面
Stack style ,栈风格以一个卡片风格的界面显示图片，当用户滚动，被选择的图片动画进入最上方，这种风格适合浏览照片。
Sequence style ,序列显示，可以显示一系列的图片。当用户转动表冠时， Picker 显示先前或下一张图片在这个序列中没有动画，这种风格适合于构建自定义的界面使用你自己的图片。

Pickers 还能被配置成显示一个 轮廓 ， 标题 ， 滚动指示器 。这些元素可以让你分辨出屏幕上的 Pickers 并且可以帮助用户导航它的内容。

使用标题来指明你选择项目的意义或者 picker 本身的作用

你可以给项目指定一个独特的标题当那些项目的意思表达不清晰的时候，可选，你也可以设置所有的项目相同的标题来标明 Picker 它本身的作用。

显示一个滚动指示器当所有的内容不是全部可见时

Tabels – WKInterfaceTable

Tabels 在一列中展示多行的内容。一个表的一行是动态配置的，它的内容可以在随时改变。 Tabels 天生可滚动，支持各种交互，能够设置背景颜色或者图片。

使用注意事项：

统一使用行的风格类型，即使一个表可以包含多行，它应该呈现一个全局统一的外观，每一行使用你的主要内容开始，然后随你的需要添加更多支持的其他类型的内容，例如 headers 或者 footers ,总是用原来设计的目的来使用行类型。例如，你不应该用一行来显示 headers 或 footers 的内容。
限制行数最大 20，显示最重要的行在顶部，让用户能够浏览尽可能的多。行数越少越容易快速浏览。
**不要在 groups 里面镶嵌 tables **, Tabels 会动态改变它的尺寸基于它所包含的行的数目。它会忽略 groups 对高度的限制。
不要在 table 行内包含 ∧ 或者 ∨ 符号，行后台实现可以自然点击，你不需要包含一个 ∧ 或者 ∨ 符号或者文字来表明行是可点击的。

Buttons – WKInterfaceButton

一个 button 可以执行一个 app 指定的动作， button 可以自定背景和圆角半径。它还可以充当容器使用，包含一个标签 labe; ，图片 image ，或者一个组 group 对象。

使用事项：

创建横跨屏幕的 Buttons ，全宽的 buttons 看起来更容易点击，假如有两个 buttons，必须有相同的水平间距，两者使用相同的高度使用相同的图或者简短的文本标签。
使用相同的高度对于 vertical stacks 风格布局一行和两行文本按钮，原则是，尽可能的，使用一致到高度让他们在视觉上统一。
使用标准的圆角半径，标准的圆角半径的是 6点 ，使用标准的圆角半径可以提升整个 app 的视觉的一致性并且可以增强 button 的内容。
让 butotns 足够大以便容易点击，创建让用户很容易点击的 button，buttons 应该遵循下面最小的值。

	38mm (minimum)	42mm (minimum)
Circular buttons	75 pixels	80 pixels
Round rectangular buttons	50 pixels high	52 pixels high

Switches – WKInterfaceSwitch

开关控件更 iOS 类似，让用户在量个互斥的选择或者状态中选择，例如开或者关，一个靠近 switch 的标签应该指定响应的效果当，开关切换时。

效果像这样：

Sliders – WKInterfaceSlider

一个滑动条让用户来调整到某一个值。一个 slider 用来显示它设置的一系列的值或者是一个持续的 bar , 它可以在一个有限的范围内根据预定的数量自增或者自减。

Note：你可以像使用 slider 那样使用自定图片,系统默认显示 + 和 - 符号。

Maps – WKInterfaceMap

Maps 是地理位置的静态快照。你可以放一张地图在你的界面里面在预计的时间，但是你 WatchKit extension 必须配置显示的区域在运行时。显示区域是不可交互的，但是点击一个地图将会打开你 Apple Watch 上的 Maps app。

你可以在地图上用一个高亮的点对你感兴趣或者其他相关信息进行标注。地图能显示标准的 红 ， 黄 ， 绿 大头针，它也可以显示自定义的图片，系统允许你最多添加 5个 在一张地图上。

使用注意实现：

让你地图的元素根据屏幕自动适应。用户应该能够看到整个地图元素在 Apple Watch 上而不用滚动屏幕。
配置显示的地图区域到包含兴趣点的最小范围，地图元素内容本身不能滚动，所有所有内容必须附着在一个指定的地图区域

Movies – WKInterfaceMovie

一个 movie 对象会显示一张海报图片，当点击时，模态呈现一份视频或者音频对象，使用这个元素来放置简短的媒体剪切和你内容内联。媒文件的重放由系统来管理。

使用注意事项：

使用一种海报图片来呈现剪切的内容，海报图片能让用户提前做决定是否观看与这个剪切关联的媒体，不要使用没有意义的剪切图片。
不要创建海报图片像系统控件， Movies 会让视频和音频内容看起来像你节目的一部分，所以不要通过让他们看起来像其他东西的方式把他们隐藏起来。你应该使用一个 Button （而不是一个 movie ）来呈现媒体回放界面假如你喜欢的话。
保证视频或者音频剪辑得足够短，剪辑不应该超过 30 秒，首选更短的。长的剪辑会占用更多的磁盘空间并且要求用户保持他们的手腕抬起更长时间，这样可能导致疲劳。
适当的设置剪辑视频的尺寸，无论时候都应该使用推荐的尺寸来剪切，缩放视频剪辑将影响性能导致不理想的外观。更多信息关于推荐的尺寸和编码的值，参考Audio & Video