译者注：本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日)，由腾讯ISUX设计师翻译整理，非发文者一人之做。译文首发于ISUX博客，如在阅读过程当中发现错误与疏漏之处，欢迎不吝指出。后续章节会陆续更新，敬请期待。html

2.1 设计原则(Design Principles)

2.1.1 美学完整性(Aesthetic Integrity)

美学完整性不评判应用的视觉设计，也不是用来描述应用的风格特征。美学完整性是指在一款应用的视觉表现和交互行为与功能结合后所传达出的总体一致性。ios

人们关心应用是否提供了应有的功能，可是也会潜移默化甚至是很直接地被应用的视觉表现和交互行为所影响。举个例子，一款协助用户完成任务的应用，能够经过使用精美而又无干扰的装饰性元素、标准的控件和可预期的交互行为很好地帮助用户聚焦在任务自己上。这样，应用就能传达出清晰而一致的信息，使得人们信任它。可是，若是应用使用干扰的、琐碎的或随意的UI来呈现任务，那么人们可能会对其可靠性和可信赖度产生怀疑。浏览器

另外一方面，在沉浸式应用中—例如游戏—用户期待惊艳的视觉表现，为用户带来乐趣和刺激，并鼓励用户进行探索。用户不是要在游戏中完成严肃的或程序式的任务，他们更期待游戏的视觉表现和交互行为与当前的目的进行整合。app

2.1.2 一致性(Consistency)

一致性可让人们在一款应用中的不一样部分甚至不一样应用间复用使用一样的认知和技能。一款具有一致性的应用不该盲从地复制其余应用，也不该在风格上一成不变。相反，它们专一于让人们以为温馨的标准和范例，并提供应用内部统一的体验。ide

在判断一款iOS应用是否要遵照一致性原则时，请思考以下问题：工具

• 应用是否和iOS标准一致？是否正确地使用了系统提供的控件、视图和图标？是否按照用户所预期的方式整合了设备的特性？
• 应用是否内部统一？文案是否使用了一致的措辞和风格？一样的图标是否表意相同？在不一样的位置执行一样的操做时，人们是否能能预期会发生什么？应用中自定义的UI元素是否在外观和行为上保持一致？
• 应用是否和先前的版本保持一致？条款和意义是否保持不变？基本概念和主要功能是否发生了变化？

2.1.3 直接操做(Direct Manipulation)

当人们再也不使用一堆控件进行操做，而是直接在屏幕上操做对象时，他们能更集中精力完成任务，也更容易理解这些行为所产生的结果。post

使用多点触摸界面，人们能够经过捏合操做来直接放大和缩小图片或文本内容。在游戏中，玩家能够直接与屏幕上的对象进行交互。例如，游戏中可能会显示密码锁，用户能够经过转动它来打开。学习

在一款iOS应用中，以下状况中人们应该可以进行直接操做：测试

• 旋转或者移动设备来影响屏幕上的对象
• 使用手势来操做屏幕上的对象
• 显示即时可视的操做反馈

2.1.4 反馈(Feedback)

反馈能够明示人们的行为，呈现操做结果，并更新于任务进程之中。动画

 

iOS内置的应用对用户的每一个行为都提供了可感知的反馈。当人们点击列表项和控件时，它们会被临时高亮，并会在操做过程当中持续一段时间，以此展现控件被执行的过程。

精细的动画会给人们带来有意义的反馈，帮助阐明行为的结果。例如，列表中新增一项时的动画能够从视觉上帮助人们发现列表的变化。

音效一样能够为人们提供有效的反馈，但不该成为惟一的反馈方式，由于人们不必定能听到。

2.1.5 隐喻(Metaphors)

当应用中的虚拟对象和交互行为与用户已经熟悉的体验类似时—不管这些体验是来源于真实或数字生活—用户就能够快速地掌握如何来使用这个应用。

当应用使用隐喻来传达某种用法或体验时，最好不要让隐喻突破所依赖的对象或交互行为自己的限制。(译者注：此处可理解为对于隐喻的使用应量力而为，不要过于牵强。)

