??xml version="1.0" encoding="utf-8" standalone="yes"?>
一个哥们在MSN上告诉我Q他们公司的交互设计师只产出程图,q我用什么标准评hE图的好坏。他的说法把我彻底震了-q分工也太细了吧Q也不知道该说他们那里这h好还是不好?/p>
不过仔细xQ我倒的没有仔l考虑q流E图的好坏,正好借此Z自我ȝ一下?/p>
在我的流E图中,适用于不同目的和功能的Ş犉有各自确定的规范。到目前为止Q我一共定义了以下一些ŞӞ
Q?Q开始和l束
作ؓ整张程囄头和,必须标清楚到底具体指哪个面Q以免日后出现歧义?/p>
Q?Q网?/strong>
如你所见,|页的Ş状是一个带有漂亮的淡蓝色过渡效果的长方形,它的Ҏ为深蓝色Q中间写明了q个|页的用途,括号中的数字代表q个形状所对应的demo文g的名Uͼ比如q里?.htmlQ,我有时会把流E图输出为网늚形式Qƈ把每个网Ş状和它所对应的demo文g链接hQ这h看v来非常方ѝ对OmniGraffle来说q是菜一,如果你被q用VisioQ嗯……
另外Q所有从形状出来的线条,都具有和此Ş状边框一L颜色。这L做法不仅看v来漂亮,在复杂的程图中q能L地标明各形状的关pR我没有见过cM的做法,所以这是由我首创也说不定,c?/p>
Q?Q后台判?/strong>
很常见的一个Ş状。我在用法上有一点和其他人的不同在于Q我几乎L?#8216;?#8217;的分支往下流动,?#8216;?#8217;的分支向x动。因为流E图一般都是从上向下、从左到右绘制的Q遵循上q规则一斚w可以让绘制者不用ؓ选择方向操心Q另一斚w也方便了读者阅诅R?/p>
Q?Q表单错误页
既然有表单,当然会有错误信息。其实这个信息很重要Q用户出错时惶恐不安Q就靠着错误提示来解决问题了。你不在程N说什么时候显C错误页、不在demo里提供错误页Q有些程序员会直接在|页上写?#8220;错误Q请?#8221;Q所以UI设计师一定要对这个东襉K视v来?/p>
但一般来说也没必要把每种错误都在程图中表示出来Q因为含有两个文本框的表单就有三U出错情况了Q多了就更不用说了。所以我都是把错误页变ؓ表单的附属页Q比如表单页的编号ؓ2Q那么此表单错误늚~号׃2.1开始排下去Q每U错误放C个附属页中,q样E序员在拿到demo时也能搞清楚什么意思?/p>
l合|页和表单的形状Q一个表单验证的程囑ְ是这LQ?/p>
Q?Q后台动?/strong>
q所有后台动作都l入程图中Q否则流E图׃变成庞然大物了)Q只有需要特别强调的后台动作Q和用户体验直接相关的)才用此形状?/p>
Q?Q多重分?/strong>
多重分支指的是几Uƈ列的情况Q每U情况都有发生的可能Q发生哪U取决于分支起始处的判断l果?/p>
Q?Q对话框
有时候一些操作可以利用对话框来完成, q些对话框由js生成Q显C在父界面之上?/p>
Q?Q注?/strong>
q个形状Q比如页面)详细的内容,或者需要解释的业务逻辑Q甚至用h处的情况{,我都会放到注释中Q这h降低沟通成本,又可作ؓ备忘?/p>
Q?Q蟩转点
在一个复杂的程图中Q往往出现跌{到另外一个远处结点的情况Q此时如果直接用U连q去Q未免得流E图昑־凌ؕQ用一个蟩转点p决问题了。在点内标明跌{到的形状的编P画v来容易,看v来也清楚?/p>
此外Q也可以利用跌{Ҏ分割幅巨大的流E图QYahoo!p么用?/p>
Q?0Q子程
分割幅巨大的流E图Q更好的办法是用子流E?/p>
要注意的是,如果你在程图中使用了子程q一形状Q一定记得同旉上子程图,以消除媄响项目质量的不确定性因素。另外,在子程图中也可以标明其所属关pR?/p>
Q?1Q流E块
可以用流E块整张流E图分隔为几个部分,qؓ每个部分单独命名Q比?#8220;程?”{)。这样做的目的在于从视觉上复杂的流E图变得更ؓ清晰Q在沟通时也方ѝ?/p>
在团队合作中Q图例是必须的,否则没h知道你画出来的东西到底是什么。即使流E图只给自己看,也最好养成标注图例的好习惯。其实这道理有点cME序中的注释?/p>
程图信息也是必备的。其内容臛_应包括作者、时间、流E图名称和版本(如下图)。这一斚w可以让读者(其他同事Q在有问题时能够方便地找C者你Q也起到了meta的作用?/p>
Mac下首?a target="_blank">OmniGraffleQWindows下除了VisioQ似乎没有更好的选择Q虽然Visio已经很难用了Q?/p>
我觉得一个好的流E图臛_应做C下几点:
Q?Q想办法把流E图l制得漂亮些。谁不喜Ƣ漂亮的东西呢?
q是我做q的一些流E图Q当然文字全部模p掉了(攑֛之前犹U了好长时_q样做不知是否有损我的职业道得我Ҏh?a target="_blank">FenngQ他觉得没事。如果谁觉得有问题请直言不讳地告诉我Q?/p>
Q?Q如果你在公叔R不是一锤定韛_的h物的话,你就需要对你的文档q行版本理。流E图也不例外Q什么时间发布的什么版本,都要清楚地标出来Q?#8220; 最?#8221;是个用不得的词?/p>
我就说这么多了,抛砖引玉而已Q蓉儿等人看你们的了Q?/p>
噢对了,问个事儿Q大家有没有觉得我每ơ写的文章都太长了?
l一建模语言Q?/span>Unified Modeling LanguageQ?/span>UMLQ?/span>
一些术语:
pȝQ?/span>systemQ指的是g和Y件的l合体,它能提供业务问题的解x案?/span>
pȝ开发(system developmentQ是为客户徏立一个系l的q程?/span>
客户Q?/span>clientQ是需要解决问题的人?/span>
pȝ分析员(analystQ将客户所要解决的问题~制成文档,q将该文档{交给开发h员?/span>
开发h员(developerQ是Z及决客户的问题而构造Y件ƈ在计机g上实施该软g的程序员?/span>
UML的组?/span>
UML包括了一些可以相互组合图表的囑Ş元素?/span>
1Q类?/span>
一个类Q?/span>classQ是一cL一l具有类似属性和共同行ؓ的事物?/span>
矩ŞҎ代表cȝ图标Q它被分?/span>3个区域。最上面的区域中是类名,中间区域是类的属性,最下面区域里列的是cȝ操作?/span>
举一个例子,属于z衣机(washing machineQ类的事物都h诸如品牌Q?/span>brand nameQ、型Pmodel nameQ、序列号Q?/span>serial numberQ和定wQ?/span>capacityQ等属性。这cM物的行ؓ包括“加衣物(add clothesQ?#8221;?#8220;加洗涤剂Q?/span>add detergentQ?#8221;?#8220;开机(turn onQ?#8221;?#8220;取出衣物Q?/span>remove clothesQ?#8221;{操作?br />
2Q对象图
对象Q?/span>objectQ是一个类的实例,是具有具体属性值和行ؓ的一个具体事物。例如,z衣机的品牌可能?#8220;Laundatorium”Q型号ؓ“Washmeister”Q序列号?#8220;GL57774”Q一ơ最多可以洗涤重量ؓ16?/span>的衣物?/span>
对象的图标也是一个矩形,和类的图标一P但是对象名下面要带下划线。具体实例的名字位于冒号的左边而该实例所属的cd位于冒号的右辏V?br />
3Q用例图
用例Q?/span>use caseQ是从用L观点对系l行为的一个描q?/span>
例,一个h使用一台洗衣机Q显然是Zz衣服(wash clothesQ?/span>
代表z衣机用L智力h形被UCؓ参与者(actorQ。椭圆Ş代表用例?/span>
参与者(它是发v用例的实体)可以是一个h也可以是另一个系l?br />
4Q状态图
一台洗衣机可以处于Q?/span>soakQ、洗涤(WashQ、漂z(RinseQ、脱_SpinQ或者关机(offQ状态?br />
最端的符号代表v始状态,最底端的符可C终止状态?/span>
5Q顺序图
cd和对象图标大的实pȝ的静态结构。在一个运行的pȝ中,对象之间要发生交互,q且q些交互要经历一定的旉?/span>UML序图所表达的正式这U基于时间的动态交互?/span>
例,z衣机的构g包括一个注水的q水(Water PipeQ、一个用来装衣物的洗涤Q?/span>DrumQ以一个排水管Q?/span>DrainQ。假讑ַl完成了“加衣?#8221;?#8220;加洗涤剂”?#8220;开?#8221;操作。洗衣服q个用例被执行时按照如下序q行Q?/span>
1通过q水想zᔾ~怸注水?/span>
2zᔾ~怿?/span>5分钟静止状态?/span>
3水注满,停止注水?/span>
4zᔾ~往q旋?/span>15分钟?/span>
5通过排水排掉洗涤后的脏水?/span>
6重新开始注水?/span>
7zᔾ~l往q旋转洗涤?/span>
8停止向洗衣机中注水?/span>
9通过排水排掉漂z衣物的水?/span>
10zᔾ~加快速度单方向旋?/span>5分钟?/span>
11zᔾ~停止旋转,z衣q程l束?/span>
图中Q对象之间发送的消息有:注入新水Q?/span>Send fresh waterQ、保持静止(Remain stationaryQ、停止注_StopQ、往q旋转(Ratate back and forthQ、排掉洗涤后的脏_Send soapy waterQ、排掉漂z过的水Q?/span>Send rinse waterQ等?br />
6Q活动图
用例和对象的行ؓ中的各个zd之间通常h旉序?/span>
7Q协作图
pȝ的工作目标是ql中各组成元素相互协作完成的。例子中z衣机构件的c集中又增加了一个内部计时器Q?/span>Internal TimerQ。在l过一D|间后Q定时器停止注水Q然后启动洗涤往q旋转。图中的序号代表命o消息的发送顺序?br />
8Q构件图
构g囑֒部v囑֒整个计算机系l密切相兟?br />
9Q部|图
UML部v图显CZZ计算机系l的物理体系l构。它可以描述计算机和讑֤Q展C它们之间的q接Q以及驻留在每台机器中的软g。每台计机用一个立方体来表C,立方体之间的q线表示q些计算Z间的通信关系?/span>
如果需要将图中的组l元素分l,或者在图中说明一些类或构件是某个特定子系l的一部分Q可以通过这些元素组l成包(packageQ来辑ֈ此目的。包用一边突L公文夹Ş图标来表C?br />
注释Q?/span>noteQ的图标是一个带折角的矩形,矩Ş框中是解释性文字。注释和被注释的囑օ素之间用一条虚U连接?br />
构造型Q?/span>stereotypeQ能够用现有的UML元素来定制新的元素。构造型用尖Ҏhh的一个名U来表示Q这个括号叫双尖括号Q?/span>guillemetsQ?/span>