纸上原型设计

是的，它是低技术的，但是这种可用性测试方法可以帮助你在编写代码之前回避问题。
在你开始编写代码之前，找到用户和营销需要什么难道不是很重要的吗？纸上原型技术就可以让你做到这些。然而它不用电脑来作为测试界面可能看起来是有悖常理的，纸上原型技术让你用最少的工作得到最大的回报。经过一些纸上样板设计的可用性测试方法，你可以很有自信在实施正确的东西。

什么是纸上样板设计？

纸上原型设计是一种对网站、网站应用程序、常规软件很有用的可用性测试方法。下面讲一下他如何运用：你首先要在任务中拟定你想要用户完成什么。接下来，你制作屏幕截图并将窗口、菜单、对话框、页面、弹出消息等等做成手绘草图，这些都是实施任务所需要的。然后你通过用一或两个开发人员扮演“电脑”的角色来进行一个可用性测试方法，或者通过操作纸片来模拟最后的界面将如何实现。被分配实际任务的用户去用接口的直接样板设计实施。——他们用触摸原型设计按钮来 “点击”，用在原型设计编辑区域中的写代码来“链接”。（用透明度和可移动的胶带保护模型被直接改写。）
一个主持人（通常是在可用性中被训练出来的人）在当开发团队中的其他成员观察和记笔记时进行会话。“电脑”不是解释界面应该怎样工作，而是模拟界面将要做什么。在这个方式中，你可以鉴定界面中哪个部分是不言自明，哪个部分是令人迷惑的。
因为这个模型完全在纸上实施，你可以很容易地修改你发现的要修理的问题。

图一：给微软文字建立纸上原型设计文件设置对话框

图一表明了不同的图形用户界面是如何被原型设计的，这个例子说明了微软文字软件的文件设置对话框。（在一个可用性测试中，这个环节被放置在文字软件原型设计的顶部，而不是用它自身来表现。）每个标签在不同纸片上，所以当用户选择它时，可以被移到前面。适合纸张大小的下拉列表被写在不同的纸片上，并且当用户用鼠标点击下拉列表将显示出来。无线电按钮是模拟了可移动磁带。这个预览环节（在这张图中现实的红色目标）附加了提示贴和胶水，这样他们就可以在用户选择景观时能够被改变。（看参阅资源来得到更多信息来获取可移动的提示贴和胶水。）

图二：电子商务网站的购物车页面

图二显示了可移动的胶带如何让用户在购物车中安置项目元件。“电脑”可以更新购物花费金额并且将他们全部用一张潮湿的纸毛巾拭去透明度，并且重写他们。（这并不认为是用计算器为“电脑”作弊）

纸上原型设计到底有多好？

你可以将你想要实现的已经存在的设计用屏幕截图获取下来，但是他们仍适合去手绘草图。尤其是当你在设计的早期阶段。如图三所示，有时候手绘元素确实要比用暗色背景来填充的屏幕截取要容易阅读。
图三，手绘版本的浏览器按钮相比灰度屏幕快照。

你也可以混合和匹配屏幕截取图片和手绘草稿图片。原型设计只需要足够好让你对最关心的问题找到答案。所以，大多数的纸上原型设计不需要：
直线或键入式文本。如果用户不能读懂什么，告诉他们他说明什么就可以了。（但是如果用户没有理解一个术语，就不要解释了，把它改了。）
图片和图标。用文字代替。比如，为了一个公司的标志，你可以画一个有文字的框框，里面写“公司标志”。如果图片是内容的一部分的话，（比如产品目录），你可以用提示贴胶把它粘进你的原型模型中，这样可以让你在之后重新安排页面。
颜色。俗话说得好，“你可以给猪戴上耳环，可它却仍然是一头猪”颜色不能拯救本质上有缺陷的设计。用屏幕截取的灰色打印输出或用暗色标记的草图来做你的原始设计。
大小一致的组件。除非你要一个小的或密集型的显示，不要担心精确地用网格。组建元素大小不一也没关系。比如，可能你的菜单栏和图标都来自于一个屏幕截取而且跟手绘的屏幕组建比起来相对要小。如果用户觉得迷惑，你可以阐明：这是一个整个的窗口。
如果原型看起来有点乱也是正常的。非常普遍，第一次的可用性测试显示了你从未预计到的问题，然后你将要做一些改变。在测试之前不要花时间使模板看起来整齐。只要易读，他就足够好了。（对于你所想的那些人，“但是我很容易就模拟了哪些看起来很好的东西”参见侧边栏）

