设计原则
遵从(Deference):UI应该有助于用户更好地理解内容并与之交互,并且不会分散用户对内容本身的注意力
清晰(Clarity):各种尺寸的文字清晰易读;图标应该精确醒目,去除多余的修饰,突出重点,以功能驱动设计。
深度(Depth):视觉的层次感和生动的交互动画会赋予UI新的活力,有助于用户更好地理解并让用户在使用过程中感到愉悦。
无论你是重新设计现有的应用,还是重新开发一个新应用,请基于下列方法进行设计考虑:
首先,去除掉UI元素让应用的核心功能突显出来,并明确之间的相关性。
然后,使用iOS的主题来定义UI并进行用户体验设计。完善细节设计,以及适当合理的修饰。
最后,保证你设计的UI可以适配各种设备和各种操作模式,使得用户在不同场景下都可以享受你的应用。
总结:凸显内容和功能
功能驱动设计(设计跟随内容,让用户界面成为内容的支撑)
细节优化提升体验。
设计方法
用半透明UI元素样式来暗示背后的内容。半透明的控件元素(比如控制中心)可以提供了上下文的使用场景,帮助用户看到更多可用的内容,并可以起到短暂的提示作用。
使用大量留白。留白可以使重要的内容和功能更加醒目、更易理解。留白还可以传达一种平静和安宁的心理感受,它可以使一个应用看起来更加聚焦和高效。
充分利用整个屏幕。
让颜色简化UI,使用一个主题色。
用层次来进行交流,在不同的视图层级上展现内容,用以表达层次结构和位置,这样可以帮助用户了解屏幕上对象之间的关系。
使用布局来沟通. 布局包含的不仅仅是一个应用屏幕上的UI元素外观。你的布局,应该告诉用户什么是最重要的,他们的选择是什么,以及事物是如何关联起来的。
·遵循从左到右的习惯
·使用不同的视觉化重量和平衡来告诉用户当前屏显元素的主次关系。(大小对比,颜色对比...)
对齐/尺寸
使用对齐来让阅读更舒缓,让分组和层次之间更有秩序。对齐让应用看起来整洁而有序,也让用户在滑动整屏内容时更容易定位和专注于重要信息。不同信息组的缩进与对齐让它们之间的关联更清晰,也让用户更容易找到某个控件。
确保用户在内容处于默认尺寸时便可清楚明白它的主要内容与含义。例如,用户应当无需水平滚动就能看到重要的文本,或不用放大就可以看到主体图像。
准备好改变字体大小。用户期望大多数应用都可以响应他们在iOS的设置中设定的字体大小。为了适应一些文本大小的变化,你也许需要调整布局;想要得到更多文本显示相关的信息,请查阅下文“颜色与字体”中相关的内容。
尽量避免UI上不一致的表现。在一般情况下,有着相似功能的控件看起来也应该类似。用户常常认为他们看到的不同总有原因,而且他们倾向于花时间去尝试(译者按:因此为了避免用户做无用的尝试,建议类似的功能外观都保持一样。)
给每个互动的元素充足的空间,从而让用户容易操作这些内容和控件。常用的点按类控件的大小是44 x 44点(points)。
布局
应该让用户时刻清楚自己当前在应用中所处的位置,及如何前往目的页面。无论使用哪种适合你的应用结构的导航,最重要的是用户访问内容的路径要有逻辑、可预期和易于追溯。
使用导航栏(Navigation Bar)帮助用户轻松访问分层内容。导航栏的标题可以显示用户当前所处的层级,而后退按钮可以回到上一层级。
使用标签栏(Tab Bar)显示同类型的内容或功能。标签栏很适合于扁平信息结构,可以让用户在分类之间随意切换,而不用在意当前所处的位置。
使用交互性元素吸引点击
为了暗示交互性,设计时会使用很多线索,包括点击的反馈、颜色、位置、上下文、表意明确的图标和标签等。并不需要过于修饰元素来向用户展示可交互性。
一个关键的颜色可以给用户提供很强的视觉指引,尤其是没有冗余的其它颜色时。为了对比,使用蓝色来标记可交互的元素,同时能提供统一的、易识别的视觉风格。
在内容区域,必要时可以给按钮添加边界或背景。位于栏(Bar)、动作列表(Action Sheet)和�警告框(Alert)中的按钮可以不需要边界,因为用户知道在这种区域中大多数选项是可交互的。但是在内容区域,有必要使用边界或背景将按钮从其他内容中区分出来。例如,音乐,时钟,照片,App Store在一些特别的场景中使用这种按钮。
标准手势
反馈有助于理解
反馈帮助用户了解应用当前在做什么,发现接下来可以做什么以及理解他们动作产生的结果。UIKit的操作和视图提供了很多反馈类型。
尽可能将状态或其他的反馈信息整合到UI中。用户不进行操作或不跳出当前内容就能获得需要的信息是最好的。例如,邮箱将当前的状态显示在不影响当前内容的�工具栏上。
避免显示不必要的提醒对话框。对话框是很强的反馈机制,只有在传递非常重要,且可操作的信息时才需要使用它。如果用户常看到很多没有重要信息的对话框,他们很快就会忽略所有对话框提醒。想要了解更多信息
颜色与字体
在iOS系统中,颜色会用于表明交互,传递活性以及提供视觉连续性。内置的应用程序选择使用那些看起来更具个性的、纯粹、干净的颜色,并辅以或亮或暗的背景组合。
如果你要创建多样的自定义颜色,要确保它们能够和谐共存。例如,如果你的应用的基本风格是柔和的色调,你就应该创建一个协调的柔和色调的色板用于整个应用。
注意在不同情境下的颜色对比。例如,如果在导航栏的背景与栏按钮标题之间没有足够的对比,按钮就会很难被用户看到。一个快速但不严谨的方法是通过将设备置于不同的光照环境之中(包括晴朗的室外)来测试设备上的颜色是否具有足够的对比度。
虽然在设备上查看你的应用能够在一定程度上帮助你找到需要调整的地方,但这仍代替不了能产生可靠结果的更科学客观的方法。这种方法涉及到判定前景色和背景色的亮度值是否符合一定的比率。这个比率值可以通过在线对比度计算器或者根据WCAG2.0标准中提供的公式自己计算获得。你应用中理想的颜色对比度应该是4.5:1或更高。
你可能想要增加某些文字的权重,来帮助用户可视化你的内容的层次结构,或者把用户的注意力吸引到特定的词或短语。另外,你可以通过增加较小文字的权重和减小较大文字的权重,在多个不同字号的、相邻的标签中建立视觉凝聚。字体权重在内容的整体风格和表达中有重要影响,因此你可以选择特定的权重来达到设计目的。
文本尺寸的响应式变化需要优先考虑内容。并不是所有的内容对于用户都是同等重要的。当用户选择更大的文本尺寸时,他们是想要使他们关注的内容更容易阅读;他们并不总是想要屏幕上的每个单词都更大。
例如,当用户选择具备更大易用性的文本尺寸时,邮件将会以更大的尺寸显示邮件的主题和内容,而对于那些没那么重要的信息——如时间和收件人——则采用较小的尺寸。
确保一个自定义字体在不同尺寸下的所有类型都具备可读性。实现这一效果的方法之一是效仿在不同的文本尺寸下iOS系统呈现字体样式的一些方法。例如:
·文本永远都不应该小于11点(points),即使是用户选择极小的文本尺寸。相较而言,内容样式使用17点的字号作为 大尺寸,这也是默认的文本字号。
·通常来说,字号与行距值在每一档的文本尺寸设置中差别为1点。唯一例外的是两种标题的样式,它们在极小、小和 中尺寸的设置中均使用相同的字号、行距和字距。
·在最小的三种文本尺寸中,字间距相对较大;而在最大的三中文本尺寸中,字间距相对紧凑。
·标题和内容的样式使用相同的字体尺寸,同时,为了区分标题与内容样式,标题样式使用更重的值。
·导航控制栏的文本使用相同的字号,而内容文本的样式则使用大尺寸的设置(值为17点)。
·文本总是使用常规或者中重,一般不适用轻或者加粗。
图标和图形
每个应用都需要一个漂亮的图标。用户常常会在看到应用图标的时候便建立起对应用的第一印象,并以此评判应用的品质、作用以及可靠性。
·应用图标是整个应用品牌的重要组成部分。将图标设计当成一个讲述应用背后的故事,以及与用户建立情感连接的 机会。
·最好的应用图标是独特的,整洁的,打动人心的,让人印象深刻的。
·一个好的应用图标应该在不同的背景以及不同的规格下都同样美观。为了丰富大尺寸图标的质感而添加的细节有可能 让图标在小尺寸时变得不清晰。