浙江科技学院 交互设计与用户研究实验室

1. 交互原型 ——原型构建 Prototyping 研究小组 F 组员：周芸 赵贵华 张罕 日期： 2010 年 10 月 11 日

3. 以原型构建为核心的交互设计

4. 什么是原型及原型构建 在交互设计中，一般把这样的帮助我们与未来产品进行交互，从而获得第一手体验，并发掘新思路的装置，称之为“原型”，这个构建与完善的过程，称之为“原型构建”。 实际上原型可以是任何东西，从纸张式的情节串联图到复杂的软件，从粘合的纸模型到锻压的金属模型。总之， 原型 是设计的一种受限表示， 用户 可尝试与它交互并探索它的适用性。

5. 原型与模型的区别 c. 构建原型 往往是为了“推销”设计团队的想法与创意 . 而 制作模型 则更侧重于实际生产与制造 ; 原型 要求快速构建 , 且是相对廉价的装置 , 它容许为解决关键问题而不用于拘泥于细节的推敲 , 而模型的制作颇费周章 , 要求面面俱到 , 重视细节的品质因而需要耗费大量的时间与金钱。 b. 原型 聚焦于创意概念的各方面评估 , 是各种想法与研究结果的整合 , 而 模型 涉及到了整个产品 , 特别是有关与实际生产﹑制造及装配衔接的方案 ; a. 在交互设计里 , 原型 被认为是一个多方面研究创意概念的工具 , 而在工业设计的模型则被认为是为了测试与评估的第一个产品版本 ; 原型是创意概念的具体化 , 但并不是任何一件产品 , 而 模型 则与最终产品非常接近 ;

6. 原型构建

7. 快速机器人原型开发 发泡材料草模

9. 模型

10. 原型 能够回答许多问题（测试方案的可行性，澄清含糊的需求，让用户测试﹑评估设计，检查设计方向是否正确）－— - “ 会说话的原型” 制作原型的主要目的是“快速制作每个东西以测试产品的某些方面”。 为什么要制作原型 原型 就是设计的一种受限表示，用户可尝试与它交互并探索它的适用性。

11. 在世界闻名的 IDEO 设计公司，设计团队对于 原型构建 有着相当宽容的态度，即便知道结果不是预想的，但他们还是会完成 原型 ，因为这样便能更快修改，并发现不合理的地方。 “ 说不定还会有些额外的新发现！” IDEO 的设计师如是说。

12. 一切设计都是从低保真开始的。在分析和评估没有开展前，我们应该保留所有设计过程的低保真原型，在后期 迭代 后，我们将把它逐渐转变为高保真原型。 原型构建的类别 1. 低保真原型设计（ High-Fidelity ） : 2. 高保真原型设计（ Low-Fidelity ） : 对产品简单的模拟 , 基本停留在产品的外部特征和功能构架上 . 与最终产品在外观和功能上差别较大。 高功能性 , 高互动性 , 忠实地展现产品 / 界面主要或全部的功能和工作流程 , 具有完全的互动性 . 虽尽可能地达到了实际产品的“样子” , 但它未必是可产品化的设计。

13. 低保真原型与高保真原型比较：

14. 基本原则 快速原则，迭代原则，焦点原则，有限性原则 焦点原则 ：每个原型都必须切实解决一个被设计团队锁关注的焦点。 为人物角色构建出原型，以解决这个目标人群定位的关键问题。 有限性原则 ：在原型构建过程中，我们基于不同的原因，需要构建不同的原型，不能指望在一个原型构建过程中解决所有的问题，认识到这种局限性，有利于设计团队的轻松工作，从而激发创意。 快速原则 ：快速构建原型可以尽可能多地找出问题，同时为后期的深入发掘赢得更多的可能性。我们需要学会快速地联想，并快速地视觉化，实物化。 迭代原则 ：迭代指的是，“重复操作直至获得明确而详细的结果的过程。”没有迭代就不会产生有序的复杂性。实际上，迭代允许通过简单结构的逐步积累形成复杂结构。在交互设计的原型构建中，我们允许通过的不断的调查﹑测试和调整设计来创造复杂的结构。 交互设计，乃至设计的过程都是一个迭代的过程，设计师们一点点推敲，一点点深入直到把设计推到一个完善的过程 。

15. 设计流程

17. IDEO ：如何帮你设计最好卖的产品？ < 资料 > 让客户扮演消费者

18. 为了研究消费者的习惯，宝洁公司 CEO 被派去购物；为了改善供应链管理，卡夫食品的高管，被带到某大城市的交通控制中心，观看上百万辆汽车每天停下和发动的过程；沃纳科内衣公司的女性主管们，也曾穿梭于各大百货商场的内衣专柜里，亲自试穿，体会自家牌子的内衣销售为何落后于竞争对手。 由于客户公司全程参与，当设计完成时，客户已经清楚方案设计的原因以及应当怎样快速地完成改造，而不用再花费时间，来消化咨询顾问给出的解决方案，进一步提高了工作效率。

19. IDEO 创意流程 IDEO 所依靠的绝对不只是创意和灵感，还包含更多科学的流程和纪律。 IDEO 认为，创意也是可以被管理、被流程化的。 CEO 布朗认为， IDEO 的创意流程主要有五个步骤：“ 观察 ”、“ 脑力激荡 ”、“ 快速制作原型 ”、“ 重复评估 ”、“ 改良原型和实际执行 ”。 除了前面提到的“观察”以外，“脑力激荡”是一个紧凑密集、搜集灵感和创意的过程，将观察人们所得的数据进行分析，多多益善。 在此期间，不要动辄驳斥任何构想，而是以别人的构想为基础，再提出自己的意见：不要说“但是”，要说“还有”。