因为人们其实是和屏幕进行物理上的交互，因此iOS应用有很大的余地来使用隐喻。iOS中的隐喻包括：

• 移动分层视图来显示被遮挡的内容
• 拖曳、轻扫和滑动游戏中的对象
• 点击开关，滑动滑块，转动选择器
• 轻扫来翻阅书本或杂志

2.1.6 用户控制(User Control)

是人—而不是应用—发起和控制行为。应用能够对用户进行操做建议，对有危害的后果予以警示，可是不该替用户来作决策。好的应用会在用户须要时给予帮助和避免没必要要的结果之间做出平衡。

当对应用的交互行为和控件都较为熟悉和可预期时，用户会以为应用更易上手。那些简单直白的交互行为更容易被用户所理解和记住。

人们会但愿在一个操做被执行以前有足够的机会来取消，也但愿在执行一个不可逆的操做以前能够有机会来进行确认。最后，人们还会但愿可以中止正在执行中的操做。

 

2.2 从概念到产品(From Concept to Product)

2.2.1 定义应用(Define Your App)

应用的定义是对应用主要功能和目标用户的简明具体的描述。

尽量早的建立应用的定义能够帮助你将一个想法和功能清单转换为用户想要的条理清晰的产品。在开发过程当中，可使用定义来决定某些功能和行为是否合理。使用如下几个步骤来建立一个可靠的应用定义。

1.列出全部你认为用户可能喜欢的功能

能够直接进行头脑风暴。此时，你须要列出全部与产品核心想法有关的任务。不用担忧清单太长，由于接下来会进行删减。

假设你一开始的想法是开发一个帮助人们购买食品杂货的应用。你能够思考在进行这项活动时，会涉及到那些相关的任务，这些就是用户可能感兴趣的潜在功能。例如：

• 建立清单
• 查找食谱
• 比较价格
• 定位商店
• 给食谱作注释
• 查找并使用的优惠劵
• 查看烹饪演示
• 探索不一样的烹调方法
• 寻找某些食材的替代物

2.肯定目标用户

如今你须要清楚的将你的应用用户与其余iOS用户区分开来。肯定在此情此景下，什么是对你的用户最重要的。在食品杂货例子中，你可能须要问问你的用户：

• 一般是在家里作饭仍是更喜欢现成的食物
• 是忠实的优惠券用户仍是认为优惠券没多大价值
• 喜欢寻找特别的食材仍是喜欢基本食材
• 严格的按照食谱作菜仍是只把食谱当作灵感来源
• 喜欢少许屡次购买仍是一次性购买大量食物
• 但愿能保留多个不一样目的的购物清单仍是只但愿记录回家路上须要购买的几个东西
• 坚持使用固定的品牌仍是会使用方便的替代品
• 习惯于购买固定的一些物品仍是会按照食谱来购买

思考过这些问题以后，假设你能够提取出目标用户的三个特征：喜欢按照食谱进行尝试，时常很匆忙，一般状况下比较节俭。

3.根据目标用户过滤功能清单

若是在肯定了一些用户特征后，你最终获得几个主要功能，恭喜你在作正确的事情：好的iOS应用应该是高度聚焦在能帮用户完成的任务上的。

例如，即便第一步想出的那些可能须要的功能都是有用的，也不必定是第二步定义的目标用户须要的。

当你在目标用户的使用情境下检查功能清单时，就能够判断你的应用应该聚焦在三个主要功能上：建立清单，得到并使用优惠劵，得到食谱。

此时你就能够给出应用定义了，总结该应用为谁作和作什么。食品杂货购买应用的定义可能以下：

“为热爱烹饪且节俭的用户订制的建立购物清单工具。”

4.不止于此

应用定义应该贯穿于整个开发过程，使用应用定义肯定功能，控件，措辞的合理性。例如：

当你想要新增一个功能时，问问本身这对应用的主要目的和目标用户是否很是重要。若是不是，能够置之不理。例如，你已经肯定了你的用户对大胆新颖的烹饪方法感兴趣，那么着重展现盒装蛋糕和现成的食物就不太合适。

