绘制能带来更好用户体验草图的方法

移动用户体验设计趋于成熟。一种衡量的方式就是查看可供我们使用的工具。原型工具例如Balamiq，Axure和Fireworks令我们可以创建线框图和低保真原型，帮助我们理解目标用户的体验。跨浏览器框架例如PhomeGap，Zurb Foundation和jQuery Mobile帮助我们利用网络本地语言如HTML,CSS和Javas cript来创建原型

为什么？绘制草图的案例

比起以往任何时候，现在的我们似乎更有优势，可以立即设计出良好的体验。但是，这些工具暗含着一个缺陷：他们诱惑我们跳过创建好产品的关键步骤——那就是花时间理解我们所面对的问题。

这就是我为什么建议在启动你最喜欢的工具之前，使用草图来理解问题和构思概念。

现在，你可能在思考以下的问题：

“我们时间很紧，可没有时间乱涂乱画。我们需要立刻开始。”

“目前来说，在某工具中设计更快。我需要快速得到答案。”

“我们需要向我们的客户或项目合作伙伴或同行展示成果。我们不能给他们看一些手绘的草稿。”

“对不起，我确实不会画。“

这些观点不但我以前就听过很多遍，而且我自己也说过同样的话。

定义问题和解决方案

画草图可以同时探索问题和定义解决方案。它构成了我们当前对问题的理解，同时也帮助我们探寻可能的解决方案。

当我们将想法绘制出来的时候，也会出现新点子。草图中模糊不明和缺乏细节的地方会发展成新的点子。此处，模糊不明是一件好事，因为我们会不由自主地去尝试填补这处空白。这就是草图的衍生性：它抓住了我们已有的想法，并激发出新的点子。就如图Bill Buxton在Sketching User Experiences中所说的：

“从草图中有所领会，很大程度上取决于它们表现出的模糊不清的本质。即，它们不会规定一切，而是鼓励多种维度的理解，这都是无意间由创作者整合进草图本身的。”

通过绘制不同的解决方案，我们可以充分探索而不至于妄下论断。这令我们开拓了新视野并提出新问题。绘制草图本质上就是头脑风暴的训练。

绘制草图的“代价”

抓住想法的最快方法就是拿起纸笔，快速绘制草图。尝试在我们最喜欢的原型工具中做同样的事会花费更多的时间：我们必须创建新项目，选定正确的库，在画布上放置各种矩形框，用小箭头把矩形框连接起来，再将所有元素重新排列以令整体更美观——于是30分钟就过去了。

如果我们不喜欢纸上画的东西，只要将它揉成一团丢进垃圾桶，再重新开始就行了。但是，如果使用原型工具，这会令丢弃文件变得更难，因为我们已经在其上花费了大量时间与精力——就算这个想法并不算太好。重新开始变得更困难，而纸质的草图则成本低，画起来也快。

抓住和评估一个概念最快的方法就是把它画出来

像交流工具那样去绘制草图

虽然已是陈词滥调，但这话说得很对，图片包含着大量信息。画草图令我们可以带着同行与客户领略我们当前对项目的理解。我们可以使用不同的视觉元素来解释项目各个方面（在下一章中我们会介绍最常见的一些案例）。Dan Roam在The Back of the Napin中说：

“图片可以代表复杂的概念，总结海量的信息，并以我们易看易懂的方式呈现。对于阐明和解决各类问题，它们都非常有用。”

我们的同行能指出我们思维流程中的缺陷，并与我们讨论可能的解决方案。他们最可能理解我们的缺点，并可以就我们想法的细节给予建议。向他人展示我们的想法也令我们可以进行反思；我们可以看到错误，只需浏览草图就可以找到更好的方案。

像协同工具那样去绘制草图

草图是一个可令客户参与到设计早期的强力工具。而定义整个流程的时候，随之而来的衍生问题是：客户在看到一些视觉方案之前，都无法明确地表述完整的需求，但我们设计师在确定需求不变之前，是不愿意出方案的——我们想避免不必要的修改，这会导致额外的工作量。

要解决这个困境就是在协同的平台中开始做这件事，例如设计工作室（看Will Evans的文章“设计工作室方法论”）。我们可以带领客户一步步领略我们的概念（备选方案），向他们解释他们的需求给设计带来的影响。

草图的入门门槛很低，允许非设计师参与进来。（你是否让客户参与草图绘制纯属个人喜好，也有一些争议。你必须自己做决定）

