轉(zhuǎn)載-------------------------------------

前言

在我設(shè)計(jì)生涯的早期荐吵，我就開始繪制流程圖了。剛開始的時(shí)候贼涩，我所繪制的流程圖大都比較簡(jiǎn)單遥倦，圖中的節(jié)點(diǎn)不多袒哥，邏輯也是直截了當(dāng)?shù)谋こ啤Ｒ虼巳唇簦恢钡轿壹尤胫Ц秾殻袊?guó)最大的線上支付平臺(tái)晓殊，我才意識(shí)到復(fù)雜的流程圖的用處巨大。在支付寶认烁，業(yè)務(wù)需求和流程之復(fù)雜砚著、變化之迅速，使得理解它們本身已經(jīng)是一件非常有挑戰(zhàn)性的工作赶撰。正是此時(shí)豪娜，我開始依靠流程圖來理解需求瘤载，并使用這一方法來做交互設(shè)計(jì)鸣奔。漸漸地挎狸，流程圖顯現(xiàn)它的魅力：產(chǎn)品經(jīng)理喜歡它断楷，連工程師也用它來指導(dǎo)開發(fā)冬筒。

2008年秋天，我將自己的經(jīng)驗(yàn)總結(jié)為一篇題為《畫Web流程圖的一點(diǎn)心得》的文章土榴，發(fā)表在自己的blog上学搜。該文立即引起了廣泛的注意论衍。各種推薦炬丸、轉(zhuǎn)載稠炬、討論和跟進(jìn)的文章在線上線下都頻頻出現(xiàn)首启，甚至有人按照我在文章中提到的方法制作了一套流程圖模板毅桃。時(shí)至今日钥飞，這篇發(fā)表于四年前的文章仍然給我的個(gè)人主頁(yè)帶來不少流量读宙。

然而，上述文章有一個(gè)比較嚴(yán)重的問題膀估，使得其內(nèi)容帶有誤導(dǎo)性：它并沒有使用用于“描述信息架構(gòu)和交互設(shè)計(jì)”的《視覺詞匯表》察纯。坦白講针肥，寫作的時(shí)候我并沒有注意到有這樣一份廣為人知的詞匯表存在具则，而是創(chuàng)建了我自己的詞匯具帮，并將其介紹給大眾博肋。因此低斋，文章的部分內(nèi)容沒有遵循慣例，從DRY（Don’t Repeat Yourself匪凡，不要重復(fù)自己）的角度講這并不是很合適膊畴。該文發(fā)表一年后，我的確在另一篇文章中指出了這一問題病游，但遺憾地是這次沒能像上次一樣引起廣泛的注意唇跨。

此外，距離該文章發(fā)表已經(jīng)有幾年過去了衬衬，我又積累了不少新的經(jīng)驗(yàn)和想法买猖，希望分享給大家，特別是英文讀者們滋尉。

因此現(xiàn)在如你所見讽挟，我完成了英文版眼姐、帶有最新內(nèi)容的《畫Web流程圖的一點(diǎn)心得》贡歧，并且提供了自制的配套模版下載绍弟。

內(nèi)容概要

本文涵蓋了你應(yīng)該了解的關(guān)于Web流程圖的最重要的幾條準(zhǔn)則：

基本思路葵陵、視覺詞匯表涤久、范例川梅、建議和提示待侵、工具和模版

1.基本思路

什么是流程圖那先？流程圖，顧名思義，是用來描述某個(gè)系統(tǒng)在不同的情況下蹲嚣，如何應(yīng)對(duì)用戶的狀態(tài)、決定和行為的圖俯萎。流程圖能給你什么樣的幫助报嵌？

通常，對(duì)于任何希望創(chuàng)建流程的人來說转质，無論創(chuàng)建的是什么用的流程休蟹，流程圖都是很有用的。比如工廠可以用流程圖來告知其員工赂弓，當(dāng)有人受傷后正確的急救流程是什么杨耙。當(dāng)然除此以外剔氏，在本文中，我只會(huì)舉關(guān)于Web設(shè)計(jì)流程圖的例子芬萍。

