流程图的画法

流程图的画法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、评价流程图的好坏我觉得一种好的流程图至少应做到如下几点：亲密地迎合了顾客的心理状态、如实的反应了顾客的操作习惯。流程图是要指导UI设计的，是UI设计的参照物，假如流程图自身无法对的描绘出顾客的状况的话，UI十有八九会出问题；覆盖了多种也许的状况和细节。这非常重要。任何在先期不确定的原因，都会在项目中成为随时引爆的地雷，都会直接减少最终上线的UI质量。此种状况真是屡见不鲜。但同步这条又很难做到，由于它不仅规定设计师熟悉顾客，也要设计师充足知晓产品的商业逻辑，还要理解系统的运作机制，落下以上任何一种方面，都会在流程图中留下死角。这个问题我不懂得有无更好的处理方案，不过与PD和系分反复沟通是个行之有效的措施；考虑到系统的设计和承受能力。系统的运作机制和承受能力必须在绘制流程图过程中考虑进去，以免出现流程图被开发人员枪毙的状况。我的习惯是，在绘制流程图时和系统分析师频繁沟通和交流，保证每一种环节都是可行的；保证他人看得懂你的流程图。他人目前看不懂，你自己后来也同样看不懂。为了减少沟通成本，把流程图画清晰吧。5、其他（1）想措施把流程图绘制得漂亮些。谁不喜欢漂亮的东西呢？这是我做过的某些流程图，当然文字所有模糊掉了（放图之前踌躇了好长时间－这样做不知与否有损我的职业道德。我特意请教了