人机交互指南之设计基础

　　UI设计基础的内容占据了AppleWatch人机交互指南文档中40的篇幅，它不仅详细解释了UI设计的规则，还仔细讲述了这么设计的原因所在，你可以从这些稍显拗口的文字中看到AppleWatch的另一个侧面：严谨。这些深思熟虑的细节（哪怕你不喜欢），和那些野生的智能手表有着巨大的差别。
　　5、ModalSheets
　　ModalSheets的优缺点都很明显。它让用户可以无干扰地完成任务、获取信息或者继续在ForceTouch菜单中做选择。为了实现这一点，ModalSheets会暂时阻止用户同APP的其他部分进行交互。
　　在设计的时候，你最好能将APP的模式体验尽可能最小化，一般而言，在以下情况下可考虑创建模式内容：
　　当吸引用户的注意力成为至关重要的事情
　　当为了避免用户数据处于模棱两可的状态，而需要完成一个独立的任务，或者需要明确地放弃某个任务的时候
　　模式界面包含单个屏幕界面，或者包含多个分页屏幕界面。两种界面唯一的区别是后者在分页底部有小圆点指示。
　　在模式界面的左上方的位置留给关闭按钮。当用户点击点击左上角这个按钮（或者在做边缘互动操作的时候），系统会关闭模式界面而不会进行更多的操作。关闭按钮是系统强制显示的，不会被隐藏，但是你可以改变显示的内容（比如close改成cancel）。这也意外着你无需再往下方的内容主体中再单独添加关闭按钮，尤其是当左上方的按钮显示的是关闭或者取消的时候。左上方按钮通常是白色的。
　　如果所涉及任务需要确认或者接受，那么可以在模式界面的内容主体中添加接受或者确认按钮。除了执行适当的操作之外，点击了这些按钮之后还会解除当前的模式界面。
　　尽量确保任务界面简单直接。避免从一个模式界面跳转到第二个模式界面。
　　6、布局
　　布局指南
　　限制界面中并排控件的数目。当使用并排按钮的时候，请使用icon而非文本按钮。并排放置的按钮数量不能超过3个，界面中包含项目过多会让用户因目标过小而不便操作。
　　充分运用屏幕空间。由于AppleWatch的边框已经对主体内容的边缘进行了填充，所以设计的时候无需再包含屏幕边缘和内容之间的空白。注意这些多余的边缘也不会在模拟器中显示。
　　APP的项目间会使用相对位置。由于APP会在不同尺寸的AppleWatch上显示相同的界面，相对位置会让它们根据不同的屏幕而扩展填充多余的空间。
　　布局会优先使用左对齐。你的界面中的元素排布方式是从上到下，从左到右来布局的。界面元素采用左对齐，可以确保有足够的空间来扩展和展示内容。
　　确保文本按钮占据全部宽度。使用文本按钮的时候，应该确保按钮占据全部宽度，这样能使得按钮标签始终可见。
　　使用上下文菜单来展示二级操作。使用上下文菜单来展示使用频率不高的操作，而不是在界面中直接添加按钮。
　　屏幕尺寸
　　无论屏幕尺寸如何，AppleWatch应当展示相同的内容。在设计屏幕布局的时候，务必让各项目能自然扩展收缩，填补可用空间。
　　根据不同尺寸的屏幕提供图片素材。如果内容在两个尺寸的屏幕上展示效果都很好，那么可以使用相同的图片素材，否则需要为不同尺寸屏幕提供不同的图片素材。
　　7、色彩与排版
　　色彩
　　色彩可以为你的APP的提供视觉的连续性和品牌化设计。
　　使用黑色作为APP的背景色。黑色背景可以让界面和设备边缘无缝融合，让用户产生设备没有屏幕边缘的错觉。尽量避免在界面中使用明亮的背景色。
　　使用APP的主色调来彰显品牌和身份。每个APP都有主色调，系统会将主色调应用到屏幕左上角的标题字符和通知界面中，突出APP的名称和其他关键信息，你应该以类似的方式来进行APP的品牌设计。
　　使用高对比度色彩的文本。高对比度色彩会使得文字更加易读。
　　避免使用色彩来展示交互性。可以在APP的品牌设计上酌情上色，但是不要单独使用色彩来指示用户与按钮以及其他控件来交互。
　　务必考虑到色盲用户。大部分色盲用户是红绿色盲，所以请测试一下你的APP，确保红绿色不是其中区分不同状态和值的唯一配色方案。（一些图片编辑软件中会包含色盲校对工具）
　　使用色彩来交流，不过不要始终用你习惯的方式。每个人对于色彩的认知不尽相同，而且很多文化对色彩赋予的意义也不一样。所以，你需要花费一点时间来研究APP配色如何能让其他的国家和文化接受。尽可能确保你的APP中的色彩传递合适的信息。
　　排版设计
　　首先，文字要清晰易读。如果用户不能清晰地阅读APP中的文本，字体再漂亮也是白搭。
　　为了提高AppleWatch的文本易读性，Apple专门为此设计了名为旧金山的系统字体。在较大的屏幕上，字体间隙被轻微压缩，如此紧密排列以占用较少的水平空间。但是在较小平面上，松散的字母排列会更加易读。当字体变小的时候，标点符号会按照一定比例放大。任何时候对文本大小进行调整，AppleWatch都会为了保持文本的清晰度和易读性而进行动态调整。
　　所以，APP应该始终使用动态类型（DynamicType）。当你使用动态类型的时候，你可以做到以下几点：
　　让APP中的字母的字符间距和行距自动调整
　　让不同语义文本可以被指定不同的文本类型，比如主体、注脚或者标题。
　　让文本可以随着不同的文本设置而响应式地调整（包括无障碍文本的大小）
　　注意：如果你使用了自定义字体，仍可以根据字体的系统设置缩放文本样式。当用户更改设置时，你的APP适当地进行响应式调整。
　　如果你使用内置的文本类型，那么你将直接获得动态类型（DynamicType）支持。如果你使用自定义字体，那么你需要对其进行调整以采用这种特性。学习如何使用文本类型，并确保在用户更改文本大小设置时，你的APP能得到了通知，请参看TextProgrammingGuideforiOS中TextStyles一节。
　　尽可能使用内置的文本类型。内置的文本类型自动支持动态类型（DynamicType），并且内置文本类型可以更好地在AppleWatch上展示。
　　尽量在APP中使用单一字体类型。出于品牌化设计的需求，APP中可以使用附加字体，但尽量少用。混合使用多种字体会让APP看起来支离破碎和草率。根据语义用法，比如主体和标题，可以使用UIFont文本样式API来定义不同的文本区域。
　　当手动设定系统字体大小的时候，磅值决定了正确尺寸。为文本选SanFrancisco文本字体的时候，字体大小为19点，或者略小一点。为文本选择SanFranciscoDisplay文本字体的时候，字体大概是20点，或者更大一点。
　　8、动效
　　精细漂亮的动效遍布AppleWatch的每个角落，并为用户引入充满活力的用户体验。恰如其分的动效能带来如下效果：
　　表明状态并提供反馈
　　以更加视觉化的方式帮用户了解操作的结果
　　使用一系列静态图片创造渲染动效。你可以在AppleWatch的APP中储存录制好的动画（CannedAnimations），这样可以向用户快速展示。录制好的动画可以让你交付更为流畅的高帧动画。你可以从WatchKit扩展中动态地创建动画，再将其转移到AppleWatch，在回放之前添加一定的延迟就好了。
　　仅有图片和分组对象（GroupObjects）可以使用回放控件。大部分界面对象是以无限循环的方式来展示动态图像序列的。要终止动画，或从动画中回放一组特定的帧，你必须使用图片或者分组对象。
　　9、品牌化设计
　　成功的品牌化设计所涉及的内容，远不止于在APP中添加品牌素材。最好的APP将现有素材和独特的外观与感觉结合在一起，为用户提供了一个令人愉悦而难忘的体验。
　　品牌化你的APP有多种途径，其中包括icon、配色、自定义按钮、自定义字体以及所使用的版权内容等。在你设计APP的图形元素时，务必记得让每个自定义元素都要看起来很好，并其本身的功能也一样运行良好，最重要的是，每个元素看起来也应当和APP中的其他元素一直，不管它是否是定制的。
　　以优雅不违和的方式整合品牌素材。用户使用你的APP来完成任务或者娱乐，但他们不想被强迫观看广告。为了获得最佳的用户体验，你可能需要通过色彩、精心选择的字体或者意像来潜移默化地提高用户对品牌的辨识度。
　　抵制在APP或Glance中展示Logo的诱惑。AppleWatch上的空间非常宝贵，每次展示logo都会占用内容的空间，并且在APP中展示Logo的目的与在网页中展示Logo有所不同：很多时候，用户会进入某个的网页并不会意识到它的所有者，但用户在打开APP之前通常会查看APPicon，并且明白它属于谁。
　　结语
　　看完UI设计基础之后，你需要开始了解AppleWatch人机交互指南的第二个部分UI元素设计的细节了。
　　原文来自：优设
　　译文地址：Developer。apple。com
　　优设网译者：陈子木
　　APPLEWATCH人机交互指南系列文章
　　applewatch人机交互指南UI设计基础（1）
　　APPLEWATCH人机交互指南之UI设计基础（2）
　　APPLEWATCH人机交互指南之图标与图片设计
　　AppleWatch界面设计规范模态表单
　　APPLEWATCH人机交互指南之UI元素设计