本篇内容
  • 我需要什么程度的原型？
  • 纸面原型
  • 数字化原型
  • 原型实例
  • 原型之后是什么？

给你的设计注入一些活力

原型是开发之前测试和验证功能设计的有效方法。原型也是与团队或客户一起探索想法的不错方式，特别是处理网页流程或复杂交互时。 你可以采用多种工具和方法创建原型——从快速粗糙到具有很好的交互性和健壮性。采用哪种方法主要考虑三个因素：第一，创建原型的用途或目的。通过原型，你想实现什么？谁是原型的受众？第二，你可支配的可投入原型创作的资源（工具、资料和技能）。 最后，你的时间表，你必须在规定的时间内完成。

在用户体验设计领域，原型制作是创建、模拟或与用户一起测试整个或部分程序或网站的行动（很多情况下，是一种艺术）。原型可以采用模拟形势（如白板或纸笔）或电子形式。

原型应该是一个迭代过程，因为通常创建原型是为了发现问题或是为了验证用户体验。一旦获得反馈，你可以修改原型然后进行再次测试。此外，一个（足够）成功的原型可以促使项目进入开发生命周期的其他阶段。

请牢记，原型是一个过程，而不是一个作品。你可能最终创建了页面（有时是模型）和功能，并将其称之为原型。但这些只是原型的一部分，并不是最终结果。原型阶段的结果是对概念的可操作的内部或外部反馈，目的是为了增强和改进设计。

1.我需要什么程度的原型？

无论是正式还是非正式 交互还是静止原型，任何用户体验设计流程都需要包含某种程度的原型。原型不需要体现整个网站或是应用程序。实际上，采用具有代表性的系统案例制作原型将会非常有效，换句话说，你不需要创建一个完整系统的模拟，只需要模拟关键部分和（或）交互。多数情况下，你想要验证一些概念，原型只要包含这些概念即可。

你可以使用多种任何自己已掌握的方法来创建原型：白板、手绘草图、故事板、剪纸等。此外，越来越多的数字化工具可供你用于创建交互式原型，继而在更真实的环境中进行用户测试。
你选择创建原型的方法很大程度上取决于你的可用时间和资源、你的目标受众和他们的专业程度。下面是一些常用的方法。

2.纸面原型

一些活动可以将你带回以前自己动手制作手工品的年代，比如纸面原型。你需要的工具仅仅是铅笔、钢笔、纸、剪刀和任何可从美工部拿来的材料，或者你也可在当地的办公用品商店购买这些工具。

纸面原型很灵活。只要你有一个橡皮或更多材料，就可以创建所需的尽可能多的剧情。你也可以通过不断地测试来快速修正。也就是说，如果一个潜在用户指出原型的一个明显错误，在呈现给下一个潜在用户之前，更新设计并不复杂。

纸面原型的成本也很低。纸、便利贴、索引卡片、铅笔以及类似的手边的东西，如果没有，你也不会因为购买这些材料而倾家荡产。

制作纸面原型的流程比较简单。画出你想测试的功能的那部分。将该功能呈现给用户看。记录用户的反馈（这是纸张，所以请将纸面原型翻过来，开始记录）。然后将原型给下个用户看，或做一些修改，再重新开始。

简单，有趣，高效。

在项目流程的早期创建纸面原型，可以帮助你在大量投入之前发现设计相关的问题。早期可以快速和高效地进行修改，降低风险。这允许你在对设计投入太多之前提前修改。

纸面原型的成本可以非常低，运用也非常简单。但当开始考虑完整的系统时，你将会投入大量的时间（尽管原材料成本只会增加少许）。如果你需要改变一个有100个页面的原型的主导航，纸面原型的成本将会剧增。虽然纸面原型本质上属于低成本，但不适合大规模地进行修改和重用。此时，你应该考虑采用数字化工具，应该会更有效。

3.数字化原型

如果纸面原型无法满足你的需要，你可以寻找更加适合你和你受众的基于技术的解决方案。运用这些工具，你可以准确地展示系统的交互部分或展示应用将会如何呈现给用户。

