草图设计（一）：最自由的一项设计方法

　　“转眼间已经在CDC生活了快两年的时间。从一名电子商务毕业生到一位职业的交互设计师，经历了许多的坎坷。常常会面对各种困难和压力，当发现有太多未知的领域，只有在学习、思考、实践中能够找到答案与自信。”

　　草图设计是这一年来学习、思考、实践、总结的一项设计方法，尝试于产品设计的各个环节。草图设计对于设计师来说并不陌生，在日常工作中都有用到，相信很多设计师跟我都有同样想法，并且希望推广草图设计给同行以及产品经理，作为灵感与实现，需求与设计之间的桥梁。也非常希望感兴趣的同学回复转播此文，留下观点参与评论。

　　“WHY|为什么要使用草图?”

　　首先为什么要关注草图，草图不是很普通很简单的东西吗，大家平时都是在纸上画画，值得小题大做吗?事情源于我曾经看过的两本书——《用户体验草图设计》、《关键设计报告》。里面记录了大量的设计案例以及作品的解读。当时看完之后，我并不太明白这些与草图设计有什么关系，由于设计案例纬度跨度很大，我甚至不知道作者到底要说什么。感觉就像记者采访了一批有名气的设计师，做个笔录而已。

　　但是看到了大量讲解设计师在产品设计中一些初期的、真实的、原始的设计稿让我非常兴奋。惊叹他们的天分，设计的巧妙。不仅如此，他们的设计稿都非常的个性，并没有统一形式，但都贴近自身想法和真实体验。

　　直到最近，我又回想起这本书，突然明白为什么作者会写这些。草图设计不仅仅是在纸上写写画画，书中记录的每一个案例都是草图设计。让人兴奋的也正是这些，使用不同材料不同形式表达不同创意的案例。为什么要使用草图?因为：

　　草图是最自由的设计

　　自由媒介

　　任何可以传达信息的介质都可以用来做草图设计。纸、白板、图片、便签、视频、语言、电脑甚至“无事物”的表演等都可以作为媒介，只要它可以表达你的灵感。

　　自由空间

　　不再仅仅坐在椅子上，面对着1440*900的电脑屏幕(即使是双屏又能怎样呢?)，在这个狭小的窗口里做高保真界面的设计。

　　草图设计允许我们利用更广阔的空间，即使是一张A3的白纸也要比电脑屏幕大，更不用说真实的桌面、会议室、白板，甚至我们可以走到大街上。

　　当你微微感觉到江郎才尽的时候，第一要做的就是站起来，离开你的电脑屏幕，找到更广阔的设计空间，不仅仅是物理空间，更重要的是思维的空间。

　　自由成本

　　只要有价值，成本应该是自由的。成本不仅仅指材料的价值，还有时间。对于纸的使用往往招来环保主义者的批斗，浪费纸的评价和意识不能太随意太极端。当然纸材料只是其中一种，如果需要大量的白板、甚至昂贵的摄影器材，为了达到目的，材料与时间的成本是要综合考虑的。

　　以QQ多人视频为例，在设计的初期需要做几场用户访谈。但当时的情况是没有时间做demo及高保真的原型。为了不浪费这些与用户亲密接触的机会，就绘制、打印了大量场景草图，来验证我们对各种场景下用户如何使用多人视频的预期。

　　由于草图绘制对精度要求不高，使用mockup软件在很短的时间内就完成了十几个场景的草图。在每场用户访谈的最后将打印的草图展示给用户，并让用户讲解如何使用多人视频。这种方式大大提高了用户访谈的价值，为后期方案的细化奠定了坚实的基础。

　　自由成本强调的是自由、灵活。当然低成本是我们要追求的，但是为了达到目的适当的忽略也是非常必要的。如果你需要一间会议室、几块白板或者其他材料，为了能够很好的实现目标，应该大胆的向leader提出需求。

　　自由感知

　　不要怀疑草图设计的表达能力，无论是产品经理还是用户还是leader，都能够通过草图理解你的设计意图。不仅如此，手绘风格与手工制作的质感能够天然的拉近沟通双方的距离。相比较线框图，对方并不会有太大的排斥感。举几个例子：

　　案例一：

　　上图是windows phone 7 QQ LBS好友列表概念的一个草图设计。当时是因为突然有了灵感，想针对对wp7 QQ的联系人列表做一些创新，于是就动手做了上面的视频。来表达联系人、地理位置、距离感等概念。材料就是用纸打印一下，剪切后用胶水加工一下，然后用 iphone 4拍了下来。虽然材质视频制作都很简陋，但是跟老大汇报想法，跟同事和产品讨论设计的时候，他们都没有排斥感相反会很愿意参与讨论。

　　案例二：

　　上图是QQ硬盘概念版。当时是希望表达一个与操作系统体验一致的概念。仔细观察你可以发现，这其实是一个局部修改了的XP系统文件夹。其实在出这一个稿之前，有过类似的交互稿(用XP系统文件夹截图后修改)已经提交给产品，但并未引起重视。

　　当再一次开会讨论这个需求时，我拿出打印的草图，产品却表现出很大的兴趣并带走，表示要与开发沟通实现的问题。

　　案例三：

　　上图是QQ多人视频会话方案演示的PPT。当时由于急于给老大们汇报，但是无论产品功能模块，还是交互逻辑都是非常的复杂，传统的交互设计说明书邮件，需求文档都很难短时间把方案说清楚，所以制作了一个类似demo的ppt。一定觉得不可思议，本身用ppt做demo就是很不常规的做法，在加上草图就更难想象会是什么效果。

　　但老大们并没有因为ppt demo或者草图风格对汇报表现出负面情绪，相反他们能够主动理解探讨方案，灵活的针对每一个细节进行推敲。

　　相对于高保真设计稿，自由感知，使得方案本身及容易被理解，又存在较大的探讨发觉的空间，符合设计前期夸张发散要求。

　　讲了这么多你是否也认同草图设计呢?经过长时间的实践，我相信每个人都会有不同的心得和体会。本篇就先讨论到这里。欢迎各位留言探讨。如果大家对这个话题感兴趣，下一篇将继续针对界面设计，讨论草图设计的一些工具方法。

　　作者：钟南

　　文章来源：腾讯CDC