摘自《iPhone用户体验设计：以用户为中心的草图和原型设计iPhone应用方法》

Suzanne Ginsburg 由 Addison-Wesley Professional 出版 ISBN-10: 0-321-69943-2 ISBN-13: 978-0-321-69943-5

“原型”一词源于希腊语protos，意为“第一个”，typos，意为“印象”。在 1600 年代，“原型”被用来描述印刷机的第一份印品。随着时间的推移，它的含义已演变为包括许多事物的早期形式：汽车、零售店、家用电器。关于原型的看法往往因人而异——设计师、开发人员、研究人员。无论行业或学科如何，我都认为参考 Bill Moggridge 在《设计交互》中的定义是很有启发性的：^[1]

最终解决方案存在之前，对设计的表示。

本章将探讨各种 iPhone 原型设计方法——纸质、软件和视频——并建议如何为您的应用选择最佳方法。

本章还包括 Dan4, Inc. 和 What's Shakin' iPhone 应用的原型设计案例研究。在这里，您将了解到应用程序设计团队如何利用原型来构思他们的应用程序。

为什么要制作原型？

原型可以帮助您解决设计问题、评估设计并传达设计理念。这些前期活动还可以加快开发过程，节省宝贵的时间和金钱。

最普遍的估计是，在编写任何代码之前进行更改比等到实现完成后进行更改要便宜 100 倍。

- Jakob Nielsen^[2]

解决设计问题

原型是在深入编码之前解决设计问题的有效方法。它们可以帮助解决从更高级别的概念问题到更低级别的交互问题。例如，假设您正在创建一个消息应用，当用户将消息从一个文件夹移动到另一个文件夹时，该应用会显示一个过渡动画：过渡的最佳速度是多少？视觉反馈的最佳形式是什么？这两个元素如何协同工作？带有方向箭头的故事情节可以说明总体概念，但交互式原型在微调解决方案方面会更有效。

评估设计理念

原型通常用于在投入开发时间之前评估设计理念——概念、流程和交互。评估者可能包括设计师、设计同事，当然还有最终用户。内部审查可以采用评论格式，或采用以用户为中心的设计方法，例如第 5 章“评估竞争对手”中讨论的启发式评估。虽然内部审查非常有价值，但它们不能替代可用性测试，后者将在第 8 章“可用性测试应用概念”中进行讨论。

传达设计理念

通常，原型是有效传达您的应用理念的唯一方法。特别是那些与“真实世界”交互的应用——具有地理位置感知功能的应用、条形码扫描应用、录音机——需要超越静态屏幕设计来真正讲述它们的故事。它们需要上下文：人、地点和构成应用程序不可分割的一部分的物体。^[3]同样，沉浸式应用（如乐器和游戏）在静态草图格式下呈现时，吸引力会大大降低。原型将把您的应用从纸面移到更接近真实事物的格式。这些原型可以在公司内部展示，与投资者共享，或用于收集用户反馈。

常见问题

本节将回答有关原型设计的常见问题。

应该制作多少种变体？

理想情况下，您应该尝试在早期设计阶段制作几种不同的方向。随着设计的进展，团队往往会倾向于某个方向，因此改变方向可能会很困难。请确保明智地选择原型介质——纸质等低保真选项可以轻松探索多个方向，而某些高保真工具则倾向于鼓励渐进式或肤浅的设计更改。

应该制作应用多少内容？

原型的范围将取决于设计阶段和您的目标。在项目开始时，采取整体的原型方法是有益的。这并不意味着您必须制作每一个屏幕和交互的原型，但您需要涵盖在前期用户研究中确定的主要场景。在设计的中后期，您可能会返回原型设计以帮助解决特定的流程或交互问题。例如，如果您正在创建一个幻灯片应用，您可能希望通过原型来微调过渡。

如果设计尚未完全完善怎么办？

您不必等到界面的每个方面都完全完善。使用“绿野仙踪”^[4]技术来演示应用的某些方面是没问题的。“绿野仙踪”技术需要一个人来模拟应用交互。例如，假设一个可用性参与者想在您的应用中搜索餐厅列表，但您尚未对搜索进行编码。通过“绿野仙踪”方法，您可以要求参与者稍等片刻，让应用“处理”请求。在此期间，您或您的同事可以搜索信息，并即时提供结果。除了发现可用性问题外，这种方法还有助于在编码开始前完善需求。

如果支持内容尚未最终确定怎么办？

Jared Spool 建议使用“极具智能的帮助”^[5]来模拟帮助系统。本质上，当用户点击帮助时，人类“计算机”会回答他们的问题。这种方法提供了相对无缝的体验，还可以识别需要改进设计或支持内容的界面区域。另一方面，对于占位文本要保守一些，即使用Lorem Ipsum 和其他填充文本代替真实文本。如果文本对用户体验至关重要，请包含草稿副本，然后根据用户反馈进行迭代。

