使用Visio、Axure画原型图

http://blog.luwenjin.com/index.php/2009/03/26/visio-wireframe-prototype-tutorial/

下面是一篇使用Axure画原型图的文章

 http://www.qiyeku.com/news/636357/

一些设置……

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的菜单“文件-形状-我的形状”切换出来了。