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

2014/11/21

apple-watch-hig-2-1

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
优设网译者:@陈子木

uisdc-tuweia-2

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

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

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

sdcweixin

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/apple-watch-ui-guideline-2

界面设计 交互设计师 HTML5 素材 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 设计规范 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里