首页 存档 技术 查看内容

iOS 10 人机界面设计指南(四):视觉设计篇

2018-3-30 13:00 |来自: 互联网 258 0

摘要: 16年6月,苹果公司推出了新的移动操作系统:iOS 10。博大软件第一时间学习消化,并在融入到软件的设计与开发后,决定将 iOS 10 人机界面设计指南翻译过来,希望帮助更多设计师和开发人员更好的理解苹果新的设计理念 ...


16年6月,苹果公司推出了新的移动操作系统:iOS 10。博大软件第一时间学习消化,并在融入到软件的设计与开发后,决定将 iOS 10 人机界面设计指南翻译过来,希望帮助更多设计师和开发人员更好的理解苹果新的设计理念。这是第四章节“视觉设计篇”。

文章译自苹果官网 developer.apple.com,转载请先联系博大软件获得授权。

翻译:Carrie(外语软件顾问)

校对:Frannie(外语编辑)


4、视觉设计(Visual Design)

4.1 动画(Animation)

iOS系统优美的动画加强了用户和屏幕内容视觉上的联系。一个设计合理的精致的动画能够传达状态情况、提供反馈信息和加强直接操纵感,把用户的操作结果视觉化呈现出来。


谨慎使用动画和动效。不要为了使用动画而使用动画。滥用动画会导致不连贯,特别是在非沉浸式体验的应用中会让用户感到错乱。iOS经常使用动效,比如运用视差效果在主屏和其它地方建立深度感。这些效果能够方便用户更好的理解并增加乐趣,但是过多使用动效就会让应用变得难以理解和控制。在使用动效之前,先测试结果以确保其呈现最佳的效果。

力求真实性和可信度。用户倾向于接受艺术创造,但是当动效没有意义或者看似违背了物理定律时,他们可能感到混乱。如果用户可以从屏幕顶部下滑唤出一个视图,那么该视图也应该能够被用户上滑进行关闭。

使用连贯的动画。平稳的过渡、横竖屏之间的流畅转换和基于物理的滚动,这都是用户在使用iOS系统时常见的动画,这样一个熟悉、流畅的动画体验才能吸引用户,参与其中。 除非你在创造一个比如游戏这样的沉浸式体验,否则自定义动画应该和系统自带的动画相符。

使动画可选。当辅助功能首选项中的减少动画选项被激活,你的应用程序应该尽量减少甚至是消除动画。

4.2 品牌化(Branding)

成功的应用品牌化不单只是往应用里面中添加一系列的品牌元素,而是更多的通过精辟的语言、颜色和图片等决策来创造独特的品牌标识,足够多的品牌元素让用户仿佛置身于你的应用之中。但是要记住凡是过犹不及,太多的元素也会变成对用户的干扰。

融入精妙且不显眼的品牌元素。用户使用你的应用的目的是获取信息、完成任务,或者纯粹是娱乐,但绝不是观看广告。设计应用时,巧妙地融入品牌,比如在界面中使用应用图标的颜色,在应用中创造一个环境,以便获得最好的体验。

不要让品牌化阻碍优秀的应用设计。首先,得让你的应用看起来像是一个iOS应用。然后,还要保证应用的直观易用性,易于导航并且以内容为中心。当然,要是你的应用也适用于其它平台,切莫因为过多关注品牌而忽视了设计的质量。

内容优先,其次才是品牌化。在屏幕顶部添加一栏只是用于显现品牌元素,却没有任何用途,如此会把用来浏览内容的空间减少了,效果会大打折扣,反而得不偿失。相反,若是采用低侵入的方式来实现品牌化,比如使用自定义的配色方案和字体,或是巧妙地添加自定义背景,效果则会好得多,既宣传了品牌,又不影响用户体验。

不要在应用中到处展示logo。避免在应用中到处展示logo,除非这是必须的。这在导航栏中更加重要,显示标题要比logo更加有用。

遵守苹果公司的商标准则苹果公司的商标不能出现在你的应用名称或是图像里边。详情请看苹果官网Apple Trademark List[1]Guidelines for Using Apple Trademarks[2]

提示:

App Store 为突显你的应用品牌提供了更多的机会。更多指南,请看苹果官网App Store Marketing Guidelines[3]

4.3 颜色(Color)

在iOS中颜色能够反映交互性、赋予活力以及提供视觉连续性。在挑选应用色调时,记得查看系统的配色方案指南,让应用的颜色无论是单独还是组合使用、在浅色背景或是深色背景上都搭配完好。


