在纸张上设计软件产品原型的方法

在网上下载了一个讲义，是关于怎么在纸上构建产品原型的，读来受益匪浅。很可惜这个PDF文件的讲义上没有作者的姓名和地址，可能是来自英国的，因为里面提到了剑桥。在此谢谢了。

费了一点时间把它翻译过来，这是前半部分，后半部分由我的好朋友王峰协作，一并谢谢了。以下是中英文对照。

2007-4-27翻译初稿
2007-4-29校对

第二部分由我的朋友王峰翻译，等我校对了一起发上来。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
纸上原型

Today’s Topics
Paper prototypes
Wizard of Oz prototypes

Today we’re going to talk about protototyping: producing cheaper, less accurate renditions of your target interface. Prototyping is essential in the early iterations of a spiral design process, and it’s useful in later iterations too.

今天，我们讲产品原型：以低投入的、非精确的形式设计目标产品界面。在早期的迭代式设计流程中，原型是一个基本的方法，而且在之后的迭代（设计）中也是基本方法。

Why Prototype? 为什么用原型？
Get feedback earlier, cheaper 快速且低成本地获得反馈
Experiment           with alternatives 在多种可能中对比试验
Easier to change or throw away 轻松修改或者放弃设计

We build prototypes for several reasons, all of which largely boil down to cost.

我们因为一些原因构建产品原型，这些原因绝大多数出于成本的考虑

First, prototypes are much faster to build than finished implementations, so we can evaluate them sooner and get early feedback about the good and bad points of a design.

首先，原型能以比完成（开发）快得多的方式构建产品行为。这样，我们能够很快评估设计方案，获得关于设计的优点和缺点的早期反馈。

Second, if we have a design decision that is hard to resolve, we can build multiple prototypes embodying the different alternatives of the decision.

第二，当如果我们的设计中包含很难解决的内容时，那么我们能够构建多个应对方案，这些方案考虑了对多种可能的情况。

Third, if we discover problems in the design, a prototype can be changed more easily, for the same reasons it could be built faster. Prototypes are more malleable. Most important, if the design flaws are serious, a prototype can be thrown away. It’s important not to commit strongly to design ideas in the early stages of design. Unfortunately, writing and debugging a lot of code creates a psychological sense of commitment which is hard to break. You don’t want to throw away something you’ve worked hard on, so you’re tempted to keep some of the code around, even if it really should be scrapped.

第三，当我们发现设计中的问题时，能够更容易修改原型，同样的原因，它能够被更快地创建。原型具有更强的可塑性。最重要的是，如果设计的缺陷非常严重，这个原型可以很轻松的放弃。有一点很重要，在早期的设计工作中不需要做出完善的设计。不幸的是，在编写和调试大量的代码来创建实际可操作的事务之后，再想改变就很难了，你不希望丢弃费了很大精力的工作成果，所以，你总是试图保留一些代码，尽管它们确实是无用的。

The prototyping techniques we’ll see in this lecture actually force you to throw the prototype away. For example, a paper mockup won’t form any part of a finished software implementation. This is a good mindset to have in early iterations, since it maximizes your creative freedom.

我们在这个讲座中将要看到的原型法会促使你丢弃（一些不成功的）原型。例如，一个纸上的模型不属于任何一个完成了的可执行的软件。在早期的产品设计迭代中，这是一个好的方法，因为它能最大限度的实现你的创造自由。

Prototype Fidelity 原型的设计精度
Low fidety: omits details 低精度：忽略细节
High fidety: more like finished product 高精度：更像一个已经完成的产品

An essential property of a prototyping technique is its fidelity, which is simply how similar it is to the finished interface. Low-fidelity prototypes omit details, use cheaper materials, or use different interaction techniques. High-fidelity prototypes are very similar to the finished product.

原型方法的基本属性就是它的精度，简言之，精度就是它与完成产品的界面的接近程度。低精度的原型忽略了细节，使用低成本的材料，或者使用不同的交互技术。高精度的原型非常接近已经完成的产品。

Fidelity is Multidimensional 精度是一个多维的概念
Breadth: % of features covered 广度：涉及了百分之多少的产品功能
-Only enough features for certain tasks 只涉及某个任务必需的功能
Depth: degree of functionality         深度：挖掘产品功能流程的深度
-Limited choices, canned responses, no error handling 限制性的选择、无法响应、非错误处理

