【汉化版】 IOS 10人机界面设计指南(完结版)

【汉化版】 IOS 10人机界面设计指南(完结版)

英文好的同学可以直接到这学习:

1.1 设计原则(Design Principles)

作为一名移动应用设计师,意味你有机会发布一款具有杀伤力的产品能够登上苹果商店的榜首。为了实现这个目标,你的产品必须在质量和功能上达到高标准。

以下三大原则让iOS系统有别于其它平台:

清晰(Clarity):

纵观整个系统,任何尺寸的文字都清晰易读,图标精确易懂,恰当且微妙的修饰,聚焦于功能,一切设计由功能而驱动。留白、颜色、字体、图形以及其它界面元素能够巧妙地突出重点内容并且表达可交互性。

遵从(Deference):

流畅的动效和清爽美观的界面有助于用户理解内容并与之交互,而不会干扰用户。当前内容占据整屏时,半透明和模糊处理能够暗示其它更多的内容。减少使用边框、渐变和阴影让界面尽可能地轻量化,从而突出内容。

深度(Depth):

清楚的视觉层和生动的动效表达了层次结构,赋予了活力,并有助于理解。

易于发现的且可触发的界面元素能提升体验愉悦感,让用户在成功触发相应功能或者获得更多内容的同时还能掌控当前位置的来龙去脉。当用户浏览内容时,流畅的过渡提供一种纵深感。

要想扩大影响力和涉及范围,在设计你的独特应用时,请熟记以下几点原则:

美学完整性(Aesthetic Integrity)

美学完整性代表了一款应用的视觉表象和交互行为与其功能整合的优良程度。例如,一款协助用户完成重要任务的应用应该使用不易察觉且不引人注目的图形、标准化控件和可预知的交互行为从而让用户保持专注。反之而言,一款沉浸式体验的应用(比如游戏),就需要吸引人的视觉表象,在鼓励用户探索的同时带来无穷的乐趣和刺激。

一致性(Consistency)

一款内部一致的应用能够贯彻相同的标准和规范:使用系统提供的界面元素、风格统一(众所周知)的图标、标准的字体样式和一致的措辞。应用所包含的特征和交互行为是符合用户心理预期的。

直接操作(Direct Manipulation)

对屏幕上的对象直接操作(而不是通过一堆控件)能够提升用户的参与度并有助于理解。直接操作指包括用户旋转设备或者使用手势控制屏幕上的对象。通过直接操作,他们的交互行为能够得到即时可视的反馈。

反馈(Feedback)

反馈认证交互行为,呈现结果,并通知用户。系统自带的iOS应用对每一个用户行为都提供了明确的反馈。可交互的元素被点击时会被临时高亮,进度指示器(progress indicator)显示了需要长时间运转的操作的进度,动效和声音加强了对行为结果的提示。

隐喻(Metaphors)

当一个应用的虚拟对象和行为与用户熟悉的体验相似时——无论这种体验是来源于现实生活或是数字世界,用户就能更快速地学会使这款应用。隐喻在iOS中能够起作用是因为用户与屏幕进行物理上的交互。他们通过将视图移出屏幕来显示下方的内容,他们拖曳(drag)和滑动(swipe)对象,他们拨动(toggle)开关,移动(move)滑块,滚动(scroll)数值选择器,他们甚至通过轻扫(flick)来翻阅书籍和杂志。

用户控制(User control)

在iOS内部,是用户——而不是应用——在控制。应用可以对一系列用户行为提供建议,或对可能造成严重后果的行为发出警告,但不应该替用户做决定。好的应用会在让用户主导和避免不想要的结果中找到平衡。为了让用户感觉到是他们在控制,应用应该使用熟悉且可预知的交互元素,让用户二次确定有破坏性的行为,并且让即使在运行中的操作也能够被轻易取消。

1.2 iOS 10 新特征介绍

在iOS 10,你可以创造前所未有的更强大的应用。当你浏览这些新改变并在思考他们将如何帮助你的应用时,请特别关注设计指南。

【汉化版】 IOS 10人机界面设计指南(完结版)

搜索屏幕和主屏幕的窗口控件(widget)

Widget 提供即时且有用的信息,或是应用特有的一些无需打开应有就能使用的功能。在过去,用户在消息中心添加widgets当作快速入口。现在,用户在搜索屏幕添加widgets,用户可通过在主屏或是锁屏右滑进入搜索屏幕。你也可以在主屏通过3D Touch触发的某个应用的快捷操作菜单(quick action list)上方添加widget。Widget的设计和交互方式也改变了。请注意更新你现有的设计。

【汉化版】 IOS 10人机界面设计指南(完结版)

与Messages的联动

应用可以通过执行一种出现在对话下方的messaging插件让用户与朋友分享来自该应用的内容。应用可以通过Message分享文字,图片,视频,贴纸,甚至可交互的内容,譬如信息内的游戏。

【汉化版】 IOS 10人机界面设计指南(完结版)

与Siri的联动

应用能够与Siri联动,从而让用户使用声音来执行相应的应用操作,譬如打电话、发短信和开始锻炼。

【汉化版】 IOS 10人机界面设计指南(完结版)

可拓展的通知栏

你可以通过拓展详情视图来强化你的通知栏,用户可以在未锁屏状态下通过3D Touch功能点击或是下滑你的通知来打开拓展视图。使用这种视图能够让用户快速浏览更多信息,并允许他们在不离开当前界面的情况下对该消息进行快速操作。

1.3 界面基本元素

大多数的iOS应用使用了来自UIKit的部件,这是一个定义了基本界面元素的编程框架。这个框架让各种应用在视觉上达到一致的同时还提供了高度的个性化。UIKit元素是灵活且常见的。它们是可适配的,让你能够设计一个在任何iOS设备上都看起来很棒的应用,而且能够在系统发布新版本的时候自动更新。由UIKit提供的界面元素可以分为以下三种:

栏:

告知用户现在在应用的哪里,提供导航,而且还可能包含按钮或者其它用来触发功能和交流信息的元素。

视图:

包含用户在应用内最关注的信息,例如文本、图形、动画和交互元素。视图允例如滚动、插入、删除和排列之类的行为。

控件:

触发功能和传递信息。控件包括按钮、开关、输入框和进度指示器。

为了进一步定义iOS界面,UIKit规定了你的应用能够采用的功能。通过这个框架,你的应用可以对触摸屏上的手势作出应答,还可以包含一些例如绘画、辅助和打印的功能。

iOS也和其他编程框架和技术紧密结合,譬如Apple Pay、HealthKit 和ResearcKit, 它帮助你设计出一个强大地惊人的应用。

2. 交互(Interaction)

2.1 3D 触摸(3D Touch)

  • 2.1.1 主屏幕交互(Home Screen Interaction)
  • 2.1.2 轻压(Peek)和重压(Pop)
  • 2.1.3 Live Photos

2.2 辅助功能(Accessibility)

2.3 音频(Audio)

2.4 身份验证(Authentication)

2.5 数据输入(Data Entry)

2.6 反馈(Feedback)

2.7 文件处理(File Handling)

2.8 启动初体验(First Launch Experience)

2.9 手势(Gestures)

2.10 加载(Loading)

2.11 模态(Modality)

2.12 导航(Navigation)

2.13 请求许可(Requesting Permission)

2.14 设置(Settings)

2.15 用辞(Terminology)

2.16 撤销和重做(Undo and Redo)

2.1 3D 触摸(3D Touch)

3D Touch 为触碰式交互增加了一个维度。在支持3D Touch 的设备上,用户通过对触摸屏施加不同的力度来实现更多的功能,譬如触发菜单、显示更多的内容或是播放动画。用户无需学习新的手势来使用3D Touch。当他们轻压屏幕并且获得应答的时候就能立即发现这一新的交互维度。

2.1.1 主屏幕交互(Home Screen Interaction)

在支持3D Touch的设备的主屏按压应用图标会触发相应的操作视图。该视图让你能够快速地执行常用的应用任务和预览有趣的信息,譬如日历应用,它能够提供创建新事件的快捷操作,同时显示日程表上的下一个事件。了解相关设计指导,请参阅Home Screen ActionWidgets

2.1.2 轻压(Peek)和重压(Pop)

