干货速递！APPLE WATCH人机交互指南之UI设计基础(2)

UI设计基础的内容占据了Apple Watch 人机交互指南文档中40%的篇幅，它不仅详细解释了UI设计的规则，还仔细讲述了这么设计的原因所在，你可以从这些稍显拗口的文字中看到Apple Watch的另一个侧面：严谨。这些深思熟虑的细节（哪怕你不喜欢），和那些野生的“智能手表”有着巨大的差别。

上一部分人机交互指南：
《干货速递！APPLE WATCH人机交互指南之UI设计基础(1)》

5、Modal Sheets

Modal Sheets 的优缺点都很明显。它让用户可以无干扰地完成任务、获取信息或者继续在Force Touch菜单中做选择。为了实现这一点，Modal Sheets会暂时阻止用户同APP的其他部分进行交互。

在设计的时候，你最好能将APP的模式体验尽可能最小化，一般而言，在以下情况下可考虑创建模式内容：

・当吸引用户的注意力成为至关重要的事情
・当为了避免用户数据处于模棱两可的状态，而需要完成一个独立的任务，或者需要明确地放弃某个任务的时候

模式界面包含单个屏幕界面，或者包含多个分页屏幕界面。两种界面唯一的区别是后者在分页底部有小圆点指示。

在模式界面的左上方的位置留给关闭按钮。当用户点击点击左上角这个按钮（或者在做边缘互动操作的时候），系统会关闭模式界面而不会进行更多的操作。关闭按钮是系统强制显示的，不会被隐藏，但是你可以改变显示的内容（比如close改成cancel）。这也意外着你无需再往下方的内容主体中再单独添加关闭按钮，尤其是当左上方的按钮显示的是“关闭”或者“取消”的时候。左上方按钮通常是白色的。

如果所涉及任务需要确认或者接受，那么可以在模式界面的内容主体中添加“接受”或者“确认”按钮。除了执行适当的操作之外，点击了这些按钮之后还会解除当前的模式界面。

尽量确保任务界面简单直接。避免从一个模式界面跳转到第二个模式界面。

6、布局

布局指南

限制界面中并排控件的数目。当使用并排按钮的时候，请使用icon而非文本按钮。并排放置的按钮数量不能超过3个，界面中包含项目过多会让用户因目标过小而不便操作。

充分运用屏幕空间。由于Apple Watch的边框已经对主体内容的边缘进行了填充，所以设计的时候无需再包含屏幕边缘和内容之间的空白。注意这些多余的边缘也不会在模拟器中显示。

APP的项目间会使用相对位置。由于APP会在不同尺寸的Apple Watch上显示相同的界面，相对位置会让它们根据不同的屏幕而扩展填充多余的空间。

布局会优先使用左对齐。你的界面中的元素排布方式是从上到下，从左到右来布局的。界面元素采用左对齐，可以确保有足够的空间来扩展和展示内容。

确保文本按钮占据全部宽度。使用文本按钮的时候，应该确保按钮占据全部宽度，这样能使得按钮标签始终可见。

使用上下文菜单来展示二级操作。使用上下文菜单来展示使用频率不高的操作，而不是在界面中直接添加按钮。

屏幕尺寸

无论屏幕尺寸如何，Apple Watch应当展示相同的内容。在设计屏幕布局的时候，务必让各项目能自然扩展收缩，填补可用空间。

根据不同尺寸的屏幕提供图片素材。如果内容在两个尺寸的屏幕上展示效果都很好，那么可以使用相同的图片素材，否则需要为不同尺寸屏幕提供不同的图片素材。

7、色彩与排版

色彩

色彩可以为你的APP的提供视觉的连续性和品牌化设计。

使用黑色作为APP的背景色。黑色背景可以让界面和设备边缘无缝融合，让用户产生设备没有屏幕边缘的错觉。尽量避免在界面中使用明亮的背景色。

使用APP的主色调来彰显品牌和身份。每个APP都有主色调，系统会将主色调应用到屏幕左上角的标题字符和通知界面中，突出APP的名称和其他关键信息，你应该以类似的方式来进行APP的品牌设计。

使用高对比度色彩的文本。高对比度色彩会使得文字更加易读。

避免使用色彩来展示交互性。可以在APP的品牌设计上酌情上色，但是不要单独使用色彩来指示用户与按钮以及其他控件来交互。

务必考虑到色盲用户。大部分色盲用户是红绿色盲，所以请测试一下你的APP，确保红绿色不是其中区分不同状态和值的唯一配色方案。（一些图片编辑软件中会包含色盲校对工具）

使用色彩来交流，不过不要始终用你习惯的方式。每个人对于色彩的认知不尽相同，而且很多文化对色彩赋予的意义也不一样。所以，你需要花费一点时间来研究APP配色如何能让其他的国家和文化接受。尽可能确保你的APP中的色彩传递合适的信息。