Fidelity is not just one-dimensional, however. Prototypes can be low-or high-fidelity in various different ways (Carolyn Snyder, Paper Prototyping, 2003). Breadth refers to the fraction of the feature set represented by the prototype. A prototype that is low-fidelity in breadth might be missing many features, having only enough to accomplish certain specific tasks. A word processor prototype might omit printing and spell-checking, for example.

虽然精度不仅仅是一维的，原型能够以各种各样的方式呈现或低或高的精度(Carolyn Snyder, Paper Prototyping, 2003).广度依赖于原型呈现的产品功能，低精度的产品原型会在广度上会缺失很多功能，只有足够用来完成某个特定任务的功能，例如，字处理软件原型会忽略打印和拼写检查功能。

Depth refers to how deeply each feature is actually implemented. Is there a back end behind the prototype that’s actually implementing the feature? Low-fidelity in depth may mean limited choices (e.g., you can’t print double-sided), canned responses (always prints the same text, not what you actually typed), or lack of robustness and error handling (crashes if the printer is offline).

深度依赖于每个功能实际被执行的深度。原型后面是否有实际执行的功能的延续？在深度上的低精度原型可能只包括限制性选择（类似不能打印双面），固定的反馈（经常显示同样的文本，而不是你实际输入的）或者弱化的错误处理信息（当打印机离线时终止）

A diagrammatic way to visualize breadth and depth is shown (following Nielsen, Usability Engineering, p. 94). A horizontal prototype is all breadth, and little depth; it’s basically a frontend with no back end. A vertical prototype is the converse: one area of the interface is implemented deeply. The question of whether to build a horizontal or vertical prototype depends on what risks you’re trying to mitigate. In user interface design, horizontal prototypes are more common, since they address usability risk. But if some aspect of the application is a risky implementation – you’re not sure if it can be implemented to meet the requirements – then you may want to build a vertical prototype to test that.

展现广度和深度的方法是图表显示(参考 Nielsen, Usability Engineering, p. 94)，水平方向的原型包括全部的广度，和很少的深度，它的基础是前端没有后续。垂直方向的原型是交谈式的：界面的一个区域被执行到一定的深度。是创建水平方向还是垂直方向的原型依赖于你想规避什么样的风险。在用户界面设计中，水平方向的原型更加普遍，尽管它们会冒可用性的风险。如果一些软件的外观可能会冒执行风险――你不能确认它被执行的结果是否满足需求――于是，你也许会需要构建一个垂直方向的原型来测试它们。

A special case lies at the intersection of a horizontal and a vertical prototype. A scenario shows how the front end would look for a single concrete task. Scenarios are great for visualizing a design, but they’re hard to evaluate with users.

一个特殊的例子出现在原型水平方向和垂直方向的交叉点。一个场景展现了前后端怎样看起来想一个具体的任务。场景对可视化设计非常有效，但是，它们对用户评估是困难的。

More Dimensions of Fidelity　关于精度的更多指标
Look: appearance, graphic design 看到的：外观、图形设计
-Sketchy, hand-drawn 草图、手绘
Feel: input method 感觉的：输入手段
-Pointing & writing feels very different from mouse & keyboard　用鼠标和键盘定位和书写有很大的不同

Two more crucial dimensions of a prototype’s fidelity are, loosely, its look and its feel. Look is the appearance of the prototype. A hand-sketched prototype is low-fidelity in look, compared to a prototype that uses the same widget set as the finished implementation. Feel refers to the physical methods by which the user interacts with the prototype. A user interacts with a paper mockup by pointing at things to represent mouse clicks, and writing on the paper to represent keyboard input. This is a low-fidelity feel for a desktop application (but it may not be far off for a tablet PC application).

两个重要的关于原型精度的指标是用户从原型看到的和感觉到的。看到的是原型的外观。一个手绘草图原型看起来是低精度，当它与使用了同样的装饰物件表示执行的原型比较时。感觉依赖于用户与原型交互时的物理方式。当用户与纸上模型交互时，用在东西上面点击代表鼠标点击，在纸上写字代替使用键盘输入。这对于桌面程序来说是低精度的感觉。（但是，也许它和ｐｃ程序的写字板离得不是太远）

纸上原型
交互式的纸上模型
-描绘屏幕显示
-纸片显示窗口、菜单、对话框
交互是实时的（生动的）
-用指头定位＝鼠标点击
-写字＝敲字
用一个人模拟电脑的操作
-放下或拿起纸片
-在“屏幕”上写反馈
-描述在纸上难以显示的结果
在观看和感觉上的低精度
在深层次的高精度（人模拟反馈）