轻压允许用户使用3D Touch在当前环境上预览一个临时视图内的对象,譬如一个页面、链接或者文件。要想在支持该功能的设备上实现预览,只需用手指对应用施加一点压力,而抬起手指就能退出预览。要想打开对象来浏览更多的内容,请更重地按压屏幕直到对象放大到填满屏幕。在一些轻压视图上,你可以通过上滑来显示相应的操作按钮。譬如,在Safari打开了某个链接的轻压视图时,你可以通过上滑展开相应的操作按钮——打开链接,添加至阅读列表和复制链接。

【汉化版】 IOS 10人机界面设计指南(完结版)

利用轻压视图提供实时的,内容丰富的预览

理想情况下,轻压视图为该项提供足够的信息以补充说明当前任务,或者帮助你决定是否完全地打开该项。例如,预览邮件(Mail)信息中的链接,从而决定是否在Safari浏览器中打开或者分享给朋友。轻压视图一般被利用于表单视图中,提供一个行项的详细信息,从而决定是否选择该项。

设计足够大的轻压视图

设计一个足够大的轻压视图从而保证手指不会遮挡到内容。确保轻压视图能够提供足够详细的信息,以便用户决定是否按地更重来完全地打开该项。

统一使用轻压和重压功能

如果你只在某些地方使用轻压和重压,而不在另一些地方使用,用户就不会知道到底哪里可以使用这个功能,而且可能会认为你的应用或是他们的设备出了问题。

允许每个轻压视图都能够被重压

虽然轻按视图能够提供给用户他们所需的大部分信息,但如果他们想离开当前任务并转移注意力至该项时,应该允许他们过渡到重压。

避免在轻压视图中呈现按钮式元素

如果用户抬起手指去点击类似按钮的元素,轻压就会消失。

【汉化版】 IOS 10人机界面设计指南(完结版)

不要让同一项具备轻压和编辑菜单(Edit menu)两个功能

当一个项目同时启用两个功能时,不但会让用户感到困惑,也会让系统难以判断用户目的。了解更多指导,请参阅Edit Menus

适当时提供操作按钮

不是每个一轻压都需要操作按钮,但这是一个为常用任务提供快捷操作的好方式。如果你的应用已经为项目提供了自定义的点击并长按(touch-and-hold)动作,那么最好在轻压里包含同样的操作。

避免为打开被轻压的项目提供操作按钮

用户一般都通过更重的按压来打开他们轻压的项目。所以,没有必要再提供一个明显的打开按钮。

不要让轻压成为唯一的执行项目操作的操作

并不是所有设备都支持轻压和重压,甚至有的用户会关闭3D触摸功能。你的应用为这些情况考虑其它触发项目操作的方式。譬如,你的应用可以将轻压的快捷操作映射到一个视图中,该视图会在点击和长按时出现。

2.1.3 Live Photos

应用可以通过支持Live Photos,并在照片中加入压感用来查看动态回忆。当你按压它们时,Live Photos死而复生,通过动作和声音再现拍照的前后时刻。了解相关设计指导,请参阅Live Photos

2.2 辅助功能(Accessibility)

iOS 提供了大量的辅助功能来帮助失明、失聪以及其他残疾群体。大部分以UIKit为基础的应用能够轻易地具有辅助性,让更多的用户来使用你的应用,因为你为所大众提供了平等的使用体验。

为图片、图标和界面元素提供可选择的文字标签

可选择的文字标签在屏幕上是不可见的,但是他们让VoiceOver能够通过声音描述屏幕上有什么,让失明用户能够轻易地使用导航。

相应辅助功能的偏好设置

如果你的应用使用UIKit来实现用户界面,文字、界面元素就会自动调整至相应辅助功能的偏好设置,譬如加粗并且更大的文字。你的应用也应当在适当的时候检查并相应辅助功能的偏好设置,譬如当减弱动态效果(reduce motion)的开关被打开时。采用自定义字体的应用应该力图和系统字体的辅助特性保持一致。

测试应用的辅助功能

除了文字和动态效果的变化,辅助功能选项还能改变对比度,反转颜色,降低透明度以及更多。为那些需要这些功能的用户启用设置并观察你的应用将会变成什么样并且如何运作。

包含隐藏式字幕和口述影像

隐藏式字母帮助失聪以及重听用户明白视频中的对话和其它音频内容。口述影像为视觉受损的用户提供了关键视频内容的口头解说。

了解更多信息,请查阅iOS AccessibiltyAccessibility Programming Guide for iOS

2.3 音频(Audio)

无论声音是你应用体验的要素或只是一个点缀,你都应该知道用户对声音有什么要求并且满足他们的期待。

用户通过音量键、静音键、耳机声控和屏幕上的音量调节滑块控制声音。非常多的第三方配件也包含声控功能。音频可以通过内部和外部的扬声器、耳机输出,甚至通过支持AirPlay或是蓝牙设备无线输出。

静音:用户将他们的设备调节至静音来避免被意外的声音(比如电话铃声和短信提示声)打扰。他们也想要关闭没有意义的声音,包括按键声、音效、游戏配乐以及其它音频反馈。当设备被设置成静音,只能出现被明确被打开的声音,比如媒体播放中的声音、闹铃和音频/视频信息。

音量:无论是使用物理的设备按键或是屏幕上的滑块,用户都希望系统的所有音量都能够被改变,包括音乐声和应用内的音效。但是铃声音量是唯一例外,它只能在没有任何声音播放的情况下被单独调节。

耳机:用户使用耳机来私密地听声音并且能够释放他们的双手。当用户插入耳机时,他们希望声音能够自动继续播放而不被打断。当拔掉耳机时,他们希望播放能够立即停止。

必要时自动调节不同层级的声音,但不是整体音量

为了达到更好的混合音效,你的应用可以单独调节不同层级音频间的相对音量。但是,最终的音量输出应该由系统音量决定。

恰当的时候允许音频重选路由(rerouting)

用户会经常想要选择一个不同的音频输出设备。比如,他们会想要通过客厅的立体音响、车载收音机或是苹果电视来听音乐。请支持这个功能除非你有令人信服的理由不这么做。

使用系统提供的音量视图来调节音量

音量视图(volume view)是最好的能提供调节音量的界面控件。这个视图是自定义的,包含一个音量调节滑块,甚至包含一个用来替音频输出重选路由的控件。了解实现方法,请参阅MPVolumeView Class Reference

短音和振动请使用系统声音服务

了解实现方法,请参阅System Sound Services Reference

如果声音对你的应用十分重要请设置音频类别

不同的音频类别允许声音被静音按钮静音、与其它声音混响、或是当你的应用在后台时播放。根据类别的含义和当前设备的音频播放情况来选择一个类别,然后将其分配给你音频对话(audio sessions)。比如,非必要情况下,请不要打断用户正在收听的来自其它应用的音乐。总的来说,尽量不要在你的应用运行时更改所属的音频类别,除非应用需要经常地录制然后播放音频。了解实现方法,请参阅Audio Session Programming Guide

在适当时候继续播放被干扰打断的音频

正在播放的音频有时会受来自其它应用的声音干扰。暂时性干扰(比如来电铃声)被认为是可恢复的。永久性干扰(比如被Siri打开的播放列表)被视为不可恢复的。当一个可恢复的干扰出现时,你的应用应该在干扰结束时恢复音频播放(假设音频在干扰出现之前就已经开始播放了)。比如,一个在播放配乐的游戏和一个在播放音频的媒体应用都应该恢复声音的播放。当干扰发生时应用没有在播放任何音频,那么它也就不需要恢复任何对象。

【汉化版】 IOS 10人机界面设计指南(完结版)

让其它应用知道何时你的应用将停止播放暂时性的音频

如果你的应用可能会暂时性地干扰到其它应用的音频,那么就应该恰当地标明声音片段,从而让其它应用知道确切的恢复时间。了解实现方法,请参阅AVFoundation Framework Reference 中的AVAudioSessionSetActiveOptionNotifyOthersOnDeactivation。

只有在有意义时才对声音控件作出反应

