Web流程图的绘画指南

编者按：本文作者为设计师Felix Ding，丁宇。在作者设计生涯开始的早期，就开始接触流程图。一个好的流程图，可以用来理解需求、解析复杂的业务流程、同时也有助于交互设计。

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

前言

在我设计生涯的早期，我就开始绘制流程图了。刚开始的时候，我所绘制的流程图大都比较简单，图中的节点不多，逻辑也是直截了当的。因此，一直到我加入支付宝－中国最大的线上支付平台，我才意识到复杂的流程图的用处巨大。在支付宝，业务需求和流程之复杂、变化之迅速，使得理解它们本身已经是一件非常有挑战性的工作。正是此时，我开始依靠流程图来理解需求，并使用这一方法来做交互设计。渐渐地，流程图显现它的魅力：产品经理喜欢它，连工程师也用它来指导开发。

2008年秋天，我将自己的经验总结为一篇题为《画Web流程图的一点心得》的文章，发表在自己的blog上。该文立即引起了广泛的注意。各种推荐、转载、讨论和跟进的文章在线上线下都频频出现，甚至有人按照我在文章中提到的方法制作了一套流程图模板。时至今日，这篇发表于四年前的文章仍然给我的个人主页带来不少流量。

然而，上述文章有一个比较严重的问题，使得其内容带有误导性：它并没有使用用于“描述信息架构和交互设计”的《视觉词汇表》。坦白讲，写作的时候我并没有注意到有这样一份广为人知的词汇表存在，而是创建了我自己的词汇，并将其介绍给大众。因此，文章的部分内容没有遵循惯例，从DRY（Don’t Repeat Yourself，不要重复自己）的角度讲这并不是很合适。该文发表一年后，我的确在另一篇文章中指出了这一问题，但遗憾地是这次没能像上次一样引起广泛的注意。

此外，距离该文章发表已经有几年过去了，我又积累了不少新的经验和想法，希望分享给大家，特别是英文读者们。

因此现在如你所见，我完成了英文版、带有最新内容的《画Web流程图的一点心得》，并且提供了自制的配套模版下载。

内容概要

本文涵盖了你应该了解的关于Web流程图的最重要的几条准则：

a.基本思路

b.视觉词汇表

c.范例

d.建议和提示

e.工具和模版

1.基本思路

什么是流程图？

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

流程图能给你什么样的帮助？

通常，对于任何希望创建流程的人来说，无论创建的是什么用的流程，流程图都是很有用的。比如工厂可以用流程图来告知其员工，当有人受伤后正确的急救流程是什么。当然除此以外，在本文中，我只会举关于Web设计流程图的例子。

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

2.视觉词汇

接下来的几页中，我将介绍视觉词汇和它们的使用方式：

a.起点和终点

b.界面

c.对话框

d.决策点

e.条件分支

f.子流程

g.跳转点

h.描述

i.系统行为

起点和终点

起点和终点是用来标识交互的开端和结束的地方，任何流程图都必须有且只有一个起点和至少一个终点。

标签： 交互设计 流程图 Web流程图 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。