2 设计策略

2.1 设计准则

2.1.1 美学完整性

美学完整性不是用来衡量app的设计是否美观，也不是用来描述app的风格；美学完整性代表了app的外观和交互是否能与功能很好的融合并且传达条理清晰的信息。

用户关心的是app是否能提供它所承诺的功能，但这也会受到app的外观以及交互很大的影响，这种影响有时是潜意识层面的。比如，一个帮助用户完成一系列任务的app，可以通过使用微小且不引人注目的装饰元素、标准控件和可预知的交互来使用户专注于主要任务。这种app清晰地向用户传达它的目的性和一致性，得到了用户的信任。如果一个app使用干扰的、多余的或者随意的UI来呈现任务，向用户传达混乱的信息，用户就会质疑app的可靠性和可信性。

另一方面，在提供沉浸式体验的app比如游戏中，用户想要的是能够吸引他们的外观，这样的外观能给用户带来乐趣和刺激并且能鼓励用户进行探索。用户并不想在游戏里完成一系列程式化的任务，他们期望的是外观和交互能够与游戏目的相结合的游戏。

2.1.2 一致性

一致性能够使用户将对UI已有的认知从app的一个部分转移到另一个部分，或者从一个app到另一个app。具有一致性的app并不是拷贝别的app，也不是使用一成不变的设计风格，而是专注于使用户感到舒适的标准和范例，为用户提供内部一致的体验。

思考以下几个问题来判断一个iOS app是否遵循一致性的原则：

• app是否与iOS标准一致？是否正确使用系统提供的控件、视图和图标？是否以用户期望的方式整合设备的特性？
• app内部是否一致？文本是否使用一致的术语和样式？同样的图标是否始终代表同样的意思？当用户在不同的位置执行相同的操作，用户是否可以预见结果？自定义UI元素的外观和行为是否相同？
• app与之前的版本是否一致？条款和含义是否保持不变？基本的概念和主要的功能本质上是否改变？

2.1.3 直接操作

当用户直接操作，而不是通过使用分离的控件来操控屏幕上的对象时，用户更能专注于任务，且更易理解操作对应的结果。

使用多点触控，用户可以通过捏合手势直接放大或缩小图片或文本内容。在游戏中，玩家可以直接与屏幕上的对象进行交互。比如，在游戏中用户可以通过转动来打开密码锁。

在iOS app中，以下情况用户可以进行直接操作：

• 旋转或者移动设备来影响屏幕上的对象
• 使用手势来操控屏幕上的对象
• 即时的操作反馈和可视化的结果

2.1.4 反馈

反馈为了告知用户操作的结果，更新任务的进程。

iOS内置app以可感知的反馈来响应用户每一个操作。当用户点击时，列表项和控件会高亮显示，对于会持续一段时间操作，空间会显示执行过程。

微小的动画可以给用户有意义的反馈，有助于阐明用户操作的结果。比如，列表会以动画的形式表现新项目增加的过程，从视觉上帮助用户追踪变化。

音效也可以给用户有益的反馈，但不应作为唯一的反馈方式，因为用户不一定能听得到。

2.1.5 隐喻

当app中虚拟的对象和交互隐喻用户所熟悉的使用体验，不管这些体验来自于真实世界还是数字世界，用户就能很快掌握如何来使用app。

app可以使用隐喻来暗示使用方法或体验，但是这种隐喻不能超过其基于的对象或行为本身的限制。

因为用户是以物理形式与屏幕进行交互的，所以iOS app在设计隐喻方面有很大的余地：

• 移动分层视图来显示下方的内容
• 在游戏中拖拽、轻扫或者滑动对象
• 点击开关、滑动滑块和转动选择器
• 轻扫书本或杂志来翻页

2.1.6 用户控制

用户-而不是app-应该发起和控制操作。app可以建议用户一系列的操作或者警示用户危险的操作后果，但是app不应该取代用户来做决策。优秀的app能够在为用户提供需要的功能以及帮助用户规避不好的结果之间取得平衡。

当交互和控件是用户所熟悉和可预见的，用户会觉得更能控制app。同样，当app的操作简单直接，用户会更易理解和记忆。

在一个操作开始执行之前，用户会希望有足够的机会来取消它，也会希望在执行一个不可逆操作前能够进行确认。最后，用户会希望停止一个在执行中的操作。

2.2 从概念到产品

2.2.1 定义你的app

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

尽早创建app定义声明有助于你将想法和功能清单转换成用户想要的条理清晰的产品。在开发过程中，使用定义声明有助于你判断是否需要某项功能或者交互。通过以下步骤来创建一个可靠的app定义声明。