因为草图粗略，且未完成，因此给予反馈也很容易。一些人会防止客户看到设计完整的页面，因为他们认为所有的工作都涵盖进来了。高保真的视觉元素会分散人的注意力——他们会被吸引关注视觉设计或细节而不是将注意力都集中在概念之上。而草图则会令他们的注意力都保持在核心概念之上。

你唯一需要克服的就是，你不愿意把效果粗糙的作品展示给别人看。

画草图不是画画

常见的误区就是你的草图必须好看。但是交互设计不是艺术课程。你的草图不必好看；它们只需要传达你的观点。它们用于激发讨论，形成新概念；它们不应该形成一道屏障。只要你能绘制方框，箭头，圆圈和简笔画，那就可以了。正如Joshua Brewer在“Sketch，Sketch， Sketch”中说的：

“草图不是目的。绘制流程的最终目标是从中学习和领悟。因此如果你不会画也不要担心。”

学习如何绘制草图超出了本文的范围，但是看下面的书和文章，学习基本知识：

·“Art”of Sketching Interfaces“（Jason Mesut和Sam Smith）

·“Sketching 101”，Jackson Fox

·“The Messy Art of UX Sketching”Peiter Buick

·Sketching User Experiences：工作簿，Saul Greenberg，Sheelagh Carpendale，Nicolai Marquardt，Bill Buxton（Morgan Kaufman：2011）

如何绘制草图

既然我已经令你确信（至少我希望是这样）：草图应该是流程的一部分，让我们来讨论下在移动项目中如何绘制草图。

分歧草图

一开始，你会想为自己的移动app或网站搜罗各种点子。为主页或其部分绘制不同版本的草图，你的目标是双重的：设想各种不同的概念，然后进行探索并评价——两者同时进行。你想出的点子越多，稍后要进行的选择也越多。这个过程通常被称为“分歧草图”

绘制这类型的草图有一个很有用的工具，那就是多页模板。它在一页上提供了绘制六种不同版本的空间，而且还在屏幕空间中提供了一些引导。它一边展示不同的概念，一边进行对比，使得稍后的讨论而更容易。

许多模板都可以在网上找到（我用得最多的是Erik Loehfelm的模板）如果喜欢的话，可以用下面这个模板。

整体导航的线框图

上面的截图展示出一个app主菜单的六种不同设想（这图也证明了我的草图确实不太好看）我一般不会想出六个版本（我告诉自己，要以结构为先），但是对于主界面，我确实会尝试创建至少三个版本。

因为这是头脑风暴，稍后你会想讨论许多可能性，你需要数量。

如果你正好缺想法，拿就浏览一些移动UI设计图片找灵感（例如Inspired UI，Pttrns，Lovely UI和UI Parade）。它们将设计方案按主题和特点分组展示（例如，主菜单，聊天窗口）。你可以将喜欢的元素用到草图中，然后按照自己的想法混合。

要养成为每个草图定标题的习惯。这会更便于你区分及参考这些草图。我添加了注解和注释来解释草图及思维过程（例如优点，缺点，与其它概念相比的利弊得失，问题，新特点等等）。贴标签和标记纸张也是很好的练习。

汇聚草图

一旦你绘制了某界面的多个版本，选择最能解决问题的那个。不幸的是，单幅草图很少能解决所有的问题。大多数情况下，你不得不将各个或部分点子相互结合，形成一个成功的概念。为此，你需要更深入地探索，在一页上绘制更细致的草图，在空白的地方注释。粗略记下所有问题，新的点子，重要或不清楚的地方，以及需要讨论的东西。这会帮其他人理解你的思维过程。这个步骤通常被称作“汇聚草图”。

想了解更多关于分歧和汇聚草图的信息，可以看看Leah Buley2010年在FailCon大会上所做的演讲“Good Design Faster”，和Brandon Shauer的文章“Sketchboards:Discover Better+Faster UX Solutions”

创建UI流程图

当你画出一套主界面之后，下一步就是研究它们如何相互配合。为此，画部分UI流程图（i.e. 一系列主屏），展示出用户如何使用你的方案来完成一项任务。UI流程会强调出使用的是哪个界面元素（例如，点哪个按钮或者使用哪种手势），系统如何响应（例如，用动画，转场，弹窗还是新页面）。它们也展示出主界面的不同状态（例如，开始空白然后填满内容）

