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

你可能感兴趣的:(PHP,prototype,Blog,visio)