不過仔細(xì)想來，我倒的確沒有仔細(xì)考慮過流程圖的好壞，正好借此機(jī)會(huì)自我總結(jié)一下。

1、各司其職的形狀

在我的流程圖中，適用于不同目的和功能的形狀都有各自確定的規(guī)范。到目前為止，我一共定義了以下一些形狀：

（1）開始和結(jié)束

作為整張流程圖的頭和尾，必須標(biāo)清楚到底具體指哪個(gè)頁面，以免日后出現(xiàn)歧義。

（2）網(wǎng)頁

如你所見，網(wǎng)頁的形狀是一個(gè)帶有漂亮的淡藍(lán)色過渡效果的長方形，它的邊框?yàn)樯钏{(lán)色，中間寫明了這個(gè)網(wǎng)頁的用途，括號(hào)中的數(shù)字代表這個(gè)形狀所對(duì)應(yīng)的 demo文件的名稱(比如這里是2.html)，我有時(shí)會(huì)把流程圖輸出為網(wǎng)頁的形式，并把每個(gè)網(wǎng)頁形狀和它所對(duì)應(yīng)的demo文件鏈接起來，這樣查看起來非常方便。對(duì)OmniGraffle來說這是小菜一碟，如果你被迫用Visio，嗯……

另外，所有從形狀出來的線條，都具有和此形狀邊框一樣的顏色。這樣的做法不僅看起來漂亮，在復(fù)雜的流程圖中還能輕易地標(biāo)明各形狀的關(guān)系。我沒有見過類似的做法，所以這是由我首創(chuàng)也說不定，呵。

（3）后臺(tái)判斷

很常見的一個(gè)形狀。我在用法上有一點(diǎn)和其他人的不同在于，我?guī)缀蹩偸亲?lsquo;是’的分支往下流動(dòng)，讓‘否’的分支向右流動(dòng)。因?yàn)榱鞒虉D一般都是從上向下、從左到右繪制的，遵循上述規(guī)則一方面可以讓繪制者不用為選擇方向操心，另一方面也方便了讀者閱讀。

（4）表單錯(cuò)誤頁

既然有表單，當(dāng)然會(huì)有錯(cuò)誤信息。其實(shí)這個(gè)信息很重要，用戶出錯(cuò)時(shí)惶恐不安，就靠著錯(cuò)誤提示來解決問題了。你不在流程圖里說什么時(shí)候顯示錯(cuò)誤頁、不在demo里提供錯(cuò)誤頁，有些程序員會(huì)直接在網(wǎng)頁上寫個(gè)“錯(cuò)誤，請(qǐng)檢查”，所以UI設(shè)計(jì)師一定要對(duì)這個(gè)東西重視起來。

但一般來說也沒必要把每種錯(cuò)誤都在流程圖中表示出來，因?yàn)楹�有兩個(gè)文本框的表單就有三種出錯(cuò)情況了，多了就更不用說了。所以我都是把錯(cuò)誤頁變?yōu)楸韱蔚母綄夙摚�比如表單頁的編�?hào)為2，那么此表單錯(cuò)誤頁的編號(hào)就從2.1開始排下去，每種錯(cuò)誤放到一個(gè)附屬頁中，這樣程序員在拿到demo時(shí)也能搞清楚什么意思。

結(jié)合網(wǎng)頁和表單的形狀，一個(gè)表單驗(yàn)證的流程圖就是這樣的：

（5）后臺(tái)動(dòng)作

并非所有后臺(tái)動(dòng)作都繪入流程圖中(否則流程圖就會(huì)變成龐然大物了)，只有需要特別強(qiáng)調(diào)的后臺(tái)動(dòng)作(和用戶體驗(yàn)直接相關(guān)的)才使用此形狀。

（6）多重分支

進(jìn)入論壇一起討論: http://www.missyuan.com/thread-419865-1-1.html