网页排版

2020-12-29 00:47 jianzhan

网页排版:用visio制作用户界面原型(wireframe/prototype)教程

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

夸完后又问我是用什么工具画的 我告诉他是用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”就可以将它变成选中状态 如图

真的是非常的方便 一用便知。
下载地址 适用于visio2007 其他版本的兼容性有待考证
安装方法 将文件下载下来以后放到“我的文档我的形状”目录下面以后 就可以通过visio的菜单“文件-形状-我的形状”切换出来了。

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

 




1 如果我的博客侵犯了你的版权 请给我邮件 zhangzhanggenzhong#126.com 经核实后我会做出合适的处理。

2 请在转载 引用 的内容提供本博客中相应文章的链接。如你的作品为非电子读物或纯文本 请给出链接的url。

3 请勿将我的原创文章用于商业用途。

4 如果愿意 请给我邮件 zhangzhanggenzhong#126.com 让我知道我的东西到哪去了。谢谢

5 我可以尽我所能回复你在评论中提到的问题,但一般不会给你发邮件,所以请勿留邮箱地址.
用visio制作用户界面原型(wireframe/prototype)教程 24939

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。