用Visio画web流程图的无奈

今日又接到项目,手绘整个流程图后,想把关键部分在RTX上发给老大看看,于是不得不使用 Office Visio 流程图工具解决。其实我不爽这个软件很久了,但又没有什么合适的替代品,所以每当画web流程图时,都十分无奈。先贴出刚出炉的部分流程:

不爽的原因如下:

1、Visio流程图的默认汉字字符为8pt,而默认页面显示宽度为75%,这就意味着,除非每次都调整设置一下,不然在进程框中输入的汉字基本是看不清的…囧。当然,通过“工具-选项”的高级设置,默认值是可以修改的,但相信90%以上的人都没有想到,或不知道在哪。实际上,汉字大小需要调整到12pt才能看清(你能看清上图中的汉字么?);

2、页面和字体小就算了,流程图的背景还是可恶的小方格,小方格就算了,流程框的背景颜色还是灰色。我不能确定这样的设计是否符合 W3C 标准,但我认为这种颜色的设计可用性并不好,如果谁有兴趣,可以用对比度分析器来检测一下。如果Visio只是一个很平凡的软件,或许我不会如此吹毛求疵,但很可惜,它是微软设计的(Visio 2007中,这SB的小方格设计终于被抛弃了);

3、Visio默认的背景纸太小了,或许可以理解为只有一张A4纸大小。在我绘制复杂产品的流程图时,这种问题就更加凸显,我不得不将一个完整的流程分割成若干分项流程,除非我放弃使用Visio。实际遇到这种情况时,我也的确是这么做的;

4、版权问题。随着微软打击盗版的力度加大,很多企业已经卸载了Office产品,转而使用金山的WPS,如果使用正版,你需要付出不菲的代价;

当然,我并是不是说用 Visio 画流程图是一无是处的,毕竟它主要的作用就是如此。同时,相对于其他乱七八糟的流程图设计工具而言,很多功能细节处理都是非常到位的。所以,如果有数据能证明用 Visio 画流程图的人占绝大多数时,我一点也不会惊讶(不考虑版权因素)。比如 Visio 在流程模块拖放时的参考线处理、连接线的自动对齐处理、以及将 Visio 流程图导入到 Word 中是如此方便,甚至可以在 Word 中直接对流程图进行修改和完善,这一点是其他流程图软件不可比拟的。

如何使用 Visio 画 Web 流程图呢?网上有很多这方面的资料,我推荐千鸟的一个 Visio 流程图基础性总结。当然,除了 Visio,还有很多工具能够画好流程图,这些工具在不同情况下有着不同的作用,也都有自己的局限性。在这里给大家推荐几个我经常用的:

1、纸和笔
没有比灵光一闪再珍贵的创意,没有比挥洒自如更好用的工具;所以纸和笔是思考产品结构、框架、流程最好的伙伴。刚入道时,我也十分迷信美观、工整、专业的流程图,但实际上,使用软件的效率还没有纸笔的十分之一。毕竟在流程构思的最初阶段,我们需要的是“如何设计”,而非“如何展现”。最初阶段,好的创意和设计是需要大胆涂抹和随心修改的,所以纸和笔是这个阶段最好的工具。缺点是保真度不高,难以表述复杂流程细节;

2、Axure RP


Axure 是在 Web 产品经理中使用率最高的软件之一,主要作用是帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计,并可自动生成用于演示的网页文件和规格文件,以提供演示与开发。Axure 的流程图模块非常简单,但却十分高效。结合产品原型DEMO展示时,有着非常好的效果。不足之处就是对中文的支持不够良好,并且流程框之间的连线没有 Visio 智能。但毕竟 Axure 并非是专门为流程图而设计,这里推荐一整套Axure原创教程,第六篇详细介绍了流程图模块,我曾经就是看着这套教程学习的,感谢作者 hawking。同时,UCDChina有一个专题,介绍和分析 Axure 相关,是很好的参考资料;