1. 列出所有你认为用户会喜欢的功能
   可以直接头脑风暴。这一步，你要尝试找出所有与你产品核心想法相关的任务。不要担心列表会太长，因为接下来你会进行删减。

假设你最初的想法是开发一个帮助用户购买杂货的app。你会在思考这项活动时，产生一系列相关的任务，这就是用户可能会感兴趣的潜在的功能。比如：

• 创建列表
• 获取食谱
• 比价
• 商店定位
• 食谱注释
• 优惠券的获取和使用
• 查看烹饪示例
• 浏览不同的菜肴
• 查找配料替代品

2. 确定你的目标用户
   现在你需要找出你的app用户与其他iOS用户有哪些区别。在你的核心想法环境下，什么对于用户是最重要的？在杂货购物的例子中，你需要考虑你的用户：

• 通常在家烹饪还是偏好现成的食物
• 是忠实的优惠券用户还是认为优惠券可有可无
• 享受寻找特别的食材还是偏好基本的食材
• 严格按照食谱还是把食谱当做灵感来源
• 少量多次的购买还是一次购买大量食材
• 会为不同目的准备不同的进行中的列表还是只希望在回家的路上记起一些要买的东西
• 坚持特定的品牌还是会因为方便而选择替代品
• 通常每次购物都买相似的东西还是按照菜谱购买

在仔细考虑以上问题后，确定3个最能代表你的目标用户的特质：喜爱按照食谱进行尝试、常常很匆忙并且通常都比较节俭。

3. 根据目标用户定义过滤功能清单
   如果确定目标用户特性之后，你最终确定了几个app的主要功能，恭喜你走上正确的道路：优秀的iOS app会聚焦帮助用户搞定他们所要完成的任务。

比如，思考在步骤1中你创建的长长的功能清单。尽管它们都是很有用的功能，但并非所有都是你在步骤2中定义的目标用户所欢迎的。

当你在你目标用户的使用场景下检查功能清单时，你决定app应该专注于3个主要的功能：创建清单、获取和使用优惠券以及查找食谱。

这时你就可以制作app的定义声明了，详细地总结app做什么以及为谁做。一个好的杂货购物app的定义声明应该是：

“一个为热爱烹饪且节俭的用户创建购物清单的工具”

4. 不要止步于此
   在整个开发过程中，都应使用app定义声明来确定功能、控件和措辞。比如：

当你考虑是否增加一个新功能时 ，问问自己这个功能对于app的核心目的和目标用户是否是必不可少的。如果不是，那就把它放在一边。比如，当你确定你的用户对于新奇大胆的烹饪很感兴趣，那强调盒装蛋糕和现成的食物可能并不是一个很好的选择。

当你考虑UI的外观和交互时 ，问问自己你的目标用户喜欢简单高效的风格还是有明显主题 的风格。以用户使用你app的目的来指导UI的设计，比如用户想要完成一系列的任务、快速获得解答、钻研复杂的内容、或者娱乐。举个例子，尽管你的杂货购物清单app要简单易用，但你的目标用户可能会想要这样一个有主题的UI，可以显示大量精美的配料和菜肴的图片。

当你考虑措辞时 ，尽可能匹配目标用户在这个领域的专业程度。比如，尽管用户并不是专业的厨师，你也应该相信他们想要看到准确的食材和技巧术语。

2.2.2 为任务定制UI

最优秀的app能够在定制化的UI、清晰的目标和良好的易用性之间取得平衡。为了在你的app中达到这样的平衡，确保要在设计过程的早期就考虑UI定制。品牌、独创性和可销售性经常会影响UI定制的决策，出于对这一点的考虑，专注于通过UI定制化来影响用户体验是非常困难的。

从考虑app的任务开始：用户执行任务的频率如何？他们所处的环境通常是怎么样的？

比如，想象这样一个计算器app，它的设计复杂且具有艺术感，使用极富想象力的布局来显示熟悉的计算元素。这种仔细呈现的富有艺术感的设计和富有想象力的布局不会妨碍用户理解如何点击按钮和浏览结果。但是对于那些只想快速完成任务的来说，这种新奇的使用体验和漂亮的定制UI反而成为了一种阻碍。

相反，看看GarageBand。GarageBand可以不显示漂亮、逼真的乐器来帮助用户制作音乐，但是这样会使用户会缺少代入感和乐趣。在GarageBand中，定制的UI不仅向用户展示了如何使用app，而且使得制作音乐这个核心任务变得很简单。

