《visio技能-画web流程图的一点心得》由会员分享，可在线阅读，更多相关《visio技能-画web流程图的一点心得（15页珍藏版）》请在金锄头文库上搜索。
1、画画 Web 流程图的一点心得流程图的一点心得 BY 丁宇（丁宇（Felix Ding）一个哥们在 MSN 上告诉我，他们公司的交互设计师只产出流程图，并问我用什么标准评价流程图的好坏。他的说法把我彻底震了这分工也太细了吧！也不知道该说他们那里这样是好还是不好。不过仔细想来，我倒的确没有仔细考虑过流程图的好坏，正好借此机会自我总结一下。1、各司其职的形状、各司其职的形状在我的流程图中，适用于不同目的和功能的形状都有各自确定的规范。到目前为止，我一共定义了以下一些形状：（1）开始和结束）开始和结束作为整张流程图的头和尾，必须标清楚到底具体指哪个页面，以免日后出现歧义。（2）网页）网页如你所见，网
2、页的形状是一个带有漂亮的淡蓝色过渡效果的长方形，它的边框为深蓝色，中间写明了这个网页的用途，括号中的数字代表这个形状所对应的 demo 文件的名称（比如这里是 2.html），我有时会把流程图输出为网页的形式，并把每个网页形状和它所对应的 demo 文件链接起来，这样查看起来非常方便。对 OmniGraffle 来说这是小菜一碟，如果你被迫用 Visio，嗯另外，所有从形状出来的线条，都具有和此形状边框一样的颜色。这样的做法不仅看起来漂亮，在复杂的流程图中还能轻易地标明各形状的关系。我没有见过类似的做法，所以这是由我首创也说不定，呵。（3）后台判断）后台判断很常见的一个形状。我在用法上有一点和
3、其他人的不同在于，我几乎总是让是的分支往下流动，让否的分支向右流动。因为流程图一般都是从上向下、从左到右绘制的，遵循上述规则一方面可以让绘制者不用为选择方向操心，另一方面也方便了读者阅读。（4）表单错误页）表单错误页既然有表单，当然会有错误信息。其实这个信息很重要，用户出错时惶恐不安，就靠着错误提示来解决问题了。你不在流程图里说什么时候显示错误页、不在 demo 里提供错误页，有些程序员会直接在网页上写个“错误，请检查”，所以 UI 设计师一定要对这个东西重视起来。但一般来说也没必要把每种错误都在流程图中表示出来，因为含有两个文本框的表单就有三种出错情况了，多了就更不用说了。所以我都是把错误页
4、变为表单的附属页，比如表单页的编号为 2，那么此表单错误页的编号就从 2.1 开始排下去，每种错误放到一个附属页中，这样程序员在拿到 demo 时也能搞清楚什么意思。结合网页和表单的形状，一个表单验证的流程图就是这样的：（5）后台动作）后台动作并非所有后台动作都绘入流程图中（否则流程图就会变成庞然大物了），只有需要特别强调的后台动作（和用户体验直接相关的）才使用此形状。（6）多重分支）多重分支多重分支指的是几种并列的情况，每种情况都有发生的可能，发生哪种取决于分支起始处的判断结果。（7）对话框）对话框有时候一些操作可以利用对话框来完成， 这些对话框由 js 生成，显示在父界面之上。（8）注释）
5、注释这个形状（比如页面）详细的内容，或者需要解释的业务逻辑，甚至用户此处的情况等，我都会放到注释中，这样既降低沟通成本，又可作为备忘。（9）跳转点）跳转点在一个复杂的流程图中，往往出现跳转到另外一个远处结点的情况，此时如果直接用线连过去，未免使得流程图显得凌乱，用一个跳转点就解决问题了。在点内标明跳转到的形状的编号，画起来容易，看起来也清楚。此外，也可以利用跳转点来分割篇幅巨大的流程图，Yahoo!就这么用。（10）子流程）子流程分割篇幅巨大的流程图，更好的办法是用子流程。要注意的是，如果你在流程图中使用了子流程这一形状，一定记得同时附上子流程图，以消除影响项目质量的不确定性因素。另外，在子流
6、程图中也可以标明其所属关系。（11）流程块）流程块可以用流程块将整张流程图分隔为几个部分，并为每个部分单独命名（比如“流程块1”等）。这样做的目的在于从视觉上使复杂的流程图变得更为清晰，在沟通时也方便。2、图例和流程图信息、图例和流程图信息在团队合作中，图例是必须的，否则没人知道你画出来的东西到底是什么。即使流程图只给自己看，也最好养成标注图例的好习惯。其实这道理有点类似程序中的注释。流程图信息也是必备的。其内容至少应包括作者、时间、流程图名称和版本（如下图）。这一方面可以让读者（其他同事）在有问题时能够方便地找到作者你，也起到了 meta的作用。3、绘制流程图的工具、绘制流程图的工具Mac
7、下首选 OmniGraffle，Windows 下除了 Visio，似乎没有更好的选择（虽然Visio 已经很难用了）。4、评价流程图的好坏、评价流程图的好坏我觉得一个好的流程图至少应做到以下几点：1. 密切地迎合了用户的心理状态、如实的反映了用户的操作习惯。流程图是要指导UI 设计的，是 UI 设计的参照物，如果流程图本身无法正确描绘出用户的情况的话，UI 十有八九会出问题； 2. 覆盖了各种可能的情况和细节。这非常重要。任何在先期不确定的因素，都会在项目中成为随时引爆的地雷，都会直接降低最终上线的 UI 质量。此种情况真是屡见不鲜。但同时这条又很难做到，因为它不仅要求设计师熟悉用户，也要设
8、计师充分知晓产品的商业逻辑，还要了解系统的运作机制，落下以上任何一个方面，都会在流程图中留下死角。这个问题我不知道有没有更好的解决方案，不过与 PD 和系分反复沟通是个行之有效的方法； 3. 考虑到系统的设计和承受能力。系统的运作机制和承受能力必须在绘制流程图过程中考虑进去，以免出现流程图被开发人员枪毙的情况。我的习惯是，在绘制流程图时和系统分析师频繁沟通和交流，确保每一个环节都是可行的； 4. 确保别人看得懂你的流程图。别人现在看不懂，你自己以后也一样看不懂。为了降低沟通成本，把流程图画清楚吧。 5、其它、其它（1）想办法把流程图绘制得漂亮些。谁不喜欢漂亮的东西呢？（2）如果你在公司里不是一
9、锤定音式的人物的话，你就需要对你的文档进行版本管理。流程图也不例外，什么时间发布的什么版本，都要清楚地标出来，“ 最新”是个用不得的词。丁宇丁宇 | blog丁宇（Felix Ding）的个人 blog，有关网页设计、Open Source、Macintosh、读书和音乐，从 2000 年开始。 blog 关于 项目登入从从“产品需求文档产品需求文档”（PRD）到）到“产品设计文档产品设计文档”（PDD）产品/网页设计 | 27 条评论 2009-12-21 23:02:34 传统上写产品需求文档（PRD）的做法，就是把用例、流程图和网页原型图一股脑的放到一个 Word 文档里。一般一个产品都
10、包含乃几十个乃至上百用例，每个用例都有自己的流程图，每个流程图又包含了少则几个多则几十的网页原型图，结果就是产品需求文档变得庞大无比，写的人费事儿，读的人更惨。自从我受到了这样文档的折磨，我就一直都在琢磨怎么才能把文档写得更简单一点，让阅读的人通常是设计师和程序员能够在最短的时间内领会产品的设计。原来做 UI 设计师的时候，我创造了一种用流程图来表示产品交互的办法，这个方法受到了很多人的欢迎，这篇文章也引起了一定的反响。其实当时在实际使用的时候，我不仅产出这样一份流程图，还利用网页热区，把流程图中的界面元素（蓝色的元素）和原型网页（HTML 文件）给结合起来了，这样设计师和程序员在看流程图的时
11、候，只要用鼠标点一下界面元素，就可以连接到原型网页，非常方便！这个办法我一直都在用，只是当时没有写在文章里罢了。后来随着工作性质的变化，我需要越来越多地考虑产品的整体和功能、而不是像原来一样只在特定需求内围绕界面做文章，我就开始寻找把用例整合进前述方法的可能。在经过了一段时间的摸索和实践后，我逐渐形成了自己特有的一套产品需求文档的写法，为了表示区别，我称之为“产品设计文档”，简称 PDD。本文就是对 PDD 的介绍。PDD 的组成部分的组成部分PDD 有三个组成部分，它们分别是用例、流程图和原型图。用例用例用例从整体脉络上定义了产品所具有的功能。比如对于一个邮件系统来说，“写邮件”、“发邮件”
12、和“删除邮件”等功能都是用例。用例比较流行的写法，是在每一个用例中标明它的前后置条件和异常情况等属性。不过在 PDD 中，我完全放弃了上述属性，只保留用例的名称和简要描述。因为“用例”的出发点就是“用户”，如果你站在一个用户的角度来思考产品的功能，你会发现那些属性你根本就不会考虑。并且，各种前后置条件和异常情况，完全可以放在流程图中，这样更清楚。流程图流程图流程图是对用例的细化，它可以清晰地表现一个用例所有相关的前置、后置和分支条件。流程图的画法我在“画 Web 流程图的一点心得”一文中已经说得非常清楚了，在此不再赘述。唯一值得注意的是，我以前并没有意识到流程图本身也是有 ISO 标准的，因此
13、“画”中使用的流程图元素并不符合 ISO 标准，也和一些已经成型的系统（比如这篇“描述信息结构和交互设计的图示词汇表”）有出入，因此元素在使用上还存在一些问题。在日常工作当中我已经对元素使用做了修改，以后有时间我会更新“画”一文的内容，也有可能直接把模板放出来。原型图原型图原型图是对流程图中“界面元素”的展现。这个东西没什么可说的。PDD 的表现方式的表现方式用例、流程图和原型图一般都是产片需求文档（PRD）中已有的东西，PDD 在这点上和 PRD 没什么区别。而下面要说的表现方式，则是 PDD 的精髓。我比较孤陋寡闻，还没看到过有人像我这样组织这三块内容，所以姑且认为这是我的首创吧。用例和流
14、程图用例和流程图首先把用例和流程图整合起来。方法很简单，利用网页的 frame 标签，新建几个帧：1. index.html另外两个帧的容器，不用解释吧 2. navigation.html导航帧，用于存放用例列表 3. main.html默认情况下的主帧，用于存放文档简介、作者、版本和更新日志一类的东西 然后新建一大堆网页，把所有的流程图都放在这些网页里，每个流程图（即每个用例）放在一个网页里，最后修改 navigation.html，把用例名称和其对应的网页链接起来。完工以后，页面应该是下面这个样子：PDD 文档首页左侧为用例，右侧为流程图好了，左侧为用例，右侧为流程图，这样就把用例和流程
15、图整合了起来，并且结构清晰，查看方便。流程图和原型图流程图和原型图整合流程图和原型图的重点在于，提供一种方便的方式，以让读者能够在看流程图时方便的看到其中包含的原型图。为了达到这个目的，我的做法是：1. 在用 OmniGraffle 画流程图时，选择界面元素（蓝色的那个） ，然后在“检查器”“属性：动作”中选择“打开文件”，然后按“选择文件”，找到你的原型图文件并按“确定”，这样你这个元素就和原型图链接起来了。如下图所示： 2. 在 OmniGraffle 中输出这个流程图文档时，不是选择图片，而是选择“HTML 图像映射”，这样在生成出来的网页上，蓝色的界面元素都是可以点击的，点了以后就链接到原型图。很方便对吧？但这还不够； 3. 用 Lightbox，把所有图片链接都改成弹出图层，这次再点刚才那些链接看看，效果是不是更棒？ 好了，通过这样的方法，产品设计文档（PDD）就将用例、流程图和原型图这三块内容有效的整合了起来。