当你考虑用户界面的外观和操做时，问问你本身你的用户更喜欢简单的、流线型的风格，仍是有明显主题的风格。以用户目标为指导，理解用户指望经过你的应用完成什么，例如快速找到答案，找到深刻而全面的内容或者娱乐。例如，尽管你的食品杂货清单应用须要易于理解和快速上手，但你的用户仍是可能倾向于一个有关食物的主题界面。

当你考虑应该使用怎样的措辞时，考虑用户在这个领域的专业程度。例如，尽管你的用户可能不是由专业的大厨组成，但你也能够确定他们但愿看到有关食材和技术专用的措辞。

2.2.2 为任务量身订制界面(Tailor Customization to the Task)

最好的iOS应用根据清晰的目标和易用性来平衡用户界面的设计。为了达到这种平衡，要确保在设计阶段前期就考虑定制化。由于考虑品牌性，原创性和适销性一般会影响定制化的决策，因此专一于定制化怎样影响用户体验是难的。

开始考虑应用中的任务：用户执行这些任务的频率如何，在什么样的环境下进行？

举个例子，想象一个计算器应用使用的是精心设计的，充满艺术感的风格，而且使用了创新的层级去显示你们熟悉的计算元素。这像艺术品同样的细节渲染和创新层级并不会影响用户去理解怎样点击按钮和查看计算结果。可是对于只是简单的须要完成工做的用户，这种新奇的体验和美丽的界面很快就会失去效用，而且可能成为一种妨碍。

相反，随身录音室应用(GarageBand)能够不展现好看的、逼真的乐器来帮助用户制做音乐，但这样会使应用缺乏身临其境的愉悦感。在随身录音室里，界面不仅是向用户展现了如何使用，一样使得制做音乐的主任务更容易完成。

当你思考定制化如何加强或减弱用户完成任务的注意力时，记住如下几点：

定制总要有原因。理想状况下，定制化的用户界面能促进用户完成任务并加强他们的体验。你最好尽量的用任务驱动定制化决策。

尽可能避免增长用户的认知负担。用户对标准界面元素的外观和行为都已经很熟悉了，因此他们不用停下来思考如何使用它们。当用户面对外观和行为与标准不一样的元素时，他们就失去了经验的优点。除非你的独一无二的元素可以使任务更容易完成，不然用户极可能不喜欢被强制学习一些在其余应用都不通用的步骤。

保持内部的一致性。你的应用中自定义元素越多，保持这些元素外观和行为的一致性就越重要。若是用户花费时间去学习了你建立的那些不熟悉的控件，那么他们会但愿新学到的这些操做可以在整个应用中通用。

老是之内容为重点。由于标准元素很熟悉，因此它们不会分散用户在内容上的注意力。当你自定义用户界面时，注意确保界面元素不会抢走用户对内容的注意力。例如，若是你的应用容许用户观看视频，你可能选择设计一个自定义的重播控件。可是无论你用的是自定义仍是标准的重播控件，都没有它是否在用户开始观看后隐藏点击屏幕后出现来的重要。

在对标准控件进行重设计时再三思考。若是你不仅是想自定义标准控件，而是想重设计，确保你的重设计能提供尽量多的信息。例如，你设计了一个开关控件，它没有能够指明相反状态存在的信息，那么用户极可能意识不到这是个有两个状态的控件。

必定要完全测试自定义的界面元素。在测试过程当中，近距离的观察用户是否能预测你的元素如何使用以及是否能容易的与它们交互。例如，若是你建立的控件的可点击区域小于44 x 44像素，用户点击时就会有困难。或者若是你建立了一个视图对点击和滑动的反馈不同，确保这个视图提供的功能值得用户去额外关注交互的不一样。

2.2.3 原型 & 迭代(Prototype & Iterate)

在你投入工程资源实现设计以前，最好先建立原型来进行用户测试。即便只有几个同事来帮你测试原型，你也会收获一些关于应用功能和用户体验的新鲜观点。

在设计的早期阶段，你可使用纸质的原型或者线框图去呈现主要的视图和控件，而且标明每一个页面之间的跳转关系。你能够从线框图测试中得到一些有用的反馈，可是线框图的稀疏性有可能会误导用户。由于用户很难想象当线框被实际内容填满时体验会有什么样的变化。