注意 - Lorem Ipsum 网站 (www.lipsum.com) 提供一个生成器，可轻松创建填充文本。该网站还提供了有关此做法起源的历史。

合适的保真度级别是多少？

原型的保真度应与当前的设计挑战以及设计过程的阶段相匹配。例如，纸质原型（图 7.1）通常可以发现大多数流程和术语问题，但在低级别交互问题方面则不那么成功。这并不意味着纸质原型应始终是您的起点。如本章后面所述，某些应用可能需要在早期阶段就进行更高保真的原型设计。

如果您计划向公司高管或投资者进行演示，您应该评估他们对低保真度与高保真度原型的接受程度。有些人可能会负面看待低保真度原型，因为它们外观“粗糙”。即便如此，如果您想说服他们改变看法，可以考虑 IDEO 合伙人兼创意总监 Jane Fulton Suri 如何评估原型的有效性：“如果 [体验很好]，人们会全神贯注于体验，以至于他们忘记了原型的局限性。”

在开始制作原型之前应该做什么？

在开始制作原型之前，请创建应用草图，如第 6 章“探索应用概念”中所述。如果您还没有这样做，请将这些草图放入高层应用流程图中。图 7.2 展示了一个字典应用的流程图；请注意图例中如何包含支持的手势符号。流程图提供了应用的整体视图，并作为原型的蓝图。在早期设计阶段，专注于代表典型场景的“快乐路径”，而不是生成异常错误条件的场景。^[6]在缩小概念范围后，可以添加边缘情况。

在处理应用流程时，还需要注意以下几点

• 精简，精简，再精简。

  如前所述，移动用户的时间有限，因此您的应用流程应尽可能简洁，同时又不损害可用性。为此，请寻找合并或删除多步过程中的步骤的方法。例如，向导非常适合应用设置和其他线性过程（例如，购物结账），但在频繁执行的任务（尤其是包含许多可选项目的任务）时，它们会减慢用户速度。

• 提供多种访问信息的方式。

  用户经常会遇到死胡同，尤其是在深入列表视图时，但应用体验可以更流畅。例如，新闻文章视图可以包含指向相关文章的交叉链接，但许多应用程序会迫使用户导航回原始列表视图。同样，包含兴趣点 (POI) 的地图应允许用户直接转到 POI，而无需强制他们返回相应的列表视图。

• 让用户保持在上下文中。

  尽可能让用户留在您的应用中。离开应用意味着用户需要额外的时间和精力来重新定位自己，从而增加了他们不回来的可能性。例如，许多应用程序会强制用户通过 Safari 访问其网站寻求帮助。不幸的是，如果用户无法轻松参考他们最初的问题，外部帮助可能毫无用处。如果用户必须离开您的应用（例如，为了获取地图指示），至少要发出警告。当用户返回到您的应用时，他们应该看到最后访问的屏幕，这被称为“保存状态”。

注意

有关原型设计的更广泛讨论（非 iPhone 特定），请考虑阅读 Todd Zaki Warfel 的《原型设计：实践者指南》。^[7]

原型设计方法

表 7.1 总结了五种不同的原型设计方法，从低保真纸质原型到 iPhone SDK。随着 iPhone 应用领域的不断发展，您可能会发现其他方法非常适合您的应用领域。发挥创意——根据需要进行调整并制定自己的原型设计策略。例如，可以通过录音或实时画外音将音频融入所有选项中。

原型	优点	缺点
纸质	便宜快捷。有助于识别概念、流程和术语问题。	难以显示低级别交互；模拟信息丰富的应用程序更难。
设备上的静态图像	结合了 iPhone 的外形尺寸。有助于解决视觉问题，例如文本大小。	交互性有限；本质上是从屏幕到屏幕的点击。
设备上的交互式	结合了 iPhone 的外形尺寸和一定程度的交互性。	实现所需的交互性可能需要大量时间。
视频	提供上下文信息的叙事方法，对于地理位置感知型应用和某些沉浸式应用至关重要。	如果需要多次迭代，可能会耗时。不太适合进行可用性测试。
iPhone SDK	代码有时可用于最终应用设计。	成本可能较高，并且对于前期迭代设计而言不够灵活。

纸质原型

纸质原型基本上是您的 iPhone 应用的纸质模型（图 7.3-7.4）。它们可以用作沟通工具，但通常是为了可用性测试而开发的。在这种情况下，设计师或开发人员扮演“计算机”的角色，根据需要隐藏和显示用户界面元素。与电子原型相比，用户界面工程创始人 Jared Spool 如此描述纸质原型：^[8]

