知識(shí)分享，什么是設(shè)計(jì)流程圖？(4)

一、什么是設(shè)計(jì)流程圖？

1 什么不是設(shè)計(jì)流程圖？

　　以下是百度百科關(guān)于流程圖的定義：

　　以特定的圖形符號(hào)加上說(shuō)明，表示算法的圖，稱為流程圖或框圖。流程圖是流經(jīng)一個(gè)系統(tǒng)的信息流、觀點(diǎn)流或部件流的圖形代表。在企業(yè)中，流程圖主要用來(lái)說(shuō)明某一過(guò)程。這種過(guò)程既可以是生產(chǎn)線上的工藝流程，也可以是完成一項(xiàng)任務(wù)必需的管理過(guò)程。

　　我把見過(guò)的流程圖大致歸納成兩類。

　　一類是表示算法或內(nèi)部邏輯的，像這張圖：

　　可以看出來(lái)這種流程圖是描述算法邏輯，或者可以理解成物體的底層的運(yùn)作邏輯。它的特征是底層，復(fù)雜。但它不是設(shè)計(jì)流程圖。

　　一類是表示業(yè)務(wù)或工作流程的，像這兩張圖：

　　業(yè)務(wù)流更常見于一些辦事流程、服務(wù)過(guò)程，里面有各個(gè)不同的單位、人、物品參與其中，它的特征是寬泛，簡(jiǎn)單。但它不是設(shè)計(jì)流程圖。

2 流程圖的基本構(gòu)成。

　　從上面幾張圖可以看到，流程圖由特定的圖形構(gòu)成，但具體的樣子由圖本身的目的和閱讀者的閱讀習(xí)慣（或約定）來(lái)決定，所以使用的圖形并不是固定的，比如有人用圓形表示開端和結(jié)束，有人則用圓角矩形，有人有云團(tuán)表示其他流程的引用，有人用矩形加文字來(lái)表示，形式不重要，達(dá)到描述的效果而閱讀者能讀懂才是最重要。設(shè)計(jì)流程圖也遵循這個(gè)原理。

3 設(shè)計(jì)流程圖。

　　設(shè)計(jì)流程圖長(zhǎng)得并不特別，跟全世界流程圖都差不多，也同樣是作為一種表達(dá)工具存在。區(qū)別只在于描述的對(duì)象和組成的內(nèi)容不一樣。設(shè)計(jì)流程圖的一大重點(diǎn)是面向表現(xiàn)層，也就是說(shuō)，描述的是界面（或叫屏幕）的變化，是用戶看到的界面的行為流。什么行為呢，界面之間的跳轉(zhuǎn)邏輯，也就是導(dǎo)航邏輯。

　　導(dǎo)航是信息架構(gòu)的一部分（教科書把信息架構(gòu)劃分為組織、導(dǎo)航、標(biāo)簽、搜索四個(gè)系統(tǒng)），當(dāng)然是交互設(shè)計(jì)的重要一環(huán)，導(dǎo)航的設(shè)計(jì)思路就能用流程圖表達(dá)出來(lái)（或者也可以說(shuō)用流程圖來(lái)輔助設(shè)計(jì)吧），這也是個(gè)人覺(jué)得設(shè)計(jì)流程圖的最重要運(yùn)用。看下圖：

　　從圖中可以看出構(gòu)成：

　　a 界面。

　　一個(gè)矩形代表一個(gè)界面，這個(gè)流程中用戶走過(guò)兩個(gè)界面（登錄頁(yè)和首頁(yè)），因?yàn)楸磉_(dá)的是界面的跳轉(zhuǎn)，界面是用戶實(shí)實(shí)在在接觸到的媒介，非界面的內(nèi)容，不要出現(xiàn)。

　　b 動(dòng)作。

　　矩形之間也就是界面之間加上一個(gè)觸發(fā)動(dòng)作，比如從界面A點(diǎn)擊下一步按鈕，到達(dá)界面B，“點(diǎn)擊下一步”就是連接這兩個(gè)界面的關(guān)鍵動(dòng)作，需要標(biāo)示出來(lái)，上圖例子就是“單擊提交按鈕”。

　　c 條件。

　　一個(gè)動(dòng)作之后可能有多種“是/否”的結(jié)果，則在矩形之間、動(dòng)作之后加上一個(gè)或多個(gè)判斷菱形。如上圖的檢驗(yàn)賬號(hào)密碼是否輸入正確。

二、注意什么?

1 堅(jiān)持表達(dá)表現(xiàn)層。

　　不要一個(gè)流程圖里面，又有內(nèi)部算法邏輯，又有界面邏輯，下圖標(biāo)紅的矩形就是多余的，這個(gè)不關(guān)用戶的事情，會(huì)擾亂你的導(dǎo)航設(shè)計(jì)思路：

　　不要把步驟和界面本身都用矩形表示，比如下圖標(biāo)紅的矩形（況且你還不知道用戶填寫的順序呢，我先填密碼不行�。�

2 拋棄系統(tǒng)錯(cuò)誤。

　　什么是系統(tǒng)錯(cuò)誤呢，也就是非用戶犯的錯(cuò)誤，比如登錄的時(shí)候服務(wù)器當(dāng)了，網(wǎng)絡(luò)連接錯(cuò)誤等導(dǎo)致登錄失敗。除非你特別想強(qiáng)調(diào)系統(tǒng)錯(cuò)誤后的提示界面，否則建議不要加進(jìn)去流程圖里面，因?yàn)槊恳徊讲僮鞫伎赡苠e(cuò)誤，你的流程圖會(huì)因此變得很龐大。如下圖：

3 形式可以很靈活。

a 如果一個(gè)界面可以通往多個(gè)界面，而你又真要描述出這些跳轉(zhuǎn)，那就一個(gè)矩形長(zhǎng)出多條線路，對(duì)應(yīng)標(biāo)示上對(duì)應(yīng)的動(dòng)作就ok了。如圖：

b 如果幾個(gè)界面屬于同一邏輯，比如實(shí)際是一個(gè)界面的幾個(gè)tab，則可以這樣把幾個(gè)tab包起來(lái)：

c 如果你想把一些警告窗口等臨時(shí)窗口表達(dá)出來(lái)，也可以自定義一些圖形，比如：

d 更詳細(xì)一點(diǎn)，如果你想把一個(gè)界面的主要內(nèi)容表達(dá)出來(lái)，也可以如下圖（還可以細(xì)分里面的內(nèi)容究竟是信息還是下個(gè)界面的入口）：

三、沒(méi)法做到的和延伸的。

　　這種流程圖對(duì)交互流程表達(dá)也不是萬(wàn)能的，它不適用于同界面的局部交互，比如一些工具類產(chǎn)品，由始至終只有一個(gè)界面，像PS。又比如某些表單的各種提示，提示在同一界面的不同位置按某種規(guī)則出現(xiàn)，要表達(dá)這種規(guī)則只好使用算法流程圖，但其實(shí)也片面，因?yàn)槲覀儾恢烙脩舻妮斎腠樞颉?/p>

　　除了導(dǎo)航邏輯，設(shè)計(jì)師還可以在其他時(shí)候使用流程圖，比如做服務(wù)設(shè)計(jì)描述服務(wù)藍(lán)圖的時(shí)候，流程里有相關(guān)的人、場(chǎng)景、接觸點(diǎn)、工具、所需資源、輸出等等。如下圖：