一個哥們在MSN上告訴我，他們公司的交互設(shè)計師只產(chǎn)出流程圖，并問我用什么標準評價流程圖的好壞。他的說法把我徹底震了－這分工也太細了吧！也不知道該說他們那里這樣是好還是不好。

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

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

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

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

（2）網(wǎng)頁

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

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

（3）后臺判斷

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

（4）表單錯誤頁

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

但一般來說也沒必要把每種錯誤都在流程圖中表示出來，因為含有兩個文本框的表單就有三種出錯情況了，多了就更不用說了。所以我都是把錯誤頁變?yōu)楸韱蔚母綄夙摚热绫韱雾摰木幪枮?，那么此表單錯誤頁的編號就從2.1開始排下去，每種錯誤放到一個附屬頁中，這樣程序員在拿到demo時也能搞清楚什么意思。

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

（5）后臺動作

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

（6）多重分支

多重分支指的是幾種并列的情況，每種情況都有發(fā)生的可能，發(fā)生哪種取決于分支起始處的判斷結(jié)果。

（7）對話框

有時候一些操作可以利用對話框來完成， 這些對話框由js生成，顯示在父界面之上。

（8）注釋

這個形狀（比如頁面）詳細的內(nèi)容，或者需要解釋的業(yè)務(wù)邏輯，甚至用戶此處的情況等，我都會放到注釋中，這樣既降低溝通成本，又可作為備忘。

（9）跳轉(zhuǎn)點

在一個復(fù)雜的流程圖中，往往出現(xiàn)跳轉(zhuǎn)到另外一個遠處結(jié)點的情況，此時如果直接用線連過去，未免使得流程圖顯得凌亂，用一個跳轉(zhuǎn)點就解決問題了。在點內(nèi)標明跳轉(zhuǎn)到的形狀的編號，畫起來容易，看起來也清楚。

此外，也可以利用跳轉(zhuǎn)點來分割篇幅巨大的流程圖，Yahoo!就這么用。 上一頁12 下一頁