产品经理核心工具：Web流程图的绘画指南

描述

描述是节约沟通时间的一种便捷的方法。不过别理解错误，你仍需要以各种形式和你流程图的读者交流，只是描述因为能起到备忘和提示的作用，依照我的经验，这的确会节省很多时间。

系统行为

系统行为是指系统完成的一系列后台行为操作。例如，我们想要记录用户登录失败时的数据，就可以在流程图中以 “收集错误日志”的系统行为来表示。

作为设计师或产品经理，我们虽然不需要将每种后台操作都付之于图，但我们还是有必要把那些和用户体验相关，或那些对我们重要的操作放进流程图，此外还要写入规范或文档里，再次清晰地声明，确保每个人都能领略其义。

元素总结

3.范例

登录

下图为一个简易登录流程图，用来描述用户登录时系统如何反应：

安全检查

以下流程图展示如何使用系统行为和子流程这样的元素。它来自于真实的项目，只是由于版权问题已被我稍稍修改。

其它真实范例

如你所见，不管业务逻辑多么复杂，流程图都能用来描述系统是如何工作的。

4.建议和提示

基于调查结果，指引线框图

用户和他们的特点是指导绘制流程图的首要因素。用户调查能够发现：用户过去的体验是什么？用户的期望是什么？使用场景和环境是什么？这些问题在流程图的设计中起关键作用。

同样，流程图对线框图的制作也有指导作用。多数时候，一旦流程图完工，线框图的内容甚至布局已经基本确定了。当然了，这也正是流程图的目的所在：连接线框图。

Note：在流程图之前我们会有如用例这样的其它交付物。上图并没有涉及到这些内容，因为这并非本页的重点。

使你的流程图完整

制作流程图最难的是，它必须囊括所有可能的情况，在我看来，这一点在应对复杂逻辑的商业需求时是很有挑战性的。你将会遇到很多类似 “要是如何便会怎样”的问题，并且有时候直到工程师告诉你，你才意识到自己之前欠缺考虑！所以，制作完整的流程图不仅需要你了解用户，还需要你懂业务逻辑，甚至要熟悉幕后的系统运作机制！

最好的办法是和产品经理、工程师还有其他和商业需求有关的同事在工作中紧密协作。我见过不少交互设计师闷头一人工作，然后在产品会议中遇到猛烈的挑战。别再那样了！相反，和项目相关的人合作，一起制作流程图（以及其它交付物），从不同角度排除不确定性，使它更完整全面（这样也没人会再挑战你了，因为他们每个人也是参与制作的一份子）。

别忘记元数据

从协作和文档管理的角度来说，你至少得给流程图起个名字，写下作者、版本和时间。

除此之外，即便你的流程图使用了《视觉词汇表》，你的同事或客户仍有可能不明白这些花俏的元素，所以，请记得加上图例。

5.工具和模版

众多工具中，我推荐OmniGaffle和Microsoft Visio。

OmniGaffle

对Mac用户们来说，OmniGraffle以前是，现在仍是首选工具。它不仅有丰富的功能，最重要的是，它的用户体验是首屈一指的。我认识的设计师很多已经换了Mac，并随之使用OmniGraffle。

Microsoft Visio

Windows用户可以考虑用Visio，它有一些内建的模版，也许能大大减轻你的工作。

模版

Allen Le基于我前一篇文章发布了一系列Visio的模版，很漂亮，对此我不胜感激。你可以在这里找到：http://www.allenle.com/archives/1530.html。

OmniGraffle的粉丝可以在http://graffl etopia.com/stencils/905 下载到我制作的模版。

收尾

编写此文章花了我大概两周时间，并且用英文写更是增加了难度，因为英语并非我的母语。这是我第一次用非母语撰写教程，但我十分乐在其中。对我来说，写作是总结过去、保持创造的一种很好的方式，如果有人可以从中受益，我会十分开心。任何问题或建议，请在这里给我留言：

http://dingyu.me/blog/the-definitive-guideto-web-flowcharts

Via：The definitive guide to Web flowcharts

（小盒 供雷锋网专稿，转载请注明来自雷锋网及作者)