我们将纸质原型视为粗砂纸，将电子版本测试视为细砂纸。一旦我们使用纸质原型验证了每个屏幕的内容及其工作方式，我们就会转向电子版本来微调外观和感觉。

优点

纸质原型的优点从快速迭代到改进协作不等

• 快速迭代

  纸质原型使您能够快速迭代和试验许多想法。适度的时间投入使其更容易放弃不太有前途的方向。

• 价格便宜

  普通的办公用品可用于纸质原型：记号笔、便利贴、打印纸。最重要的是，这些前期纸质迭代可以减少开发端的成本。

• 协作性

  纸质原型不需要任何技术技能；因此，每个人（包括用户！）都可以参与。

• 易于编辑

  您或您的用户可以即时编辑纸质原型（例如，更改标签、添加屏幕、添加按钮）。

要探索的问题

通过纸质原型通常会探索的用户体验问题包括：

• 应用概念

  用户理解您的应用的核心概念吗？

• 工作流程

  整体导航清晰吗？完成任务的步骤是否过多？

• 信息组织

  当前组织是否符合用户的期望？

• 术语

  标签、屏幕和按钮上的标签清晰吗？

• 附加功能

  在评估应用的过程中，您可能会发现用户需要的其他功能。用户可能会表达这些需求，或者您可能会观察到他们试图完成应用程序不支持的任务。您还可以了解用户不想要哪些功能，这可以节省宝贵的开发时间。

挑战

如前所述，纸质原型不太适合优化低级别的交互，例如过渡、滚动和滑动。对于某些类别的应用程序，例如乐器、视频和游戏，它们也可能不太有用。

操作方法

iPhone 纸质原型通常包括“设备”以及屏幕、覆盖层和控件的组合。本节总结了创建纸质原型的步骤。

步骤 1：准备材料。

在前一章中，我们列出了在头脑风暴和绘制应用设计时可以使用的办公用品；这些物品也适用于纸质原型。此外，您可能还需要准备以下材料：硬纸板、可移除胶带、胶水、修正液和剪刀。

步骤 2：确定外形尺寸。

在某个时候，您的设计将必须匹配 iPhone 的屏幕尺寸——320 × 480 像素（iPhone 4 为 640 × 960 像素），但纸质原型可以不那么精确。使用更大的外形尺寸将使他人更容易与设计进行交互（例如，重新排列布局并在文本字段中输入）。

步骤 3：创建原型。

您的原型将包括背景、屏幕和用户界面控件。在创建原型的过程中，请确保您的场景（如第 4 章所述）和应用流程图随时可用。

背景

如果您的原型比 iPhone 大得多，您可能想用泡沫板或硬纸板制作的 iPhone 框架来框定您的设计。当用户进行可用性测试时，此框架可以帮助参与者定位。或者，如果您的原型与 iPhone 尺寸匹配，您可以将其粘贴到设备上，这可能会使其“感觉”更接近真实事物。

屏幕截图

您的应用屏幕可以手绘或截屏。手绘草图倾向于引发高层概念反馈，而截屏可能导致低级别视觉反馈。如果可能，请坚持一种方法，而不是一半手绘屏幕和一半截屏。一些值得注意的例外是照片、地图和键盘：打印它们可以节省时间，并且将它们与手绘草图结合使用效果很好。

准备控件

本节包括构建纸质原型标准控件的技巧。

• 标签栏

  创建标签状态的突出显示版本和非突出显示版本（图 7.5）。如果您还没有决定合适的标签图标，请使用文本。

  

  图 7.5 带有标签栏的纸质原型
• 键盘

  如前所述，您可以使用手绘键盘草图或截屏（图 7.6）。不一定需要每个按钮都有按下状态，但要注意默认颜色和特殊上下文键，例如用于 Web 和电子邮件地址的键。

  

  图 7.6 带有键盘打印样本草图
• 滑块

  滑块可以用一小块彩色纸折叠在窄纸条上制作（图 7.7）。如果您时间紧迫，可以在用户在滑块上来回移动手指时提供口头反馈。这种口头方法也可以应用于进度条（例如，“正在下载 1/10”）。

  

  图 7.7 滑块示例（图片由 Angela Chiang、Andrew Hershberger 和 Charles Naut 提供）
• 文本输入

  对于文本输入，参与者可以在便利贴或可移除胶带上书写。或者，他们可以使用铅笔直接在原型上书写。请注意：即使是仔细擦除，如果参与者用力过猛，您的下一位用户也可能会看到之前用户写的内容。

• 选择器

  选择器提供的功能与 Web 或桌面应用程序中的下拉列表基本相同（图 7.8）。考虑到它们可以包含大量项目，您可能需要一条长纸条来显示所有选项。当用户不与选择器交互时，可以将其折叠并收起。

  

  图 7.8 时间选择器示例
