一个哥们在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)如果你在公司里不是一锤定音式的人物的话,你就需要对你的文档进行版本管理。流程图也不例外,什么时间发布的什么版本,都要清楚地标出来,“ 最新”是个用不得的词。

【转】Visio绘制WEB流程图的心得的更多相关文章

  1. WPS:在Word中插入Visio绘制的流程图

    在Word菜单栏 插入->对象 如果Visio绘图已经保存为了文件,可以选择由文件创建

  2. 使用highcharts 绘制Web图表

    问题描述:     使用highcharts 绘制Web图表 Highcharts说明: 问题解决:     (1)安装Highcharts     在这些图表中,数据源是一个典型的JavaScrip ...

  3. JBPM4入门——2.在eclipse中安装绘制jbpm流程图的插件

    本博文只是简要对JBPM4进行介绍,如需更详细内容请自行google 链接: JBPM入门系列文章: JBPM4入门——1.jbpm简要介绍 JBPM4入门——2.在eclipse中安装绘制jbpm流 ...

  4. 第二阶段:1.流程图:10.visio绘制泳道图

    选择跨智能 同时水平 设置好泳道图标题以及泳道名字 泳道位置可以拖拽更换 左侧有一些基本的形状 包括分隔符等等 添加分隔符并填上分隔符上面的阶段名称 左边选择形状界面 然后拖拽使用 同时可以用连接线链 ...

  5. web.py学习心得

    1.注意判断数字时,如果是get传递的参数,一定要用int转换.不然出错. 2.$var 定义时,冒号后的内容不是python内容,需加上$符号.如$var naviId:$naviId. 3.各个模 ...

  6. 利用Visio绘制数据流图与组织结构图

    绘制数据流图: 利用Visio 2007来绘制网上书店系统的数据流图.利用Visio 2007创建Gane- Sarson数据流图,可以选择“软件和数据库”模板,然后再选择“数据流模型图”,创建之后可 ...

  7. idea绘制activity流程图中文乱码解决

    发现问题: 绘制activity的bpm工作流程图的时候,在name项中填写中文,开始的时候没问题,显示的确是中文,关闭文件再打开发现已经乱码,重启idea效果相同,如图 解决方案:修改idea启动参 ...

  8. [svc]visio绘制模具

    visio2016狮子XL自定义运维模具下载: https://github.com/lannyMa/scripts/blob/master/%E7%BE%8E%E5%8C%96%E5%AE%9A%E ...

  9. 使用VISIO绘制组织结构图的操作方法

    1.确保电脑已安装VISIO软件,然后在电脑指定位置点击鼠标右键新建VISIO绘图文档. 2.打开文档,在弹出的选择绘图类型中点击商务.组织结构图,之后点击确定. 3.之后进入绘图主界面,在左侧是形状 ...

随机推荐

  1. 使用Postman验证TFS Rest API

    概述 你可能已经了解到,TFS自2015版本发布以来,开始支持通过REST API的方式提供接口服务,第三方平台可以通过通用的HTTP协议访问TFS系统,获取数据.请求编译等.REST API在原有. ...

  2. [.net 多线程]线程基础

    一.线程状态 1.新建状态(New):         当用new操作符创建一个线程时, 例如new Thread(r),线程还没有开始运行,此时线程处在新建状态. 当一个线程处于新生状态时,程序还没 ...

  3. ASP.Net Core 2.2 InProcess托管的Bug:unable to open database file

    最近把项目更新到了ASP.Net Core 2.2,发布之后发现在IIS下使用SQLite数据库不行了,报异常说不能打开数据库."unable to open database file&q ...

  4. 记录一下将SqlLocalDb数据迁移到Sql Server Express2017的过程!

    当初为了开发方便,使用了SqlLocalDb,然后再测试期产生了很多有用的数据,客户说不能删除了.麻烦 先将数据库文件下载回来,然后安装SSMS,在连接数据库地址那里,填写“(LocalDB)\MSS ...

  5. Day 43数据库(Day1)

    创建表. create table student( id int not null auto_increment PRIMARY key, name archar() not null, age i ...

  6. 程序媛计划——python正则表达式

    #定义 正则表达式是对字符串操作的一种逻辑公式,通过它我们能筛选过滤出我们需要的内容,如判断一串数字是否是电话号码. #原理 先把正则表达式的字符串转换成 Pattern 对象,接着用这个对象处理文本 ...

  7. 二叉查找树的实现——c++

    二叉查找树的c++实现: 1. 节点和二叉查找树的定义 1.1 二叉查找树节点 template <class T> class BSTNode{ public: T key; // 关键 ...

  8. strlen()与mb_strlen()的区别

    1,strlen()是php的内置函数,可以在php中直接调用:mb_strlen()是php的扩展,需要配置php.ini,以开启mb_strlen()扩展.在php.ini中加载了php_mbst ...

  9. javascript——后台传值map类型转换成json对象

    前端需要对后端传过来的值进行解析之后再展示,而后端传过来的值可能是各种类型的,一般情况下要么和后端沟通下让他直接传给我们需要的类型,这个,我一般直接自己转,这次后端传回来一个map类型的对象,我转来转 ...

  10. [Python] 模拟登录网站(。。为了之后操作数据。。)

    我司的内部管理(Web)系统(日报)着实..(mafan).. 所以,就想自己动手增加一下便利性. 计划是, - 桌面程序 用来方便记录(按自己格式,数据随时保存到sqlite中,备用) 通过一览来确 ...