实习经验之谈——你会画流程图吗？

这次实习，刚接到一份代码之后首先要做的就是读懂它，但是很多时候因为工艺不熟悉，或者思路不清楚，只好先画个流程图理清思路。这个过程十分重要，一份好的流程图不仅可以让自己接手一份代码后尽快掌握大致流程，也能在给他人讲解时清楚有条理。

    在网上搜索关于流程图的绘制的时候看到了一个比较有用的网站：https://www.processon.com/ ，绘图很方便，对理清思路很有帮助。

     之前上学的时候只是大体学习了路程图的形状，粗略了解了对应的逻辑关系绘制。但是这里我们要说的，是如何“画好”一个流程图。这里就要求把握好流程图的尺度。按照网上的说话，可以按照两个尺度来画流程图，称其为：给业务员看的“人人交互模式”和给研发看的用“人机交互模式”，这里主要说一下给研发看的“人机交互模式”。

---

给研发看的“人机交互模式”

注意人机交互级别的流程图，主要涉及到人输入什么，系统会反馈什么，但是有两个原则需要注意：

• 原则一：一个页面定义成一个操作

看下面的例子：

假设在商品详情页此时展示的是一件衣服，则可以选择衣服数量，选择衣服颜色和大小等操作，但流程图的作用不是表达具体功能的，所以忽略这些操作。

一个页面只表达一个操作，下面的页面的第一个操作就是“用户点击确定”，概况为“用户选择商品”。而后面的两个页面也可以概括成“用户提交订单”和“用户支付订单”。

另外不要写画成“用户选择商品->系统显示订单->用户确认订单->系统显示支付界面->用户支付订单”，没有错但略显啰嗦。

流程图重点表达做了什么事情，是不关心所有的功能。用流程图表达功能也不是最佳方案。如果这个例子想表达的是页面的功能，建议直接画页面流程图即可。这个表达对研发更容易阅读，或者用例图来表达功能合集表示功能之间的包含关系等，都是比这个更恰当的表达方式。

• 原则二：和后端服务器交互的定义成一个操作

具体看下面的流程图：

(和后端服务器交互的流程图)

此时当用户进行登录操作的时候，输入完用户名和密码并点击确定，此时APP需要询问一下服务器密码是否正确。这些涉及到和服务器的交互，显然不问服务器就不知道，则可以在流程图里体现出来。

注意此时忽略人和APP在一个页面的交互。如：输入手机号后提示手机号格式错误，你会发现就是一些简单的前端逻辑判断，还不如在原型页面写备注来的简洁和高效。

下面这两个流程图都属于过度表达了。

（两张过度表达的流程图）

总结：

给业务部门呈现时：用人人交互模式，忽略系统所做的工作。给研发部门呈现时：一个页面一个动作，可体现和后端服务器交互的动作，而忽略掉简单的前端交互。