一个哥们在MSN上告诉我，他们公司的交互设计师只产出流程图，并问我用什么标准评价流程图的好坏。他的说法把我彻底震了－这分工也太细了吧！也不知道该说他们那里这样是好还是不好。

不过仔细想来，我倒的确没有仔细考虑过流程图的好坏，正好借此机会自我总结一下。

1、各司其职的形状

在我的流程图中，适用于不同目的和功能的形状都有各自确定的规范。到目前为止，我一共定义了以下一些形状：

（1）开始和结束

作为整张流程图的头和尾，必须标清楚到底具体指哪个页面，以免日后出现歧义。

（2）网页

如你所见，网页的形状是一个带有漂亮的淡蓝色过渡效果的长方形，它的边框为深蓝色，中间写明了这个网页的用途，括号中的数字代表这个形状所对应的demo文件的名称（比如这里是2.html），我有时会把流程图输出为网页的形式，并把每个网页形状和它所对应的demo文件链接起来，这样查看起来非常方便。对OmniGraffle来说这是小菜一碟，如果你被迫用Visio，嗯……

另外，所有从形状出来的线条，都具有和此形状边框一样的颜色。这样的做法不仅看起来漂亮，在复杂的流程图中还能轻易地标明各形状的关系。我没有见过类似的做法，所以这是由我首创也说不定，呵。

（3）后台判断

很常见的一个形状。我在用法上有一点和其他人的不同在于，我几乎总是让‘是’的分支往下流动，让‘否’的分支向右流动。因为流程图一般都是从上向下、从左到右绘制的，遵循上述规则一方面可以让绘制者不用为选择方向操心，另一方面也方便了读者阅读。

（4）表单错误页

既然有表单，当然会有错误信息。其实这个信息很重要，用户出错时惶恐不安，就靠着错误提示来解决问题了。你不在流程图里说什么时候显示错误页、不在demo里提供错误页，有些程序员会直接在网页上写个“错误，请检查”，所以UI设计师一定要对这个东西重视起来。

但一般来说也没必要把每种错误都在流程图中表示出来，因为含有两个文本框的表单就有三种出错情况了，多了就更不用说了。所以我都是把错误页变为表单的附属页，比如表单页的编号为2，那么此表单错误页的编号就从2.1开始排下去，每种错误放到一个附属页中，这样程序员在拿到demo时也能搞清楚什么意思。

结合网页和表单的形状，一个表单验证的流程图就是这样的：

（5）后台动作

并非所有后台动作都绘入流程图中（否则流程图就会变成庞然大物了），只有需要特别强调的后台动作（和用户体验直接相关的）才使用此形状。

（6）多重分支

多重分支指的是几种并列的情况，每种情况都有发生的可能，发生哪种取决于分支起始处的判断结果。

（7）对话框

有时候一些操作可以利用对话框来完成， 这些对话框由js生成，显示在父界面之上。

（8）注释

这个形状（比如页面）详细的内容，或者需要解释的业务逻辑，甚至用户此处的情况等，我都会放到注释中，这样既降低沟通成本，又可作为备忘。

（9）跳转点

在一个复杂的流程图中，往往出现跳转到另外一个远处结点的情况，此时如果直接用线连过去，未免使得流程图显得凌乱，用一个跳转点就解决问题了。在点内标明跳转到的形状的编号，画起来容易，看起来也清楚。

此外，也可以利用跳转点来分割篇幅巨大的流程图，Yahoo!就这么用。

（10）子流程

分割篇幅巨大的流程图，更好的办法是用子流程。

要注意的是，如果你在流程图中使用了子流程这一形状，一定记得同时附上子流程图，以消除影响项目质量的不确定性因素。另外，在子流程图中也可以标明其所属关系。

（11）流程块

可以用流程块将整张流程图分隔为几个部分，并为每个部分单独命名（比如“流程块1”等）。这样做的目的在于从视觉上使复杂的流程图变得更为清晰，在沟通时也方便。

2、图例和流程图信息

在团队合作中，图例是必须的，否则没人知道你画出来的东西到底是什么。即使流程图只给自己看，也最好养成标注图例的好习惯。其实这道理有点类似程序中的注释。

流程图信息也是必备的。其内容至少应包括作者、时间、流程图名称和版本（如下图）。这一方面可以让读者（其他同事）在有问题时能够方便地找到作者你，也起到了meta的作用。

3、绘制流程图的工具

Mac下首选OmniGraffle，Windows下除了Visio，似乎没有更好的选择（虽然Visio已经很难用了）。

4、评价流程图的好坏

我觉得一个好的流程图至少应做到以下几点：

1. 密切地迎合了用户的心理状态、如实的反映了用户的操作习惯。流程图是要指导UI设计的，是UI设计的参照物，如果流程图本身无法正确描绘出用户的情况的话，UI十有八九会出问题；
2. 覆盖了各种可能的情况和细节。这非常重要。任何在先期不确定的因素，都会在项目中成为随时引爆的地雷，都会直接降低最终上线的UI质量。此种情况真是屡见不鲜。但同时这条又很难做到，因为它不仅要求设计师熟悉用户，也要设计师充分知晓产品的商业逻辑，还要了解系统的运作机制，落下以上任何一个方面，都会在流程图中留下死角。这个问题我不知道有没有更好的解决方案，不过与PD和系分反复沟通是个行之有效的方法；
3. 考虑到系统的设计和承受能力。系统的运作机制和承受能力必须在绘制流程图过程中考虑进去，以免出现流程图被开发人员枪毙的情况。我的习惯是，在绘制流程图时和系统分析师频繁沟通和交流，确保每一个环节都是可行的；
4. 确保别人看得懂你的流程图。别人现在看不懂，你自己以后也一样看不懂。为了降低沟通成本，把流程图画清楚吧。