• 突出显示

  可以考虑制作一个突出显示切口，您可以在用户进行选择时上下移动它（图 7.9）。另一个选择是购买透明塑料片，它们有各种颜色。

  

  图 7.9 突出显示示例
• 警报

  可以考虑为警报使用不同的背景颜色。确保它们不会完全遮挡下方应可见的内容（图 7.10）。

  

  图 7.10 警报叠加示例
• 分段控件

  包括分段控件的不同状态，它们通常用于过滤器或排序。每种状态都可以显示控件的某个“段”被突出显示。图 7.11 中的分段控件允许用户按受欢迎程度、评分和标题排序列表。

  

  图 7.11 分段控件示例

这里有一些您可能需要包含的附加元素

• 加载页面指示器
• 开关的开/关版本，其工作方式类似于单选按钮
• 选定项目的复选标记

注意

Apple 的《iPhone 人机界面指南》包含 iPhone 控件的详细信息。此外，其中一些将在第 9 章“用户界面设计”中更详细地讨论。

温馨提示 - 正如前面讨论过的，纸质原型可以改善协作并降低成本。这些好处只有在方法支持快速迭代设计时才能实现。

考虑到这一点，请尽量不要在纸质原型上过度投入。例如，为键盘上的每个键切割小纸片可能没有必要。用户通常明白键盘的工作方式，因此您可以说诸如“想象一下键盘会显示您输入的文本”之类的话。

同样，如果您正在为研究准备原型，但还没有创建用户可能期望的每一个界面元素，也不用担心——纸质的优点在于您可以随时绘制小部件并即时添加。

设备上的静态图像

一旦您完善了整体概念和流程，您可能希望创建设计屏幕截图并在 iPhone 上显示它们。如果您使用“热点”链接这些图像，您可以提供更具探索性的用户体验，因为在切换用户界面元素时无需有人扮演“计算机”的角色。此外，精确的外形尺寸可能有助于微调视觉设计细节，如字体大小、布局和颜色。

操作方法

要开始，您需要创建应用程序屏幕的 320 × 480 图像。许多绘图程序都内置了 iPhone 模板，或者可以下载。请记住，这些模板并非包含 iPhone 世界中的所有用户界面元素；开发人员经常创建看起来和感觉像标准控件的控件，但它们实际上是定制设计和定制编码的。如果您需要某些东西但找不到，请准备好绘制所需的解决方案。iPhone UI 设计师广泛使用四种绘图程序

• OmniGraffle（请参阅 Graffletopia，www.graffletopia.com，了解 iPhone 模板）
• Fireworks
• Photoshop
• Illustrator

注意

屏幕可以手绘，但将其放入 iPhone 外形尺寸可能更困难。

我更喜欢 OmniGraffle 和 Fireworks，因为“页面”框架非常适合 iPhone 屏幕设计。Photoshop 和 Illustrator 是优秀的产品，但工具和选项的数量往往会让新手不知所措。查看 iPhone 上图像的三个简单方法是使用内置的幻灯片播放、Safari 和 LiveView。

通过内置幻灯片播放查看

幻灯片播放方法的缺点是其线性——您只能向前或向后滑动，并且存在缩放和幻灯片控件。优点是速度和简洁性：将草图保存为可接受的 iPhoto 格式，然后将其添加到您的 iPhone 照片收藏中。请确保包含状态栏（电池和连接信息），如果它是您设计的一部分。

通过 Safari 查看

另一个选项是创建带有“热点”的图像，并在 Safari 中显示这些图像。通过这种方法，用户可以像使用真实应用一样点击行和按钮。UNITiD design 制作了一些脚本，使您能够禁用缩放并在全屏模式下查看图像。在其网站上可以找到一个易于遵循的教程。^[9]

LiveView

LiveView^[10]，由 IDEO Labs 开发，允许您从 iPhone 查看桌面设计（图 7.12）。这有助于您评估应用布局、字体大小和其他视觉元素，但无法与原型进行交互。此外，LiveView 必须通过 WiFi 访问，因此您的测试地理范围可能有限。

温馨提示 - 使用静态图像创建屏幕原型不一定比纸质原型更有效。静态图像无法显示警报和控件状态，因此您可能需要创建混合原型（例如，屏幕加纸质覆盖层）。另外，您无法使用静态图像模拟滚动内容，但可以使用纸质模拟。

设备上的交互式

鉴于静态图像原型的局限性，您可能更喜欢交互式原型技术。在选择此路线之前，请确保您已评估所有低保真选项。如果您的应用的某些方面（如流程和布局）可以在纸上解决，请先使用纸质，然后再进行交互式原型。我特意使用了“承诺”这个词，因为高保真度原型往往会成为最终设计。

