Tags
当前位置: 主页 > 网页设计 >

分享Web流程图绘制的一些心得

时间:2009-09-14    来源:未知    作者:admin    点击:
不过仔细想来,我倒的确没有仔细考虑过流程图的好坏,正好借此机会自我总结一下。 1、各司其职的形状 在我的流程图中,适用于不同目的和功能的形状都有各自确定的规范。到目前为止,我一共定义了以下一些形状: (1)开始和结束 作为整张流程图的头和尾,必

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

1、各司其职的形状

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

(1)开始和结束

分享Web流程图绘制的一些心得,PS教程,思缘教程网

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

(2)网页

分享Web流程图绘制的一些心得,PS教程,思缘教程网

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

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

(3)后台判断

分享Web流程图绘制的一些心得,PS教程,思缘教程网

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

(4)表单错误页

分享Web流程图绘制的一些心得,PS教程,思缘教程网

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

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

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

分享Web流程图绘制的一些心得,PS教程,思缘教程网

(5)后台动作

分享Web流程图绘制的一些心得,PS教程,思缘教程网

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

(6)多重分支

上一篇:没有了  下一篇:UL标签在使用中的思考
相关文章