轉(zhuǎn)自:http://dingyu.me/blog/posts/view/flowchart-howtos

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

不過仔細(xì)想來，我倒的確沒有仔細(xì)考慮過流程圖的好壞，正好借此機(jī)會自我總結(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)頁的用途，括號中的數(shù)字代表這個(gè)形狀所對應(yīng)的demo文件的名稱（比如這里是2.html），我有時(shí)會把流程圖輸出為網(wǎng)頁的形式，并把每個(gè)網(wǎng)頁形狀和它所對應(yīng)的demo文件鏈接起來，這樣查看起來非常方便。對OmniGraffle來說這是小菜一碟，如果你被迫用Visio，嗯……

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

（3）后臺判斷

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

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

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

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

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

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

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

（6）多重分支

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

（7）對話框

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

（8）注釋

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

（9）跳轉(zhuǎn)點(diǎn)

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

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

（10）子流程

分割篇幅巨大的流程圖，更好的辦法是用子流程。

要注意的是，如果你在流程圖中使用了子流程這一形狀，一定記得同時(shí)附上子流程圖，以消除影響項(xiàng)目質(zhì)量的不確定性因素。另外，在子流程圖中也可以標(biāo)明其所屬關(guān)系。

（11）流程塊

可以用流程塊將整張流程圖分隔為幾個(gè)部分，并為每個(gè)部分單獨(dú)命名（比如“流程塊1”等）。這樣做的目的在于從視覺上使復(fù)雜的流程圖變得更為清晰，在溝通時(shí)也方便。

2、圖例和流程圖信息

在團(tuán)隊(duì)合作中，圖例是必須的，否則沒人知道你畫出來的東西到底是什么。即使流程圖只給自己看，也最好養(yǎng)成標(biāo)注圖例的好習(xí)慣。其實(shí)這道理有點(diǎn)類似程序中的注釋。

流程圖信息也是必備的。其內(nèi)容至少應(yīng)包括作者、時(shí)間、流程圖名稱和版本（如下圖）。這一方面可以讓讀者（其他同事）在有問題時(shí)能夠方便地找到作者你，也起到了meta的作用。

3、繪制流程圖的工具

Mac下首選OmniGraffle，Windows下除了Visio，似乎沒有更好的選擇（雖然Visio已經(jīng)很難用了）。

4、評價(jià)流程圖的好壞

我覺得一個(gè)好的流程圖至少應(yīng)做到以下幾點(diǎn)：

1. 密切地迎合了用戶的心理狀態(tài)、如實(shí)的反映了用戶的操作習(xí)慣。流程圖是要指導(dǎo)UI設(shè)計(jì)的，是UI設(shè)計(jì)的參照物，如果流程圖本身無法正確描繪出用戶的情況的話，UI十有八九會出問題；
2. 覆蓋了各種可能的情況和細(xì)節(jié)。這非常重要。任何在先期不確定的因素，都會在項(xiàng)目中成為隨時(shí)引爆的地雷，都會直接降低最終上線的UI質(zhì)量。此種情況真是屢見不鮮。但同時(shí)這條又很難做到，因?yàn)樗粌H要求設(shè)計(jì)師熟悉用戶，也要設(shè)計(jì)師充分知曉產(chǎn)品的商業(yè)邏輯，還要了解系統(tǒng)的運(yùn)作機(jī)制，落下以上任何一個(gè)方面，都會在流程圖中留下死角。這個(gè)問題我不知道有沒有更好的解決方案，不過與PD和系分反復(fù)溝通是個(gè)行之有效的方法；
3. 考慮到系統(tǒng)的設(shè)計(jì)和承受能力。系統(tǒng)的運(yùn)作機(jī)制和承受能力必須在繪制流程圖過程中考慮進(jìn)去，以免出現(xiàn)流程圖被開發(fā)人員槍斃的情況。我的習(xí)慣是，在繪制流程圖時(shí)和系統(tǒng)分析師頻繁溝通和交流，確保每一個(gè)環(huán)節(jié)都是可行的；
4. 確保別人看得懂你的流程圖。別人現(xiàn)在看不懂，你自己以后也一樣看不懂。為了降低溝通成本，把流程圖畫清楚吧。

5、其它

（1）想辦法把流程圖繪制得漂亮些。誰不喜歡漂亮的東西呢？

這是我做過的一些流程圖，當(dāng)然文字全部模糊掉了（放圖之前猶豫了好長時(shí)間－這樣做不知是否有損我的職業(yè)道德。我特意請教了Fenng，他覺得沒事。如果誰覺得有問題請直言不諱地告訴我）。

（2）如果你在公司里不是一錘定音式的人物的話，你就需要對你的文檔進(jìn)行版本管理。流程圖也不例外，什么時(shí)間發(fā)布的什么版本，都要清楚地標(biāo)出來，“ 最新”是個(gè)用不得的詞。

我就說這么多了，拋磚引玉而已，蓉兒等人看你們的了！

噢對了，問個(gè)事兒：大家有沒有覺得我每次寫的文章都太長了？