對(duì)交互設(shè)計(jì)師和產(chǎn)品經(jīng)理來說北戏，流程圖是一個(gè)核心的工具。(讀注：可用于產(chǎn)品開發(fā)的任何階段漫蛔，并非只在產(chǎn)品的開始階段)它可以幫你：

1) 設(shè)計(jì)你產(chǎn)品的交互流程

2) 確保的你的產(chǎn)品在任何時(shí)候都是友好的（甚至包括你原來根本未曾考慮過的故障發(fā)生時(shí)）

3) 幫助你整合零散的線框圖

4)幫助你與不同背景的同事進(jìn)行溝通：比如引導(dǎo)工程師開發(fā)

2.視覺詞匯

接下來的幾頁(yè)中嗜愈，我將介紹視覺詞匯和它們的使用方式：

起點(diǎn)和終點(diǎn)、界面莽龟、對(duì)話框蠕嫁、決策點(diǎn)、條件分支毯盈、子流程剃毒、跳轉(zhuǎn)點(diǎn)、描述、系統(tǒng)行為

起點(diǎn)和終點(diǎn)是用來標(biāo)識(shí)交互的開端和結(jié)束的地方赘阀，任何流程圖都必須有且只有一個(gè)起點(diǎn)和至少一個(gè)終點(diǎn)陪拘。

應(yīng)用的起點(diǎn)和終點(diǎn)

界面元素被用來表現(xiàn)各種用戶界面，比如窗體或網(wǎng)頁(yè)纤壁。界面的編號(hào)可以用來做識(shí)別符左刽，在協(xié)作過程中會(huì)非常有用。比如在開電話會(huì)議時(shí)酌媒，你可以用 “節(jié)點(diǎn)N”來表達(dá)你想指明的某個(gè)界面元素欠痴。不僅如此，設(shè)計(jì)師也可以采用此規(guī)則為線框圖命名秒咨。比如“23.png” 線框圖與23號(hào)界面對(duì)應(yīng)喇辽。這大大節(jié)省了文檔的閱讀者－比如工程師－找尋對(duì)應(yīng)線框圖的時(shí)間。

展示元素的頁(yè)面

對(duì)話框隨著Web應(yīng)用的問世雨席，Web交互也從線性模式向基于狀態(tài)的模式轉(zhuǎn)換菩咨。局部頁(yè)面更新和單頁(yè)面內(nèi)交互也越來越普遍，最常見的形式之一就是浮動(dòng)消息陡厘，例如表單驗(yàn)證錯(cuò)誤后出現(xiàn)的錯(cuò)誤提示抽米。然而，做兩個(gè)幾乎相同的線框圖不僅沒必要糙置，甚至很別扭云茸。所以，對(duì)于這種由Javascript渲染出來的模態(tài)或非模態(tài)對(duì)話框谤饭，我特別創(chuàng)造了一種叫做“對(duì)話框”的新元素标捺。

模態(tài)框或者對(duì)話框

決策點(diǎn)指用戶需要做出決策的地方，通常流程走到這揉抵，界面都在等待用戶做出下一步去哪的選擇亡容。

等待用戶的輸入做出相應(yīng)的交互

如圖所示，通常我會(huì)讓正面的選擇（“Yes”）向下流動(dòng)冤今，而負(fù)面的選擇（“No”）指向右側(cè)闺兢。這條規(guī)則能提供更佳的閱讀體驗(yàn)，因?yàn)橐?guī)則本身是很清楚且自然的（英文的寫法也是如此）辟汰。這條規(guī)則還可以幫助設(shè)計(jì)師策劃流程圖：流程圖的主線居左列敲，至上而下流動(dòng)阱佛，而分支在右側(cè)帖汞，這樣整個(gè)流程圖結(jié)構(gòu)就自然而然地從左到右、由上至下了凑术。

