网站内容发布流程图(画Web流程图的一点心得，你知道吗？的价值)

　　网站内容发布流程图(画Web流程图的一点心得，你知道吗？的价值)

　　为了最大化流程图的价值，文章重点分析了开始和结束标签、界面、对话框、决策点、条件分支、子流程、跳转点、描述和系统行为等视觉词汇。

　　前言

　　在我的设计生涯早期，我开始绘制流程图。一开始，我画的流程图大部分都比较简单，图中节点不多，逻辑也很简单。所以，直到加入了中国最大的在线支付平台支付宝，我才意识到复杂流程图的用处。在支付宝中，业务需求和流程的复杂性和快速的变化使得理解它们已经是一项非常具有挑战性的任务。也正是在这个时候，我开始依靠流程图来理解需求，并使用这种方法进行交互设计。渐渐地，流程图显示出它的魅力：产品经理喜欢它，甚至工程师也用它来指导开发。

　　2008年秋，我总结了一篇文章的文章，题为《绘制Web流程图的一点经验》，发表在我的博客上。这篇文章立即引起了广泛关注。文章的各种推荐、转载、讨论和跟进在网上和线下频繁出现，甚至有人按照我在文章中提到的方法制作了一套流程图模板。今天，这个四年前发布的文章，依然给我的个人主页带来了不小的流量。

　　但是，上面提到的文章有一个严重的问题，使其内容具有误导性：它没有使用用于“描述信息架构和交互设计”的“视觉词汇”。坦白说，我在写作的时候，并没有注意到有这么一个知名词汇的存在。相反，我创造了自己的词汇并将其介绍给公众。因此，文章的部分内容没有遵循约定，从DRY（Don't Repeat Yourself）的角度来看，这不是很合适。这篇文章发表一年后，我确实在另一篇文章文章中指出过这个问题，可惜这次没有上次那么受关注。

　　另外，文章出版已经好几年了，积累了很多新的经验和想法，希望与大家，尤其是英文读者分享。

　　所以现在大家可以看到，我已经用最新的内容完成了英文版的《绘制Web流程图的技巧》，并提供了自制的匹配模板供下载。

　　抽象的

　　本文涵盖了您应该了解的有关 Web 流程图的最重要指南：

　　基本思想

　　视觉词汇

　　例子

　　建议和提示

　　工具和模板

　　1.基本思路

　　什么是流程图？

　　流程图，顾名思义，是用来描述系统在不同情况下如何响应用户的状态、决策和行为的图表。

　　流程图如何帮助您？

　　一般来说，对于任何想要创建流程的人来说，无论流程是做什么用的，流程图都是非常有用的。例如，工厂可以使用流程图告知员工在有人受伤时正确的急救流程是什么。当然，除此之外，在这篇文章中，我只会举出网页设计流程图的例子。

　　对于交互设计师和产品经理来说，流程图是一个核心工具。它可以帮助您：

　　设计产品的交互流程

　　确保您的产品始终友好（即使发生了您以前从未考虑过的故障）

　　帮你整合分散的线框

　　帮助你与不同背景的同事交流：比如指导工程师开发

　　2.视觉词汇

　　在接下来的几页中，我将介绍视觉词汇及其使用方法：

　　开始和结束

　　界面

　　对话框

　　决策点

　　条件分支

　　子流程

　　跳跃点

　　描述

　　系统行为

　　开始和结束

　　起点和终点用于标识交互的开始和结束。任何流程图都必须有一个且只有一个起点和至少一个终点。

　　界面

　　界面元素用于表示各种用户界面，例如表单或网页。接口的编号可以作为一个标识符，这在协作过程中非常有用。例如，在电话会议中，您可以使用“节点 N”来表示您要指定的某个界面元素。

　　不仅如此，设计师还可以使用此规则来命名线框。比如“23.png”的线框对应的是23号接口，这大大节省了文档的读者——比如工程师——寻找对应线框的时间。

　　对话框

　　随着 Web 应用程序的出现，Web 交互也从线性模型转变为基于状态的模型。单个页面内的部分页面更新和交互变得越来越普遍。最常见的表单之一是浮动消息，例如表单验证错误后的错误消息。然而，制作两个几乎相同的线框不仅没有必要，甚至还很尴尬。因此，对于这种由 Javascript 渲染的模态或非模态对话框，我创建了一个名为“对话框”的新元素。

　　注1：我的朋友曹晓刚（@caoxg）是一位资深技术人员和企业家，他使用UML（统一建模语言）状态机来描述Web 应用程序中的状态以及这些状态之间的转换。我在想办法把这个状态机变成一个更简单、更适合设计师的图标。

　　注2：如果你不是在设计一个web应用程序（具体来说，不是那种看起来像桌面应用程序但在浏览器上运行的应用程序），我建议你不要依赖Javascript，甚至使用它。具体原因当然是题外话，这里就不详细描述了。如果您想要答案并了解我的“JapMag”设计语言，请访问：。

　　决策点

　　决策点是指用户需要做出决策的地方。通常，当进程到达这一点时，界面正在等待用户选择下一步要去哪里。

