用visio制作用户界面原型(wireframe/prototype)教程

转自http://yuxjw3.blog.163.com/blog/static/2033326201029103057114/

最近发了一些我画的产品线框图给别人，被一些业内人士夸得体无完肤。

夸完后又问我是用什么工具画的，我告诉他是用visio，结果他试了之后还是无奈地说了一句：怎么还是这么丑啊……

于是我一怒之下决定写一个visio制作线框图原型（又叫wireframe，也勉强叫做prototype）的教程。不过工具终归是工具，就像用ps处理出奇丑无比照片的大有人在，用word就画出90%近似最终产品设计稿的人我再公司也见过，用得好不好主要还是看使用的人。不过有一些基础知识还是有必要普及一下的。

一些历史……

做互联网公司产品经理两年了，尝试过不少制作原型图的工具。
photoshop：恐怕是最早用的，但这种高级的工具对我等不熟练而且视觉艺术细胞不丰富的人来说，不但用起来慢，而且做出来难看，我最早用他，也最早放弃他。
excel：说出来有点不可思议，估计很少有人用excel画线框图，估计也就只有我这么山寨的产品经理才想得出来，不过这种方式严格基于网格的工具画后台界面比较方便，但是稍微丰富一点的视觉元素就没法表现了。
word：这个是和公司社区部的doubleli学的，以前看过他给主题论坛做的word版线框图（主要使用文本框来实现），清晰直观，再产品例会上被公开表扬。我用了一段时间（比photoshop，excel的时间要长不少）之后，还是觉得自由度还差了点。

Axure：axure确实是非常出色的一原型软件，再visio之前我最喜欢axure，也向很多同事推荐它，演示交互特别强大。它的idea非常好，但是细节上有诸多令人不满的地方，比如速度慢、中文老打不出来。另外调整样式也比较麻烦，导致做出来的东西比较丑，虽说是原型，但在公司里面，原型是要拿去说服人的，老大觉得不好不让通过，开发觉得太丑没有动力也是不好。而且不是所有的原型都需要很复杂的交互，有时用几个静态图片也能说明问题。

其他的零散地用过fireworks（对于不太重视视觉的线框图还是不太方便），flash（不相关功能太多），powerpoint（比较别扭）。

最后发现只有Visio是方便性和自由度都达到了一个比较好的平衡的。但visio也有缺点，就是他不能一步到位表现交互，对于交互不是很复杂的项目的话，还是很适合的。如果交互比较复杂的话，可以先用visio画好，在粘贴到axure中做交互，这样也不麻烦。

一些例子……

根据一些产品经理群的讨论和公司内部的情况来看，使用visio来做产品原型图的人不多，以下都是我个人的一些例子（点击缩略图放大）：

一个客户端的原型图

这个是最近画的一个应用程序的原型图，也是最上面提到被人夸的一张图，我最近习惯用蓝色来标注可以交互的部分

一个手机客户端的原型图

优客社区，一个手机上的视屏分享社区。

迅雷统计的原型图（下载源文件）

这个是我做过的最令人发指的一个visio图，精细程度堪比设计稿（当然审美观和专业设计师的还有很大的差距），从这个图上面也可以看出，要用visio做设计稿，其实也是可能的。

不过话说回来， 产品原型的细致程度的不同，分为低保真(low fidelity)原型和高保真(high fidelity)原型。visio并不太适合太过于精细的高保真原型，那个还是需要用photoshop、fireworks之类的工具来画，甚至直接做html页面来用。根据我的使用情况来看，visio设计的原型图比较适合“刚开始构思”到“提交给视觉设计师进行美化”期间使用，其实visio的尺度还是很open的。

一些设置……

visio作为一个通用的专业绘图工具，默认设置不是非常适合设计网页/应用程序原型，经过一些设置之后才会用得比较顺手，下面以visio2007为例。

设置文字抗失真

visio默认将字体设置为“较高质量的文本显示”，在这种情况下，文本会进行抗锯齿的处理，本意是好的，但是网页中和应用程序中的字体多数都是“宋体12px（非抗锯齿）”，这样设计出来的原型稿中文字会和实际效果差很多，所以需要将这个设置改掉。点击“工具”-“选项”菜单，在出来的对话框中按下图进行设置：

设置之前与设置之后的效果对比：

设置画布

默认设置下的的画布都不足1024像素宽，再设计网页的时候不太方便，所以需要调整一下画布，选择“文件-页面设置”，对对话框中的两个标签页进行如下设置：

设置之后画布的范围基本上就接近1024像素，如果从左右灰边开始往中间各空两个网格的话，剩下的区域刚好宽度是960px（48个网格宽），相当于1024像素宽显示器的网页标准设计宽度。

打印缩放比例调为75%是因为自定义大小的地方放大了1/3，要在打印的时候比例再缩小25%才能完成打印出来，另外，不缩小25%会让画布上面的灰边错位，大家试试就可以知道了。

设置工具条

visio中默认开启的工具条只有“常用”和“格式”两项（途中未框选的部分）。我常用的还有“设置文字格式”、“设置形状格式”、“视图”、“动作”这四项。

“设置文字格式”的工具条，主要功能是可以切换文字的上下对齐状态。

“设置形状格式”的工具条，可以改变形状的圆角大小、半透明度、填涂图案（比如渐变填充）、阴影效果，对于图形的润色效果非常显著。

“视图”这个工具条，可以切换是否显示标尺，网格，参考线等。

“动作”工具条：可以设置对齐方式、旋转、组合/拆分等。

准备形状库（最重要的一步）

这个是最关键的一步，可以说没有图形库（流程图/业务图……），visio就是废柴一个，就像没有应用程序的操作系统一样。

在做原型的时候，如果不用图形库，要靠自己手画每一种控件的话，那也是非常不切实际的.

好在有牛人（不是指我，不过牛人的网站被墙拦住了）给我们提供了一个非常强大的控件图形库，比如下拉框啊，checkbox啊，按钮啊什么的全都拖拖拽拽到画板里面就可以了，而且经过本山寨产品经理1年内多次修改现在变得更实用了，至于有哪些组件请看下面的预览：


基本上常用的组件都有了，而且更难能可贵的是，原作者在图形上面加了一些属性切换的功能。比如上图中的“单选框”默认是未选中状态的，将其改成选中状态只需要将图形拖入画板后，在上面点击右键选择“Set to Checked”就可以将它变成选中状态，如图：


真的是非常的方便，一用便知。
下载地址：小宝的visio图形库(通过GUUUI版修改)
（适用于visio2007，其他版本的兼容性有待考证）

安装方法：将文件下载下来以后放到“我的文档我的形状”目录下面以后，就可以通过visio的菜单“文件-形状-我的形状”切换出来了。

好了，环境准备到这样就算是完成了，至于在这个环境下面要既方便又自由地设计你的产品原型，还是有不少技巧的，在以后的文章中小宝再细说。