注意

Flash 是创建交互式原型的强大工具，但您无法在 iPhone 上查看 Flash 文件。

要探索的问题

您可以探索用户体验的几乎任何方面，这基本上取决于您想在原型上投入多少时间。与静态图像原型相比，您可以提供表单、过渡和滚动内容。更重要的是，考虑到这些原型的便携性，您可以走到实地，在上下文中 walkthrough 您的场景。虽然纸质原型也可以做到这一点，但使用设备上的交互式原型会更容易。

挑战

尽管交互式原型功能强大，但仍有一些方面使它们与“真实”体验区分开来。特别是，您可能仍然需要模拟当前位置信息、实时数据源以及中断处理（连接丢失或中断时会发生什么？）。

操作方法

可以使用 Keynote 或 PowerPoint^[11] 等工具创建交互式原型（图 7.13），但需要在 iPhone 上显示这些原型需要专门的阅读器。^[12]在另一端是自定义 CSS 解决方案，它们本质上是看起来像原生 iPhone 应用程序的 Web 应用程序。这些原型可能需要大量时间，尽管有一些工具（如 ProtoShare，图 7.14）旨在简化该过程。^[13]另一个有前途的解决方案是 Briefs，由 Rob Rhyne 开发。^[14]Briefs 原型在 iPhone 上运行，就像实际应用程序一样，但编码和生产所需的时间却少得多。每个“brief”都包含一个文本文件，该文件引用了一系列组织成“场景”的静态图像。

温馨提示 - 如本节所述，可以创建几乎模拟您的应用程序所有功能和特性的原型。这并非坏事，只要工作可以在合理的时间范围内完成。

如果您花费了过多的时间进行原型设计，那么您可能已经超出了快速迭代测试的“临界点”。在这种情况下，请重新考虑原型的哪些方面可以模拟或向您的受众解释——某些用户体验元素的投入可能超过了收益。

视频原型

视频原型是展示应用在上下文中的使用情况的强大方法——演员、环境、并发活动、时间流逝。这些上下文元素对于与真实世界交互的应用尤其重要：地理位置感知型应用、遥控器、烹饪辅助工具。此外，沉浸式应用（如乐器或游戏）可以使用视频来展示它们的应用。虽然视频原型可用于通过可用性测试来收集反馈，但通常用于评估和传达设计理念。图 7.15 显示了为护理人员应用创建的视频原型屏幕截图；完整视频可在网上找到。^[16]

要探索的问题

视频原型是探索和记录应用如何在现实世界中工作的有效方法。可以捕获的交互示例包括：

• 在执行其他活动时处理设备
• 影响体验的其他人员
• 可能影响用户的中断

更难探索

有些问题不太适合视频原型。例如，如果您想详细探索低级别交互，请考虑创建用户可以按照自己的节奏 walkthrough 的交互式原型。

操作方法

视频原型似乎是一项艰巨的任务，但过程可以相对简单

步骤 1：开发脚本。

首先，您需要为视频编写脚本。如果您已经按照第 4 章中的说明创建了场景，那么编写脚本应该不会花费太长时间。专注于展示应用如何在上下文和现实的方式下使用的场景。此外，还应包含一个介绍以设置场景，例如，人物是谁，他们在哪里，他们的目标是什么。

步骤 2：绘制故事情节提纲。

如果您已经为您的应用绘制了故事情节提纲，您需要根据您的脚本进行调整。您可能会发现需要额外的屏幕来提供无缝的用户体验。

步骤 3：创建原型。

您的原型可以是纸质的、电子的，或者您认为最有效的方式。在开始拍摄视频之前，请确保您的屏幕、覆盖层等已准备就绪。

步骤 4：拍摄您的原型。

您不需要购买昂贵的高端相机来拍摄您的原型。至少，请确保您的相机具有出色的变焦功能和良好的麦克风。如果麦克风拾取了过多的背景噪音，您可能需要租用或购买一个可以夹在演员衬衫上的领夹式麦克风。以下是一些额外的视频技巧：

• 选择真实的地点；在需要时寻求拍摄视频的许可。
• 让主要演员“大声思考”，以便观众了解他/她行为背后的“原因”。
• 结合使用环境视图和特写应用屏幕视图。

步骤 5：编辑您的视频。

市场上有数十种视频编辑工具。对于您的视频原型，像 iMovie 这样的基本工具应该足够了。以下是一些额外的编辑技巧：

• 如果需要背景信息，请记住以画外音开头以设置场景。
• 尽量让最终视频保持在五分钟以内。
• 使用淡入/淡出表示时间流逝。

其他类型的视频原型