可通过设计流程中的很多东西来产生数字化原型。可参考人物角色来展示或测试数字化原型，可参照线框图进行原型的布局设计和视觉处理，并参照视觉形象系统（如果在流程的此点已经存在）让原型系统完善并接近真实。

3.1 线框图 vs逼真原型

依据工具、资源、可支配的技能以及处理的需求不一样，你会发现类似于线框图的原型可满足项目需求。实际上，这样可能更好。你会发现类似于线框图的原型可满足项目需求。实际上，这样可能更好。线框图可以向受众说明，项目还在进行中，这并不是最终制作好的网站。

另一方面，有时在设计用户测试时，你将会发现原型的最重要的属性是，它有多逼真地表达了最终系统。

数字化原型的产出取决于三个因素。

  • 为谁创建原型？目的是什么？
    在项目深入开展之前，了解创建原型的目的是成功的关键。
    创建原型是为了设计用户测试吗？如果是，测试的主要关注点有哪些？原型可以是黑白的线框图吗？是否需要像真实的网站？是否测试按钮和链接的可识到性？
    你创建原型是否是为了与客户沟通了解需求，从而获得高管、管理者、投资者团体或其他可能付你支票的人的支持？如果是这样，你试图传达给他们什么？哪些部分必须是可操作的，哪些部分只需要外观？这些问题会帮你确定数字化原型的需求。

  • 可用的资源、工具、技能有哪些？
    如果你不说一个HTML专家，且没有预算来雇佣这样的人，运用简单的展示工具，如PowerPoint或Keynote，或者使用线框图工具，如Visio或OmniGraffle，你依然可以创建一个非常实用的原型。有时，即使一个简单的PDF也能发挥作用。

  • 如何安排你的时间表？
    你是否有时间组织一个团队，创建一个很棒的、接近完成版的原型？此原型展示给用户的是一个清晰的即将开发的网站轮廓。你是否有时间将线框图导成HTML或者创建一个非常简单的Flash工程来显示项目中的页面流程和基本交互元素？
    这两种数字化原型都非常有用。但是，任何项目都有一个截止日期，基于可用的时间和资源，设定出期望目标非常重要。

3.2 HTML vs WYSIWYG （所见即所得）编辑器

HTML相当于纸面原型的数字化。它（有时）免费而且比较（有些）容易。如果你不是HTML行家或前端编程专家，只需要一些基础的HTML知识，你依然可以成为HTML原型的能手。
有两种创建HTML原型基本的方法。

  • 手动编辑HTML。
  • 使用WYSIWYG编辑器，如Adobe Dreamweaver、Realmac的RapidWeaver或者Microsoft Visual Studio。这些工具有一个代码视图和一个布局视图，无需浏览器就能可视化你写的代码。

以前，WYSIWYG编辑器非常流行，但最近出现了很多基于web的工具，如：Handcraft（以前是Quplo）、Justin-mind、Balsamiq、IxEdit、Pencil、Mockflow、JustProto、Invision和Protoshare。

运用WYSIWYG编辑器创建原型

在WYSIWYG 的HTML编辑器中，使用布局视图的好处是创建页面布局非常简单，就和在Microsoft PowerPoint、Apple的Keynote或任何一个简单图形布局软件（后面将会讲述这类软件）中创建一个页面那样简单。添加交互活动如链接、鼠标事件等也同样很简单。

Dreamweaver最显著的特点之一是Adobe的所谓的实时视图（Live View），它是基于开源的WebKit渲染引擎。这表示什么意思呢？简单地说，就是你在实时视图（Live View）内看到的内容就是通过苹果Safari、谷歌的Chrome浏览器所看到的内容——假设你在原型中已经开始严谨地思考细节。Dreamweaver是一个非常强大的原型工具，特别是和Adobe Fireworks配合使用时。

创建一个简单的HTML原型