5、其它

（1）想办法把流程图绘制得漂亮些。谁不喜欢漂亮的东西呢？

这是我做过的一些流程图，当然文字全部模糊掉了（放图之前犹豫了好长时间－这样做不知是否有损我的职业道德。我特意请教了Fenng，他觉得没事。如果谁觉得有问题请直言不讳地告诉我）。

（2）如果你在公司里不是一锤定音式的人物的话，你就需要对你的文档进行版本管理。流程图也不例外，什么时间发布的什么版本，都要清楚地标出来，“ 最新”是个用不得的词。

我就说这么多了，抛砖引玉而已，蓉儿等人看你们的了！

噢对了，问个事儿：大家有没有觉得我每次写的文章都太长了？

统一建模语言（Unified Modeling Language，UML）

一些术语：

系统（system）指的是硬件和软件的结合体，它能提供业务问题的解决方案。

系统开发（system development）是为客户建立一个系统的过程。

客户（client）是需要解决问题的人。

系统分析员（analyst）将客户所要解决的问题编制成文档，并将该文档转交给开发人员。

开发人员（developer）是为了及决客户的问题而构造软件并在计算机硬件上实施该软件的程序员。

UML的组成

UML包括了一些可以相互组合图表的图形元素。

1．类图

一个类（class）是一类或一组具有类似属性和共同行为的事物。

矩形方框代表类的图标，它被分成3个区域。最上面的区域中是类名，中间区域是类的属性，最下面区域里列的是类的操作。

举一个例子，属于洗衣机（washing machine）类的事物都具有诸如品牌（brand name）、型号（model name）、序列号（serial number）和容量（capacity）等属性。这类事物的行为包括“加衣物（add clothes）”、“加洗涤剂（add detergent）”、“开机（turn on）”和“取出衣物（remove clothes）”等操作。

2．对象图

对象（object）是一个类的实例，是具有具体属性值和行为的一个具体事物。例如，洗衣机的品牌可能是“Laundatorium”，型号为“Washmeister”，序列号为“GL57774”，一次最多可以洗涤重量为16磅的衣物。

对象的图标也是一个矩形，和类的图标一样，但是对象名下面要带下划线。具体实例的名字位于冒号的左边而该实例所属的类名位于冒号的右边。

3．用例图

用例（use case）是从用户的观点对系统行为的一个描述。

例，一个人使用一台洗衣机，显然是为了洗衣服（wash clothes）。

代表洗衣机用户的智力小人形被称为参与者（actor）。椭圆形代表用例。

参与者（它是发起用例的实体）可以是一个人也可以是另一个系统。

4．状态图

一台洗衣机可以处于浸泡（soak）、洗涤（Wash）、漂洗（Rinse）、脱水（Spin）或者关机（off）状态。

最顶端的符号代表起始状态，最底端的符号表示终止状态。

5．顺序图

类图和对象图标大的实系统的静态结构。在一个运行的系统中，对象之间要发生交互，并且这些交互要经历一定的时间。UML顺序图所表达的正式这种基于时间的动态交互。

例，洗衣机的构件包括一个注水的进水管（Water Pipe）、一个用来装衣物的洗涤缸（Drum）以一个排水管（Drain）。假设已经完成了“加衣物”、“加洗涤剂”和“开机”操作。洗衣服这个用例被执行时按照如下顺序进行：

1通过进水管想洗涤缸中注水。

2洗涤缸保持5分钟静止状态。

3水注满，停止注水。

4洗涤缸往返旋转15分钟。

5通过排水管排掉洗涤后的脏水。

6重新开始注水。

7洗涤缸继续往返旋转洗涤。

8停止向洗衣机中注水。

9通过排水管排掉漂洗衣物的水。

10洗涤缸加快速度单方向旋转5分钟。

11洗涤缸停止旋转，洗衣过程结束。

图中，对象之间发送的消息有：注入新水（Send fresh water）、保持静止（Remain stationary）、停止注水（Stop）、往返旋转（Ratate back and forth）、排掉洗涤后的脏水（Send soapy water）、排掉漂洗过的水（Send rinse water）等。

6．活动图

用例和对象的行为中的各个活动之间通常具有时间顺序。

7．协作图

系统的工作目标是由系统中各组成元素相互协作完成的。例子中洗衣机构件的类集中又增加了一个内部计时器（Internal Timer）。在经过一段时间后，定时器停止注水，然后启动洗涤缸往返旋转。图中的序号代表命令消息的发送顺序。

8．构件图

构件图和部署图和整个计算机系统密切相关。

9．部署图

UML部署图显示了基于计算机系统的物理体系结构。它可以描述计算机和设备，展示它们之间的连接，以及驻留在每台机器中的软件。每台计算机用一个立方体来表示，立方体之间的连线表示这些计算机之间的通信关系。

如果需要将图中的组织元素分组，或者在图中说明一些类或构件是某个特定子系统的一部分，可以通过将这些元素组织成包（package）来达到此目的。包用一边突起的公文夹形图标来表示。

注释（note）的图标是一个带折角的矩形，矩形框中是解释性文字。注释和被注释的图元素之间用一条虚线连接。

构造型（stereotype）能够使用现有的UML元素来定制新的元素。构造型用尖对括号括起来的一个名称来表示，这个括号叫双尖括号（guillemets）。