條件分支看上去和決策點(diǎn)比較類似翩蘸，但它們完成的是截然不同的功能：在決策點(diǎn)中，決策是由用戶明確做出的淮逊；而對(duì)于條件分支催首，則是由系統(tǒng)于后臺(tái)自動(dòng)選擇合適的路徑扶踊。

等待后臺(tái)判定條件的分支路徑

子流程是相對(duì)獨(dú)立、在整個(gè)系統(tǒng)內(nèi)都能夠被重用的流程郎任。例如秧耗，你可以將一些相同的（會(huì)被頻繁使用的）任務(wù)－比如用戶驗(yàn)證和接入網(wǎng)絡(luò)等－打包成子流程，然后將它們集成到更大或特定的流程圖中舶治。

把固定的功能流程封裝為一朵云（竟有如此的相似分井，想必也不是巧合了）

如果你的流程圖包含子流程，那么在別人問你要之前霉猛，你最好將相關(guān)的所有子流程圖也一并提交尺锚。

跳轉(zhuǎn)點(diǎn)在有些高度復(fù)雜的情況中，我們需要用戶直接跳轉(zhuǎn)到另一條路徑惜浅，這時(shí)就需要跳轉(zhuǎn)點(diǎn)瘫辩。和之前所說的一樣，圓圈里的數(shù)字指向某個(gè)節(jié)點(diǎn)坛悉，這個(gè)節(jié)點(diǎn)便是該跳轉(zhuǎn)點(diǎn)將引向的節(jié)點(diǎn)伐厌。顯然，跳轉(zhuǎn)點(diǎn)是某條路徑的終點(diǎn)裸影。

直接跳轉(zhuǎn)的分支結(jié)點(diǎn)

描述是節(jié)約溝通時(shí)間的一種便捷的方法弧械。不過別理解錯(cuò)誤，你仍需要以各種形式和你流程圖的讀者交流空民，只是描述因?yàn)槟芷鸬絺渫吞崾镜淖饔萌刑疲勒瘴业慕?jīng)驗(yàn)，這的確會(huì)節(jié)省很多時(shí)間界轩。

簡(jiǎn)易的注釋便于見面交流的時(shí)候可以提示自己和對(duì)方

系統(tǒng)行為是指系統(tǒng)完成的一系列后臺(tái)行為操作画饥。例如，我們想要記錄用戶登錄失敗時(shí)的數(shù)據(jù)浊猾，就可以在流程圖中以 “收集錯(cuò)誤日志”的系統(tǒng)行為來表示抖甘。

系統(tǒng)提供的封裝好的行為或者功能

元素總結(jié)

常見的10種流程圖元素

3.范例

登錄

下圖為一個(gè)簡(jiǎn)易登錄流程圖，用來描述用戶登錄時(shí)系統(tǒng)如何反應(yīng)：

登錄邏輯圖葫慎，展示流程圖的基本布局和涉及到的元素以及說明

安全檢查

以下流程圖展示如何使用系統(tǒng)行為和子流程這樣的元素衔彻。它來自于真實(shí)的項(xiàng)目，只是由于版權(quán)問題已被我稍稍修改偷办。

調(diào)用子流程并使用系統(tǒng)分支

其它真實(shí)范例

4.建議和提示

基于調(diào)查結(jié)果艰额，指引線框圖

用戶和他們的特點(diǎn)是指導(dǎo)繪制流程圖的首要因素。用戶調(diào)查能夠發(fā)現(xiàn)：用戶過去的體驗(yàn)是什么椒涯？用戶的期望是什么柄沮？使用場(chǎng)景和環(huán)境是什么？這些問題在流程圖的設(shè)計(jì)中起關(guān)鍵作用。