当你思考定制UI如何增强或是减弱用户对app核心任务的注意力时，你需要牢记以下几条准则。

出于一定的缘由进行UI定制。 理想情况下，UI定制应该有助于简化用户的任务、提升用户体验。你需要尽可能以你的app核心任务来驱动UI定制的决策。

尽可能减少用户的认知负担。 用户已经熟悉标准UI元素的外观和交互，所以用户不需要停下来思考如何来使用它们。当用户看到与标准元素完全不同的元素时，他们就会失去已有经验的优势。除非你的特别的元素可以简化任务，否则用户会反感于被迫学习新的不通用的程序。

确保内部统一。 UI的定制化程度越高，app内自定义元素的外观和交互的统一就越为重要。如果用户花费时间来学习如何使用你创建的不熟悉的控件，他们会希望这些习得的知识在app内是通用的。

时刻遵从内容。 因为用户对于标准元素很熟悉，所以它们不会影响用户对于内容的注意力。如果你要定制UI，注意确保不要让UI影响用户关心的内容。比如，你的app允许用户观看视频，你可能会设计一个自定义的重播控件。当用户开始观看视频时控件淡出，点击屏幕后再次出现，这相对于使用自定义控件还是标准控件来的更为重要。

重新设计标准控件前要三思。 如果你不只想自定义标准控件，请确保你重新设计的控件能够提供与标准控件同样多的信息。比如，如果你创建了一个无法提示具有相反状态的开关控件，用户可能不会意识到这是一个有两种状态的控件。

确保彻底测试自定义UI元素。 在测试过程中，仔细观察用户是否能预测你的元素的作用以及是否易于交互。比如，如果你创建了一个可点击区域小于44×44点的控件，用户想要激活它时就会遇到困难。或者，如果你创建了一个视图会以不同的方式响应点击和轻扫操作，请确保这个视图提供的功能值得用户与之交互时额外的关注。

2.2.3 原型和迭代

在投入重要资源来实现你的设计之前，为用户测试创建原型是一个很好的注意。即使只有几个同事帮你测试原型，你也会受益于他们对于app功能和体验的新鲜的观点。

在最开始设计的时候，你可以使用纸质原型或者线框图来拟定主要视图和控件，规划屏幕之间的跳转。你能从测试线框图中获取一些有用的反馈，但是简单的线框图也有可能误导用户。因为用户很难想象当线框图填充真实的内容后，用户体验会有怎样的改变。

如果你能创建一个能在设备上运行的原型，你会获得更多有价值的反馈。当用户能够在设备上与你的原型进行交互时，更容易发现那里的功能不是他们所预期的，或者哪里的用户体验过于复杂。

创建可靠原型最简单的方式是通过基于故事板的Xcode模板来创建一个基础app，然后用合适的占位内容来填充它。（故事板文件可以囊括整个app的UI，包括不同屏幕之间的切换。）接下来，将原型安装到设备上，这样你的测试者就能获得接近真实的使用体验。

你不需要在app原型中填充太多的内容，也不必让每个控件都可以使用，你只需要提供足够的环境来营造接近真实的使用体验。目的是在典型的用户体验和边缘情况之间取得平衡。比如，你的app可能需要处理很长的项目清单，你就不应该创建一个只显示几条列表项的原型。而在测试用户交互时，如果测试者能通过点击屏幕上的某一区域然后跳转到下一个逻辑视图或者执行主要任务，他们会提供更有建设性的反馈。

当你基于Xcode的app模型来创建原型时，你可以使用很多免费的功能，并且相对来说更容易根据反馈来调整设计。在你确定设计然后投入资源来实现之前，你需要反复测试你的原型。查看Xcode Overview，开始学习Xcode。

2.3 案例学习：从桌面到iOS

2.3.1 iPad版Keynote

桌面版的Keynote是一个创建世界级幻灯片报告的强大而又灵活的app。用户喜爱Keynote将易用性与对细微颗粒度的细节的控制性结合的方式，比如动画和文本属性。

iPad版Keynote汲取了桌面版Keynote的核心功能，通过以下设计提升了它在iPad上的用户体验：

• 专注于用户的内容
• 在不减少功能的前提下降低复杂度
• 提供有用且令人愉悦的快捷操作
• 继承桌面版用户体验的特性
• 通过传神的动画来反馈和交流

Keynote用户能够立刻明白如何使用iPad版的Keynote，因为它通过iPad本地范例来实现用户可预测的功能。新用户能够简单地学会如何使用iPad版Keynote，因为用户可以以简单自然的方式来直接控制他们的内容。