无论你的应用在前台还是后台,用户都能够通过应用界面以外的东西控制音频的播放,比如在控制中心(Control Center)中,或者耳机声控。如果你的应用正在一个明确与声音相关的环境下播放音频,或是连接到一个支持AirPlay的设备上,那么对声音控件作出反应是合理的。但是,你的应用不应该混淆其它应用的音频,因为它们可能会在控件被激活时播放。

不要重新定义声音控件

用户希望声音控制在任何应用都保持一致性。永远不要重新定义声音控件。如果你的应用不支持某些控件,那么只需不对它们作出反应即可。

2.4 身份验证(Authentication)

要求用户进行身份验证时应该用有价值的东西交换,比如个人化体验、获得更多功能、购买内容或者同步数据。如果你的应用要求身份验证,请保证登陆流程快速简单并且低调,这样就不会减少应用的乐趣。

尽可能地延后登陆

用户经常遗弃应用因为他们在做一些有用的事前被强制登陆。在强制用户前给他们一个爱上你的应用的机会。在购物应用内,允许用户启动应用后能马上浏览你的商品,然后在他们决定购买时才要求登陆。在流媒体应用内,允许用户先探索和了解你能够提供的内容,然后在他们播放时让他们登陆。

解释身份认证的优势以及如何注册

如果你的应用要求身份认证,在登陆界面简要友好地介绍之所以要登陆的原因及其优势。并且请牢记不是每个人在开始使用应用时都拥有一个账号。请确认你解释了如何得到账号,或者提供一个简单的应用内的注册方式。

展示适合的键盘来减少数据输入

比如,当要求填写一个邮箱地址时,请展示包含信息输入所需快捷键的邮件键盘窗口。

2.5 数据输入(Data Entry)

无论是点击界面元素还是使用键盘,信息输入都是一个冗长的流程。当一个应用在做一些有用的事情前要求用户一连串的输入,进而拖慢了流程,那么用户会很快感到失望,甚至会彻底地抛弃这个应用。

【汉化版】 IOS 10人机界面设计指南(完结版)【汉化版】 IOS 10人机界面设计指南(完结版)

可能时展示选项

尽可能地提高信息输入的效率。比如,考虑使用选择器或是列表来替代输入栏,因为从一列提前设定好的选项中选择一个比打字容易。

可能时从系统中获取信息

不要强迫用户提供那些可以自动或是在用户许可内就能获取的信息,比如联系人或是日历信息。

提供可靠的默认值

尽可能地预填最可能的信息值。提供一个可靠的默认值缩短了做决定的时间从而加快了流程。

只有在收集完必需信息之后才能进行下一步

在允许“下一步”或“继续”按钮前,确保所有必要的输入框都有信息。尽可能地在用户输入之后就立马检查输入值,这样他们就能立即改正。

只要求必要的信息

只有系统运行真正必需的信息才使用必填栏。

简化值列表的导航

尤其是在列表和选择器中,必需能够简单地选择值。考虑通过将值列表按首字母排序或是其它逻辑排列,从而加快浏览和选择的速度。

在输入栏显示提示以辅助说明

当输入栏没有其它文字时,可以包含占位符文字——比如“邮件”或“密码”。当占位符文字已经足够说明时不要再单独使用标签来描述。

2.6 反馈(Feedback)

反馈让用户知道应用现在在做什么,发现下一步他们应该做什么,并且理解操作的结果。

【汉化版】 IOS 10人机界面设计指南(完结版)

悄悄地在你的界面中加入状态或其它类型的反馈

理想中,用户能够在不采取任何操作或是被打扰的情况下得到重要的信息。比如,当用户在邮件应用中查看邮时,状态信息被巧妙显示在工具栏上。这个信息不会和屏幕上的主要内容抢风头,但是用户在任何时候快速一瞥就能查看。

避免不必要的警告

警告是一种有威力的反馈机制,所以它应该只被用于传递重要的并且最好是需要操作的信息。如果用户看到太多包含无关紧要信息的警告框,他们很快就会学会忽略之后的警告。了解更多帮助,请参阅Alerts

2.7 文件处理(File Handling)

用户在创建、查看和操作文件时无需思考文件系统。如果你的应用需要运行文件时,尽可能地淡化文件处理。

【汉化版】 IOS 10人机界面设计指南(完结版)

让用户相信除非主动取消或删除

文件会随时被保存。总而言之,不要让用户去即时保存文件。反之,在文件被打开、关闭,或是跳转至其它应用时,应该自动定时地替用户保存文件。但在某些情况,比如正在编辑一个已被创建的文件时,保存和取消的选项也是有意义的,因为它们帮助确认何时编辑的内容应该被保存。

不要提供创建本地文件的选项

用户总是希望他们全部的文件都能在任何设备上读取。如果可能,你的应用应该支持文件云储存,比如通过与iCloud类似的服务。

设计一个直观并且图像化的文件浏览界面

理想情况下,使用用户熟悉的系统文档选择器来浏览文件。如果你想设计一个自定义的文件浏览器,请确保它是直观且高效的。最好的文件浏览器应该是高度图像化的,提供了文档的视觉再现。要想加快导航速度,减少手势的使用,并且考虑提供一个添加新文件的按钮,这样用户就无需再到其它地方去创建新文档。

让用户在你的应用内就能预览文件

你可以使用Quick Look 功能让用户查看来自Keynote、Numbers和Pages的内容,以及PDF文档、图片以及某些其它格式的文件,即使你的应用并没有真正打开它们。请参阅Quick Look

合适时,与其它应用共享文件

如果有意义,你的应用可以通过document provider extension与其它应用共享文件。你的应用也可以让用户浏览和打开来自其它应用的文件。了解实现方法,请查阅Document Picker Programming Guide

2.8 启动初体验(First Launch Experience)

应用的启动时间是你接触新用户并与老用户再次连接的第一个时机。请设计一个快速、有趣并有教育意义的启动体验。

提供启动画面

启动画面在应用打开时出现,在加载应用初始内容的同时,让人感觉你的应用的响应速度很快。因为这个画面很快就会被应用的首屏替代,所以它应该尽量与首屏相似,除非出现可定位的文字和可交互的元素。了解更多,请参阅Launch Screen

选择合适的方向启动

如果你的应用同时支持竖屏和横屏模式,那么应该以设备目前的方向启动。如果你的应用只在一个方向运行,那它只能在相同方向启动并在需要时允许用户旋转设备。除非有迫不得已的原因,否则处于横屏模式的应用正确地选择方向,无论Home键是在左侧还是右侧。了解更多信息,请参阅Layout

快速使用。避免出现延迟用户使用应用时间的启动画面、菜单和说明。反之,允许用户快速进入应用内。如果你的应用需要教学或是介绍步骤,为用户提供一个跳过的选项并且不要对老用户展示这些。

提前设想用户可能会需要的帮助

经常主动地考虑用户何时会遇到麻烦。比如,一个游戏,能够在暂停或是角色很难升级时提供一些诀窍。当用户错过启动画面的内容时,允许他们之后重新观看教程。

只在教程中展示最关键的内容

虽然为新用户提供引导没错,但是教学不能成为优秀的应用设计的代替品。更重要的是,确保你的应用是直观的。如果你的应用需要过多的引导,那么请重新审视你的设计。

让学习变得有趣而且易于学习

通过操作来学习比阅读一长串说明来的更有趣和有效。 在上下文环境中,通过动画和可交互性循序渐进地教导。避免展示看起来似乎可交互的屏幕截图。

避免在最开始要求用户设置信息

用户期待应用马上工作。为大多数人设计你的应用,然后让余下少部分需要不同配置的人自己调整参数来满足他们的需求。尽可能地,从设备设置和默认中或许设置信息,或者通过同步服务,比如iCloud。如果应用一定要求设置信息,那么在最初在应用内提示用户,然后允许用户稍后在应用设置中修改。

避免展示应用内的接受许可协议和免责声明

在你的应用被下载之前直接在苹果商店展示接受许可协议和免责声明。如果你必须将这些东西放在你的应用里,那么以和谐融入它们,以避免干扰用户体验。

在你的应用重新启动时恢复之前的状态

不要让用户重新操作来回到之前的应用定位。保存并且复原应用的状态,这样用户就能从他们上次离开的位置继续。

不要太快或是太频繁地要求用户对你的应用评分