同樣祖搓，流程圖對(duì)線框圖的制作也有指導(dǎo)作用狱意。多數(shù)時(shí)候，一旦流程圖完工拯欧，線框圖的內(nèi)容甚至布局已經(jīng)基本確定了详囤。當(dāng)然了，這也正是流程圖的目的所在：連接線框圖镐作。

Note：在流程圖之前我們會(huì)有如用例這樣的其它交付物纬纪。上圖并沒有涉及到這些內(nèi)容，因?yàn)檫@并非本頁(yè)的重點(diǎn)滑肉。

使你的流程圖完整

制作流程圖最難的是包各，它必須囊括所有可能的情況，在我看來靶庙，這一點(diǎn)在應(yīng)對(duì)復(fù)雜邏輯的商業(yè)需求時(shí)是很有挑戰(zhàn)性的问畅。你將會(huì)遇到很多類似 “要是如何便會(huì)怎樣”的問題，并且有時(shí)候直到工程師告訴你六荒，你才意識(shí)到自己之前欠缺考慮护姆！所以，制作完整的流程圖不僅需要你了解用戶掏击，還需要你懂業(yè)務(wù)邏輯卵皂，甚至要熟悉幕后的系統(tǒng)運(yùn)作機(jī)制！

最好的辦法是和產(chǎn)品經(jīng)理砚亭、工程師還有其他和商業(yè)需求有關(guān)的同事在工作中緊密協(xié)作灯变。我見過不少交互設(shè)計(jì)師悶頭一人工作，然后在產(chǎn)品會(huì)議中遇到猛烈的挑戰(zhàn)捅膘。別再那樣了添祸！相反，和項(xiàng)目相關(guān)的人合作寻仗，一起制作流程圖（以及其它交付物）刃泌，從不同角度排除不確定性，使它更完整全面（這樣也沒人會(huì)再挑戰(zhàn)你了署尤，因?yàn)樗麄兠總€(gè)人也是參與制作的一份子）耙替。

別忘記元數(shù)據(jù)

從協(xié)作和文檔管理的角度來說，你至少得給流程圖起個(gè)名字曹体，寫下作者俗扇、版本和時(shí)間。

除此之外混坞，即便你的流程圖使用了《視覺詞匯表》狐援，你的同事或客戶仍有可能不明白這些花俏的元素，所以究孕，請(qǐng)記得加上圖例啥酱。

5.工具和模版

眾多工具中，我推薦OmniGaffle和Microsoft Visio厨诸。

OmniGaffle

對(duì)Mac用戶們來說镶殷，OmniGraffle以前是，現(xiàn)在仍是首選工具微酬。它不僅有豐富的功能绘趋，最重要的是，它的用戶體驗(yàn)是首屈一指的颗管。我認(rèn)識(shí)的設(shè)計(jì)師很多已經(jīng)換了Mac陷遮，并隨之使用OmniGraffle。

Microsoft Visio

Windows用戶可以考慮用Visio垦江，它有一些內(nèi)建的模版帽馋，也許能大大減輕你的工作。

模版

Allen Le基于我前一篇文章發(fā)布了一系列Visio的模版比吭，很漂亮绽族，對(duì)此我不勝感激。你可以在這里找到：http://www.allenle.com/archives/1530.html衩藤。

OmniGraffle的粉絲可以在http://graffl etopia.com/stencils/905 下載到我制作的模版吧慢。

收尾

編寫此文章花了我大概兩周時(shí)間，并且用英文寫更是增加了難度赏表，因?yàn)橛⒄Z并非我的母語检诗。這是我第一次用非母語撰寫教程，但我十分樂在其中瓢剿。對(duì)我來說岁诉，寫作是總結(jié)過去、保持創(chuàng)造的一種很好的方式跋选，如果有人可以從中受益涕癣，我會(huì)十分開心。任何問題或建議前标，請(qǐng)?jiān)谶@里給我留言：

http://dingyu.me/blog/the-definitive-guideto-web-flowcharts

Via：The definitive guide to Web flowcharts