網(wǎng)站設(shè)計(jì)：Web流程圖的繪畫(huà)指南

在作者設(shè)計(jì)生涯開(kāi)始的早期，就開(kāi)始接觸流程圖。一個(gè)好的流程圖，可以用來(lái)理解需求、解析復(fù)雜的業(yè)務(wù)流程、同時(shí)也有助于交互設(shè)計(jì)。

　　為了使流程圖的價(jià)值最大化，文中著重分析了開(kāi)始和結(jié)束標(biāo)記、界面、對(duì)話框、決策點(diǎn)、條件分支、子流程、跳轉(zhuǎn)點(diǎn)、描述、系統(tǒng)行為等視覺(jué)詞匯。

　　前言

　　在我設(shè)計(jì)生涯的早期，我就開(kāi)始繪制流程圖了。剛開(kāi)始的時(shí)候，我所繪制的流程圖大都比較簡(jiǎn)單，圖中的節(jié)點(diǎn)不多，邏輯也是直截了當(dāng)?shù)�。因此，一直到我加入支付�?中國(guó)最大的線上支付平臺(tái)，我才意識(shí)到復(fù)雜的流程圖的用處巨大。在支付寶，業(yè)務(wù)需求和流程之復(fù)雜、變化之迅速，使得理解它們本身已經(jīng)是一件非常有挑戰(zhàn)性的工作。正是此時(shí)，我開(kāi)始依靠流程圖來(lái)理解需求，并使用這一方法來(lái)做交互設(shè)計(jì)。漸漸地，流程圖顯現(xiàn)它的魅力：產(chǎn)品經(jīng)理喜歡它，連工程師也用它來(lái)指導(dǎo)開(kāi)發(fā)。

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

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

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

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

　　內(nèi)容概要

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

　　基本思路

　　視覺(jué)詞匯表

　　范例

　　建議和提示

　　工具和模版

　　1.基本思路

　　什么是流程圖?

　　流程圖，顧名思義，是用來(lái)描述某個(gè)系統(tǒng)在不同的情況下，如何應(yīng)對(duì)用戶的狀態(tài)、決定和行為的圖。

　　流程圖能給你什么樣的幫助?

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

　　對(duì)交互設(shè)計(jì)師和產(chǎn)品經(jīng)理來(lái)說(shuō)，流程圖是一個(gè)核心的工具。它可以幫你：

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

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

　　幫助你整合零散的線框圖

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

　　2.視覺(jué)詞匯

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

　　起點(diǎn)和終點(diǎn)

　　界面

　　對(duì)話框

　　決策點(diǎn)

　　條件分支

　　子流程

　　跳轉(zhuǎn)點(diǎn)

　　描述

　　系統(tǒng)行為

　　起點(diǎn)和終點(diǎn)

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

　　界面

　　界面元素被用來(lái)表現(xiàn)各種用戶界面，比如窗體或網(wǎng)頁(yè)。界面的編號(hào)可以用來(lái)做識(shí)別符，在協(xié)作過(guò)程中會(huì)非常有用。比如在開(kāi)電話會(huì)議時(shí)，你可以用 “節(jié)點(diǎn)N”來(lái)表達(dá)你想指明的某個(gè)界面元素。

　　不僅如此，設(shè)計(jì)師也可以采用此規(guī)則為線框圖命名。比如“23.png” 線框圖與23號(hào)界面對(duì)應(yīng)。這大大節(jié)省了文檔的閱讀者-比如工程師-找尋對(duì)應(yīng)線框圖的時(shí)間。

　　對(duì)話框

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

　　Note1：我的朋友曹曉剛(@caoxg)，一名資深技術(shù)人和企業(yè)家，用UML(Unified Modeling Language,統(tǒng)一建模語(yǔ)言)狀態(tài)機(jī)來(lái)描述Web應(yīng)用中的狀態(tài)，以及這些狀態(tài)之間的轉(zhuǎn)換。我在想辦法將這個(gè)狀態(tài)機(jī)轉(zhuǎn)變成一個(gè)更簡(jiǎn)單、更適合設(shè)計(jì)師的圖示。

　　Note2：如果你設(shè)計(jì)的不是Web應(yīng)用(具體地說(shuō)，不是那種看起來(lái)像桌面應(yīng)用卻運(yùn)行在瀏覽器上的)，我建議你不要依賴Javascript，甚至不要用它。具體的原因當(dāng)然是題外話，我也就不在此詳細(xì)描述。如果你想要答案并了解我的“JapMag”設(shè)計(jì)語(yǔ)言，請(qǐng)?jiān)L問(wèn)：http://dingyu.me/portfolios/dingyu-me。

　　決策點(diǎn)

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

　　如圖所示，通常我會(huì)讓正面的選擇(“Yes”)向下流動(dòng)，而負(fù)面的選擇(“No”)指向右側(cè)。

　　這條規(guī)則能提供更佳的閱讀體驗(yàn)，因?yàn)橐?guī)則本身是很清楚且自然的(英文的寫(xiě)法也是如此)。

　　這條規(guī)則還可以幫助設(shè)計(jì)師策劃流程圖：流程圖的主線居左，至上而下流動(dòng)，而分支在右側(cè)，這樣整個(gè)流程圖結(jié)構(gòu)就自然而然地從左到右、由上至下了。

　　注：實(shí)際上，我曾讀過(guò)美國(guó)前總統(tǒng)Geoge W.Bush的自傳“Decision Points”(中譯本為《抉擇時(shí)刻》)。因此，撰寫(xiě)本頁(yè)總讓我想起這本書(shū)。

　　條件分支

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

　　子流程

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

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

　　跳轉(zhuǎn)點(diǎn)

　　在有些高度復(fù)雜的情況中，我們需要用戶直接跳轉(zhuǎn)到另一條路徑，這時(shí)就需要跳轉(zhuǎn)點(diǎn)。

　　和之前所說(shuō)的一樣，圓圈里的數(shù)字指向某個(gè)節(jié)點(diǎn)，這個(gè)節(jié)點(diǎn)便是該跳轉(zhuǎn)點(diǎn)將引向的節(jié)點(diǎn)。

　　顯然，跳轉(zhuǎn)點(diǎn)是某條路徑的終點(diǎn)。

　　描述

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

　　系統(tǒng)行為

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

　　作為設(shè)計(jì)師或產(chǎn)品經(jīng)理，我們雖然不需要將每種后臺(tái)操作都付之于圖，但我們還是有必要把那些和用戶體驗(yàn)相關(guān)，或那些對(duì)我們重要的操作放進(jìn)流程圖，此外還要寫(xiě)入規(guī)范或文檔里，再次清晰地聲明，確保每個(gè)人都能領(lǐng)略其義。

　　元素總結(jié)

　　3.范例

　　登錄

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

　　安全檢查

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

　　其它真實(shí)范例

　　如你所見(jiàn)，不管業(yè)務(wù)邏輯多么復(fù)雜，流程圖都能用來(lái)描述系統(tǒng)是如何工作的。

　　4.建議和提示

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

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

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

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

　　使你的流程圖完整

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

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

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

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

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

　　5.工具和模版

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

　　OmniGaffle

　　對(duì)Mac用戶們來(lái)說(shuō)，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 下載到我制作的模版。

　　收尾

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

服務(wù)器租用/服務(wù)器托管中國(guó)五強(qiáng)！虛擬主機(jī)域名注冊(cè)頂級(jí)提供商！15年品質(zhì)保障！--億恩科技[ENKJ.COM]