太快或是太频繁地要求评分会让用户恼怒,并且减少最终收到的有用反馈的数量。为了鼓励考虑周到的反馈,在要求评分之前,给用户足够的时间直到他们形成对应用的看法。总是提供跳出评分提示的选项,并且永远都不要强迫用户对你的应用评分。

不要鼓励重启

重新启动耗费时间并且让你的应用看起来即不可靠又不可用。如果你的应用出现储存或者其它问题,导致它无法运行只能系统重启,那么你应该解决这些问题。

2.9 手势(Gestures)

用户通过在触摸屏上使用手势来与iOS设备交互。这些手势表现了一种亲密的人与内容之间的联系,并且加强了对屏幕上对象直接的操作感。用户普遍地希望一下的标准手势能够在操作系统和每一个应用内保持一致。

点击(Tap):激活一个控件或者选择一个对象。

拖曳(Drag):让一个元素从一边移动到另一边,或者在屏幕内拖动元素。

滑动(Flick):快速滚动或是平移

横扫(Swipe):单指以返回上一页,呼出分屏视图控制器(split view controller)中的隐藏视图,滑出列表行中的删除按钮,或在轻压中呼出操作列表。在iPad中四指操作用来在应用间切换。

双击(Double tap):放大并居中内容或图片,或者缩小已放大过的。

捏合(Pinch):向外张开时放大,向内捏合时缩小。

长按(Touch and hold):在可编辑或者可选文本中操作,显示放大视图用以光标定位。在某些与集合视图类似的视图中操作,进入对象可编辑的状态。

摇晃(Shake):撤销或重做

一般使用标准手势

用户已熟悉了标准手势,并不喜欢在做相同事情时被强迫去学习不同的方式。在游戏等沉浸式体验的应用中,自定义的手势能够成为体验的有趣要素。但是在其它应用中,最好使用标准手势,这样用户就无需花费多余的力气去学习和记忆它们。

不要禁止系统性的手势

除了标准手势,还有一些手势会触发系统性的操作,譬如呼出控制中心或是通知中心。在每个应用中,用户都依赖使用这些手势。

避免使用标准手势来执行非标准的操作

除非你的应用时一个极具可玩性的游戏,否则重新定义标准手势会变得混论和复杂。

为基于界面的导航和操作提供补充性的快捷手势,而不是取而代之

可能时,提供简单明显的方式来导航或是执行操作,即使它可能意味着额外的点击。非常多的系统应用包含一个提供了清晰可点的返回上一页的按钮的导航栏。但是用户也能通过在屏幕边缘右滑来返回。在iPad,用户能够点击Home键退出到主屏幕,或是使用四指捏合的手势。

使用多指手势来加强某些应用的体验

虽然涉及多个手指同时操作的手势不适用于每一个应用,但是他们能够丰富一些应用的体验,譬如游戏和绘画应用。比如,一个游戏可能包含多种屏幕上的控件,比如同时操作的的控制杆和发射键。

2.10 加载(Loading)

当内容在加载时,一片空白静止的屏幕好像应用被冻住了,让人感到困惑和失望,而且很可能让用户离开你的应用。

明确加载的状态

至少,展示一个活动旋转器(activity spinner)来表明有任务在进行中。更胜一筹的是,显示明确的进度,这样用户就能知道他们还需等待多久。

通过教育或娱乐用户来填充加载的时间

尝试展示游戏诀窍、令人愉悦的视频序列或者有趣的占位图。

自定义加载画面

尽管标准的活动指示器还不错,但他们有时会感觉是脱离上下文环境的。尝试设计符合你的应用或游戏的自定义动画和元素,以实现一个更沉浸式的体验。

尽快显示内容

不要让用户在看到屏幕画面前去等待内容的加载。立马显示屏幕画面,然后通过占位符、图片或者动画明确告知用户哪个范围的内容还未显示。当内容加载成功之后再把占位元素替代掉。可能时,比如当动画在播放时或是用户在某个层级或菜单导航时,在后台预加载接下来要出现的内容。

了解更多指导,请参阅Progress Indicators

2.11 模态(Modality)

模态突出焦点,因为用户只有在完成当前的任务或关闭一个信息或视图之后才能去做其它事情。操作列表、警告框和活动视图都提供了模态化的体验。当屏幕上出现一个模态视图时,用户必须采取一个决定(点击按钮或是其它)才能退出模态化体验。在日历(Calendar)中编辑事件或是在Safari浏览器中选择书签都是模态视图在应用中被采用的例子。一个模态视图可以占据整个屏幕、整个父视图(比如浮出层)或者屏幕的一部分。一个模态视图一般都含有“完成”和“取消”按钮来退出视图。

【汉化版】 IOS 10人机界面设计指南(完结版)

△ 警告框

【汉化版】 IOS 10人机界面设计指南(完结版)

△ 模态视图

减少模态的使用

一般来说,用户更喜欢与应用进行非线性的交互。只在必须要引起用户注意时、某个任务必须被完成或是确认关闭时,或保存重要数据时才考虑使用模态视图。

提供一个明显并可靠的退出模态任务的方式

确保用户总是知道他们关闭一个模态视图将导致的结果。

保持模态任务简单、简短并且高度集中

不要在你的应用中创建一另一个应用。如果一个模态任务太过复杂,用户在进入模态视图时就会看不到视他们本想执行的任务。当创建一个包含多层级视图的模态任务时请格外谨慎,因为用户可能会在多个视图中迷失并不知道如何返回。如果一个模态任务必须含有次视图,那么请提供单级的跳转路径以及清楚的完成路径。除非完成任务否则不要使用标有“完成”的按钮。

如果合适的话,请使用能够明确说明任务的标题

你也可能在视图的其它部分提供详细描述任务的文字或是提供指导。

只有在传达关键以及需要操作的信息时才使用警告框

警告框干扰体验,并且需要单击才能关闭,所以必须要让用户认为这个打断是有理由的。了解更多,请参阅Alerts

尊重用户的通知偏好设置

在设置里,用户明确规定了他们想要如何地接受来自你应用的通知。遵循这些个人偏好,这样他们就不会想要完全地关闭来自你应用的通知推送。

不要让模态视图盖在在浮出层上

除了警告框,任何元素都不应该覆盖在浮出层之上。在极少数情况下,你需要让模态视图在用户完成浮出层内的任务之后弹出,那么请先关闭浮出层再展示模态视图。

让模态视图的视觉风格与你的应用相符

一个模态视图可能包含一个导航栏。在这种情况下,请使用与你应用内的导航栏一样的视觉风格。

选择合适的模态视图样式

你可以使用到以下任何一种样式:

【汉化版】 IOS 10人机界面设计指南(完结版)

为展示模态视图选择一个合适的过渡方式

使用与应用风格相符的过渡方式来加强用户对当前内容转变的认知。默认的过渡方式让模态视图垂直地从屏幕底部向上滑出,然后在被关闭时下滑。弹出样式的过渡是指当前视图水平滑出,显示出模态视图,看起来就好像模态视图藏在当前视图的背后。当模态视图被关闭时,原先的视图便重新滑回来。在你的应用内容部使用统一的模态过渡方式。

了解更多模态视图的实现方法,请参阅UIViewController Class ReferenceUIPresentationController Class Reference

2.12 导航(Navigation)

用户往往意识不到一个应用的导航,除非它没有达到他们的预期。你的工作就是实现一种能够支持应用结构和目的的导航,并且让人们注意到到导航的存在。导航应该让人觉得自然和熟悉,并且不应该主导界面或者抢走内容的风头。在iOS,主要有三种导航结构。

分层导航:

在每屏都做一次选择,直到你到达目标位置。要想到达另外的目标位置,你必须原路返回一些层级或是从头开始重新选择。原生应用设置(Settings)和邮件(Mail)就是采用这种导航结构。

【汉化版】 IOS 10人机界面设计指南(完结版)

扁平导航:

在不同的内容类别间切换。原生应用音乐(Music)和App Store就是采用这种导航结构。

【汉化版】 IOS 10人机界面设计指南(完结版)

内容驱动或是体验驱动式导航:

在内容中自由地转换,或是内容定义导航。游戏、阅读以及其它沉浸式应用一般都采用这种导航结构。

