优界网

首页 > 教程经验 > 干货速递!APPLE WATCH人机交互指南之UI设计基础(2)

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

100

0

0

2015-04-23 15:35: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】

已有0人赞过

+1赞

认真评论的都成大咖了

还可输入1000个字

  • 刚刚
  • 登录优界网 ×