Paper prototypes are an excellent choice for early design iterations. A paper prototype is a physical mockup of the interface, mostly made of paper. It’s usually hand-sketched on multiple pieces, with different pieces showing different menus, dialog boxes, or window elements.

纸上原型在早期的交互设计中是一个不错的选择。纸上原型是界面的物理模型，主要由纸张构成。它通常在多张纸片上手绘，这些纸片显示不同的目录、对话框和窗口元素。

The key difference between mere sketches and a paper prototype is interactivity. A paper prototype is brought to life by a design team member who simulates what the computer would do in response to the user’s “clicks” and “keystrokes”, by rearranging pieces, writing custom responses, and occasionally announcing some effects verbally that are too hard to show on paper. Because a paper prototype is actually interactive, you can actually user-test it: give users a task to do and watch how they do it.

纯粹的草图和纸上原型的关键区别是它们的交互效果。纸上原型带来了生动的效果，用设计团队的一个成员来模拟电脑，对用户的点击和按键操作作出反馈，重组纸片，书写定制的反馈，偶尔口头描述一些效果，当这个效果比较难在纸上显示的时候。因为纸上原型是实际交互的，你能够让用户实际的测试它：给用户一个任务去做，看看他们怎么做。

A paper prototype is clearly low fidelity in both look and feel. But it can be arbitrarily high fidelity in breadth at very little cost (just sketching, which is part of design anyway). Best of all, paper prototypes can be high-fidelity in depth at little cost, since a human being is simulating the backend.

显然，纸上原型不管在看还是感觉上都是低精度的。但是它能够任意地在广度上深入，仅需很小的花费（仅仅草图，就像其他的设计一样）。最好的，当用人模拟反馈时，纸上原型能够在深度上深入，也只需很少的花费。

为什么使用纸上原型？
快速构建
-手绘草图比程序更快
轻松修改
-在用户测试间隙轻松修改，甚至在用户测试过程中
-没有编码的投入-所有的都会被丢弃（除了设计本身）
把注意力集中在一张大的图画上
-设计师不用在细节上浪费时间
-用户能提供更多创造性的建议，而不会吹毛求疵
无需帮助
-只需简单的技能

But why use paper? And why hand sketching rather than a clean drawing from a drawing program? Hand-sketching on paper is faster. You can draw many sketches in the same time it would take to draw one user interface with code. For most people, hand-sketching is also faster than using a drawing program to create the sketch.

但是，为什么使用纸呢？而且，用手绘草图，而不用绘图软件画出整洁的图呢？在纸上手绘更快。在同样的时间内，手绘能比编码画更多的用户界面。对大多数人来说，手绘比用绘图软件创建草图要快得多。

Paper is easy to change. You can even change it during user testing. If part of the prototype was a problem for one user, you can scratch it out or replace it before the next user arrives. Surprisingly, paper is more malleable than digital bits in many ways.

纸很容易更改。你甚至可以在做用户测试的过程中更改。如果原型的某个部分对某个用户存在问题，你可以在下一个用户到来之前划掉或者更换它。令人惊讶的是，纸上原型在很多方面比数码原型更具有可塑性。

Hand-sketched prototypes in particular are valuable because they focus attention on the issues that matter in early design without distracting anybody with details. When you’re sketching by hand, you aren’t bothered with details like font, color, alignment, whitespace, etc. In a drawing program, you would be faced with all these decisions, and you might spend a lot of time on them – time that would clearly be wasted if you have to throw away this design. Hand sketching also improves the feedback you get from users. They’re less likely to nitpick about details that aren’t relevant at this stage. They won’t complain about the color scheme if there isn’t one. More important, however, a hand-sketch design seems less finished, less set in stone, and more open to suggestions and improvements. Architects have known about this phenomenon for many years. If they show clean CAD drawings to their clients in the early design discussions, the clients are less able to discuss needs and requirements that may require radical changes in the design. In fact, many CAD tools have an option for rendering drawings with a “sketchy” look for precisely this reason.