纸上原型设计能（或不能）有助于什么？

纸上原型设计尤其对以下几种问题的数据收集有用。
概念和术语
目标用户能看懂你选择的术语吗？他们有没有掩饰或误解一些关键概念？（我在以往做过测试的每一个界面上都真实地遇到过这种类型的可用性问题）
导航/工作流程
如果有一个过程或一系列的步骤，它能匹配用户的期望吗？他们能在屏幕之间不同的向前或回去吗？界面有没有要求用户没有的输入设备或者用户不想进入的？
内容
界面为用户做决定提供了正确的信息吗？是否有用户不需要的多余信息，或者惹恼他们的信息？
页面布局
虽然你的粗糙的屏幕不是很漂亮，但是你仍然可以知道用户是否找到了他们想要的信息。你按用户期望将字段排序了吗？是不是信息量过多？不足？或者正确度？
功能
你可能发现用户需要而又丢失的功能，或者你打算要做但用户不关心的功能。另一方面，如果你的最大问题涉及到以下几点时，纸上原型设计不是很理想：
技术可行性
纸上原型设计演示技术能力。创造出一个事实上不能实施的纸上原型设计也是可能的。为了避免这个问题，我推荐自始至终最少得有一个懂得技术限制的人参与进来。
下载时间或者其他响应时间
因为人模拟的是电脑的行为，“响应时间”是人造的。
滚动
我见到过一些关于网页页面设计的有趣而又细节的问题，即阻碍用户将页面向下滚动或直接返回到顶部的问题。我在纸上原型设计时没有发现这些问题。
颜色和字体
如果你真的需要看到在电脑屏幕上是怎样的，纸上原型设计不能够为你演示。在纸上原型设计测试中加入图形设计师是个好主意，因为他可以发现最终设计在视觉方面的影响。
一些开发团队用纸上原型设计在早期阶段解决了一些问题，并且在之后用真实的界面做了一对附加的有用性测试，用来寻找一些另外的惊喜。

对于设计者和开发者的关键益处

如果你要设计或实施用户界面，纸上原型设计可以提供给你以下几个好处：
1.在你编写代码之前和用户测试你的设计
在你写第一行代码之前，纸上原型设计是一个理想的发现你是否选对路子的方法。有时候你知道的东西会对界面或甚至是底层架构有意义重大的影响。例如，在对一个旅游网站做样板时，我们知道了用户坚持想要看到来自航空公司的数据信息。一方面，这是个坏消息，因为得到这些信息是技术难题，另一方面，团队知道了这种需求在第一次显现时应及时解决，否则网站将会失败。

2.做出快速改变
有了纸上原型设计，你可以很快地对界面进行修改，甚至在整个可用性测试环节中。如果一个术语令人迷惑，你可以将它划掉再试试另一个。你可以在令人迷惑的编辑区域附近加入一个例子，或一句解释。想这样的简单的变化可以解决很多可用性问题。甚至当你发现对更多实质性变化的需求时，你可以经常将他们在一小时内解决。一个团队学习前两个测试后了在一个晚上完全重新设计了一个有根本缺陷的电子商务界面。第二天的测试证实了他们解决了问题。