在应用内使用互补色。应用内的颜色应该看起来和谐,不会突兀或是造成干扰。如果你的应用风格偏向粉色,就可以使用一组协调的色彩。

在应用中统一使用具有暗示交互性的关键色。在Note中,可交互的元素是黄色的;在Calendar中,可交互的元素是红色的。如果你定义了一种表示了可交互性的关键色,要确保不会与其它颜色相冲突。

通常选择与应用 logo相协调的调色板巧妙地使用颜色可以很好的突显品牌。

图片带有颜色配置文件。iOS默认的色彩空间是sRGB。为了颜色能够正确匹配这一色彩空间,确保图片包含嵌入的颜色配置文件。

使用广色域加强对兼容设备的视觉体验。广色域显示屏支持比sRGB P3更丰富、色彩更饱和的色彩空间。当体验要求生动的图像时,使用Display P3颜色配置文件的16位彩色图片。为了达到最佳效果,这些图片应该保存为16位.png文件,内嵌入Display P3 轮廓。

提示:

在带有广色域显示屏的Mac上,你可以使用系统颜色选择器来挑选和预览P3的颜色,并将其与sRGB颜色进行比较。

交互式和非交互式元素不要使用同种颜色。交互式和非交互式元素具有相同的颜色,会让用户很难识别可点击的地方。考虑半透明对颜色的影响。在半透明元素的下面和上面,比如工具栏,颜色都会呈现不同的效果。

在多种光照条件下测试应用的配色方案。在室内和室外、房间环境、不同的时间和气候等条件,光线会有显著的变化。在电脑上显示的颜色和在实际使用时看到的颜色会有一定的差异。因此,你应该尝试在不同的光线条件下预览应用,观察颜色的显示有何不同。然后根据实际情况,适当调整颜色以满足大多数场景下的使用需求,给用户提供最好的视觉体验。

考虑True Tone显示屏对颜色的影响。True Tone显示屏利用了环境光传感器来自动调节显示屏上的白点,以适应当前环境下的光照条件。主要提供阅读、照片、视频和游戏类体验的应用可以通过确定一种白点适应模式来加强或弱化这种效果。更多细节,请看苹果官网Information Property List Key Reference[4]

关注色盲用户以及不同文化对颜色的认知差异。同一种颜色在不同用户的眼中是不一样的。很多色盲用户很难区分红绿色以及灰色,或是蓝色和橘色,在配色的时候避免使用这些颜色组合来区分两种状态或两个值,若是非要使用这些颜色组合,可以用不同的形状进行区分。比如,用一个红色方块和一个绿色圆圈来分别表示下线和上线状态,替代红色和绿色的圆形。有些图形编辑软件包含检测是否色盲的小工具。另一方面,还需要考虑文化的差异,不同的文化对同一种颜色赋予不同的文化含义。比如,在中国文化中,红色一般象征着吉祥、兴旺等积极意义,但是在西方文化中红色则更多的被用来表示危险。请谨慎使用颜色,确保你应用的颜色正确传达了讯息。

使用充足的颜色对比度。在应用中过低的对比度可能会造成图标和文本及背景相融合,影响用户阅读应用的内容。在线颜色对比度计算器能够帮助设计师精确的分析应用中的色彩对比度,确保它达到最佳标准。应用对比度至少要达到4.5:1, 7:1则是最佳,它满足了更加严格的辅助功能标准。

4.4 布局(Layout)

用户通常都是希望能够在所有设备和各种模式下使用他们喜欢的应用。在iOS系统中,在不同的设备、iPad的多任务处理、分屏浏览以及屏幕被旋转时,界面元素和布局能够被配置为自动改变形状和大小。由此可见,提前计划和设计一个在任何环境下都能提供良好体验的应用非常重要。

环境变化时,当前内容的焦点不变。内容才是最重要的。环境变化焦点也随着改变会让用户困惑,甚至是以为应用失控了。

确保主要内容在默认大小下清晰可读。除非用户调整了大小,否则不要让用户水平滑动来阅读重要的文本,或者放大才能看清楚原图。

保持应用整体一致的外观。一般来说,具有相似功能的元素也应该是类似的。

利用视觉权重和平衡来表示重要性。大的对象易于吸引人的眼球,也更易于点击,特别是在不容易集中注意力的环境中,比如厨房和健身房,这点尤为重要。用户的阅读习惯大都是从左到右,一般把重要的对象放在屏幕的左上角位置。

