关于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机流程图软件出现，最好不用担心版权问题，有这样的软件么？