3.发现市场真正需要的
去实施哪些哪些你的营销部门根本没头绪的东西真是很泄气。在经过一系列有趣的百威广告后，有些人说“给我一盏灯！”，而且是带有一盏灯、火把、烟花——呢总之不是淡啤，我将其称之为“百威淡啤问题”。当你花了好多天好几个月创造出一个错误的东西时你就不觉得有趣了。界面的规格，甚至是屏幕的镜头，都不能解决百威淡啤问题，因为他们不能显示出系统的行为，而且他们不能显示给你人们（尤其是没有技术的人们）希望界面能做什么。但是当你将纸上原型设计放在他们面前并观察他们使用它时，你将很快地发现它是否符合他们的期望。邀请营销到你的样板设计过程中，并且确保他们参与可用性测试。

4.消除有用性测试进程中的技术变量
在可用性测试的八年时间里，我改正了大量的“战争故事”，技术故障导致测试被推迟或取消。这对于依赖测试来解决关于界面重要问题的开发团队来说是颠覆性的。但是我从没有因为一个纸上原型设计而不得不退出可用性测试。我甚至在停电时完成了纸上原型设计。

纸上原型设计给你对于界面行为的完全的控制权——这对于短期通知演示和可用性测试很有用。纸上原型设计不会用到数据库、网络、或者任何来自于限制技术方面的,这消除了最容易出错的因素。你不用担心有人会改变开发服务器中断你想要测试的非常之事。（同时这也意味着开发工作不用在你想到做可用性测试时完全停下来）

你也许会想，“但是这是我的应用，我是一个写代码的”是的，但是在你调试过程中渐入佳境之前，你的代码（或者别人基于你的应用写的代码）并不能足够稳固地可以让用户做一些有意义的事而不是崩溃。出现错误，这是“这些0和1都遵循我的怪念头的美丽幻想”与“如果我今天没来的话我可能会更好些的痛苦现实”的一个最大不同。我希望我不仅仅是一个众人都认为的软件开发者。

常见问题：

甚至是了解纸上原型设计的人也会遇到一些技术问题。我将听闻的这些问题归为三类：有效性、专业性和资源。
1.有效性（它能发现真的问题吗？）
我经常被问到纸上原型设计是否有坏的影响，不管是在丢失重要问题或找到错误问题方面。最短的回答就是纸上样板设计可以找到大多数你测试真正的东西后找到的同样的问题。

在我的理解中，仅有一件是需要提一下的关于纸上原型设计的科学研究（参见资源）。三个在Verizon公司（前身是GTE实验室）的研究者比较了用低保真度样板（即纸张）和工作样板找到的问题的类型和数量。他们发现两种不同方法找到的问题有很明显的重复程度。尽管工作样板发现了一些更多的问题，但是他们比低保真度有更长时间的发展——数以几周而不是几天。这些结果表明花费更多时间去发展一个最初的原型会更让收益递减。

我自己的实践经验就是备份。我管理了数百个关于软件和网站的可用性测试，包括超过一百个的正在使用的纸上原型设计。除了可少数几个例外，我发现两者都有相同的问题存在。

2.专业性（其他任何我们会怎么认为它的…？）
显示一个未完成或甚至有缺陷的设计给外行人会使一些开发者很不舒服。我们中的许多人是天生或后天训练出的完美主义者，而且我们的工作奖励这种特质。这就很自然地想到其他人将我们的工作看成是不完整或拖泥带水的。

幸运的是，这种事并没有发生。在对纸上原型设计提供了适当介绍后，用户（和工作者）对纸上原型设计的反应都比较积极。当参与者到达可用性测试时，我解释说：我们知道设计还有一些粗糙的边缘需要修饰（有时是字面上的），但是我们需要在我们付出大量劳动来建设一个错误东西之前获得他们的反馈。我发现用户能理解这些，而且我从未听说过用户对纸上原型设计有贬低的话。相反的，用户很赞赏知道他们的信息是被需要的，而且仍有时间将它考虑进去。

3.开发资源（我们真的有时间做这个吗？这是不是多余的工作？）
这些从未完成纸上原型设计（或可用性测试）的人经常高估啦可所需要的时间量。如果你已经做了有用性测试而且只有纸上原型设计部分是新的，如果你主要从屏幕截图工作的话估计不超过一两天就可以完成纸上原型设计创作，如果是一个新界面或完全重新设计一个界面的话最多用一周的时间。很少有一些会超过一周时间或者让你在获得用户反馈之前花费太多的时间去做修饰性的设计。（其他活动会与计划、准备、或者指导一手的通常需要一个星期或者超过2到4周的时间才能交稿的有用性测试有关系。）