使用对齐方式便于浏览,展示出结构和层级。对齐使应用看起来整齐有次序,在页面滑动时让用户更容易聚焦,快速地找到信息。缩进和对齐还可以表明多组内容之间的关系。

避免随意改变布局。用户旋转了设备,并不意味着需要改变整体的布局。如果应用在竖屏模式下显示了一个网格的图片,那么没必要在横屏模式时也显示同样的网格图片。相反,只要简单调整网格的尺寸就OK了。尽量在所有环境下都提供相同的体验。

请支持竖屏和横屏两种方向。很多用户都喜欢根据需要来切换横屏和竖屏模式,所以最好能够满足他们的期望。



竖屏




横屏


如果只支持一种方向,那么同时支持两种变量。如果你的应用只能在一个方向运行,那么请确保它能够支持两种方向的变化。例如,你的应用只支持横屏模式,那么不管Home键在左侧还是右侧,应用都能正常运行。如果在使用应用时设备被旋转180度,那么应用显示的内容也应该相应的旋转180度。当用户手持设备在不同的方向,而你的应用没有自动旋转,用户自然就会知道应该旋转设备,你不必特意提醒用户调整设备方向。

应用根据当前内容对旋转作出反应。比如,一款游戏需要用户旋转设备来移动角色,在游戏中就不会因为设备的旋转而改变方向。不过,它可以根据当前设备的方向来显示菜单和简介。

给可交互元素预留足够的空间。尽量保持所有控件的点击区域都不小于44pt x 44pt。

适应不同的文本大小。用户总是希望大多数的应用能够适配设置里不同大小的文本。你可能需要调整布局来适应某些文本大小的改变。更多关于应用文本使用的信息,请看苹果官网Typography[5]

更多适应性的开发详情,请看苹果官网Auto Layout Guide[6]

4.5 字体(Typography)

iOS的系统字体是San Francisco,这种字体有两个变种:用于小于19p(points)文本的SF UI Text和用于大于20p(points)文本的SF UI Display。当你在标签和其它界面元素为文本使用了系统字体时,iOS系统会根据字号自动选择最合适的文本样式。在必要时它还会自动转换字体来满足辅助功能设置。可以在苹果官网Resources[7]下载San Francisco字体。


强调重要信息。使用字体粗细、大小和颜色来突出应用最重要的信息。

尽可能只使用一种字体。混合使用多种字体会让应用看起来杂乱无章,不利于用户浏览。可以考虑只使用一种字体兼配几种样式和大小。

尽量使用内置的文本样式。内置的文本样式能够在视觉上清晰地表达内容,同时保持最佳的易读性。这些样式以系统字体为基础,并能让你利用到重要的排版功能,比如动态字体能够根据每种字号自动调整字距和行间距。iOS包含以下文本样式:

标题1 (Title 1)

标注 (Callout)

标题2 (Title 2)

副标题 (Subhead)

标题3 (Title 3)

脚注 (Footnote)

大标题 (Headline)

说明1 (Caption 1)

正文 (Body)

说明2 (Caption 2)

确保自定义字体清晰可辨。自定义字体在iOS上是可支持的,但往往很难阅读。除非你的应用是为了推广品牌或者迫切需要创造一个沉浸式的游戏体验,非要使用自定义字体不可,否则最好还是使用系统字体。如果使用了自定义字体,需要确保其可读性。

实现自定义字体的辅助功能。比如对需要加粗文本这类的辅助功能,系统字体能够自动做出反应。使用自定义字体的应用通过检查辅助功能是否启用,或是记录更改的通知,来执行同样的操作。详情见苹果官网Accessibility[8]

(1)动态字体大小

SF UI字体的两个变种无论任何尺寸大小都清晰易读。动态字体让阅读者选择喜欢的字体大小,提供了额外的灵活度,让应用的字体显示更加出色。

1) 最小号

样式

粗细

字号

行距

字距

标题 1

25pt

31pt

14pt

标题2

常规

19pt

23pt

-26pt

标题3

常规

17pt

21pt

-24pt

大标题

半粗

14pt

19pt

-11pt

正文

常规

14pt

19pt

-11pt

标注

常规

13pt

18pt

-6pt

副标题

常规

12pt

16pt

0pt

脚注

常规

12pt

16pt

0pt

说明 1

常规

11pt

13pt

6pt

说明 2

常规

声明:文章版权归原作者所有 部分文章转自互联网 如有侵权请联系 [邮箱地址] 删除

路过

雷人

握手

鲜花

鸡蛋

相关分类