Keynote从桌面到iPad的转化是基于从细节到整体的大量的修改和重新设计的。以下是一些最明显的修改：

线性的工具栏。 工具栏上只有少量的元素，但给予了用户所有创建内容所需的功能和工具的统一入口。

简化的、优先响应用户焦点的检查器。 iPad版的Keynote检查器自动包含了用户需要用来调整所选对象的工具和属性。通常，用户可以在第一检查器视图中完成所有他们需要的修改操作。如果用户需要调整一些不常修改的属性，可以调出其他检查器视图。

丰富的预设样式集。 用户可以很简单的使用预设样式来改变图表的外观和质感。除了色彩方案，包括预设的属性比如表格的标题和坐标轴区分标识，每个集合都设计的与整个主题相适应。

直接操作内容，以有意义的动画丰富内容。 在iPad上的Keynote中，用户拖拽滑块来移动到新的位置，扭动对象来使之旋转，点击图片来选中它。iPad版Keynote通过响应动画来进一步增强用户对于直接操控的印象。比如，当用户移动幻灯片的时候，幻灯片会像脉搏一样跳动，当被移动到一个新位置时，周围的幻灯片会向外扩散来腾出空间。

2.3.2 iPhone版邮件应用

邮件应用是OS X中好用且广受好评的常用应用之一。它也是一个非常强大的应用，可以帮助用户创建、接收、分类和存储邮件，追踪活动和事件，创建备忘和邀请。桌面版邮件应用以多窗口的形式来提供这些强大的功能。

iPhone版的邮件应用专注于桌面版邮件应用的核心功能，帮助用户接收、创建、发送和组织信息。iPhone版邮件应用浓缩了功能，通过定制适应移动端体验的UI，从以下几点提升了用户体验：

• 通过线性的外观来将用户的内容前置并集中化
• 为不同的任务设计不同的视图
• 可以轻松理解的符合认知的信息结构
• 可以在用户需要的时候提供强大编辑和组织功能的工具
• 传达动作、提供反馈的细微但极具表现力的动画

iPhone版邮件应用并不是一个比桌面版邮件应用更好的app；而是专为移动设备用户重新设计的邮件应用。iPhone版邮件应用专注于桌面版的核心功能，通过吸引人的简介界面显示，为移动设备用户提供了邮件应用的核心体验。

为了适应移动设备上的体验，iPhone版邮件应用在几处关键地方进行了UI创新。

清晰、高度集中的页面。 每个页面都显示了邮件应用体验的一个方面：账户列表、邮箱列表、邮件列表、邮件视图和编辑视图。在一个页面内，用户通过滚动来查看所有内容。

简单、可预知的导航. 在任何页面，通过点击可以从综合的页面进入到详情页面，比如从账户列表进入邮件页面。每个页面显示的标题能告知用户所处的位置，以及显示一个返回按钮来让用户方便地回溯到之前的步骤。

简单、易点击的控件。 因为在任何环境下编辑邮件和查看新邮件都是用户会执行的主要操作，所以iPhone版邮件应用确保了用户在很多页面都能方便地执行这些操作。当用户在浏览一封邮件时，用户可以回复、移动和删除邮件，因为这些操作的对象都是该邮件。

对于不同任务不同类型的反馈。 当用户删除一封邮件，它以动画的形式移入垃圾箱图标。当用户发送一封邮件，可以直观的看到发送的过程；当发送完成后，用户可以听到特别的音效。通过查看邮件列表工具栏上的细小的文字，用户可以很方便地知道邮箱上次的更新的时间。

2.3.3 iOS中的网页内容

在iOS设备中，Safari浏览器提供了卓越的移动网页浏览体验。用户喜爱Safari清晰的文字和锐利的图片，喜爱Safari能够适应用户旋转设备、捏合或者点击屏幕。

基于标准设计的网站能在iOS设备上很好地显示。特别是那些可以识别设备且不使用插件的网站，几乎不用做任何调整就能适应iPhone和iPad。

除此之外，成功的网站具有以下特点：

• 如果页面宽度需要匹配设备的宽度，那就为设备设置合适的视窗。
• 避免使用固定的CSS配置，这样当用户放大或缩小页面时，内容就不会被移出屏幕
• 使用基于触控的UI，而不是桌面端基于点击的交互

有时，额外的修改也是合理的。比如，在iOS中，网页应用通常会设置合适的视窗大小，并且隐藏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，了解更多相关信息。）