画Web流程图的一点心得，工程师也用它指导开发

　　画Web流程图的一点心得，工程师也用它指导开发

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

　　前言

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

　　2008年秋天，我将自己的经验总结为一篇题为“绘制网络流程图的小经验”的文章文章，并发表在了自己的博客上。这篇文章立即引起了广泛的关注。各种建议，重印，讨论和后续操作文章经常在线和离线出现，有些人甚至根据我在文章中提到的方法制作了一组流程图模板。今天，这本四年前发布的文章仍然为我的个人主页带来了很多访问量。

　　但是，以上文章存在一个严重的问题，使它的内容具有误导性：它没有使用“视觉词汇”来描述信息体系结构和交互设计。坦白地说，当我写作时，我没有注意到这样一个众所周知的词汇的存在。相反，我创建了自己的词汇并将其介绍给公众。因此，文章的部分内容没有遵循约定，从DRY（不要重复自己）的角度来看，这不太合适。在这篇文章发表后的一年，我确实在另一篇文章中指出了这个问题文章，但是不幸的是，这一次它没有像上次那样引起人们的关注。

　　此外，自文章出版以来已经过去了几年，我积累了很多新的经验和思想，希望与所有人，尤其是英语读者分享。

　　因此，现在您已经看到，我已经完成了英文版的“绘制Web流程图的技巧”的最新内容，并提供了一个自制的匹配模板供下载。

　　内容摘要

　　本文介绍了您应该了解的有关Web流程图的最重要的准则：

　　基本思想

　　视觉词汇表

　　示例

　　建议和提示

　　工具和模板

　　1.基本概念

　　什么是流程图？

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

　　流程图如何为您提供帮助？

　　通常，对于任何想要创建流程的人来说，无论流程是什么，流程图都是非常有用的。例如，工厂可以使用流程图来通知其员工，当有人受伤时，正确的急救程序是什么。当然，除此之外，在本文中，我只会引用Web设计流程图的示例。

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

　　设计产品的交互过程

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

　　帮助您集成散布的线框

　　帮助您与不同背景的同事进行交流：例如指导工程师进行开发

　　2.视觉词汇

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

　　起点和终点

　　接口

　　对话框

　　决策点

　　条件分支

　　子过程

　　跳跃点

　　说明

　　系统行为

　　起点和终点

　　

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

　　接口

　　

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

　　不仅如此，设计人员还可以使用此规则来命名线框。例如，“ 2 3. png”的线框对应于接口23。这极大地节省了文档阅读器（例如工程师）的时间，以查找相应的线框。

　　对话框

　　

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

　　注1：我的朋友曹小刚（@caoxg），高级技术人员兼企业家，使用UML（统一建模语言）状态机来描述Web应用程序中的状态以及这些状态之间的关系。我正在考虑一种将状态机转换为更简单，更适合设计人员的图标的方法。

　　注2：如果您不是在设计Web应用程序（特别是不是设计看起来像台式机应用程序但可以在浏览器上运行的Web应用程序），那么我建议您不要依赖Javascript，甚至不要使用Javascript。具体原因当然是题外话，因此在此我将不对其进行详细描述。如果您想回答并理解我的“ JapMag”设计语言，请访问：。

　　决策点

　　

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

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

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

　　此规则还可以帮助设计人员计划流程图：流程图的主线在左侧，从上到下流动，分支在右侧，因此整个流程图结构自然地从从左到右，从上到下。

　　注：实际上，我已经阅读了美国前总统乔治·W·布什的自传《决定点》（《决定点》的中文翻译）。因此，写此页面总是使我想起这本书。

　　条件分支

　　

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

　　子过程

　　

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

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

　　跳跃点

　　

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

　　如前所述，圆圈中的数字指向某个节点，该节点是跳转点将导致的节点。

　　很明显，跳转点是路径的终点。

　　说明

　　

　　描述是节省通讯时间的便捷方法。但是不理解该错误，您仍然需要以各种形式与流程图的读者进行交流，仅作说明，因为它可以用作备忘录和提醒，根据我的经验，这确实可以节省很多时间。

　　系统行为

　　

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

　　作为设计师或产品经理，尽管我们不需要在地图上放置所有后台操作，但仍需要将与用户体验有关的内容或对我们重要的内容放入流程图中。此外，还应将其写入规范或文档中，并再次明确说明，以确保每个人都能理解其中的含义。

　　元素摘要

　　

　　3.示例

　　登录

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

　　

　　安全检查

　　以下流程图显示了如何使用诸如系统行为和子流程之类的元素。它来自一个真实的项目，但是由于版权问题，我对其进行了一些修改。

　　

　　其他真实示例

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

　　

　　4.建议和提示

　　根据调查结果，指导线框

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

　　同样，流程图还指导线框的生产。在大多数情况下，一旦流程图完成，线框的内容甚至布局都已基本确定。当然，这正是流程图的目的：连接线框。

　　

　　注意：我们将在流程图之前提供其他可交付成果，例如用例。上面的图片不收录这些内容，因为这不是此页面的重点。

　　完成流程图

　　制作流程图最困难的事情是它必须涵盖所有可能的情况。我认为，这在处理复杂逻辑业务需求时非常具有挑战性。您会遇到很多问题，例如“如果发生的话”，有时，直到工程师告诉您，您才意识到自己之前没有考虑过！因此，要制作完整的流程图，不仅需要您了解用户，而且还需要您了解业务逻辑，甚至要熟悉幕后系统的操作机制！

　　最好的方法是与产品经理，工程师和其他与业务需求相关的同事紧密合作。我已经看到许多交互设计师独自工作，然后在产品发布会上遇到了激烈的挑战。不要再这样做了！相反，与项目人员一起制定流程图（和其他可交付成果），以从各个角度消除不确定性并使之更加完整和全面（因此，没有人会再挑战您，因为每个人也是制作的一部分。

　　别忘了元数据

　　

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

　　此外，即使您的流程图使用“视觉词汇表”，您的同事或客户仍可能不理解这些花哨的元素，因此请记住添加图例。

　　5.工具和模板

　　在许多工具中，我建议使用OmniGaffle和Microsoft Visio。

　　OmniGaffle

　　

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

　　Microsoft Visio

　　

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

　　模板

　　Allen Le根据我以前的文章文章发布了一系列Visio模板，它们非常漂亮，对此我深表感谢。您可以在这里找到它：。

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

　　结束

　　我花了大约两个星期的时间写这篇文章，用英语写书变得更加困难，因为英语不是我的母语。这是我第一次用非母语编写教程，但我对此感到非常满意。对我来说，写作是总结过去并保持创造力的好方法。如果有人可以从中受益，我将非常高兴。如有任何疑问或建议，请在此处给我留言：

　　通过：Web流程图的权威指南

　　PPT正在幻灯片共享中，莫名其妙地被围住