画好Web流程图

作者 郭晓刚 发布于 2008年10月13日

领域

架构 & 设计,

企业架构,

过程 & 实践

主题

架构 ,

Web 2.0 ,

设计 ,

业务流程建模

标签

最佳实践 ,

模式与实践 ,

Web 2.0

画流程图是程序设计的基本功，但又似乎属于各有各的高招的一个领域。那么到底用什么标准评价流程图的好坏呢？从事用户体验设计咨询的丁宇在博客上分享了他“画Web流程图的一点心得” 。除了给出他自己的一套形状，还逐一说明注意事项，很有爱心：

作为整张流程图的头和尾，必须标清楚到底具体指哪个页面，以免日后出现歧义。
[……]
所有从形状出来的线条，都具有和此形状边框一样的颜色。这样的做法不仅看起来漂亮，在复杂的流程图中还能轻易地标明各形状的关系。
[……]
几乎总是让‘是’的分支往下流动，让‘否’的分支向右流动。因为流程图一般都是从上向下、从左到右绘制的，遵循上述规则一方面可以让绘制者不用为选择方向操心，另一方面也方便了读者阅读。
[……]
并非所有后台动作都绘入流程图中（否则流程图就会变成庞然大物了），只有需要特别强调的后台动作（和用户体验直接相关的）才使用此形状。
[……]
可以利用跳转点来分割篇幅巨大的流程图
[……]
分割篇幅巨大的流程图，更好的办法是用子流程。
[……]

他还特别强调：

在团队合作中，图例是必须的，否则没人知道你画出来的东西到底是什么。

除了确保别人能看懂你的流程图，评价流程图的好坏，还要谨记“流程图是要指导UI设计的，是UI设计的参照物”，必须“覆盖了各种可能的情况和细节”，“考虑到系统的设计和承受能力”。

支付宝交互设计师Joycce总结得更加扼要：

1. 简单易懂
2. 表达正确全面，有重点、有细节
3. 形像生动

丁宇也发起了一个征集活动，邀请大家一起分享自己的心得，各位达人请不吝赐教，InfoQ中文站将继续跟踪报道。

如果想了解流程图的一般用法，Arky Tan翻译了Jesse James Garrett撰写的“描述信息结构和交互设计的图示词汇表 ”。顺便一提，流程图这东西是有标准的，在发明自己的一套图形之前，不妨先翻一下ISO 5807:1985 。

郭晓刚 是InfoQ中文站架构社区编辑，创建并终结过数家软件小企业，翻译过多本技术书籍。

1. 返回顶部

   很好的互动内容，谢谢

   发表人 xiao deshi

   内容非常真实实在，又能引出两个blog，两个实在的人。学习。

   回复

2. 返回顶部

   Re: 很好的互动内容，谢谢

   发表人 cheung frank

   不错～都是日常工作中常见的case,可借鉴度高

   回复

3. 返回顶部

   很好的互动内容，谢谢

   发表人 Fang mudbird

   正在学习中～～

   回复

• 更早的 >