描述信息 结构 与交互设计的图示 词汇表.docVIP

描述信息 结构 和交互设计的图示 词汇表 一、简介: 画流程图是程序设计的基本功，但又似乎属于各有各的高招的一个领域。那么到底用什么标准评价流程图的好坏呢?从事用户体验设计咨询的丁宇在博客上分享了他画Web流程图的一点心得。除了给出他自己的一套形状，还逐一说明注意事项，很有爱心: 作为整张流程图的头和尾，必须标清楚到底具体指哪个页面，以免日后出现歧义。 […] 所有从形状出来的线条，都具有和此形状边框一样的颜色。这样的做法不仅看起来漂亮，在复杂的流程图中还能轻易地标明各形状的关系。 […] 几乎总是让是的分支往下流动，让否的分支向右流动。因为流程图一般都是从上向下、从左到右绘制的，遵循上述规则一方面可以让绘制者不用为选择方向操心，另一方面也方便了读者阅读。 […] 并非所有后台动作都绘入流程图中(否则流程图就会变成庞然大物了)，只有需要特别强调的后台动作(和用户体验直接相关的)才使用此形状。 […] 可以利用跳转点来分割篇幅巨大的流程图 […] 分割篇幅巨大的流程图，更好的办法是用子流程。 […] 他还特别强调: 在团队合作中，图例是必须的，否则没人知道你画出来的东西到底是什么。 除了确保别人能看懂你的流程图，评价流程图的好坏，还要谨记流程图是要指导UI设计的，是UI设计的参照物，必须覆盖了各种可能的情况和细节，考虑到系统的设计和承受能力。 支付宝交互设计师Joycce总结得更加扼要: 简单易懂 表达正确全面，有重点、有细节 形像生动 二、具体: 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等)。这样做的目的在于从视觉上使复杂的流程图