请学会这样“画”纸面原型图

图片素材来自网络

“如何快速画易懂的纸面原型呢？” 

“没有手绘基础不会呀？”

“总害怕画错怎么办？”

“有没有什么纸面原型技巧呢？”

“想法创意都在脑子里，到软件原型绘制时就忘记很多细节，好沮丧?”

...许多设计师及朋友反馈说。

那么怎样让“纸面原型图”不再是没有迷惑的闲谈，而是真正有意义的快速表达创意想法的一个技能呢？配上我的项目实例、结合书中的一些要点提取及整理，供大家学习和探索。（关于纸面原型模版打印源文件，如有需要请留言即可^_^）

设计师在得到产品最初需求或若干个创意思路时，但他们还仍然是一些抽象的分析、概念或词汇，想要把他们变成比较直观的设计效果，则需要动手在速写纸上用笔把他们画成草图形式。

一、纸面原型的定义

Wireframe直译为线框图，由线条构成的草图或示意图、简单的阴影表现或者上色草图都属于wireframe，也称为纸面原型或原型草图。

二、纸面原型的目的？

图片素材来自网络

“探索、过滤、验证、问题分析、设计机会”，产品设计规划为承前启后的阶段，将最初需求及创意一步一步变为现实。

三、为什么要选择纸面原型？

1.具有可塑性、可多次修改重建。

2.短时间内验证设计的可行性。

3.方便与项目团队及其他人员交流讨论、沟通合作。

4.有笔和纸就可随时随地简单快速记录表达。

图片素材来自网络

Idea是指好的设计创意、灵感。创意可大可小，经常是严谨调研和苦想之后的拍案而起。那么，概念便是创意的载体。设计师的能力体现在想法和执行上，当我们有了一个好的创意也应通过概念把它呈现出来。

图片素材来自网络

对于一个需求，交互设计师应尽量发散思维设计尽量多的方案，从主到次、从大到小将他们画出来，并主动召集团队成员一同讨论这些方案，尽快解决那些不确定的问题。不再是一味说着想法而是落到实实在在的概念想法图上，虽然看起来多一步，但绘画概念草图毕竟比低保真原型成本低很多，又可收集来自更多角度的智慧，发现概念有不足便快速修改，少走很多弯路。

四、纸面原型草图潦草但要认真

1. 使用简单工具

纸面原型不需要什么高级的工具和复杂的技巧，可繁可简。可以使用最简单的铅笔（自动铅笔最好）、圆珠笔、签字笔、钢笔、纸张（速写本最好）（如下图1）

图1

2. 粗细线条、空间体积、阴影

为了增强原型草图的表现力，我们善于变换不同的表现手法，使画面更加活跃而充满内涵。希望表达出界面的逻辑，可以使用马克笔、双头画笔等，运用粗细不等的线条和阴影关系，画出界面的层次关系； 同时，还要简单把物体、控件、图标的空间和体积感表现出来，譬如用铅笔涂抹少量的阴影、沿着造型的右、下边勾画双线，使用淡灰色马克笔等，当然最好可以把上述的这些技巧结合起来展示（如下图2）

图2

3. 交互、动态

我们要把交互和旋转的动态表现出来，主要通过重叠、各种箭头来实现。重叠就是表现物体运动过程的重影，箭头的使用就比较广了，即可以表现物体运动的方向（如下图3-1），也可以表现不同界面间的交互关系（如下图3-2），还可以表现导航、进度和弹出等。希望表达出交互效果，可使用便签纸和小卡片，他们可以当做提示气泡、弹出层、模态窗口等，贴在绘图本的任何地方，也可以作为页面标注的工具及说明产品功能。

图3-1                                                           图3-2

4. 声音、振动

纸面原型的手绘表现力是无穷的，除了上诉这些有形和具象的事物，有时还可以根据需要，勾画出一些无形和抽象的事物，譬如闪烁、声音和振动（如下图4所示）

图4

五、纸面原型工具模板？

1. 使用人群

由于纸面原型的快速灵活性，有些创业公司甚至已经抛弃了电子版的高保真原型，直接采用纸面原型作为交互设计师的最后交付物。这对于纸面原型有了更高的要求。另外，有很大一部分人不具备手绘能力而避开绘画技能的限制也可使用这些工具便事半功倍。

图5（素材来自网络）

2. 来源、特点

由Suki Kits公司生产的原型设计模板套装是一个比较好的选择（如下图6），不同的应用平台有不同的产品套装，包括iOS、iPhone、iPad、Android平台各版本、Windows Phone平台产品。

图6

（1）模板由不锈钢制成，精度很高；

（2）模板上有：各应用平台的状态栏、标签栏、确认按钮等几乎所有基本控件样式；

（3）模板完美符合造型规范和大小规格，边缘还带有以像素（PX）为单位的刻度；

（4）套装里还配有印着手机或平板电脑图形的设计绘图纸（如图），规格与模板一致，便于使用者用模板直接在相应的产品图形里设计、勾画；

优点：可以准确画出应用的真实大小、有助于进一步的细节推敲，也确实能达到快速精确、标准的效果 ；

缺点：绘图局限性大，毕竟模板的内容是有限的，而且容易禁锢一定的概念设计、创意及思维想象力 ；

六、如何检验、分享你的思考结果？

1. 有连贯有情节的流程图

创意构思阶段完成，将进入设计的布局和调整阶段。在开始下一步细节之前，我们要把纸面原型草图整理好、查漏补缺，把所有页面按照创意和设计思路串在一起，使他们成为流程图。每一项功能的每一个动作都不要漏掉，做到前有因、后有果、中间过程有条理。（如下图7）

图7

2. 利用纸面原型草图进行可用性测试

在原型草图阶段，就可以对应用进行简单的可用性测试。体验大致功能、导航、布局结构等，检验功能、布局是否合理？控件是否规范？导航是否正确？把原型草图中的每一个界面单独拍照，之后使用照片美化应用对照片稍加调整，譬如边缘裁剪、调整亮度、对比度等，使图片清晰完整。并在移动设备端的可交互原型应用工具，譬如：Pop (iOS) (如下图9视频所示)、快现(Android)，一张张导入拍照图片，选取特定区域添加热区、手势操作、链接，就可以实现点击界面后跳转、切换等效果。直观的草图演示可以大大提升沟通效率。（如下图8）

图8

图9 Pop软件展示