有时候纸上原型设计将不能完全计划那些需要被实施的功能。比如，我曾经为一个远程网上学习软件做过纸上原型设计。原始设计需要用户在虚拟教室中有头像去导航，来增加他们的虚拟手感等等。在样板测试中，我们很快发现这一切都是虚拟的三维的东西找到了真正实际应用的目的，是为了让大公司为使地理上分散的员工提供培训。设计者意识到，试图使应用程序像视频游戏危及他们的整个产品概念。他们放弃了3D功能，这实际上缩短了他们开发时间表。这十五年事前的试了，而且这个产品还在我们身边，就是无3D。

结论：
对于界面来说，在原始概念和实际释放之间经历大量的变化是很正常的。没有人享受编写最终不得不大修或报废的代码。纸上原型设计让你在设计进程的早期阶段找到重大问题，所以你可以在投入精力去实现它之前有经验去找到最好的解决方式。

为什么不直接用可图象操作的BASIC语言或者超文本标记语言（小框内容）：

无论你使用工具的精通程度如何，都会有几个纸上原型设计提供给任何基于电脑的原型的固有的好处。

1.零编码劳动。有可能很快地用VB或Dreamweaver等等模拟一个合适的界面样子，使界面正确响应用户输入的代码编写会费时间。借助纸上原型设计，将不会在代码上花费时间——除非你是一个高手，但很难比它要快！

2.避免挑剔的反馈。一个看起来优美的设计事实上可能会鼓励错误的反馈。如果你竭尽全力去确保你找到了正确的内容和功能，你不用太关心这样的一些评论“嘿，这些字段没有排好”或者是“我不喜欢这些绿色的阴影”。纸上原型设计避免这样的反馈因为它让用户知道你从不是来突出外观的。这鼓励用户去集中于概念和功能。

3.鼓励创新。我们的大脑对看起来未完成的东西更有创造力。而且用户——尤其是没有技术的用户——经常被电脑而不是纸上原型设计而吓到，所以他们在探索你的设计会感到更舒服。

资源：
1.文章“使用低和高保真原型识别可用性问题”，作者：Robert Virzi, Jeff Sokolov, 和Demetrios Karis，从ACM数字图书馆获取。（你需成为一个ACM成员或付10美元去下载不同的文章）
2.阅读作者关于对纸上原型设计的有用的办公室支持列表，包括比如可移动磁带等难以找到的物品。包括将两个办公室支持网站链接到专门的条目。
3.T Joe Dumas 和 Ginny Redish写的《对可用性测试的实践指导》这本书对可用性测试有很好的入门参考。
4.技术交流社会团体主张的“有用性话题”网站包括有用性测试方面的资源。
5.从用户界面工程的网站看到文章“五个纸上原型设计建议”，作者Matthew Klee。用纸上原型设计管理风险”，作者Carolyn Snyder。
6.查证开发者作品文章“网站设计者不知道的七个捷径”，作者还是Carolyn Snyder，找到你想要为你的用户提供东西所需要的。
7.IBM的易于使用的网站提供了新的创新、以用户为中心的设计、方针、故事、技术和其他资源区帮助为你的产品和服务提升用户整体经验。
8.而且不要忘了可访问性。IBM的可访问性中心式设计用来为残疾人提供对信息和技术的获取的。

关于作者：

Carolyn Snyder 花费了在她作为一个没有用的软件的开发者的职业生涯中的头十年。在斯奈德于1999年开始咨询前，她就花费了六年时间研究用户界面工程来发现用户，并成为了一个可用性顾问。她在纸上原型设计和可用性测试方面颇为专业。她正在写一部关于纸上原型设计方面的和欢迎提问方面的书。可以用csnyder@snyderconsulting.net.跟她进行电子邮件联系。