若是你有一个能够在设备上运行的原型，那你能够获得更多有用的反馈。当用户能在设备上与你的原型进行交互时，他们能更容易的发现应用中哪里功能不知足预期，哪里体验过于复杂。

建立可靠原型的最简单的方法是使用基于故事版的Xcode模板建立一个基础应用，而后使用一些相似于占位符的内容来进行填充。(故事版能够涵盖应用中的全部界面，而且包括界面之间的跳转关系。)接着，将这个原型导入到设备中，这样被测者就能够有一个尽量真实的体验了。

你不须要在原型中提供大量的实际内容或者使每个控件均可用，可是你确实须要营造足够的情境来保证真实的体验。而且须要在典型用户体验和非典型的边缘状况之间作好平衡。例如，若是你的应用须要处理很长的列表项，你的原型就不能只显示一两个条目。并且在用户测试交互中，只要被测者可以点击屏幕上的一个区域进入到下一个逻辑页面或者完成主任务，那他们就可能提供更有建设性的反馈。

当你使用Xcode应用模板来建立原型时，你能够无偿使用不少功能，而且它能够相对容易的进行设计中的响应反馈调节。在你肯定设计方案并投入资源进行实现以前，应该对原型进行屡次迭代测试。想要开始学习Xcode，请参考Xcode Overview.

 

2.3 案例学习：从桌面到iOS(Case Study: From Desktop to iOS)

2.3.1 iPad版Keynote应用(Keynote on iPad)

桌面版的Keynote 应用是一个十分强大而又灵活的应用，能够建立很是优秀的幻灯片。人们喜好Keynote将简单易用与细粒度的操做结合进而控制无数精确细节的方式，如动画和文本属性等。

iPad版的Keynote提取了桌面版Keynote的核心要素，并经过创造如下的用户体验使它在iPad上更温馨：

• 专一于用户输入的内容
• 经过削减功能下降系统的复杂度
• 提供有用而又使人愉悦的快捷操做
• 延续桌面版本的体验
• 利用动人的动画提供良好的反馈与交流

Keynote用户能很快理解如何使用iPad版，是由于它使用了iPad原生的范例，符合了用户对功能上的预期。新用户能够用简单、天然的方式直接操控内容，因此能够很容易学会如何使用iPad版的Keynote.

Keynote从桌面版向iPad版的转变是基于从细节到总体的大量修改和从新设计的。如下是一些明显的修改：

流线型的工具栏。工具栏中只有少数的元素，可是它们是用户在建立内容时所需的全部功能和工具的统一入口。

简化并优先响应用户焦点的检查器。对于用户所选的须要修改的对象，iPad版的Keynote能自动控制其工具和属性。(译者注：特别是根据当前的操做对象而有限选择某些工具。)一般，人们能够在第一检查器视图中完成他们须要的全部修改操做。若是他们须要修改那些不经常使用的属性，他们能够下拉另外一个检查器视图来进行。

丰富的预设样式集。人们能够利用预设的样式很简单地改变对象(如表格或图表)的外观或者感受。除了颜色以外，每一个集中，例如表格的标题和轴区分标识等的预设属性都被设计得与总体的主题和谐一致。

直接操做内容，丰富有意义的动画。在iPad版的Keynote中，用户能够拖动滑块到一个新的位置，能够扭动旋转一个对象，也能够轻击图片来选中它。iPad版Keynote的响应动画进一步增强了这种可直接操做的印象。例如，用户在移动某个滑块时它一般会暂停，而当它被放置在一个新的位置时，环绕在周围的滑块将会向外扩散给它留出空间。

2.3.2 iPhone版邮件应用(Mail on iPhone)

邮件应用是OS X中一款好用而又广受好评的常见应用。它也是一个很强大的程序，能够容许用户撰写、接收、分类和存储邮件，追踪行动和事件，也能够编写备忘录和邀请等。桌面版的邮件应用经过一系列的窗口提供了这些强大的功能。