20. 如果一张照片胜过千言万语，那么在 IDEO ，一个原型胜过千张照片。因此“快速制作原型”不但是一种创新的语言，更是沟通与说服的工具。 IDEO 使用的是一些价格便宜的模型制造工具。例如，用苹果计算机的 iMovies 来模仿消费者的经历，用廉价的纸板搭建检查室或试衣间。重要的是，原型越早失败，就会越早找出问题所在，成功的速度就越快。 随后，经过“重复评估”、“改良原型和实际执行”两个步骤， IDEO 设计的新产品或新服务最终上市。

21. 原型制作和工具 原型制作 交互设计分为两部分，一部分是形成思路或理念，第二部分就是将思路或理念体现到设计中。而设计其实就是制作各种不同的原型来体现在设计师脑中的理念。 原型法在交互设计中起到非常大的作用

22. 想要达到以上作用，需要在设计的不同阶段运用不同的工具 1 ） 沟通设计思想：使用手绘， PPT ， Visio ，并用 Photoshop 或 Freehand 来改进局部来表达思想 2 ） 多个方案的选取：使用 Visio 或 Flash ，配合 Photoshop 3 ） 树立专业形象： Flash 及其 ActionScript 或者编程工具 工具 1 ） 快速和各方人员沟通设计思想 2 ） 在多个方案中进行有效的比较和改进意见的获取 3 ） 提高项目质量，并且树立专业形象

23. 产品原型设计最基础的工作 ，就是结合批注、大量的说明以及流程图画框架图 wireframe ，将自己的产品原型完整而准确的表述给 UI 、 UE 、程序工程师，市场人员，并通过沟通会议，反复修改 prototype 直至最终确认，开始投入执行。 我们先来看看做产品原型设计，现在大致有哪些工具可以使用，而他们的利弊何在。

24. Visio ：功能相对比较复杂。善于画流程图，框架图。不利于批注与大篇幅的文字 说明。同样不利于交互的表达与演示。 纸笔 ：简单易得，上手难度为零。有力于瞬间创意的产生与记录，有力于对文档即时的讨论与修改。但是保真度不高，难以表述页面流程，更难以表述交互信息与程序需求细节。 Word ：上手难度普通。可以画 wireframe ，能够画页面流程，能够使用批注与文字说明。但是对交互表达不好，也不利于演示。 PPT ：上手难度普通。易于画框架图，易于做批注，也可以表达交互流程，也擅长演示。但是不利于大篇幅的文档表达 Dreamweaver ：操作难度大，需要基础的 html 知识。易于画框架图、流程图、表达交互设计。不擅长文字说明与批注

25. Axure 原型设计软件 Axure RP 能帮助网站需求设计者，快捷而简便的创建基于网站构架图的带注释页面示意图、 操作流程图、以及交互设计，并可自动生成用于演示的网页文件和规格文件，以提供演示与开发。 Axure 的正确发音是“ Ack-Sure” ， RP 则是” RapidPrototyping” 快速原型的缩写。

27. 用编程工具可以展示更为复杂和更为保真的原型，但是会牵涉到很多精力用来编码和调试 Bug 。没有较多开发经验的设计人员需要学习掌握其使用，否则关注软件的实现会多于交互设计本身，且一旦花了很多精力做好，就很难愿意因需求的变化，进行修改和调整。所以一定要方案基本上通过中保真原型定好后，再做高保真的原型。 最理想的状态是软件是用什么工具开发的，就用什么工具来做交互的 高保真原型 。

28. < 案例 > iPhone 手机原型设计工具介绍 手绘 iphone 苹果手机 UI 图标

29. 可绘制简单线框图（ Illustration ）和手绘风格线框图（ Pencil ）两种风格的原型。组件都可以任意拖动，放到合适的位置。但是由于是在线软件，可能在安全保障上会有些欠缺，而且有些类似于沙盘的形式，不知道什么时候还会消失。优点是可以协同创作。 http://iphonemockup.lkmc.ch/ 一、 iPhone Mockup

30. 二、 Balsamiq Mockup http://www.balsamiq.com/ Balsamiq Mockups 提供了 9 大类共 50 多个控件，涵盖了几乎所有常用的 UI 控件。不管是桌面软件、手机软件还是 Web 站点，都能搞定，且软件极易上手。 Balsamiq Mockups 有许多不足之处，如不能制作交互效果、不能将重复区域做成模块多次使用。不过 Balsamiq Mockups 的免费版本有诸多限制，如无法保存、导出原型图就极为不便。而收费版本需要 $79 ，实在太高。但是也有 5 种方法可以免费获取 license key ，可以去它的网站上研究一下。

31. 三、 iPhone Sketch Pad http://www.uistencils.com/ 这是一个做纸面原型的模板，像我们小时候用的那种复杂的绘图板，不同的是它集成了 iPhone 的一些常见的按钮、输入框、组件样式，而且可以方便的绘制 iPhone 的轮廓。有网格线，还送白纸板，当然，这个东西是需要购买的， 9.95 美金。

32. 四、 Axure http://www.axure.com/ Axure RP 已经成为成功设计 Web 原型的重要工具，也是产品经理使用的最多的原型工具，虽然 Axure 的优势在 Web 原型，但是用过导入一些组件也可以方便的设计手机原型和交互效果，这对于使用 Axure 已经娴熟的人来说，基本不需要任何学习成本，所以也是一种比较推荐的工具。

33. The end