如前一节所述，视频原型也是说明像游戏和乐器这样的沉浸式应用工作方式的有效方法。Gogogic 是一家在线和 iPhone 游戏开发商，在其应用开发过程中使用动画。动画^[17]，即按顺序显示的一系列静态图像，使 Gogogic 能够在深入编码之前可视化玩家体验。此外，动画有助于确定应用程序需求的优先级。根据 Gogogic 的首席执行官 Jónas Antonsson 的说法，“在 Gogogic，动画是王道”（图 7.16）。

温馨提示 - 正如本节所述，原型设计应该是一个相对快速的过程。当然，您可以花费数周时间拍摄和编辑制作质量的视频。但是，为了原型设计的目的，您需要对视频的投入进行“时间限制”。

如果视频拍摄和编辑需要一周以上，请考虑替代策略。

另一种方法是使用卡通人物动画化您的场景，就像 Xsights iPhone 应用那样（图 7.17）。GoAnimate 等服务提供工具和模板，帮助新手创建基本动画。

iPhone SDK

可以使用 Interface Builder 中的 iPhone SDK 开发原型。虽然一些设计专业人士可能认为“工作代码”不是原型设计，但这实际上取决于领域和原型的复杂性。例如，纸质原型不足以探索乐器应用。在这种情况下，深入研究 Apple 的音频库可能是尝试和弄清楚什么可行最有效的方法。

注意

DigitalGourmet 的 Marcos Pianelli 使用 iPhone SDK 创建了一个很棒的应用原型。您可以在 Vimeo 上观看：http://vimeo.com/5947546。

几乎可以探索用户体验的任何方面，但要小心您开发原型的程度——如果您对设计投入过多，您可能不太可能根据用户反馈进行调整。此外，如果您的原型功能不齐全，评估地理位置感知和实时数据源等功能仍然具有挑战性。

操作方法

编程 iPhone 用户体验是一个过于宽泛的话题，无法在本书中涵盖。有无数的书籍和网站都在讨论这个话题。Addison-Wesley 系列中一些备受好评的作品包括：

• 《Mac OS X Cocoa 编程，第三版》，作者：Aaron Hillegass (2008)
• 《iPhone 开发者秘籍：使用 iPhone 3.0 SDK 构建应用程序，第二版》，作者：Erica Sadun (2009)

温馨提示 - 一旦您深入研究 iPhone SDK，通常就更难探索不同的设计解决方案。在 SDK 中进行原型设计可能耗时，因此您的团队可能不想“丢弃”数小时甚至数十小时的开发工作。因此，他们可能倾向于坚持第一个方法并进行较小的迭代。此外，请记住，SDK 中的 UI 控件可能不如您期望的那样全面；许多看似常见的控件实际上都是定制编码的。

如果您的编码技能有限，您可能会选择一个方向，因为它很容易，而不是因为它就是最佳解决方案。最终您可能需要做出妥协，但这不应该在第一天就发生。总之，只有当您探索了其他选项并确定这是最合适的方法时，才使用 iPhone SDK 进行原型设计。

摘要

在编写代码之前原型设计您的 iPhone 应用将使您能够探索、评估和传达您的设计理念。通过原型设计，您可能会发现改进应用概念、流程、术语以及过渡等低级别交互的方法。

本章讨论了各种原型设计方法，包括纸质、电子、视频，甚至使用 Interface Builder 和 iPhone SDK。您选择的方法很大程度上取决于应用的类型、您的设计目标和项目阶段。无论您做出什么决定，请牢记这些提示：

• 尝试探索原型的不同方向。一旦您的应用设计被编码，就很难改变方向。
• 您不必为整个用户体验制作原型。只为有助于您探索正在调查的设计问题的领域制作原型。
• 原型设计不一定局限于早期设计阶段——利用它们来优化在后期阶段出现的问题。 

案例研究 6：Dan4, Inc. 的原型设计

DAN4 是一家设计公司，致力于创建清晰且引人入胜的软件应用程序、设备界面和多渠道服务。

在 Dan4，你们如何制作原型？

我们在 Dan4 中主要以三种方式使用原型。首先，我们将原型视为设计过程的自然组成部分，使我们能够快速而流畅地捕捉、传达和操纵我们的想法。在某种程度上，原型就是设计。对我们来说，创建原型不是一项附加任务或项目上的奢侈品。这只是良好的设计实践。

其次，原型在用户研究和用户测试中是很有用的道具。在项目早期，当我们寻求见解和灵感时，原型可以帮助激发用户的反应，从而揭示一个概念的机会或风险。研究阶段之后，我们经常对原型设计进行用户测试，以帮助我们识别设计问题并验证我们的设计决策。

