?做这个东西有两个目的：

1.?????? 把业内一些零碎和模糊的东西进行分析、整理并加以亲身实践，制定成使用说明或者标准化的设计工具。现在国内的交互从业者对一些概念和工具的理解基本上只停留在老外创造的美好词汇和自己的臆想之中，融入到工作实践时总有这样那样的不靠谱，这并不是东西本身不实用，而是师夷长技的时候并没有结合自身情况。?

2.?????? 抛块砖，引堆玉。希望童鞋们把UED的相关方法、工具和经验成果都规范总结起来，提高自己工作效率和作品质量的同时，也为整个UED行业的发展壮大贡献力量。在这条方兴未艾的行业道路上，我们需要交换思想，互相启发，彼此搀扶，共同进步。

?这只是团队工作和设计实践的经验总结，离所谓的标准和规范还差的很远，况且即使是标准和规范也都是需要不断完善和修正的。欢迎大家多提宝贵意见。

??

?该[规范]版权以及最终解释权为阿里巴巴（中国）用户体验设计部所有，转载请注明出处。

?

———————————————————————–

?

纸上原型设计方法说明及使用规范

Instruction of Paper Prototyping

ALIBABA (CHINA) UED Team 2009

Collected by

?

引言

1.1 项目综述：

此项目的目的是整理、定义、说明“纸上原型” （paper prototyping，简称“pp”）这一快速低成本的原型设计方法，并把其作为标准化设计工具引入到今后的交互设计流程当中。

通过在交互产品设计的初始阶段对pp的使用，设计师们可以更快速的构建产品原型，更早的开始需求确认，更方便的对方案进行沟通测试和修改，从而降低成本、节约时间、提高项目效率和产品质量。

该项目为期3周，历经火热头脑风暴1次，大小讨论和应用实践n次，在不断的整理分析和结论迭代验证之后，完成了最终的文档输出。感谢俞头，耿莉，塔瑞，马丁，宗博，小范，唐唐，若男，张云，金超和所有阿里巴巴中国站用户体验部的同事。

1.2 文档说明：

本文档是对纸上原型定义、特点、应用场景及建立过程的描述、解释以及示例呈现。

1.3 要点说明：

?原型（prototypes）是把系统主要功能和接口通过快速开发制作为“模型”，以可视化的形式展现给用户，用以征求意见，确定需求。同时也应用于开发团队内部，作为讨论的对象和分析、设计的接口。

?原型的根本目的不是为了交付，而是沟通、测试、修改，解决不确定。

?纸上原型是一种原型设计方法，它应用于交互产品设计的初始阶段。

?纸上原型具有快速构建、轻松修改、容易操作，xx流程，抛弃成本低的特点。

?特别注意：纸上原型不是手绘草图。

?

What ？- 什么是纸上原型

2.1 原型的定义及作用

原型（prototypes）是把系统主要功能和接口通过快速开发制作为“模型”，以可视化的形式展现给用户，用以征求意见，确定需求。同时也应用于开发团队内部，作为讨论的对象和分析、设计的接口。

需求的二义性和不完整性使开发者对所开发的产品产生困惑，也给产品方案带来不确定性。我们根据这些不确定性来判断系统中哪一部分需要建立原型和希望从用户（以及内部人员）对原型的评价中获得什么。接下来，构建原型，沟通修改，解决问题。

所以，使用原型的根本目的不是为了交付，而是沟通、测试、修改，解决不确定。

2.2 关于纸上原型：

纸上原型是一种原型设计方法，它构建快速、成本较低，主要应用于交互产品设计的初始阶段。

使用纸上原型的目的就是为了更快的解决不确定。

纸上原型所使用的介质和工具基本都是物理性质的，主要由背板，纸张和卡片构成。它通常在多张纸和卡片上手绘或标记（或打印并裁剪成模块），用以显示不同的目录、对话框和窗口元素，后将他们组合拼凑，粘贴到背景板上（去膜后的KT板），构建成模拟真实产品界面的原型。使用时，纸上原型的设计者代替电脑对用户（以及内部人员）的点击和按键操作给出反应，重组纸片，书写定制的反馈，偶尔口头描述一些效果（当这个效果比较难在纸上显示的时候），以达到仿真产品交互的目的。

这种简易的操作模式让纸上原型相比于其他计算机图形化的界面原型方法而言，应用更广，构建更快，修改更方便。但由于其精度较低（低保真），它更适用于流程、框架和基本功的设计决策。
?

