1.什么是流程图

流程图是对过程、算法、流程的一种图像表示,在技术设计、交流及商业简报等领域有广泛的应用。通常用一些图框来表示各种类型的操作,在框内写出各个步骤,然后用带箭头的线把它们连接起来,以表示执行的先后顺序。用图形表示算法,直观形象,易于理解。有时候也被称之为输入-输出图。顾名思义,就是用来直观地描述一个工作过程的具体步骤。这种过程既可以是生产线上的工艺流程,也可以是完成一项任务所必需的管理过程。

2.为什么要画流程图

一张简明的流程图,不仅能促进产品经理与设计师、开发者的交流,还能帮助我们查漏补缺,避免功能流程、逻辑上出现遗漏,确保流程的完整性。流程图能让思路更清晰、逻辑更清楚,有助于程序的逻辑实现和有效解决实际问题。 
通常,对于任何希望创建流程的人来说,无论创建的是什么用的流程,流程图都是很有用的。它可以帮你: 

  • 设计你产品的交互流程 
  • 确保的你的产品在任何时候都是友好的(甚至包括你原来根本未曾考虑过的故障发生时) 
  • 帮助你整合零散的线框图 
  • 帮助你与不同背景的同事进行沟通:比如引导工程师开发

3.流程图的标准符号

流程图使用一些标准符号代表某些类型的动作。那我们看看流程图都涉及哪些标准符合以及都代表什么。以下的截图来自visio2016.

uml 系统架构图 uml系统流程图_数据

这的图形形状都很好理解。我们来重点理解一下文档、数据、子流程、页面内引用和跨页引用图形的意义。

3.1.文档图形

文档故名思议在流程图中可以表示电子文档、纸质文件、材料和模板等等。如果我们在流程的环节上需要体现出什么文档时就可以使用文档图形(体现文件的输入和输出)。通过一个流程图来解释一下文档图形的意义。

uml 系统架构图 uml系统流程图_流程图_02

验收流程需要填写质量验收报告。入库环境需要填写入口单、台帐和财务。这种场景就可以使用文档图形来很好的表示。

3.2.数据图形

数据图形在流程图中体现的是信息,如果某个流程之前或之后需要体现数据(体现数据的输入和输出),就可以使用数据图形。通过一个简单的流程图来解释一下数据图形的意义。

uml 系统架构图 uml系统流程图_uml 系统架构图_03

我们在登录验证信息流程前需要输入用户名和密码数据。这种场景下就可以用数据图形很好的表示。

3.3.子流程图形

子流程表示一个流程的字流程或分支。在visio中选定需要作为子流程的流程,然后选择 流程-根据所选内容创建 即可创建子流程。注意创建的子流程只能有一个进入流程,并且还是第一个流程。截图中就是一种错误的示范,用户信息写入session和用户登录行为记录 都可以作为这个子流程的入口。

uml 系统架构图 uml系统流程图_数据_04

3.4.页面内引用图形

如果我们流程图画的太长,一页绘图页面的长度容纳不下,就可以使用页面内引用图形。

uml 系统架构图 uml系统流程图_流程图_05

3.5.跨页引用图形

流程图很复杂时候需要引用其它页面的流程图使用。在visio中将“跨页引用”拖到绘制页面会弹出“跨页引用”,按照导航填写引用页即可。注意:跨页引用图形可以是任意流程的一部分(主流程或子流程),而子流程图形只表示子流程。

uml 系统架构图 uml系统流程图_用户登录_06

4. 画流程图时需要注意哪些问题

1、绘制流程图时,为了提高流程图的逻辑性,应遵循从左到右、从上到下的顺序排列,而且可以在每个元素上用阿拉伯数字进行标注。 
2、从开始符开始,以结束符结束。开始符号只能出现一次,而结束符号可出现多次。若流程足够清晰,可省略开始、结束符号。 
3、当各项步骤有选择或决策结果时,需要认真检查,避免出现漏洞,导致流程无法形成闭环。 
4、处理符号应为单一入口、单一出口。 
5、连接线不要交叉。 
6、如果两个同一路径的下的指示箭头应只有一个。 
7、相同流程图符号大小需要保持一致。 
8、处理为并行关系,可以放在同一高度。 
9、必要时应采用标注,以此来清晰地说明流程。 
10、流程图中,如果有参考其他已经定义的流程,不需重复绘制,直接用已定义流程符号即可。

5. 练习事例

我们一用户登录为例,绘制出用户登录流程。

登录流程叙述:

  • 用户可以选择登录方式 
  • 登录失败6次内正常输入用户名和密码即可。登录失败7到10次需要额外输入验证码。登录失败超过11次2小时内禁止登陆。
  • 登录成功后需要将用户信息写入session、记录用户登录行为、转到客户首页。

uml 系统架构图 uml系统流程图_流程图_07

 

6.实例图

uml 系统架构图 uml系统流程图_流程图_08

uml 系统架构图 uml系统流程图_uml 系统架构图_09