最后，我们总是寻找机会来调整和重用我们的原型，例如，以支持正式的设计规范文档，在开发过程中会引用原型。我们还使用原型来协助市场营销、产品演示和投资者演示。

你们如何选择原型设计方法？

我们考虑了通常的约束——时间、预算和范围——以及更广泛的开发团队如何工作以及原型如何被重用。例如，我们将考虑使用的工具、开发方法、工作流程和项目正式程度。从那里，我们选择原型的保真度和技术。

能举些例子吗？

在为小型零售商和特许经营商开发基于位置的消息平台时，我们希望帮助店主设想 iPhone 界面的丰富性。我们觉得静态、低保真的原型和模型无法清晰地描述用户体验。我们选择创建更具体验性的原型，使用 Keynote [图 CS6.1]。Keynote 在原型设计方面的一个有用之处在于，它通过“构建效果”提供了许多 iPhone 上看到的动画和过渡。它使您能够模仿默认的 UIKit 过渡和动画，并创建涉及淡入、翻转、缩放、缓入和缓出的更复杂行为，这些行为可以使用 Core Animation 进行开发。

但有时低保真就足够了。在与网络安全系统提供商的一次创新研讨会上，我们花费了半天时间创建了一个非常“快速粗糙”的原型。我们想传达整体产品概念，同时也考察了我们关于该方案可行性的猜测。

我们使用铅笔草图的照片、定格动画、环境音轨以及从互联网上找到的声音，创建了一个演示，帮助与会者（主要是软件开发人员和经理）快速对概念达成共识，并认识到使用上下文的相关性 [图 CS6.2]。

关于 iPhone 原型设计还有什么建议吗？

根据我们的经验，最好尽早开始原型设计应用概念。我们发现，原型在用于探讨概念背后的思想和假设，并激发用户见解以帮助团队弄清楚如何投入精力时最有效。

从他人那里获得早期输入，特别是从目标用户和产品客户那里获得输入，可以为您提供支持项目轨迹的早期战略决策信息，并极大地影响最终产品。

通常，最好创建几个简单的原型来探测产品的不同方面。例如，基本功能和整体架构可以使用纸质线框图或简单的交互式原型进行原型设计和测试。但是品牌、外观和感觉以及界面行为可能更适合使用静态视觉模型或动画 walkthrough 进行测试。

最好的原型设计是创建能够提出正确问题并启发设计的工具——只要它不会分散其他项目任务的注意力。知道什么要从原型中排除与知道什么要保留在原型中一样重要，始终努力达到“尽可能简单，但不能更简单”。 n

案例研究 7：“What's Shakin'”

MATT PAUL 是大大小小初创公司的创始成员，如 StreetPrices、SeenON！以及真正的网络版 TiVo——StumbleUpon。如今，作为 mopimp productions 的创始人，Matt 专注于实时与节奏的交叉点，以及基于位置的服务与游戏机制的交叉点，但他坦承，到本书出版时，他可能已经在做其他事情了。

您是如何开始 iPhone 开发的？

我第一次涉足 iPhone 开发是在 2008 年夏天，当时在 iPhone Dev Camp 2，我们黑客马拉松团队开发的应用程序 Fwerps 赢得了由 Cocoa 和 iPhone SDK 新手/首次开发者组成的团队评选出的“最佳应用”。

是什么启发您开发“What's Shakin'”？

我的朋友 Hunter Peress 是一位 Android 开发者，我们认为一起合作开发一个跨平台移动应用会很有趣。我们开始集思广益，思考什么可能有趣，以及我们自己可能会使用它。过去十年我一直 dabble 打鼓，而 Hunter 定期作为打击乐手表演；因此，打击乐是我们探索的自然领域。

问题仍然存在：我们能否制作一个通过舞蹈和动作演奏的逼真的乐器？我们问自己，哪种乐器最适合我们的合作。我们推测它是一种可以像克拉夫琴、木鱼或蛋形摇铃一样拿在手里的乐器——太棒了！

您做了哪些竞争性研究？

在开发过程中，我一定尝试了至少十个竞争对手。有些拥有漂亮的视觉效果，有些则提供了不错的乐器选择，但没有一个能真正捕捉到演奏原声乐器的体验；它们只是缺乏所需的响应能力。这里肯定有机会改进现有技术。

您是如何开始设计的？

我们最初的方法是通过对内部珠子及其与蛋壳和彼此的相互作用进行建模来模仿演奏原声蛋形摇铃时发出的声音。我们很快发现这种方法将证明是具有挑战性的。当然，我们可以做一些简化假设，忽略珠子之间的相互作用，但这可能需要大量时间才能正确完成，并且需要大量的计算才能以逼真的方式实现。

接下来您尝试了什么？