【汉化版】 IOS 10人机界面设计指南(完结版)

有的应用结合了多种导航形式。比如,采用了扁平导航的应用也可能在每个类别之内使用层级导航。

总是提供清晰的路径

用户应该一直知道他在应用的什么位置以及如何去往下一个目标位置。除了要有清楚的导航形式,还应该确保对象间的路径是合理的、符合预期的并且容追溯的。一般来说,为用户提供到达某一屏的唯一路径。如果他们需要在非常多的情景下看到某一屏幕的内容,那么考虑采用操作列表、警告框、浮出层或是模态视图的形式展示这些内容。了解更多内容,请参阅Action Sheets,Alerts,Popovers, 和Modality

设计一个能够快速简单地访问内容的信息结构

合理地组织你的信息结构,保证它只用最少次数的点击、横扫和屏幕间跳转就能访问相应的内容。

使用触摸手势来制造流畅感

让用户能轻松地在界面内跳转,而感受不到阻力。比如,你可以让用户在屏幕边界右滑,而返回到上一屏。

使用标准的导航组件

可能时,使用标准的导航控件比如页面控件、标签栏、分段控件、表格视图、集合视图和拆分视图。用户已经熟悉了这些控件,他们很自然地就知道如何玩转你的应用。

使用导航栏访问分层内容

导航栏内的标题栏能够说明当前的层级位置,使用返回按钮能够轻易地回到上一个位置。了解更多指导,请参阅Navigation Bars

使用标签栏来展示内容或功能相似的类别

标签栏让用户能够快速简单地在类别中切换自如,而不受当前位置的限制。了解更多指导,请参阅Tab Bars

使用多页面展示同类型的内容时请使用页面控件

页面控件能够清楚地表示总页数,以及当前页的位置。天气(Weather)应用就使用了页面控件来表示不同地理位置的天气页面。了解更多指导,请参阅Page Controls

TIP

分段控件和工具栏不具备导航功能。使用分段控件能够组织信息放入不同的类别。使用工具栏为当前内容提供交互控件。了解这些元素的更多信息,请参阅Segmented ControlsToolbars

2.13 请求许可(Requesting Permission)

【汉化版】 IOS 10人机界面设计指南(完结版)

用户必须对应用予以授权,应用才能获取用户的个人信息,比如当前位置、日历、联系人信息、提醒事项以及照片。虽然用户在使用获得这些信息的应用时会感到方便,但是他们还是希望能够控制自己的私人数据。比如,用户希望为他们的照片自动标上当前的地理位置,或是寻找附近的朋友,但是他们又同时希望能有关闭这些功能的选项。

只在应用真的需要时才向用户请求获得个人数据

用户会质疑个人信息的请求是很自然的,尤其是他们发现当前的请求没有明显的必要时。确保允许请求只在用户真的在使用某些需要个人数据的功能时才出现。比如,一个应用只有在激活一个位置跟踪的功能时才请求获得当前的位置。

当需求不明显时向用户解释为什么你的应用需要这些信息

你可以在系统提供的允许请求警告框上添加自定义的文本。使用明确且有礼貌的文本,这样用户就不会感到有压力。使用简短文本,并且使用句子。没有必要包含你的应用名字。系统已经替你在警告框上说明了应用的名字。

在应用一启动时就请求允许那些对运行你的应用至关重要的信息

如果用户明确地知道你的应用只有获得这些个人信息才能运行,那么他们就不会反感。

不必要时不要请求位置信息

在获得位置信息之前,检查系统以查看位置服务是否已经被打开。使用这个知识,可以延迟提醒,直到使用需要该信息的功能时才进行提醒,甚至可能完全避免提醒。

学习如何实现定位功能,请参阅Location and Maps Programming Guide

2.14 设置(Settings)

有一部分的应用可能需要一开始就让用户决定设置或布局选项,但是大部分应用避免或是延迟这么做。成功的应用能够一开始就让用户很好地使用,并且同时提供了一个便捷的途径去调整体验。当你的应用被设计成满足大部分用户的需求,你就可以减少他们对对设置的需要。

推断你可以从系统中得到什么

如果你需要关于用户、设备或是环境的信息,那么尽可能地向系统请求而不是直接询问用户。比如,如果你想要知道用户的邮编来提供本地的选项时,可以向用户请求获取他们的当前位置。

在你的应用中对配置选项的优先排序深思熟虑

应用的主屏是一个放置关键或是常用选项的绝佳位置。次屏则适合放置只偶尔才更改的选项。

把不经常更改的配置选项放到系统设置里

系统的设置(Settings)应用是更改系统配置的核心地带,但是用户必须离开的应用才能到达那里。因此在你的应用中直接调节设置更加方便。如果你的应用必须提供很少改动的设置选项,请参阅Preferences and Settings Programming Guide中的Implementing an iOS Settings Bundle 部分。

适当时提供去设置的快捷路径

如果你的应用包含引导用户去设置的文本,比如“去设置>我的应用>隐私>定位服务”,请提供一个能够自动打开该界面的按钮。了解如果实现这个行为,请参阅UIApplication Class Reference中的Settings Launch URL部分。

2.15 用辞(Terminology)

每一个在应用中的文字都是与用户对话的一部分。利用好这个对方让用户在你的应用中感到自在舒适。

使用熟悉易懂的单词和短语

科技可以让人感到害怕。避免使用用户可能不理解的或是技术术语。根据你对用户的了解来决定哪些单词和短语是合适的。总的来说,能够吸引每个人的应用是不应包含深奥的技术语言的。这类语言比较适合针对高端或是技术用户的应用。

保持界面文本的清晰和简洁

用户能够快速且轻易地理解短而直接的文本,他们不喜欢在完成任务时被强迫去阅读很长的文本。找到最重要的信息,简洁地陈述它,然后突出地展示它,这样用户就不需要为了知道他们在找什么或是下一步该做什么而阅读太多信息。

避免使用让人听起来很傲慢的语言

避免使用“我们”,“我们的”和“我的”(比如“我们的教程”和“我的锻炼”)等字段。他们有时候被理解为无礼或是傲慢的。

尽量使用日常且友好的语气

一个日常亲近的风格就类似你在和别人吃午饭时聊天的语气。偶尔使用简写,并使用“你”和“你的”来直接与用户对话。

请谨慎使用幽默

记得用户可能会多次阅读你界面上的文字,而那些第一次看起来很俏皮的文字可能在多看几次之后会显得恼人。同样记住在一种文化中的幽默方式可能并不适用于其它文化。

使用相关且一致的语言和图像

确保引导在当前环境中总是合适的。如果某人在使用iPad,那么久不要给他展示与iPhone相关的文字和图片。根据平台选择使用相符的语言。你在触摸屏上点击、滑动、横扫、捏合或者拖曳对象。你按压物理按钮,或者按压对3D触摸作出反应的对象。你旋转和摇晃设备。

提供精确的日期

使用今天、明天这类友好的词语是合理的,但是如果你没有详细说明当前的位置,那么这些词语就会令人困惑或是显得不够精确。请考虑一个在午夜12点前发生的事件。在某个时区,这个事件可能发生在今天。但是在另一个时区,同样的事件可能在昨天就已经发生了。总而言之,日期应该体现出正在查看事件的用户所在的时区。然而,在某些情况下,比如一个跟踪航班状态的应用内,明确地显示起飞地区的日期和时区才更加清楚。

恰当地指出可交互的元素

用户应该瞥一眼就能知道这个元素是什么用的。当给按钮或是其它可交互元素标记时,使用操作动词,比如连接、发送和添加。

2.16 撤销和重做(Undo and Redo)

很多的应用都允许用户通过摇晃设备来撤销或是重做某个操作,比如打字或是删除。当该撤销和重做通过摇晃被触发时,会出现一个提示框,询问用户是要撤销(重做)操作还是什么都不执行。

【汉化版】 IOS 10人机界面设计指南(完结版)

简明扼要地描述将要被撤销或是重做的操作

撤销和重做的提示框标题会自动地包含“撤销”或是“重做”这样的前缀(以及后面的空格)。你需要在前缀后面提供额外的一两个词语用来形容什么会被撤销或是重做。比如,你可以创建一个提示框标题叫做“撤销命名”或者“重做地址更改”。