　　如图所示，我通常让正面选择（“是”）向下流动，而负面选择（“否”）向右流动。

　　这条规则可以提供更好的阅读体验，因为规则本身非常清晰自然（英语写作也是如此）。

　　这个规则也可以帮助设计师规划流程图：流程图的主线在左边，从上到下流动，分支在右边，让整个流程图结构自然地从左到右流动和从上到下。

　　注：其实我看过美国前总统乔治·W·布什的自传《决定点》（《选择点》的中文译本）。因此，写这个页面总是让我想起这本书。

　　条件分支

　　条件分支看起来类似于决策点，但它们完成的功能完全不同：在决策点中，决策是由用户明确做出的；而对于条件分支，系统会在后台自动选择合适的路径。

　　子流程

　　子进程是相对独立的进程，可以在整个系统中重复使用。例如，您可以将一些相同（并且经常使用）的任务——例如用户身份验证和网络访问——打包成子流程，然后将它们集成到一个更大或特定的流程图中。

　　如果您的流程图收录子流程，您最好在其他人询问您之前将所有相关的子流程一起提交。

　　跳跃点

　　在一些高度复杂的情况下，我们需要用户直接跳转到另一条路径，那么就需要一个跳转点。

　　前面说过，圆圈中的数字指向某个节点，这个节点就是跳转点会通向的节点。

　　显然，跳跃点是路径的终点。

　　描述

　　描述是一种节省沟通时间的便捷方式。但是不理解错误，你还是需要用各种形式和你的流程图的读者交流，只是描述，因为它可以作为备忘录和提醒，根据我的经验，这确实会节省很多时间。

　　系统行为

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

　　作为设计师或者产品经理，虽然我们不需要把每一个后台的操作都放在图中，但是还是需要把那些和用户体验相关的或者对我们来说很重要的那些放到流程图里，还要写到规范或者文档中，再次明确表态，保证大家都能体会其中的含义。

　　要素总结

　　3.示例

　　登录

　　下图是一个简单的登录流程图，用于描述用户登录时系统的反应：

　　安全检查

　　以下流程图显示了如何使用系统行为和子流程等元素。它来自一个真实的项目，但由于版权问题，它被我稍微修改了。

　　其他真实例子

　　如您所见，无论业务逻辑多么复杂，都可以使用流程图来描述系统的工作方式。

　　4.建议和提示

　　根据调查结果，指南线框

　　用户及其特征是指导流程图绘制的主要因素。用户调查可以发现：用户过去的体验是什么？用户的期望是什么？有哪些使用场景和环境？这些问题在流程图的设计中起着关键作用。

　　同样，流程图也指导线框的制作。大多数时候，流程图一旦完成，线框图的内容甚至布局就基本确定了。当然，这正是流程图的目的：连接线框。

　　注意：在流程图之前，我们还有其他可交付成果，例如用例。上图不涉及这些内容，因为这不是本页的重点。

　　完成你的流程图

　　制作流程图最困难的是它必须涵盖所有可能的情况。在我看来，这在处理复杂逻辑业务需求时非常具有挑战性。你会遇到很多“万一会怎么样”这样的问题，有时在工程师告诉你之前你没有意识到自己缺乏考虑！所以，制作一个完整的流程图，不仅需要了解用户，还需要了解业务逻辑，甚至需要熟悉系统后台的运行机制！

　　最好的方法是与产品经理、工程师和其他与业务需求相关的同事密切合作。我见过很多交互设计师独自工作，然后在产品大会上遇到激烈的挑战。不要再这样做了！相反，与项目相关的人一起制作流程图（和其他可交付成果），从不同角度消除不确定性，使其更加完整和全面（这样就没有人再挑战你了，因为他们每个人都是还涉及部分制作）。

　　不要忘记元数据

　　从协作和文档管理的角度来看，您至少必须为流程图命名，写下作者、版本和时间。

　　另外，即使您的流程图使用了“Visual Glossary”，您的同事或客户可能仍然无法理解这些花哨的元素，因此请记得添加图例。

　　5.工具和模板

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

　　OmniGaffle

　　对于 Mac 用户，OmniGraffle 过去和现在仍然是首选工具。它不仅具有丰富的功能，而且最重要的是，它的用户体验是首屈一指的。我认识的许多设计师已经改用 Mac，然后使用 OmniGraffle。

　　微软 Visio

　　Windows 用户可以考虑使用 Visio，它具有一些内置模板，可以极大地简化您的工作。

　　模版

　　基于我之前的文章文章，Allen Le发布了一系列Visio模板，非常漂亮，非常感谢。你可以在这里找到它：。

　　OmniGraffle 的粉丝可以下载我在 /stencils/905 制作的模板。

　　结尾

　　写这个文章花了我大约两周的时间，用英语写作变得更加困难，因为英语不是我的母语。这是我第一次用非母语编写教程，但我很满意。对我来说，写作是总结过去并不断创造的好方法。如果有人能从中受益，我会很高兴。有任何问题或建议，请在这里给我留言：