? 国外纸上原型案例展示

?

?

阿里巴巴中国站UED应用纸上原型进行讨论

2.3 纸上原型与手绘草图的区别：

纸上原型是一种原型设计方法，手绘草图是一种设计表现形式。两者在定义的维度上有所区别。纸上原型可以采用手绘草图作为一种表现形式，手绘的草图并不一定都是纸上原型。

另外也需要强调的是手绘草图与低保真原型的区别。现在普遍存在一个误解，手绘草图（如果画的是某个交互产品）通常被视作低保真原型的一种，但这种说法同样不准确，也是定义维度上的问题，前者是设计表现形式，后者是原型精度（原型精度是一个多维概念，它包括广度、深度、表现、感觉、仿真度等多个指标）。

?

Why？ – 为什么使用纸上原型

3.1 我们为什么要使用纸上原型：

如上文所述， 我们使用纸上原型的目的就是为了更快的解决不确定。

1）构建纸上原型的确能更快速。对于大多数人来说，在纸上手绘或将卡片组合拼凑远比在计算机上使用绘图软件来的容易。同样的时间内，手绘能比软件画更多的界面。

2）纸或卡片上的东西很容易更改和重建。你甚至可以在用户测试或与他人沟通的过程中做即时的修改。你可以随时随地完善你的想法，轻而易举的例举多个方案。在很多方面，纸上原型都比数字原型更具可塑性。

3）纸上原型xx流程，忽略细节，当你在纸面或卡片上手绘时，不会受诸如具体尺寸，字体，颜色，对齐，空白等细节的干扰，而在软件绘图时，却必须考虑这些问题（有些甚至是不自觉的），这就使你必须多花费一些时间在上面，而当方案修改或设计被抛弃时，花在上面的时间也就被浪费了。另一方面，纸上原型可以减少沟通对象在与主题不相关的细节上的挑剔，帮助你获得更有意义的反馈。

4）还有一个不常被意识到的好处是纸上原型的抛弃成本很低，早期设计工作中的产品方案不修改几乎不可能，不幸的是，原型开发者（交互设计师）在用计算机设计和调试大量的仿真交互效果来创建实际可操作的界面之后，再想改变就很难了，原型开发者本人（交互设计师）不希望丢弃费了很大精力的工作成果，所以，他总是会试图保留一些框架或效果，尽管它们确实是无用的。相比之下，一个手绘设计怎么看起来都是未完成的，不会是不可更改的（也不会是花费太大心血的），所以更易于接收建议和改进意见。

3.2 纸上原型的一些弊端：

1）纸上原型的素材和工具保存起来不方便，毕竟，保存一个大的背景板和那些纸张卡片，不像在计算机里的文件夹里存储一个文件那么容易。而通过纸上原型得到的阶段性的确定方案，也只能通过相机拍照这么一种方式来进行保存。

2）纸上原型的复用成本比较大（虽然复用的可能性较低），在界面已经准备好的情况下，使用纸上原型进行展示和沟通的成本要比计算机的数字原型大，因为你必须付出一定的人力资源去说明一些交互效果，模拟计算机所提供的反馈。

3）通常情况下，纸上原型不管在看还是感觉上都是低精度的（虽然我们之前说话手绘和低精度没有必然的联系），它很难体现产品气质和一些交互细节。但值得庆幸的是，它能够任意地在广度（精度的一个指标）上进行深入，并且仅需很小的花费。更好的是，当用人模拟计算机的反馈时，纸上原型也能够在深度上进来一定的深入，也是只需要很少的成本。

4）一般来说，纸上原型不能代替设计阶段各环节衔接的交付物（精度不够），但它的确能为我们节省很多设计时间。假设之前交互同学需要先后出1、2、3、4、5期方案后才能{zh1}确定的原型图，那么使用纸上原型的话至少能省去2、3、4的时间，纸上原型是1，{zh1}交付原型是5。

?

How？- 怎样使用纸上原型（使用规范）

4.1哪些情况下需要使用纸上原型（适用情况）：

如前文所述，当需要快速解决不确定问题的时候，可以使用纸上原型。例如需要快速确定一个基本流程时，需要快速确定一个框架方案时。

4.2 准备工具：

白板，KT板 —— 作为大背景和粘贴背景。KT板撕掉纸膜，将海绵面备用。（在试验了大量的介质素材后觉得这个{zh0}用）

