Apple Watch界面设计规范之UI设计基础（2/2）

六、布局

并排放置的按钮数量要控制好。当并排放置按钮时，使用图标来代替标题文案。一行不要放置3个以上，否则按钮的尺寸将会太小，很难被点到。

完整利用左右两个边缘之间的全部空间。Apple Watch的边缘斜面会在界面内容周围制造出可视的边距，所以你不需要再在内容与界面边缘之间添加留白了。不过要注意，硬件设备上的边缘斜面是无法在iOS模拟器当中呈现的。

使用相对位置来布局界面元素。同一套界面可能会在不同规格的Apple Watch上显示，所以使用相对位置来布局元素能令其根据需要而伸缩，使屏幕空间得到更合理的利用。

布局时优先使用左对齐。界面中的元素应该按照自上而下、自左向右的顺序排布。将元素以界面左边缘进行左对齐可以确保有足够的扩展空间来完整的展示内容。

文字按钮要使用全屏宽度。要将显示标题文字的按钮设计为全屏宽度，以确保标题文字能完整呈现。

通过情境菜单来呈现次级操作。不要将全部的功能按钮都放在界面当中默认展示出来，那些低频操作可以收到情境菜单当中。

屏幕尺寸

应用界面所呈现的内容在不同规格的Apple Watch当中应该保持一致。在设计布局时，要使界面元素可以自如的伸缩，以便充分利用不同规格的屏幕空间。

如果需要，可以为不同规格的屏幕提供不同的图形资源。如果一套图形素材在两种规格的屏幕中效果都不错，那么就使用这一套；否则可以提供两种不同尺寸的图形资源。

七、色彩与文字

色彩

通过对色彩的运用，你可以在应用当中构建视觉一致性及品牌认知。

使用黑色作为应用的背景色。黑色的背景色可以与Watch的边缘斜边无缝的融合起来，给人一种无边框的错觉。避免在界面中使用明亮的颜色作为背景色。

使用应用当中的关键色来呈现品牌或状态信息。每个应用都要定义一种关键色。系统会将界面左上角以及通知界面中的标题渲染为你所设置的关键色，以突出应用名称和其他一些关键信息。关键色也应该成为你应用当中的品牌认知要素之一。

为文字内容使用高对比度的颜色。高对比度的颜色可以使文字更加易读。

避免通过色彩来暗示交互性。可以适当的使用关键色作为品牌识别元素，但是不要单纯依靠色彩来暗示按钮或其他控件的交互性。

考虑到色盲用户。多数色盲患者难以区分红色与绿色。要测试你的应用，确保没有任何一个环节是单纯依靠红绿两种颜色来区分状态或数值的(一些图片编辑类软件会自带相关工具，帮你验证界面配色是否对色盲友好)。

色彩是具有沟通性的，但效果未必如你所愿。每个人对色彩的感知都有所差异；不同的文化当中，色彩的含义也可能大相径庭。花些时间去研究一下你所使用的颜色对于国外的或是不同文化当中的用户来说会产生怎样的认知。要尽可能的确保应用当中的色彩能传达出恰当的信息。

文字

最首要的，文字必须清晰易读。如果用户根本无法阅读应用中的文字，那么再精美的排版都没有意义。

系统默认字体是特别针对在Apple Watch上实现良好易读性而设计的。在较大的字号下，字符会轻微收缩，使横向空间的占用量更少。而字号较小时，字符的分布则会变得更加松散，而且诸如“a”和“e”这些字母的字腔会变大，使其在用户难以专注聚焦的情况下仍能保持较高的可读性。此外，字号较小时，标点符号也会适度增大。随着字号的改变，Apple Watch会动态的切换字体显示方式，从而始终保持文字内容的清晰易读。

你的应用应该始终采用动态字体(Dynamic Type)。使用动态字体有以下几点好处：

• 针对不同的字号自动调整字符间距(letter spacing)和行高(line height)。
• 可以根据文字区块的语义来指定不同的文字风格，例如Body、Footnote或Headline等。
• 文字可以根据用户在字号设置当中所做的调整而进行响应。

注意

如果在应用当中使用自定义字体，你仍然可以使文字根据系统当中的字号设置进行缩放。这种情况下，你的应用本身将负责使文字根据用户在系统中的设置而进行相应的调整。

如果你使用系统内置字体，那么你的应用本身已经包含对动态字体的支持了。如果使用自定义字体，那么你需要做些额外的工作来支持这项功能。要了解怎样使用文字风格并确保你的应用在用户调整系统字号时进行相应，可以参考Text Programming Guide for iOS当中的Text Styles。

尽可能使用系统内置字体。系统内置字体可以自动支持动态字体功能，并且是专门针对Apple Watch的特性进行设计的。

尽可能在应用全局使用同一种字体。你可以出于展示品牌的目的而使用额外的字体，但一定要保持最少的使用量。多种字体混杂在一起将使你的应用看上去非常碎片化，给人一种不严谨的印象。你可以使用UIFont文字风格API根据不同区块的语义对字体风格进行定义。

当你手动为系统字体指定字号时，点(point)的大小将决定着使用哪种字号。你可以为19点或更小的文字选择San Francisco Text字体，为20点或更大的文字选择San Francisco Display字体。

八、动效

漂亮而精妙的动效遍布于Apple Watch当中，将更具吸引力和动感的体验带给用户。恰当的动效能够：

• 传达状态信息，提供反馈
• 以可视化的方式让用户看到操作结果

使用静态图片序列来创建预生成动效。预先录制动效并储存在Watch应用包当中，使其在被调用时可以更迅速的呈现给用户。预先录制的动效帧率更高，效果更平滑。而在应用运行过程中通过WatchKit动态创建的动效则会带来延迟。

播放控制只对图片和分组对象(group object)有效。多数界面对象会以无限循环的方式展示动画图片序列。要使动画停止，或是只播放动画中的特定片段，你需要使用图片对象或分组对象。

九、品牌

成功的品牌塑造不仅在于向应用当中放置与品牌相关的图形资源。优秀的应用应该将品牌形象与独特的界面外观及操作感整合起来，带给用户愉悦而印象深刻的体验。

你可以通过很多方式来塑造应用的品牌认知，例如图标、色彩、定制化按钮、定制化字体和文案等等。当你为应用设计图形元素的时候，不仅要使它们各自表现良好，同时还要使它们看上去彼此协调与统一，无论对于定制化元素还是系统标准控件来说都是如此。

将品牌元素优雅平滑的融入界面设计当中。人们用你的产品是为了完成任务或得到消遣，他们不希望自己像是在被迫看广告一样。为了打造更平滑的体验，你要尽量潜移默化的通过自体、色彩和图形元素向用户传达品牌信息。

不要在应用内或Glance当中显示logo。Apple Watch上的显示空间寸土寸金，logo图形中的每一个元素都在占用用户希望看到的实际内容的空间。此外，在Watch应用当中展示logo并不能达到在网页上那样的效果：用户在浏览传统网页时，一开始很可能并不了解当前页面所属网站或品牌；而人们在移动设备上打开某应用时通常都是依靠应用图标和logo来定位的，你无需再在应用内部展示。

本文来自Be For Web
英文原文: https://developer.apple.com/library/prerelease/ios/documentation/UserE…
译者信息: C7210 – UX玩家、交互设计师、猫奴、guitar fucker，现就职于腾讯ISUX(上海)