排版设计

首先，文字要清晰易读。如果用户不能清晰地阅读APP中的文本，字体再漂亮也是白搭。

为了提高Apple Watch的文本易读性，Apple专门为此设计了名为“旧金山”的系统字体。在较大的屏幕上，字体间隙被轻微压缩，如此紧密排列以占用较少的水平空间。但是在较小平面上，松散的字母排列会更加易读。当字体变小的时候，标点符号会按照一定比例放大。任何时候对文本大小进行调整，Apple Watch都会为了保持文本的清晰度和易读性而进行动态调整。

所以，APP应该始终使用动态类型（Dynamic Type）。当你使用动态类型的时候，你可以做到以下几点：
・让APP中的字母的字符间距和行距自动调整
・让不同语义文本可以被指定不同的文本类型，比如主体、注脚或者标题。
・让文本可以随着不同的文本设置而响应式地调整（包括无障碍文本的大小）

注意:如果你使用了自定义字体，仍可以根据字体的系统设置缩放文本样式。当用户更改设置时，你的APP适当地进行响应式调整。

如果你使用内置的文本类型，那么你将直接获得动态类型（Dynamic Type）支持。如果你使用自定义字体，那么你需要对其进行调整以采用这种特性。学习如何使用文本类型，并确保在用户更改文本大小设置时，你的APP能得到了通知，请参看 Text Programming Guide for iOS中Text Styles一节。

尽可能使用内置的文本类型。内置的文本类型自动支持动态类型（Dynamic Type），并且内置文本类型可以更好地在Apple Watch上展示。

尽量在APP中使用单一字体类型。出于品牌化设计的需求，APP中可以使用附加字体，但尽量少用。混合使用多种字体会让APP看起来支离破碎和草率。根据语义用法，比如主体和标题，可以使用UIFont文本样式API来定义不同的文本区域。

当手动设定系统字体大小的时候，磅值决定了正确尺寸。为文本选San Francisco 文本字体的时候，字体大小为19点，或者略小一点。为文本选择San Francisco Display文本字体的时候，字体大概是20点，或者更大一点。

8、动效

精细漂亮的动效遍布Apple Watch的每个角落，并为用户引入充满活力的用户体验。恰如其分的动效能带来如下效果：

・表明状态并提供反馈
・以更加视觉化的方式帮用户了解操作的结果

使用一系列静态图片创造渲染动效。你可以在Apple Watch 的APP中储存录制好的动画(Canned Animations)，这样可以向用户快速展示。录制好的动画可以让你交付更为流畅的高帧动画。你可以从WatchKit扩展中动态地创建动画，再将其转移到Apple Watch，在回放之前添加一定的延迟就好了。

仅有图片和分组对象(Group Objects)可以使用回放控件。大部分界面对象是以无限循环的方式来展示动态图像序列的。要终止动画，或从动画中回放一组特定的帧，你必须使用图片或者分组对象。

9、品牌化设计

成功的品牌化设计所涉及的内容，远不止于在APP中添加品牌素材。最好的APP将现有素材和独特的外观与感觉结合在一起，为用户提供了一个令人愉悦而难忘的体验。

品牌化你的APP有多种途径，其中包括icon、配色、自定义按钮、自定义字体以及所使用的版权内容等。在你设计APP的图形元素时，务必记得让每个自定义元素都要看起来很好，并其本身的功能也一样运行良好，最重要的是，每个元素看起来也应当和APP中的其他元素一直，不管它是否是定制的。

以优雅不违和的方式整合品牌素材。用户使用你的APP来完成任务或者娱乐，但他们不想被强迫观看广告。为了获得最佳的用户体验，你可能需要通过色彩、精心选择的字体或者意像来潜移默化地提高用户对品牌的辨识度。

抵制在APP或Glance中展示Logo的诱惑。Apple Watch上的空间非常宝贵，每次展示logo都会占用内容的空间，并且在APP中展示Logo的目的与在网页中展示Logo有所不同：很多时候，用户会进入某个的网页并不会意识到它的所有者，但用户在打开APP之前通常会查看APP icon，并且明白它属于谁。

结语

看完UI设计基础之后，你需要开始了解Apple Watch 人机交互指南的第二个部分 UI元素设计的细节了，具体请戳->《第二波来了！APPLE WATCH人机交互指南之UI元素设计》

同样是设计规范，Material Design也值得你深入学习：

帮你挖掘设计规范中的秘密：
《追随谷歌的设计！MATERIAL DESIGN组件中的学问》

学霸帮你总结学习笔记：
《学霸的自学笔记！MATERIAL DESIGN设计规范学习心得》

靠谱素材带你加速设计：
《该跟上潮流了！一大波优质的MATERIAL DESIGN资源免费下载》

原文地址：Developer.apple.com
优设网译者：@陈子木

本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量86万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：