iPhone版的邮件专一于桌面版邮件的核心功能，帮助人们接收、撰写、发送和组织他们的信息。为了塑造移动iPhone版的邮件应用，将这些功能浓缩在为其量身定制的界面之中，作了以下的工做：

• 将人们的内容前置和居中的合理化呈现
• 专为处理不一样任务而设计的不一样视图
• 易于浏览并符合认知的信息结构
• 适时提供强大的编辑和组织性工具
• 用微妙且动人的动画来传达动做和提供反馈

必须明白的是，相对于桌面版的邮件应用来讲，iPhone版的邮件应用不是(注：或者说并不须要是)一个更好的应用，而是为移动端用户从新设计的邮件应用。iPhone版的邮件应用专一于桌面版的功能子集并将它们呈如今一个吸引人的精简界面之中，据此为移动端的用户提供了核心的邮件体验。

为了使邮件应用的体验能适应移动场景，iPhone版的邮件应用在几个关键的方面革新了用户界面。

直接、高度专一的页面。每一个页面显示了邮件应用体验的一个方面：帐户列表、邮箱列表、消息列表、消息查看和编辑视图。用户能够在一个屏幕内滑动查看完整的内容。

简单、可预期的导航。经过每屏的一次点击，用户能够逐层展开综合内容(帐户列表)进入具体页面(一封消息)。每一个页面会显示一个标题用以指示用户所在的位置，以及一个返回按钮用以更容易地回溯到他们以前的步骤。

须要时便可获取的、简单的点击性控件。基本上在任何场景之下，编写邮件和查阅新邮件都是人们首要但愿进行的操做，所以iPhone版的邮件应用保证了这两个功能在多个页面中均可以便利地进行。当用户查看一封消息时，就会显示诸如回复、移动和删除等对消息的操做。

针对不一样任务的不一样类型的反馈。当人们删除一封消息时，它会动态地进入垃圾桶图标中。当人们发送一封消息时，能够看到它的发送过程；而当发送结束时，人们能够听到一个特别的声音提示。经过消息列表页面工具栏的副标题，用户经过简单一瞥就能够查看邮箱上次更新的时间。

2.3.3 iOS系统内的网页内容(Web Content in iOS)

iOS版的Safari应用在iOS设备上提供了出众的移动网页浏览体验。人们喜欢阅读清晰的文字和图片，也但愿能经过旋转设备或者捏合和点击屏幕来调整视图。

基于标准创建的网站能够在iOS设备上显示得很好。特别是那些能侦测设备并不须要插件的网站能够同时在iPhone和iPad上都表现得很好，二者之间不会须要太多的修改，即便有也很小。

除此以外，成功的网站应具有如下的特性：

• 若是页面宽度须要匹配设备宽度，能够设置合适的视窗(viewport)来适应设备
• 避免CSS中固定的定位，以便当用户缩放或拖动页面时内容没法被移出屏幕
• 拥有一套基于触控操做的用户界面，而不是依赖基于传统点击操做的交互

有时候，额外的一些修改能够(使页面)更合理。例如，在iOS系统中，不少网页应用会设置合适的视窗(viewport)宽度并一般隐藏Safari的UI。如欲了解如何进行这些修改，参见Safari Web Content Guide章节中的Configuring the Viewport和Configuring Web Applications.

网站也能够经过其余的方法适配桌面网页到iOS端的Safari浏览器中：

使键盘适应iOS端的Safari. 当键盘和格式辅助信息出现时，iPhone上的Safari应用会将你的网页显示在URL地址下方和键盘与格式辅助信息上方。

使弹出式菜单适应iOS端的Safari.在桌面版的Safari应用中，弹出式菜单会包含不少选项，就如在其余OS X应用中同样。在必要的状况下，菜单展开后能够超出应用窗口的边界以显示其中的全部选项。在iOS版的Safari应用中，弹出式菜单由原生的元素所呈现，这样能提供更好的用户体验。例如，在iPhone上，弹出式菜单会出如今选择器(picker)当中，选择器里会一个用户可选择的选项列表。(欲了解更多选择器控件的内容，能够参见Picker.)

本章英文原文访问地址：iOS Human Interface Guidelines

本章中文翻译PDF下载：点此下载