很快我意识到，一种利用 OpenAL 结合设备加速度计的混合方法对我们来说就足够了。OpenAL 是一个跨平台 3D 音频 API，它允许开发人员轻松地在 3D 空间中定位声音并创建诸如多普勒效应之类的声音效果。

OpenAL 使我们能够充分控制摇铃的声音，并使我们能够根据用户的演奏风格进行调整。我们甚至能够在设置页面上公开一个参数，允许用户更改蛋形摇铃中的珠子数量，并相应地产生更短促或“沙沙”的声音。

在发布之前您能获得用户反馈吗？

首先，我们用自己的音乐进行了测试——Hunter 用他的巴西鼓演奏，我则在练习我的 DJ 套曲时使用它。然后，我们让我们的许多朋友测试了该应用程序。有好几次，我会在我室友的乐队 The New Up 的排练时跟着摇摆，他们在我家庭办公室旁边的房间排练。

我们在内部收到的所有反馈都很好，但我希望知道该应用在现实世界中是如何工作的——在嘈杂的酒吧里人们能听到它吗？所以，我把一个早期测试版本带到了北滩的一家酒吧。最具体的一个收获是，应用程序的参数需要以某种方式配置，才能让用户在嘈杂的环境中展示该应用程序。

您怎么知道应用已经完成了？

整个夏天，我的室友们一直不断地听到塑料和硅基蛋形摇铃技术的比较；我相信这让他们抓狂。有一天，经过无数次迭代，他们再也无法分辨我是在弹奏原声乐器还是在使用我房间里的应用程序，除非冲进去亲自查看——那时我知道我们已经掌握了模拟技术，准备好发布了。[图 CS7.1-CS7.2 显示了最终应用。]

“What's Shakin'”的下一步是什么？

我们非常激动地继续在“What's Shakin'”发布的基础上进行扩展，并已计划增加更多供用户解锁的声音选择，允许用户录制和分享他们的表演给一个由其他摇铃爱好者组成的在线社区，以及排行榜和得分板，以便用户可以吹嘘他们过去的表演。对我们来说，最宏伟的计划是创建一个类似《英雄摇铃》的系列游戏和关卡供用户玩。

^[1]. Bill Moggridge，《设计交互》（麻省理工学院出版社，2007）。

^[2]. Jakob Nielsen，“纸质原型：在编写代码之前获取用户数据”，www.useit.com/alertbox/20030414.html。

^[3]. Marion Buchenau 和 Jane Fulton Suri，“体验原型设计”，《第三届交互式设计系统会议论文集：流程、实践、方法和技术》（ACM，2000）。

^[4].“绿野仙踪实验”，http://en.wikipedia.org/wiki/Wizard_of_Oz_experiment。

^[5]. 引用自 Carolyn Snyder，《纸质原型》（Morgan Kaufmann，2003）。

^[6].“快乐路径”，http://en.wikipedia.org/wiki/Happy_path。

^[7]Todd Zaki Warfel，《原型设计：实践者指南》（Rosenfeld Media，2009）。

^[8]Jared Spool，“回顾 16 年的纸质原型”，www.uie.com/articles/looking_back_on_paper_prototyping/（2005 年 7 月）。

^[9] Matthijs Collard，“使用 Fireworks CS3 为 iPhone 进行原型设计”，http://unitid.nl/2009/04/ prototyping-for-the-iphone-using-fireworks-cs3/（2009 年 4 月）。

^[10]Gentry Underwood，“LiveView：用于屏幕原型设计的 iPhone 应用”，
http://labs.ideo.com/2009/01/20/liveview-an-iphone-app-for-on-screen-prototyping/（2009 年 1 月）。

^[11] “如何使用 MockApp 模拟您的 iPhone 应用”，http://mockapp.com/2009/10/12/ new-video-demo-how-to-mockup-your-iphone-app-with-mockapp/。

^[12] “在 iPhone 上查看您的 MockApp 模拟”，http://mockapp.com/?s=goodreader。

^[13] “使用 Protoshare 创建原生 iPhone 原型”，http://blog.protoshare.com/2009/06/17/ native-iphone-prototypes-with-protoshare/。

^[14]Briefs，http://giveabrief.com/。

^[15] “Google Wave iPhone 应用演示”，http://mockapp.com/2009/10/19/google-wave-iphone-app-demo/。

^[16] Eldia 视频，http://vimeo.com/2420799。

^[17] “动画”，http://en.wikipedia.org/wiki/Animatic#Animatics。

^[18] Gogogic，“Symbol6：我们如何创建 iPhone 游戏”，http://gogogic.wordpress.com/2009/02/09/symbol6-how-we-created-an-iphone-game/。

^[19]Xsights 视频，www.xsights.com/index.php。