纸张，卡片，易事贴等 —— 用来写和画。

透明塑料片 —— 同样用来写和画，但修改更方便，特别是在模块尺寸变化时。另外，它也可以作为临时的内容输入介质，不会影响到纸张本身。

双面胶 —— 纸片和KT板之间的{jj1}桥梁，它能让纸在KT板上任意移动再粘贴。（这点至关重要，之前说过了，原型的目的就是为了修改）

水性笔，马克笔，剪刀，尺子，修正带 —— 用于绘写。

相机 —— 对阶段性的确定方案拍照保存。

文件夹和信封等 —— 用来保存原型素材。

打印机 —— 如果有些东西是既有的，并且打印出来比画出来更方便，那何不打印呢？ 纸上原型以快和简易为根本特征，形式上没有特别的限制。

?

4.3 使用中的注意事项：

1）纸张原型要比屏幕尺寸大。纸上原型的操作距离通常都要大于人与电脑之间的操作距离，而且人的手指比鼠标指针大，写的字也要比12点、14点大，所以要保持模拟的仿真度，就需要等比例放大一些，这样做测试的时候信度就较高，旁观者观察和记录也容易。

放大比例的经验参考值：952 pixel对应336 mm的纸面宽度。

按照这个比例制作出（手绘或打印）的纸上原型既能保证操作精度，又不至于让幅面变得太大而难以控制。这里有一个小技巧，把952 pixel宽的页面用72 dpi 的打印机打印出来的话，纸面的实际宽度刚好是336 mm（952/72*25.4）,它比屏幕中看到的尺寸要大（一般情况下，打印机分辨率的精度要低于屏幕分辨率），字体和行距又与人实际使用尺寸类似，因此正适用于纸上原型。另外，如果有特殊的情景需求（展示和参与者较多的测试等），比例可以适当的再多放大一些。

?

2）除了尺寸，原型的操作高度及视距也需要注意。合适的高度和视距会让沟通变得更准确更舒适xxx，同时在用户测试时，也能在一定层面上增加这种测试方法的信度以及本次测试的效度。

我们参考了《室内人机工程学》及人因工程和人机工程协会对人体水平/垂直作业域的统计数据和尺寸标准，并且也进行了一些实践操作来对相关尺寸进行校正以确保其适用性（比如把一些常用辅助工具的长度考虑进去等），{zh1}得到的经验参考值为：原型垂直放置时中心距地面高度140 cm，视距（操作距离）50 cm 。需要注意的是，如果让用户坐在椅子上对桌面上水平放置的原型进行操作，合适的视距在35 cm左右。

?

3）尽量用单色，这样更简洁，而且不会在重要的流程中分散注意力。当然必要时可使用鲜艳颜色的便签纸记录重要的修改方案。

4）不用在纸上渲染每个交互和视觉效果，一些情况可以用语言描述代替显得更简单实用。“篮球在旋转”，“进度条达到了20%…50%…75…”这些大声说出来反馈给你的沟通对象即可。

5）手绘不是{wy}且必要的方式，你可以打印现有的网站界面产品，然后把他们按网页框架裁剪成模块，与手绘的纸张和卡片配合使用。

4.4 纸上原型测试时需注意的要点：

测试是原型用来解决不确定问题的一种方式，纸上原型的测试与通普通原型的测试原则保持一致。此外纸上原型还有一些特殊事项需要注意：

1）测试中代替计算机给出操作反馈的是设计团队的成员，他负责移动、切换纸片，写下电脑反馈，给出反馈描述，通过这些让原型变成可交互的。

2）模拟时不要提供任何计算机不能给出的反馈。要机械的思考，机械的反馈。

3）必须有一位设计团队成员担任“主持人”的角色，他给用户阐述测试目的，介绍测试流程，当用户提出疑问或操作中遇到问题而计算机又无法反馈时，主持人负责给出必要的解释和帮助。另外，他负责指导和协调整个测试任务，确保其正常进行。

?

纸上原型设计说明更改和追加说明
5.1 更改说明：

后期纸上原型设计说明的更改或工作模型的修正，将会通过适当渠道发布给使用者和相关的产品开发人员。

5.2 追加说明：

对现有设计说明的追加设置或修改（如项目应用实例、经验总结和输出物规范等），将会在完成后通过适当渠道发布给使用者和相关的产品开发人员。