或许，创建一个简单、快速粗糙的HTML原型的最节约成本的方法就是“手写“，在文本编辑工具内手动输入代码。将设计从线框图转变成原型的最常见原因之一就是要展示或测试网站的流程和导航。使用线框图内的元素块甚至是完整页面（或设计模拟），然后在HTML原型中设置成可点击的图片，这样你就可以快速简单地创建一个可操作原型。

一个简单的创建原型的方法是制作可在浏览器中观看的可点击屏幕截图。用户可以点击跳转到一个新页面。更换，刷新，再重复。非常简捷，不要求很多代码知识，可以在很短的时间内完成原型。

WYSIWYGHTML编辑器的使用此处不作介绍。

3.3 更多原型工具

现在你已经探索了一些实际操作的方法，可帮助你创建模拟和数字化原型。除此之外，你可以使用许多其他软件工具创建原型，从基本的“完成任务”到更加强壮和充满交互和智能的原型。下面的列表并不完备，但是它为让你根据情况创建合适的原型提供了很多选择。

  • PowerPoint & Keynote： 演示软件。
  • Keynote KungFu: ( http://keynotekungfu.com）: Travis Isaacs提供的创建视觉原型的好方法。
  • Adobe AcrobatPDF：可用于链接支持点击交互的内容型网页。
  • Visio & OmniGraffle: 非常标准的PC和Mac线框图工具。
  • Axure RP：利用内置的文档和原型功能来创建线框图。
  • Adobe Fireworks: Fireworks有一套标准的UI元素集，可相对快速地创建原型。
  • 还有越来越多的在线原型工具，如lnVision、Handcraft、Justinmind、mockingbird等。
  • Balsamiq Mockups：一款价格非常适宜的工具，工具的设计考虑到了非专业设计师：简单，没有特意的修饰，目的是快速向你的受众传达信息。
  • 开发人员：一个比你更了解如何更好更快编程的人，他将会和你一起工作，快速创建可点击的内容。

3.4 与开发人员一起工作

如果你有可用资源，你可能希望有一位开发人员基于你的线框图或设计来创建原型。请注意，开发人员需要扎实地理解你试图完成的内容，所以此方法也要求你创建流程的开发说明和需求，这样才能提高创建过程的有效性和效率。
如果你的原型用于迭代测试，确保你清楚地表达了原型的哪些部分将会被重点测试并需要快速修改。建议在开发阶段，花些时间和开发人员沟通，确认代码的核心内容，标记（在代码中进行注释）出需要修改的地方。在原型开发阶段，要保持与开发人员合作、开放式的沟通，确保产出物的准确性。

4. 原型案例

demo

需要重点考虑可负担性（Affordability l： 某些情况下， 可针对应用或项目的一部分建立原型来看一下功能的成本效益是否可接受。 如果创建功能的成本令人担忧， 原型开发超出时间和资源预期， 你可能需要评估项目的可行性。

5. 原型之后是什么？

－旦你已经完成了原型阶段，你将需要总结结果，并将这些分析结果转化为可操作内容。如果是纸面原型，你可能需要基于得到的反馈，开始创建数字化线框图。如果已经是数字化线框图，你可能需要在项目过程中不断更新线框图。或者，你可能需要基于反馈来修改原型并进行新一轮的评估。
原型是完成如下一个或多个目标的途径。

  • 创建自己的设计。
  • 创建一个共同交流的平台。
  • 在公司内部兜售你的设计概念（如向你的老板、 其他设计师等）。
  • 测试技术可行性。
  • 和最终用户/客户一起测试设计概念。

原型是一种反馈机制。通过原型，在进入项目的下一个阶段之前，你可以决定是否继续某个设计方向，还是探索一个不同方向。
请记住：不管你处于流程中的哪一步，原型仅是流程的一部分，和其他任何部分一样，你需要清楚何时已经达到了最大效益，以准备进入用户体验流程的下一阶段。

温习：

  • 思考合适程序的原型
  • 纸面原型的制作和特点
  • 数字化原型的制作和特点
  • 原型之后的思考

（完）