在早期设计中，不需要过多关注细节，而是把注意力集中在流程上，所以，手绘原型特别有用。当你用手绘草图时，你不用受到诸如字体、颜色、对齐、空白等细节的干扰。在绘图软件中，你必须考虑这些问题，而且你会在他们上面花费很多的时间－很显然，当你不得不放弃这些设计时，你在它们上面花费的时间就浪费了。手绘还可以促进从用户那里获得反馈。减少他们在与主题不相关的细节上的吹毛求疵。当没有颜色时，他们就不会抱怨色彩设计。更重要的是，一个手绘设计怎么看起来都是未完成的，不会是不可更改的（刻在石头），所以更易于接收建议和改进意见。建筑师很多年前就认识到这个现象。如果他们用整洁的CAD图给客户展示早期的设计，那么他们的客户很少提出需要大改设计的需求。实际上，CAD的工具中有个选项可以把图描绘成看起来像草图一样，似乎出于这个原因。

A final advantage of paper prototyping: no special skills are required. So graphic designers, usability specialists, and even users can help create prototypes and operate them.

纸上原型最终的优势是：不需要特殊的技术。于是，图形设计师，可用性专家，甚至用户都能够帮助建立原型、操作他们。

纸上原型的工具
白板
-作为背景，窗口的帧
大的索引卡片
-作为菜单、窗口内容，和对话框
胶水
-把纸片粘起来
白色的修正带
-为输入框、多选框、和短信息准备
透明胶片
-作为文本高亮显示和用户输入
复印机
－用来制作多表格
钢笔或麦克笔，剪刀，带子

Here are the elements of a paper prototyping toolkit.

这些是纸上原型工具包中的东西。

Although standard (unlined) paper works fine, you’ll get better results from sturdier products like poster board and index cards. Use poster board to draw a static background, usually a window frame. Then use index cards for the pieces you’ll place on top of this background. You can cut the index cards down to size for menus and window internals.

尽管普通的纸张也好用，但是使用一些硬一点的产品，就像白板纸和索引卡片你会感觉更好。使用白板纸来画静态背景，经常是窗口的帧。然后，使用索引卡放在这些背景的顶部。你可以剪切索引卡片成菜单或内窗口的尺寸。

Restickable Post-it Note glue, which comes in a roll-on stick, is a must. This glue lets you make all of your pieces sticky, so they stay where you put them. You can find this glue at Pearl Arts in Central Square; it’s not found in the Coop.

Restickable Post-it便条胶水必须可以滚动粘贴。这种胶水可以让你把所有的纸片牢固的粘在一起，于是，他们可以粘在你要粘的地方。你可以在中央广场的珍珠美术商店找到这种胶水，库柏商店没有。

Post-it correction tape is another essential element. It’s a roll of white tape with Post-it glue on one side. Correction tape is used for text fields, so that users can write on the prototype without changing it permanently. You peel off a length of tape, stick it on your prototype, let the user write into it, and then peel it off and throw it away. Correction tape comes in two widths, “2 line” and “6 line”. The 2-line width is good for single-line text fields, and the 6-line width for text areas. You can get correction tape at the Office Max in East Cambridge.

Post-it修正带是又一个必要工具。在白色带的一面滚涂上Post-it胶水。修正带对输入框是有用的，这样用户可以一直在原型上书写。你可以剪下一定长度的色带，粘贴在你的原型上，让用户在上面书写，不用时，把它撕下来丢掉。修正带有两种宽度“2行”和“6行”的，2行宽度对于单行的输入框很好用，而6行的宽度很适合文本框。你可以在东剑桥的马克斯商店买到修正带。

Overhead transparencies are useful for two purposes. First, you can make a selection highlight by cutting a piece of transparency to size and coloring it with a transparency marker. Second, when you have a form with several text fields in it, it’s easier to just lay a transparency over the form and let the users write on that, rather than sticking a piece of correction tape in every field.

透明胶片有两个用途。第一，你可以剪一块合适大小的透明片，做上透明颜色标记来代表选择块的高亮显示。第二，当表格中有很多输入框时，放一块透明片在表格上让用户书写，比在每一个输入框粘贴修正带方便。

If you have many similar elements in your prototype, a photocopier can save you time.
And, of course, the usual kindergarten equipment: pens, markers, scissors, tape.

如果有一些相似的元素在原型中，复印机能节省你的时间。而且，当然了，还包括那些最基础的装备：钢笔、麦克笔、剪刀、纸带。

 

转于:http://hi.baidu.com/interaction_design/blog/item/f2fbcd03d886db763912bb1d.html