你可以在UI流程图中将不同结果可视化体现（例如搜索结果的有结果与无结果列表）。你的流程就将不再是单线的；不同的分支会展示出不同的结果。但是要尝试限制单个UI流程的分支数量。多一个分支就会增加流程的复杂性，让你的流程变得难懂。而且也更难解释。

UI流程展示出一个用户如何由A到B。

你不需要画出所有的使用情况；选择重要的，使用频率最高的。Pareto 原则提供了一套黄金法则：原型中，20%的功能占使用时间的80%。

我通常会画出其中一个主要的使用情景，设法想出一个解决方案。我会在界面上强调交互，（通常）用箭头将各个界面连接起来。我会解释每一步，并将主界面标记出。和往常一样，我注释得比较随意。

想知道如何绘制移动界面和UI流程图，看看Gisele Muller的文章“Inspiring UI Wireframe Sketches”；MOObileFrames，一个博客，展示了移动线框图草图；还有Wireframes，Jakub Linowsi的网站。你还可以在UI流程中使用Jakub的“Interactive Sketching Notation（PDF）”。

采取的步骤

为了与实际情景联系，向你展示出以上三个内容如何相互联系，下面是一个典型的草图绘制流程的步骤：

• 列出你有的信息，以及你想体现的内容

• 先画一套草图（例如主界面的几种方案或者原始的UI流程）

• 检查你自己画的草图 

· 每个版本的优缺点是什么？

· UI元素和数据是否保持了一致（i.e. 相同任务是否使用了相同元素）？

· 你是否以相同的方式展示了数据？

· 交互方式是否清楚？

• 从他人那里获取一些反馈。从同事开始，如何可能的话就继续调查潜在用户。

· 他们的第一印象是什么？

· 他们最喜欢什么？为什么？

· 他们不喜欢什么？为什么？

· 你草图里不清晰的地方是什么？

· 他们建议要改善什么？为什么他们会那么建议？

• 概念的迭代

· 你能将各个方案的优点结合到一个新的概念中去吗？

· 草图是否清楚明了？

· 步骤是否可以减少或者简化？

• 根据反馈，检查结果

· 是否产生了新的问题？

· 你洞察到了什么？

正如你所能见到的，这里有许多关于“为什么”的问题。这是因为画草图的目的就是为了理解问题，同时找出解决方案。将绘制期间想到的所有问题都记下并写在草图旁边。这会指引你得到正确的概念。

草图以外的启示

当你绘制出了主屏的草图以及主要的使用情景之后，你就会想在真机上实验自己的概念。APP比如Pop和Protosketch，令你可以导入草图图片，并转换为原型图。这个低保真的办法很效率，会让你很快看到概念的交互。这两个app都允许你定义可点击的热点和页面转换，这令原型的交互更逼真。

或者，将你的界面导入更先进的工具，比如Axure，然后再建立原型。

无论你选择什么方法，你的目标都是快速测试概念，令真机测试更事半功倍。

总结

草图能帮助你更好地理解所尝试解决的问题，让你将可能的解决方案可视化。这是一种进行头脑风暴的方法，即快又合理，可以在执行之前测试很多UI概念。草图加速了概念创新和迭代的过程，令我们能更早地得到反馈，此时做出改变也就更容易。

对于下个草图阶段，牢牢记住以下原则。它们会帮助你走上正轨。

· 懒一点

不要白费力气做重复工作。用模板来指导草图的绘制

· 寻找灵感

 浏览设计图库和移动UI图库，看看各种线框图。选择合适的，与你自己的概念结合到一起，得到一些新点子。

· 简明扼要

你的草图需要清楚展示你的概念，不要迷失在不重要的细节之中

· Pareto能做什么？

你方案功能的一小部分使用频率最高。要集中精力处理它们。哪20%的功能会占80%的使用频率。

·保持一致性

使用已存的草图注释符号和/或自己发明的。这会令你的草图更可靠。同事能理解你的草图样式，且看完草图给予反馈所花费的时间更少。

· 注释

在绘制草图期间，会产生很多新问题和新点子。将它们写下来；不然的话容易遗忘。

· 保持思维开放

展示你的草图，将它们贴在墙上，给别人看，以便获得反馈。

· 如果不确定，那就多画一些。

如果你对某个方案不确定，那就多准备一些草图方案。把它们的优缺点都列出来，看看哪个方案最好。

愉快地画草图吧！