1、各司其職的形狀
在我的流程圖中，適用于不同目的和功能的形狀都有各自確定的規(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放妈，嗯……
另外，所有從形狀出來的線條荐操，都具有和此形狀邊框一樣的顏色芜抒。這樣的做法不僅看起來漂亮，在復雜的流程圖中還能輕易地標明各形狀的關(guān)系托启。我沒有見過類似的做法宅倒，所以這是由我首創(chuàng)也說不定，呵屯耸。
（3）后臺判斷
很常見的一個形狀拐迁。我在用法上有一點和其他人的不同在于，我?guī)缀蹩偸亲尅恰姆种铝鲃蛹缑瘢尅瘛姆种蛴伊鲃舆胙恰Ｒ驗榱鞒虉D一般都是從上向下链方、從左到右繪制的持痰，遵循上述規(guī)則一方面可以讓繪制者不用為選擇方向操心，另一方面也方便了讀者閱讀祟蚀。
（4）表單錯誤頁
既然有表單工窍，當然會有錯誤信息割卖。其實這個信息很重要，用戶出錯時惶恐不安患雏，就靠著錯誤提示來解決問題了鹏溯。你不在流程圖里說什么時候顯示錯誤頁、不在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)點
在一個復雜的流程圖中键兜，往往出現(xiàn)跳轉(zhuǎn)到另外一個遠處結(jié)點的情況凤类，此時如果直接用線連過去，未免使得流程圖顯得凌亂普气，用一個跳轉(zhuǎn)點就解決問題了谜疤。在點內(nèi)標明跳轉(zhuǎn)到的形狀的編號，畫起來容易，看起來也清楚夷磕。
此外履肃，也可以利用跳轉(zhuǎn)點來分割篇幅巨大的流程圖，Yahoo!就這么用坐桩。
（10）子流程
分割篇幅巨大的流程圖尺棋，更好的辦法是用子流程。
要注意的是绵跷，如果你在流程圖中使用了子流程這一形狀膘螟，一定記得同時附上子流程圖，以消除影響項目質(zhì)量的不確定性因素碾局。另外萍鲸，在子流程圖中也可以標明其所屬關(guān)系。
（11）流程塊
可以用流程塊將整張流程圖分隔為幾個部分擦俐，并為每個部分單獨命名（比如“流程塊1”等）脊阴。這樣做的目的在于從視覺上使復雜的流程圖變得更為清晰，在溝通時也方便蚯瞧。
2嘿期、圖例和流程圖信息
在團隊合作中，圖例是必須的埋合，否則沒人知道你畫出來的東西到底是什么备徐。即使流程圖只給自己看，也最好養(yǎng)成標注圖例的好習慣甚颂。其實這道理有點類似程序中的注釋蜜猾。
流程圖信息也是必備的。其內(nèi)容至少應(yīng)包括作者振诬、時間蹭睡、流程圖名稱和版本（如下圖）。這一方面可以讓讀者（其他同事）在有問題時能夠方便地找到作者你赶么，也起到了meta的作用肩豁。
3、繪制流程圖的工具
Mac下首選OmniGraffle辫呻，Windows下除了Visio清钥，似乎沒有更好的選擇（雖然Visio已經(jīng)很難用了）。
4放闺、評價流程圖的好壞
我覺得一個好的流程圖至少應(yīng)做到以下幾點：
密切地迎合了用戶的心理狀態(tài)祟昭、如實的反映了用戶的操作習慣。流程圖是要指導UI設(shè)計的怖侦，是UI設(shè)計的參照物篡悟，如果流程圖本身無法正確描繪出用戶的情況的話谜叹，UI十有八九會出問題；
覆蓋了各種可能的情況和細節(jié)恰力。這非常重要叉谜。任何在先期不確定的因素旗吁，都會在項目中成為隨時引爆的地雷踩萎，都會直接降低最終上線的UI質(zhì)量。此種情況真是屢見不鮮很钓。但同時這條又很難做到香府，因為它不僅要求設(shè)計師熟悉用戶，也要設(shè)計師充分知曉產(chǎn)品的商業(yè)邏輯码倦，還要了解系統(tǒng)的運作機制企孩，落下以上任何一個方面，都會在流程圖中留下死角袁稽。這個問題我不知道有沒有更好的解決方案勿璃，不過與PD和系分反復溝通是個行之有效的方法；
考慮到系統(tǒng)的設(shè)計和承受能力推汽。系統(tǒng)的運作機制和承受能力必須在繪制流程圖過程中考慮進去补疑，以免出現(xiàn)流程圖被開發(fā)人員槍斃的情況。我的習慣是歹撒，在繪制流程圖時和系統(tǒng)分析師頻繁溝通和交流莲组，確保每一個環(huán)節(jié)都是可行的；
確保別人看得懂你的流程圖暖夭。別人現(xiàn)在看不懂锹杈，你自己以后也一樣看不懂。為了降低溝通成本迈着，把流程圖畫清楚吧竭望。
5、其它
（1）想辦法把流程圖繪制得漂亮些裕菠。誰不喜歡漂亮的東西呢市框？
（2）如果你在公司里不是一錘定音式的人物的話，你就需要對你的文檔進行版本管理糕韧。流程圖也不例外枫振，什么時間發(fā)布的什么版本，都要清楚地標出來萤彩，“ 最新”是個用不得的詞粪滤。