3、Photoshop
Photoshop 是专业的图像处理软件,拿来画流程图自然是小菜一碟。她能够处理十分复杂的流程图,而不受流程图设计软件规则的约束;当然,Photoshop 还能设计出非常美观甚至华丽的流程图。但问题的关键在于,流程图的价值在于为了简单清晰地表示一个流程。虽然Visio的流程图很丑陋,但不可否认,它足够简单。实际上,在画流程图上浪费过多的时间是没有必要的。当然,如果你的 Photoshop 功底还不错,或者说非常习惯并依赖 Photoshop,那么在处理复杂流程时还是可以用的,特别是将流程模块整合进画笔后,PS是十分强大的。但我总觉得有一点大炮打蚊子的感觉,所以处理流程时我只用过一次;

4、其它工具
PPT、Word、Dreamweave、CorelDraw…这些东西,其实都可以拿来用,但毕竟不那么专业。当然,主要还是习惯问题。一个专业的需求设计者或者UI基本是不会用这些工具来处理流程图的;

最后,我想说说 OmniGraffle。在看到 Felix Ding 的这篇被转贴无数的“画Web流程图的一点心得”之前,我甚至还不知道这个苹果主机上的软件,了解后才发现,这不就是我梦寐以求的流程图设计工具么?!Felix Ding 给 OmniGraffle 的评价是:最好的原型和流程图绘制工具。可惜我用的还是PC机,如果MAC兼容性在好一点,说不定我也去买个苹果小白了……怨念啊……

用 Visio 画 web 流程图虽然是无奈之选,但毕竟大家都在用,并且也没有什么更合适的软件了。虽然没用过 office Visio 2007,但我更更期待有个能与 Visio 媲美的,与 OmniGraffle 一样强大的PC机流程图软件出现,最好不用担心版权问题,有这样的软件么?

分享到:
  1. “最好的原型和流程图绘制工具”这篇文章的作者是我(http://dingyu.me/blog/posts/view/omnigraffle-the-best-wireframe-and-flow-design-tool),Tension非常不负责任地转载了。

    国内互联网转载成风,让人厌恶。

    • 的确,改过来了…不过这样的转载,也不注明出处,真的令人很无语…

  2. 此人到底是谁?又发现转载了一篇我的文章(http://www.tension.name/archives/909/),同样没有作者及出处,真不知道他到底做了多少这样的事情。

  3. 你说的那些问题通过修改下设置就可以改过来,绘图区的大小,小方格等都可以自己设置

  4. Pingback: 介绍一下Balsamiq Mockups | SiteComment

  5. Pingback: @MinKaKa » Balsamiq Mockups完全手册

  6. Pingback: Balsamiq Mockups完全手册 | 天天成长的博客

  7. Pingback: Balsamiq Mockups « kun : public class Kun(){}

  8. Pingback: 什么是Balsamiq Mockups | 易贝

  9. Pingback: 产品原型设计软件Balsamiq Mockups完全手册(zz) « divxer的日志

  10. Pingback: [转]Balsamiq Mockups完全手册 | 欣事欣情-王欣欣

  11. Pingback: 什么是Balsamiq Mockups « Moodoc UI

  12. Pingback: Balsamiq Mockups « Life PHP

  13. Pingback: Mockups—返璞归真,不得不爱的设计软件 « 五木一森林

  14. Pingback: » Balsamiq Mockups Demi Warehouse A lazy girl's Site

  15. Pingback: Balsamiq Mockups完全手册 | YangJie's Blog

  16. Pingback: Balsamiq Mockups 实用手册 | 朝斯夕斯

  17. Pingback: Balsamiq Mockups安装&使用 – web前端

  18. Pingback: web.movever.org » 阿道夫

  19. Pingback: Balsamiq Mockups 使用手册 | 朝斯夕斯

  20. Pingback: 界面设计工具 Balsamiq Mockups | 微笔记

  21. 网格线也算是问题么?在视图中直接把勾去掉不就好了
    visio2003就可以完成的问题

  22. Pingback: 什么是Balsamiq Mockups | 朝斯夕斯