给大家带来Web流程图绘制的心得
结构清晰，容易被搜索引擎搜索到，天生优化了seo一个哥们在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、评价流程图的优劣
我以为一个好的流程图最少应做到以下几点：
[*]亲切地投合了用户的心思形态、照实的反应了用户的操纵习气。流程图是要引导UI计划的，是UI计划的参照物，假如流程图自己没法准确刻画出用户的情形的话，UI十有八九会出成绩；
[*]掩盖了各类大概的情形和细节。这十分主要。任安在先期不断定的要素，城市在项目中成为随时引爆的地雷，城市间接下降终极上线的UI质量。此种情形真是不足为奇。但同时这条又很难做到，由于它不但请求计划师熟习用户，也要计划师充实晓得产物的贸易逻辑，还要懂得体系的运作机制，落下以上任何一个方面，城市在流程图中留下逝世角。这个成绩我不晓得有无更好的办理计划，不外与PD和系分重复相同是个卓有成效的办法；
[*]思索到体系的计划和接受才能。体系的运作机制和接受才能必需在绘制流程图过程当中思索出来，以避免呈现流程图被开辟职员枪毙的情形。我的习气是，在绘制流程图时和体系剖析师频仍相同和交换，确保每个环节都是可行的；
[*]确保他人看得懂你的流程图。他人如今看不懂，你本人今后也一样看不懂。为了下降相同本钱，把流程丹青分明吧。
5、别的
（1）想举措把流程图绘制得大度些。谁不喜好大度的器材呢？
这是我做过的一些流程图，固然笔墨全体含混失落了（放图之前夷由了好长工夫－如许做不知是不是有损我的职业品德。我特地就教了Fenng，他以为没事。假如谁以为有成绩请开门见山地告知我）。
（2）假如你在公司里不是一槌定音式的人物的话，你就必要对你的文档举行版本办理。流程图也不破例，甚么工夫公布的甚么版本，都要分明地标出来，“最新”是个用不得的词。
我就说这么多了，举一反三罢了，蓉儿等人看你们的了！
噢对了，问个事儿：人人有无以为我每次写的文章都太长了？
10月8日更新：持续浏览付出宝交互计划师Joycce的流程图分享，也接待列入此次“流程图征集、分享和会商举动”。
层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 学Dreamweaver技术的过程其实是一个增加信心的过程。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 滚动条)层属性--溢出(visible/hidden/scroll/auto)
页:
[1]