如果你已经把摇晃手势用来撤销和重做,那么就不要把它用于其它操作

即使你能通过编程赋予摇晃手势不同的意义,但同时你也冒着很大的风险使用户困惑,并让你的应用变得不可预知。

节制地使用撤销和重做按钮

如果在应用中为执行相同任务提供多种途径便会让人困惑。如果你的应用真的需要专门的撤销和重做按钮,那么请使用系统提供的标准按钮并且把它们放在一个符合预期的位置,比如导航栏。

只在当前情境中执行撤销和重做操作

撤销和重做必须对当前的(而非之前的)情境有明确直接的影响。

了解更多实现方法,请参阅Undo Architecture

5. 图像(Graphics)

  • 5.1 应用图标(App Icon)
  • 5.2 自定义图标(Custom Icons)
  • 5.3 图片大小和分辨率(Image Size and Resolution)
  • 5.4 启动画面(Launch Screen)
  • 5.5 系统图标(System Icons)

6. UI 栏

  • 6.1 导航栏(Navigation Bars)
  • 6.2 搜索栏(Search Bars)
  • 6.3 状态栏(Status Bars)
  • 6.4 标签栏(Tab Bars)
  • 6.5 工具栏(Toolbars)

5.1 应用图标(App Icon)

每个app都需要一个精美、令人印象深刻的图标,能在苹果商店和主屏幕夺人眼球。轻瞥图标的瞬间,是你的第一个机会来传达你的app的目的。你的图标也会在系统中经常出现,比如在设置里和在搜索结果里。

【汉化版】 IOS 10人机界面设计指南(完结版)

拥抱简洁。寻找个单一的元素能够表现你的app的精髓,然后通过一个简单但是独特的形状来表现这个元素。谨慎地添加细节部分。如果一个图标的内容或是形状过于复杂,那么细节就很难辨认了,尤其是在更小的尺寸时。

提供一个单独的焦点。为图标设计一个单独的、集中的点,使它能快速吸引注意力并且明确地代表你的app。

设计一个易于辨识的图标。用户不应通过分析图标才能弄清楚它代表什么。比如,邮件app的图标使用了一个信封,因为它普遍与邮件联系在一起。花点时间去设计一个好看迷人且精炼的图标,艺术性地传达你的app的目的。

让背景简单并且避免使用透明度。确保你的图标是不透明的,并且不要让背景变得杂乱。使用一个简单的背景,这样它就不会过度影响周围的其它图标。你没有必要将整个图标填满内容。

只有当logo全部或部分由文字组成时,才在图标使用文字。在主屏幕时,一个app的名称会在图标之下显示。不要包含没有意义的文字重复说明名称或是告诉用户该如何使用你的app,比如“Watch”或“Play”。如果你的设计包含了一些文字,那么请强调文字与你的app提供的实际内容相关。

不要包含照片、屏幕截图或是界面元素。影像细节在很小的尺寸会难于辨认。屏幕截图对于一个app图标来说太复杂了,也一般不利于传达app的目的。在图标中的界面元素会令人误解并且困惑。

不要复用Apple硬件产品的图形。Apple产品受版权保护,不能在你的图标或是图片中被二次创作。一般来说,避免复用设备的图形,因为硬件设计频繁地更新换代,这会导致你的图标看起来易于过时。

不要在界面里到处放置app图标。在app里发现一个图标用于多种目的会让人困惑。反之,考虑使用图标的色彩方案。请参阅 Color

在不同的壁纸下测试你的图标。你不能预期用户会为他们的主屏幕选择什么样的壁纸,所以不要只是在一种深色和一种浅色的背景上测试你的图标。而是观察它在不同的照片上如何表现。在有动态背景的真实设备上试用它,因为背景会随着设备移动而改变视角。

保证图标的四角是方的。系统会自动覆盖一个遮罩层让图标变成圆角。

App 图标大小

每一个app都必须提供一大一小两个app图标。

小图标会出现在主屏幕,并且当你的app被安装后会被系统使用。

为不同的设备提供不同尺寸的小图标。确保你的app图标在所有支持的设备上都看起来很棒。

【汉化版】 IOS 10人机界面设计指南(完结版)

大图标会被用在苹果商店。

【汉化版】 IOS 10人机界面设计指南(完结版)

让小图标与大图标类似。尽管大图标有着与小图标不同的用途,但它终究是你的app图标。大图标一般都和小的看起来差不多,但是可以稍微丰富一些,更有细节,因为不会有任何视觉效果叠加在它上面。

Spotlight和设置图标

每个app都应提供一个小图标,在Spotlight搜索,如果关键词与app名称相符,iOS会展示该图标。同时,需要设置的app同样应该提供一个小图标用于在系统内置的设置app中展示。两个图标都应该清晰标识你的app——更理想地,它们应该与app图标相符。如果你不能提供这些图标,iOS就会压缩你的app主图标展示在上述场合中。

【汉化版】 IOS 10人机界面设计指南(完结版)

不要对用于设置的图标叠加或是描边。iOS会自动为所有图标加上1个像素的描边,以确保它们很好地呈现在设置白色的背景上。

TIP:

如果你的app能创建自定义文档,你无需额外设计文档图标,因为iOS会利用你的app图标自动创建文档图标。

5.2 自定义图标(Custom Icons)

如果你的app含有不能用系统图标表示的任务或模式,又或是系统图标与你的APP风格不符,你可以设计你自己的图标。自定义图标通常被叫做模板,它不含有色彩信息并且通过mask来创建你在导航栏、标签栏、工具栏或是主屏幕快速操作视图看到的图标样式。

【汉化版】 IOS 10人机界面设计指南(完结版)

创作简单、辨识度高的设计。太多的细节会让图标看起来粗糙且不具可读性。为一个大多数用户都能正确理解并且不会反感的设计而努力。

设计一个纯色并带有透明度的、无锯齿、无阴影的图标。iOS会去除所有的色彩信息,所以没必要使用多于一种的填充颜色。允许用透明度来定义图标的形状。

使你的自定义图标与系统图标有所区分。你的图标不能轻易地与某个系统图标混淆。如果你想让你的图标看起来与iOS图标家族相似,请使用非常细的描边去绘制它。1pt的描边适用于大多数图标(在@2x分辨率下使用2px)。

保持图标之间一致连贯。无论你只使用自定义图标或是混合使用自定义图标和系统图标,在app中的所有图标都应该在大小、细节程度、透视和描边粗细上保持一致。

提供两种自定义标签栏图标的版本。为未选中和选中态提供两个图标。选中态的图标经常是未选中态图标的填充版本,但是某些设计会使用不同的方法。比如,苹果的原生app经常会将内部细节反过来填充,增粗或减细描边,以及把图标放在譬如圆形的形状内。

【汉化版】 IOS 10人机界面设计指南(完结版)

不要在自定义标签栏图标内包含文本。如果你需要展示文本,请在标签下面直接加上标题并且适当调节位置。

不要复用Apple硬件产品的图形。Apple产品受版权保护,不能在你的图标或是图片中被二次创作。一般来说,避免复用设备的图形,因为硬件设计频繁地更新换代,这会导致你的图标看起来易于过时。

自定义图标尺寸

【汉化版】 IOS 10人机界面设计指南(完结版)

5.3 图片大小和分辨率(Image Size and Resolution)

iOS通过坐标系在屏幕上放置内容。该坐标系以点为测量单位,这些点映射到显示器中以像素表示。在一个标准分辨率的屏幕中,1点(pt)(1英尺的72/1)等于一个像素(px)。高分辨率屏幕有更高的像素密度。因为在相同的物理空间内有了更多数量的总像素,所以平均每点有了更多的像素。因此,高分辨率的显示屏需要像素更多的图片。

【汉化版】 IOS 10人机界面设计指南(完结版)

你必须为你的app支持的设备提供所有的高分辨率图像。依据设备的不同,将每张图像的固有像素乘以相应的比例系数,就可以得到该设备所适配的分辨率。一张标准分辨率的图像对应的比例系数为1.0,并被称为@1x图片。高分辨率的图像对应的比例系数为2.0或是3.0,并被称为@2x 和@3x图片。

