【转】Visio绘制WEB流程图的心得

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

时间: 2024-07-29 21:36:25

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

visio绘制流程图-去掉默认的左侧栏(小例)

近日在使用Visio绘制流程图时,想要把左侧的默认栏去掉,找了半天,后来同事的一句话就给解决了,原来那是作为一个分隔符存在的,只要去掉就可以. 设置方法,如下图: = 只需要去掉"跨职能流程图"选项下面"显示分隔符"的勾选,即可实现,如下: 非常简单,简而记之.

Visio绘制ER图-

建立数据库时我们需要考虑数据之间的关系,为了理清数据之间的关系我们需要对数据进行统一的整理.对于较复杂的数据库我们需要建立数据库模型,具体可分为两步:首先对数据库进行结构分析并使用树.表等描述数据,然后分析数据库的操作方法,规定数据库的增删改查操作,这两个步骤就构成了我们通常所说的数据库模型.    一般的ER图画法是采用椭圆形.矩形.菱形来描述实体及他们之间的关系,这三者在图中分别代表了属性.实体.联系. 对ER图进行建模时提倡使用PowerDesigner(功能强大,形式多样),因为Powe

如何绘制业务流程图(一)

本文会包含几块内容: 1. 什么是流程图?流程图和其他图表(如线框图,概念图,架构图,用例图)有什么不同? 2. 为什么需要流程图? 3. 流程图的分类? 4. 如何绘制流程图? 5. 流程图绘制工具 视篇幅情况,会在行文时略加划分为系列,敬请关注并多多交流. 第一部分:什么是流程图? 1. 定义 了解一个事情,我习惯从它的定义开始. 我们因为厌恶十年教育,厌恶背各种定理和定义,所以我发现生活中和工作中很多人都很讨厌给一个事情下定义以及去参考定义.所以你会发现很多人在一起争吵得不可开交,仔细去听

如何绘制业务流程图

如何绘制业务流程图 2012/06/27 阅读(87160) 评论(6) 收藏(107) 来人人都是产品经理[起点学院],BAT实战派产品总监手把手系统带你学产品.学运营.点此查看详情 接上篇<业务流程图绘制流程分享(一)>,本篇将对上篇中间的第四部分——如何绘制业务流程图展开更多讨论. 本来写完上篇,我发现没有太多必要单纯讨论这一部分内容,因为对于很多人来讲,缺的不是具体的做法,而是做这件事情的意义以及目标性的明确.一旦对这件事情的意义和目标有深刻认同,那自然会产生较大的动力去研究How这个

web.py学习心得

1.注意判断数字时,如果是get传递的参数,一定要用int转换.不然出错. 2.$var 定义时,冒号后的内容不是python内容,需加上$符号.如$var naviId:$naviId. 3.各个模板中的变量,要对应一致.在用base布局时,整个模板内容为layout模板的content,模板内定义的变量x(模板变量),在layout模板内用content.x 引用. ----------------------------------  网络上搜索的其他faq  --------------

如何利用迅捷画图绘制工作流程图

迅捷画图可以绘制流程图,思维导图并且能制作的很精美出来,那怎样利用迅捷画图绘制工作流程图呢?下面是小编辑总结的操作方法,可以参考步骤进行操作使用. 工具: 电脑,浏览器,迅捷画图 操作方法介绍: 1.利用软件绘制工作流程图,为了使制作的流程图更加精美更加快速可以对其进行大致的了解,在页面中点击"进入迅捷画图"按钮会进入新建页面. 2.在左上角的新建文件中选择新建流程图,选择错误是不能绘制的. 3.新建流程图完成之后就会进入流程图在线编辑页面中,在面板四周是工具栏,列表页以及命名文本名这

绘制简洁流程图的操作方法

流程图的兴起是随着互联网的发展带动起来的,利用电脑绘制真的很方便并且用处很多,在生活中可以让生活更加清楚,在工作中可以节约工作时间,实用性很高,那要怎样绘制简洁的流程图呢?下面是操作方法希望可以帮助到大家. 工具: 电脑 迅捷画图 实用系数:☆☆☆☆☆ 推荐理由:该软件操作简单,只需简单拖动.摆放和点击,就可轻松制作精美的流程图和思维导图,方便好用 绘制简洁流程图操作方法介绍: 1.进入绘制工具中,找到画图开始绘制即可(若没有工具,可以参考下面的图片).进入之后点击模板可以选择模板进行使用. 2

绘制数据流程图简单创意方法介绍

流程图的分类有很多,不同的流程图类型适用的不同行业或者是场合是不同的,我们要针对变化的因素绘制出不变的流程图,以下将为大家讲述绘制数据流程图简单创意操作方法介绍,整个过程将会围绕数据流程图的画法进行展开讲述. ** 绘制工具:迅捷画图 绘制方法** 在绘制之前我们需要选择合适自己的绘制工具,这样可以给工作带来很大的方便,迅捷画图是一款绘制思维导图,流程图的在线网站,利用专业的绘制软件进行绘制使用,操作起来会很简单. 1.首先需要我们打开百度浏览器,在搜索框输入迅捷画图,在搜索结果中点击进行使用即

什么是工作流程图 使用在线画图工具绘制工作流程图操作方法介绍

工作流程图在工作中已经深入各行各业,但是因为没有了解使用所以没有注意到它的存在,工作流程图基本上是围绕某项工作进行展开的一种图示,或者是不知道什么是工作流程图,下面为大家讲解什么是工作流程图以及工作流程图的绘制方法.一:什么是工作流程图?工作流程图是涉及某件事情之后产生的一系列活动称之为工作流程图,它可以引导人们更好的进行工作,还可以以最短的时间让人们了解该项工作的任何一项操作步骤,所以一张完整的流程图请添加链接描述带来的帮助是无可限量的,下面分享绘制工作流程图操作方法介绍.二:绘制工作流程图操