-
流程图的各个图标详解
1
、各司其职的形状
在我的流程图中，适用于不同目的和功能的形状都有各自确定的规范。到目前为止，我一共定义了以下一
些形状：
（
1
）
开始和结束
< br>作为整张流程图的头和尾，必须标清楚到底具体指哪个页面，以免日后出现歧义。
（
2
）
网页<
/p>
如你所见，网页的形状是一个带有漂
亮的淡蓝色过渡效果的长方形，它的边框为深蓝色，中间写明了这个网页的用
途，括号中
的数字代表这个形状所对应的
demo
文件的名称（比如这里是
），我有时会把流程图输出为网页的形
式，并把每个网页形状和它所对应的
demo
文件链接起来，这
样查看起来非常方便。对
OmniGraffle
来说这是小菜
一碟，
如果你被迫用
Visio
，嗯<
/p>
……
另外，所有从形状出来的线条，都
具有和此形状边框一样的颜色。这样的做法不仅看起来漂亮，在复杂的流程图中
还能轻易
地标明各形状的关系。我没有见过类似的做法，所以这是由我首创也说不定，呵。
（
3
）
后台判断<
/p>
很常见的一个形状。我在用法上有一
点和其他人的不同在于，我几乎总是让
?
是
?
的分支往下流动，让
?
否
?
的分支向右
流动。因为流程图一般都是从上
向下、从左到右绘制的，遵循上述规则一方面可以让绘制者不用为选择方向操心，另一
方
面也方便了读者阅读。
（
4
）
表单错误页
既然有表单，当然会有错误信息。其实这个信息很重要，用户出错时惶恐不安，就靠着错误提
示来解决问题了。你
不在流程图里说什么时候显示错误页、不在
demo
里提供错误页，有些程序员会直接在网页上写个
“
错误，请检查
”
，所
以
UI
设计师一定要对这个东西重视起来。
< br>
但一般来说也没必要把每种错误都在流程图中表示出来，因为含有两个文本框的
表单就有三种出错情况了，多了就
更不用说了。所以我都是把错误页变为表单的附属页，
比如表单页的编号为
2
，那么此表单错误页的编号就从
2.1
开始
排下去，每种错误放到一个附属页中
，这样程序员在拿到
demo
时也能搞清楚什么意思。
结合网页和表单的形状，一个表单验证的流程图就是这样的：
（
5
）
后台动作
并非
所有后台动作都绘入流程图中（否则流程图就会变成庞然大物了），只有需要特别强调的后台动作（和用户体
验直接相关的）才使用此形状。
（
6
）
多重分支