打个比方,假设你有一张标准分辨率(@1x)的图片,它的分辨率为100px*100px。那么,这张图片的@2x版本就是200px*200px,@3x版本就是300px*300px。

为不同设备准备图片时请参照以下比例系数。

【汉化版】 IOS 10人机界面设计指南(完结版)

5.4 启动画面(Launch Screen)

启动画面出现在app刚开始启动时候。随后,启动画面会很快被app的首屏代替,让人感觉你的app是快速响应的。启动画面不是一个炫技的时机,它只是为了增强用户对你的app能够快速启动并且立即被使用的感受。每个app都应该提供一个启动画面。

【汉化版】 IOS 10人机界面设计指南(完结版)

△ 启动画面

【汉化版】 IOS 10人机界面设计指南(完结版)

△ 首屏

因为设备屏幕大小不同,启动画面的大小也有所差异。你可以以Xcode故事板或是一组静态(static)图片的形式为你的app所支持的设备提供启动画面。因为Xcode故事板灵活性高且易于适配,所以推荐采用该形式。你可以使用一个单独的故事板来管理你的所有启动画面。了解关于可适配界面的开发细节,请参阅 Auto Layout Guide

设计一个与你的app首屏几乎相似的启动画面。如果你的启动画面包含了与首屏看起来不同的元素,那么用户会在启动画面过渡至app首屏时经历一次不愉快的跳转体验。

避免在启动画面包含文本。因为启动画面是静态的(static),任何展示的本文都不能被定位。

淡化启动。用户通常会在不同的app之间频繁切换,所以请设计一个启动画面,能够让app的启动体验不易被人察觉。

不要打广告。启动画面不是一个宣传品牌的时机。不要设计一个类似开屏广告或是介绍窗口的登入体验。不要在启动画面包涵logo或是其它品牌元素,除非它们是你的app首屏的静态(static)元素。

静态启动画面图片

最好使用Xcode故事板制作启动画面,但必要时你也可以提供一组静态图片。根据设备创建不同尺寸的静态图片,并不要忘记包涵状态栏区域。

【汉化版】 IOS 10人机界面设计指南(完结版)

5.5 系统图标(System Icons)

iOS提供了大量表示常用的任务和内容类型的小图标,用来在导航栏、标签栏、工具栏和主屏幕快速操作中使用。因为用户对这些图标很熟悉,所以最好尽可能地使用这些内置的图标。

导航栏和工具栏图标

TIP:你可以在导航栏和工具栏使用文本代替图标来表示某项。比如,日历app在工具栏使用“今天”、“日历”和“收件箱”三个字符。你还可以使用固定空间(fixed space)元素为导航栏和标签栏的图标提供间距。

【汉化版】 IOS 10人机界面设计指南(完结版)

△ 了解开发细节,请参阅UIBarButtonItem

标签栏图标

【汉化版】 IOS 10人机界面设计指南(完结版)

△ 了解开发细节,请参阅UITabBarItem

快速操作图标

【汉化版】 IOS 10人机界面设计指南(完结版)

△ 了解开发细节,请参阅 UIApplicationShortcutIcon

6.1 导航栏(Navigation Bars)

导航栏出现在app屏幕的顶部,状态栏之下,它能实现在一系列有层级的app页面间的导航。当进入一个新页面时,导航栏的左侧会出现一个返回按钮,并且一般会标有上一个页面的标题。有时,导航栏右侧还有含有类似编辑或完成按钮的控件,用来管理当前视图的内容。在分屏视图内,导航栏可能只会出现在分屏视图的一个单独窗格。导航栏是半透明的,也可能会有一个背景颜色,并且在适当时可以被隐藏,比如当前屏幕有键盘时、施加了某手势时或是某个视图在调整大小时。

【汉化版】 IOS 10人机界面设计指南(完结版)

TIP:当不需要导航或是你需要多个控件来管理当前内容时,请使用工具栏。请参阅 Toolbars

考虑在导航栏显示当前视图的名称。在大多数情况下,名称提供了环境,因为它让用户知道他们在看什么。但是,如果给导航栏命名看起来是多余的,你可以让名称栏空着。比如,备忘录(Notes)不会在当前笔记的导航栏上放名称,因为内容的第一行已经提供了所需的环境线索。

考虑在app最高层级的导航栏放置一个分段控件。如果这么做帮助你扁平信息层级,让用户更容易找到他们想要的内容,你会深受其益。如果你在导航栏使用了分段控件,请确保为返回按钮选择了正确的标题。了解更多指导,请参阅 Segmented Controls

不要包涵多段的面包屑路径。返回按钮只能执行一个单独的操作,即返回到上一屏。如果你认为用户可能会因为忘记到达当前屏的完整路径而迷路,请考虑扁平你的app层级。

避免用过多控件填充导航栏。一般来说,导航栏最多只能包含当前视图的标题、返回按钮以及一个管理当前视图内容的控件。如果你在导航栏使用了分段控件,除此之外,该栏就不应再包含标题或其它控件。

给文本按钮留出足够的空间。如果你的导航栏含有多个文本按钮,文本可能会让多个按钮看起来像是同时运行的,导致按钮间难以区分。在按钮之间插入固定空间项使它们隔开。了解开发细节,请参阅 UIBarButtonItem Class Reference中的UIBarButtonSystemItemFixedSpace constant value。

考虑在显示全屏内容时暂时隐藏导航栏。当你想要关注内容时,导航栏会令人分心。暂时隐藏该栏以提供一个更加沉浸式的体验。地图app在浏览一个全屏地图时会隐藏导航栏及其它界面元素。如果你要隐藏导航栏,允许用户通过简单的手势复原导航栏,比如点击。

使用标准的返回按钮。用户已经知道,标准的返回按钮会让他们在信息层级中按原路径返回。但是,如果你使用了自定义的返回按钮,请确保它们看起来像是返回按钮,有直观的表现,和界面的其它部分保持一致,并且在app内统一使用该自定义按钮。如果你用自定义图片替换了系统提供的返回按钮,请同时提供一个自定义遮罩图片(custom mask image)。iOS使用这个遮罩来实现按钮标题在转场时的过渡动画。

了解开发细节,请参阅 UINavigationBar Class Reference

6.2 搜索栏(Search Bars)

用户通过搜索栏在大量的信息中查找。搜索栏有两种样式:显眼(prominent)(默认)和极简(minimal)。“通讯录”使用了显眼搜索栏,含有引人注目的浅色背景。“照片”使用了极简样式,更好地融入了周边界面。搜索栏默认是半透明的,但也可以被设置成不透明的。有需要时,搜索栏也可以自动遮盖住导航栏。

【汉化版】 IOS 10人机界面设计指南(完结版)

△ 显眼

【汉化版】 IOS 10人机界面设计指南(完结版)

△ 极简

搜索栏含有一个单独的搜索框,该搜索框可以包含占位文本、清除按钮、书签按钮和结果列表按钮。除了搜索框之外,搜索栏还会含有一个退出当前搜索的取消按钮。

【汉化版】 IOS 10人机界面设计指南(完结版)

△ 占位文本

【汉化版】 IOS 10人机界面设计指南(完结版)

△ 清除按钮

【汉化版】 IOS 10人机界面设计指南(完结版)

△ 取消按钮

【汉化版】 IOS 10人机界面设计指南(完结版)

△ 书签按钮

【汉化版】 IOS 10人机界面设计指南(完结版)

△ 结果列表按钮

让用户通过搜索栏而不是文本框去搜索。文本框不具备用户期待的标准搜索栏所拥有的外观特征。

包含清除和取消按钮。大部分的搜索栏都含有一个清除按钮用来清空输入栏的内容,以及一个取消按钮来快速退出搜索。

选择合适的搜索栏样式,使其能够反映出搜索功能在你的app中的价值。如果在你的app中搜索是个关键功能,使用默认的、显眼搜索栏样式。如果搜索功能使用频率不高,则使用极简样式。

必要时,在搜索栏提供线索和背景。搜索框可以包含占位文本来提示可搜索的类型,比如“搜索服装、鞋子和饰品”或只是简单的“搜索”二字。也可以在搜索栏正上方展示一行简明扼要的带有适当标点的文字,用来引导用户。比如股票(Stocks),就在搜索框上方展示了一行文本告知用户他们可以输入公司名称或股票符号。

【汉化版】 IOS 10人机界面设计指南(完结版)

考虑在搜索栏下方提供快捷键之类的内容。利用搜索栏下方的区域帮助用户更快地获取内容。比如浏览器(Safari),在你点击搜索框的时候会立即显示你的书签,无需输入任何关键词的情况下即可进入选择的对象。股票app在你对搜索栏输入的时候,会一边在下方展示相关的结果列表,你可以在列表中点击选择而不用完整输入字符。

必要时,为搜索栏添加书签和结果列表按钮。利用书签按钮让用户能够快速获得他们可能需要再次查找的信息,比如保存的、上一个或是最近的搜索记录。使用结果列表按钮来暗示搜索结果的存在,并在用户点击按钮的时候显示这些结果。但你无法同时展示上述两个图标。

了解开发细节,请参阅 UISearchController 和 UISearchBar

范围栏(Scope Bars)

【汉化版】 IOS 10人机界面设计指南(完结版)

范围栏可以附加于搜索栏,让用户定义搜索的范围。范围栏采用和搜索栏一样的外观。

专注于优化搜索结果而不是一味添加范围栏。当用户想在定义明确的类别中搜索时,范围栏会有很大的帮助。但是,更好的做法是优化搜索结果,这样用户就无需通过范围栏进行筛选了。

了解开发细节,请参阅 UISearchBar

6.3 状态栏(Status Bars)

状态栏在屏幕的顶端出现,显示与设备当前状态相关的有用信息,比如时间、运营商、网络状态以及电池容量。状态栏上真正显示的信息根据不同的系统设置有所变化。

使用系统提供的状态栏。用户希望状态栏在系统内部保持一致。不要用自定义的状态替换掉它。

【汉化版】 IOS 10人机界面设计指南(完结版)

△ 明

【汉化版】 IOS 10人机界面设计指南(完结版)

△ 暗

根据你的app设计选择协调的状态栏颜色。状态栏的文本和指标的视觉样式非明即暗,在你的app中,可以统一使用一种配色,或是根据不同的屏幕选择单独的配色。暗色系的状态栏在浅色的界面上效果好,浅色系的状态栏在深色系的界面上效果好。

遮盖状态栏下方的内容。状态栏的背景默认是透明的,这样会显示出状态栏下方的内容。既要保证状态栏的可读性,又不能让人误解下方的内容是可交互的,通常通过以下几种技巧来实现:

  • 在你的app中使用导航栏,它会自动显示状态栏背景以保证状态栏下方不会出现任何内容。
  • 在状态栏下方放置一张自定义图片,比如渐变或纯色背景。
  • 对状态栏下方的内容进行模糊处理。

【汉化版】 IOS 10人机界面设计指南(完结版)

△ 半透明

全屏展示媒体文件时考虑暂时地隐藏状态栏。当用户想要集中注意力在媒体上时,状态栏会令他们分心。暂时地隐藏状态栏元素能够提供一个更加沉浸式的体验。比如照片app,在用户全屏浏览照片时时会隐藏多余的界面元素。

避免永久地隐藏状态栏。在没有状态栏时,用户需要退出你的app去查看时间或是检查他们是否连接至Wi-Fi。允许用户可以通过简单、易于发现的手势来重新唤醒被隐藏的状态栏。在照片app中浏览全屏照片时,用户只需在屏幕上轻点即可呼出状态栏。

在状态栏显示耗时较长的网络活动状态。当你的app在使用网络,尤其是耗时较长的操作时,显示网络活动状态栏指示器,这样用户就知道活动正在进行中。请参阅Network Activity Indicators

了解开发细节,请参阅UIApplication中的UIStatusBarStyle constant 和UIViewController中的preferredStatusBarStyleproperty。

6.4 标签栏(Tab Bars)

标签栏在app屏幕底部出现,提供了在app不同部分间快速切换的途径。标签栏是半透明的,也可能会有纯色背景,在横竖屏都保持一致的高度,并且在出现键盘时会被隐藏。一个标签栏可以包含无数个标签,但其所能容纳的可见的标签数量根据设备大小和横竖屏模式有所变化。受水平空间的限制,当某些标签无法被显示时,最后一个可见的标签会变成“更多”, 并通过该入口前往其余标签列表的另一屏。

一般来说,利用标签栏组织应用程序级别的信息。标签栏是扁平化信息层级的好办法,并且一次性提供了前往多个平级信息类别或模式的途径。

【汉化版】 IOS 10人机界面设计指南(完结版)

不要在某个标签的功能不可用时去掉该标签或是使其失效。如果标签时而可用时而不可用,你的app界面会变得不稳定和难以捉摸。确保所有的标签都是有效可点击的,并且向用户解释当前标签内容不可用的原因。比如,当本iOS设备没有歌曲时,音乐app的“我的音乐”标签页就对如何下载歌曲做出了说明。

标签栏只能作为导航。标签栏按钮不应该执行其它操作。如果你需要在当前视图提供作用于元素的控件,你可以使用工具栏。请参阅Toolbars

避免太多的标签。每增加一个标签就减小了选择单个标签的可触区域,并且增加了app的复杂性,让用户更难找到所需的信息。尽管“更多”标签可以展示额外的标签项,但这需要额外的点击步骤,并且对标签栏的有限空间没有很好的利用。太少的标签也是个问题,它会让你的界面感觉被分离。一般来说,在iPhone上使用3至5个标签,在iPad上则可稍微多几个。

使角标(badge)低调地传达信息。你可以在标签上展示角标——一个带有白色数字或感叹号的红色椭圆——来暗示该标签视图或模式含有新信息。

总是在与标签栏相连接的视图切换内容。为了让你的界面符合用户预期,选择一个标签后应该直接作用于与标签栏相连接的视图,而不是屏幕其它范围的视图。比如,在分屏视图(split view)的左侧选择了一个标签,是不会导致右半部分突然变化的。在弹窗(popover)选择一个标签页不会导致下方的视图发生改变。

了解开发细节,请参阅 UITabBar

TIP:

理解标签栏和工具栏之间的不同十分重要,因为这两种栏都是出现在app屏幕的底部。标签栏让用户在app的不同部分间快速切换,比如时钟app中的“闹钟”、“秒表”、“计时器”。工具栏包含了执行当前视图相关操作的按钮,比如创建项、删除项、添加注释或是拍照。请参阅Toolbars。标签栏和工具栏决不会在同一个视图内同时出现。

6.5 工具栏(Toolbars)

工具栏在app屏幕底部出现,包含了执行当前视图或包含内容相关操作的按钮。工具栏是半透明的,也可能会有纯色背景,并且通常在用户不太需要它们时被隐藏。比如,在浏览器(Safari)中,当你滚动页面表明你再阅读时,工具栏就藏起来了。当你在屏幕底部点击时,工具栏又会再次出现。当前屏幕有键盘时,工具栏也会被隐藏。

提供相关的工具栏按钮。工具栏必须包含在当前环境下有意义的常用操作命令。

【汉化版】 IOS 10人机界面设计指南(完结版)

考虑图标或文字按钮是否适合你的app。当你需要多于三个工具栏按钮时,图标可以实现。当你只有三个或是更少的按钮时,文字有时候看起来更加清楚。比如,在日历app中,文本就被当作按钮使用,因为图标可能会令人迷惑。因为使用了文本,“Inbox”按钮还能显示所有的日历和事件邀请数量。

【汉化版】 IOS 10人机界面设计指南(完结版)

给予文本按钮足够的空间。如果你的工具栏含有多个按钮,文本按钮就会挤在一起,导致按钮间难以区分。在按钮之间插入固定间距使其分离。了解开发细节,请参阅UIBarButtonItem中的UIBarButtonSystemItemFixedSpaceconstant value。

避免在工具栏使用分段控件。分段控件让用户切换内容,而工具栏更针对于当前屏幕。如果你需要提供切换内容的方式,请考虑使用标签栏替代。请参阅Tab Bars

了解开发细节,请参阅 UIToolbar

  • 【汉化版】 IOS 10人机界面设计指南(完结版)已关闭评论
    A+
发布日期:2016年09月16日  所属分类:产品经验