Web流程图的绘画指南
轉(zhuǎn)載自雷鋒網(wǎng) ?http://www.leiphone.com/flowcharts-web-design.html
Web流程圖的繪畫指南
小盒???2012-08-30 16:00???1條評論???編者按:本文作者為設(shè)計(jì)師Felix Ding,丁宇。在作者設(shè)計(jì)生涯開始的早期,就開始接觸流程圖。一個好的流程圖,可以用來理解需求、解析復(fù)雜的業(yè)務(wù)流程、同時也有助于交互設(shè)計(jì)。
為了使流程圖的價值最大化,文中著重分析了開始和結(jié)束標(biāo)記、界面、對話框、決策點(diǎn)、條件分支、子流程、跳轉(zhuǎn)點(diǎn)、描述、系統(tǒng)行為等視覺詞匯。
前言
在我設(shè)計(jì)生涯的早期,我就開始繪制流程圖了。剛開始的時候,我所繪制的流程圖大都比較簡單,圖中的節(jié)點(diǎn)不多,邏輯也是直截了當(dāng)?shù)?。因?#xff0c;一直到我加入支付寶-中國最大的線上支付平臺,我才意識到復(fù)雜的流程圖的用處巨大。在支付寶,業(yè)務(wù)需求和流程之復(fù)雜、變化之迅速,使得理解它們本身已經(jīng)是一件非常有挑戰(zhàn)性的工作。正是此時,我開始依靠流程圖來理解需求,并使用這一方法來做交互設(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),甚至有人按照我在文章中提到的方法制作了一套流程圖模板。時至今日,這篇發(fā)表于四年前的文章仍然給我的個人主頁帶來不少流量。
然而,上述文章有一個比較嚴(yán)重的問題,使得其內(nèi)容帶有誤導(dǎo)性:它并沒有使用用于“描述信息架構(gòu)和交互設(shè)計(jì)”的《視覺詞匯表》。坦白講,寫作的時候我并沒有注意到有這樣一份廣為人知的詞匯表存在,而是創(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.基本思路
什么是流程圖?
流程圖,顧名思義,是用來描述某個系統(tǒng)在不同的情況下,如何應(yīng)對用戶的狀態(tài)、決定和行為的圖。
流程圖能給你什么樣的幫助?
通常,對于任何希望創(chuàng)建流程的人來說,無論創(chuàng)建的是什么用的流程,流程圖都是很有用的。比如工廠可以用流程圖來告知其員工,當(dāng)有人受傷后正確的急救流程是什么。當(dāng)然除此以外,在本文中,我只會舉關(guān)于Web設(shè)計(jì)流程圖的例子。
對交互設(shè)計(jì)師和產(chǎn)品經(jīng)理來說,流程圖是一個核心的工具。它可以幫你:
設(shè)計(jì)你產(chǎn)品的交互流程
確保的你的產(chǎn)品在任何時候都是友好的(甚至包括你原來根本未曾考慮過的故障發(fā)生時)
幫助你整合零散的線框圖
幫助你與不同背景的同事進(jìn)行溝通:比如引導(dǎo)工程師開發(fā)
2.視覺詞匯
接下來的幾頁中,我將介紹視覺詞匯和它們的使用方式:
- 起點(diǎn)和終點(diǎn)
- 界面
- 對話框
- 決策點(diǎn)
- 條件分支
- 子流程
- 跳轉(zhuǎn)點(diǎn)
- 描述
- 系統(tǒng)行為
起點(diǎn)和終點(diǎn)
起點(diǎn)和終點(diǎn)是用來標(biāo)識交互的開端和結(jié)束的地方,任何流程圖都必須有且只有一個起點(diǎn)和至少一個終點(diǎn)。
界面
界面元素被用來表現(xiàn)各種用戶界面,比如窗體或網(wǎng)頁。界面的編號可以用來做識別符,在協(xié)作過程中會非常有用。比如在開電話會議時,你可以用 “節(jié)點(diǎn)N”來表達(dá)你想指明的某個界面元素。
不僅如此,設(shè)計(jì)師也可以采用此規(guī)則為線框圖命名。比如“23.png” 線框圖與23號界面對應(yīng)。這大大節(jié)省了文檔的閱讀者-比如工程師-找尋對應(yīng)線框圖的時間。
對話框
隨著Web應(yīng)用的問世,Web交互也從線性模式向基于狀態(tài)的模式轉(zhuǎn)換。局部頁面更新和單頁面內(nèi)交互也越來越普遍,最常見的形式之一就是浮動消息,例如表單驗(yàn)證錯誤后出現(xiàn)的錯誤提示。然而,做兩個幾乎相同的線框圖不僅沒必要,甚至很別扭。所以,對于這種由Javascript渲染出來的模態(tài)或非模態(tài)對話框,我特別創(chuàng)造了一種叫做“對話框”的新元素。
Note1:我的朋友曹曉剛(@caoxg),一名資深技術(shù)人和企業(yè)家,用UML(Unified Modeling Language,統(tǒng)一建模語言)狀態(tài)機(jī)來描述Web應(yīng)用中的狀態(tài),以及這些狀態(tài)之間的轉(zhuǎn)換。我在想辦法將這個狀態(tài)機(jī)轉(zhuǎn)變成一個更簡單、更適合設(shè)計(jì)師的圖示。
Note2:如果你設(shè)計(jì)的不是Web應(yīng)用(具體地說,不是那種看起來像桌面應(yīng)用卻運(yùn)行在瀏覽器上的),我建議你不要依賴Javascript,甚至不要用它。具體的原因當(dāng)然是題外話,我也就不在此詳細(xì)描述。如果你想要答案并了解我的“JapMag”設(shè)計(jì)語言,請?jiān)L問:http://dingyu.me/portfolios/dingyu-me。
決策點(diǎn)
決策點(diǎn)指用戶需要做出決策的地方,通常流程走到這,界面都在等待用戶做出下一步去哪的選擇。
如圖所示,通常我會讓正面的選擇(“Yes”)向下流動,而負(fù)面的選擇(“No”)指向右側(cè)。
這條規(guī)則能提供更佳的閱讀體驗(yàn),因?yàn)橐?guī)則本身是很清楚且自然的(英文的寫法也是如此)。
這條規(guī)則還可以幫助設(shè)計(jì)師策劃流程圖:流程圖的主線居左,至上而下流動,而分支在右側(cè),這樣整個流程圖結(jié)構(gòu)就自然而然地從左到右、由上至下了。
注:實(shí)際上,我曾讀過美國前總統(tǒng)Geoge W.Bush的自傳“Decision Points”(中譯本為《抉擇時刻》)。因此,撰寫本頁總讓我想起這本書。
條件分支
條件分支看上去和決策點(diǎn)比較類似,但它們完成的是截然不同的功能:在決策點(diǎn)中,決策是由用戶明確做出的;而對于條件分支,則是由系統(tǒng)于后臺自動選擇合適的路徑。
子流程
子流程是相對獨(dú)立、在整個系統(tǒng)內(nèi)都能夠被重用的流程。例如,你可以將一些相同的(會被頻繁使用的)任務(wù)-比如用戶驗(yàn)證和接入網(wǎng)絡(luò)等-打包成子流程,然后將它們集成到更大或特定的流程圖中。
如果你的流程圖包含子流程,那么在別人問你要之前,你最好將相關(guān)的所有子流程圖也一并提交。
跳轉(zhuǎn)點(diǎn)
在有些高度復(fù)雜的情況中,我們需要用戶直接跳轉(zhuǎn)到另一條路徑,這時就需要跳轉(zhuǎn)點(diǎn)。
和之前所說的一樣,圓圈里的數(shù)字指向某個節(jié)點(diǎn),這個節(jié)點(diǎn)便是該跳轉(zhuǎn)點(diǎn)將引向的節(jié)點(diǎn)。
顯然,跳轉(zhuǎn)點(diǎn)是某條路徑的終點(diǎn)。
描述
描述是節(jié)約溝通時間的一種便捷的方法。不過別理解錯誤,你仍需要以各種形式和你流程圖的讀者交流,只是描述因?yàn)槟芷鸬絺渫吞崾镜淖饔?#xff0c;依照我的經(jīng)驗(yàn),這的確會節(jié)省很多時間。
系統(tǒng)行為
系統(tǒng)行為是指系統(tǒng)完成的一系列后臺行為操作。例如,我們想要記錄用戶登錄失敗時的數(shù)據(jù),就可以在流程圖中以 “收集錯誤日志”的系統(tǒng)行為來表示。
作為設(shè)計(jì)師或產(chǎn)品經(jīng)理,我們雖然不需要將每種后臺操作都付之于圖,但我們還是有必要把那些和用戶體驗(yàn)相關(guān),或那些對我們重要的操作放進(jìn)流程圖,此外還要寫入規(guī)范或文檔里,再次清晰地聲明,確保每個人都能領(lǐng)略其義。
元素總結(jié)
3.范例
登錄
下圖為一個簡易登錄流程圖,用來描述用戶登錄時系統(tǒng)如何反應(yīng):
安全檢查
以下流程圖展示如何使用系統(tǒng)行為和子流程這樣的元素。它來自于真實(shí)的項(xiàng)目,只是由于版權(quán)問題已被我稍稍修改。
其它真實(shí)范例
如你所見,不管業(yè)務(wù)邏輯多么復(fù)雜,流程圖都能用來描述系統(tǒng)是如何工作的。
4.建議和提示
基于調(diào)查結(jié)果,指引線框圖
用戶和他們的特點(diǎn)是指導(dǎo)繪制流程圖的首要因素。用戶調(diào)查能夠發(fā)現(xiàn):用戶過去的體驗(yàn)是什么?用戶的期望是什么?使用場景和環(huán)境是什么?這些問題在流程圖的設(shè)計(jì)中起關(guān)鍵作用。
同樣,流程圖對線框圖的制作也有指導(dǎo)作用。多數(shù)時候,一旦流程圖完工,線框圖的內(nèi)容甚至布局已經(jīng)基本確定了。當(dāng)然了,這也正是流程圖的目的所在:連接線框圖。
Note:在流程圖之前我們會有如用例這樣的其它交付物。上圖并沒有涉及到這些內(nèi)容,因?yàn)檫@并非本頁的重點(diǎn)。
使你的流程圖完整
制作流程圖最難的是,它必須囊括所有可能的情況,在我看來,這一點(diǎn)在應(yīng)對復(fù)雜邏輯的商業(yè)需求時是很有挑戰(zhàn)性的。你將會遇到很多類似 “要是如何便會怎樣”的問題,并且有時候直到工程師告訴你,你才意識到自己之前欠缺考慮!所以,制作完整的流程圖不僅需要你了解用戶,還需要你懂業(yè)務(wù)邏輯,甚至要熟悉幕后的系統(tǒng)運(yùn)作機(jī)制!
最好的辦法是和產(chǎn)品經(jīng)理、工程師還有其他和商業(yè)需求有關(guān)的同事在工作中緊密協(xié)作。我見過不少交互設(shè)計(jì)師悶頭一人工作,然后在產(chǎn)品會議中遇到猛烈的挑戰(zhàn)。別再那樣了!相反,和項(xiàng)目相關(guān)的人合作,一起制作流程圖(以及其它交付物),從不同角度排除不確定性,使它更完整全面(這樣也沒人會再挑戰(zhàn)你了,因?yàn)樗麄兠總€人也是參與制作的一份子)。
別忘記元數(shù)據(jù)
從協(xié)作和文檔管理的角度來說,你至少得給流程圖起個名字,寫下作者、版本和時間。
除此之外,即便你的流程圖使用了《視覺詞匯表》,你的同事或客戶仍有可能不明白這些花俏的元素,所以,請記得加上圖例。
5.工具和模版
眾多工具中,我推薦OmniGaffle和Microsoft Visio。
OmniGaffle
對Mac用戶們來說,OmniGraffle以前是,現(xiàn)在仍是首選工具。它不僅有豐富的功能,最重要的是,它的用戶體驗(yàn)是首屈一指的。我認(rèn)識的設(shè)計(jì)師很多已經(jīng)換了Mac,并隨之使用OmniGraffle。
Microsoft Visio
Windows用戶可以考慮用Visio,它有一些內(nèi)建的模版,也許能大大減輕你的工作。
模版
Allen Le基于我前一篇文章發(fā)布了一系列Visio的模版,很漂亮,對此我不勝感激。你可以在這里找到:http://www.allenle.com/archives/1530.html。
OmniGraffle的粉絲可以在http://graffl etopia.com/stencils/905 下載到我制作的模版。
收尾
編寫此文章花了我大概兩周時間,并且用英文寫更是增加了難度,因?yàn)橛⒄Z并非我的母語。這是我第一次用非母語撰寫教程,但我十分樂在其中。對我來說,寫作是總結(jié)過去、保持創(chuàng)造的一種很好的方式,如果有人可以從中受益,我會十分開心。任何問題或建議,請?jiān)谶@里給我留言:
http://dingyu.me/blog/the-definitive-guideto-web-flowcharts
Via:The definitive guide to Web flowcharts
PPT在莫名其妙被墻的?slideshare?上
(小盒?供雷鋒網(wǎng)專稿,轉(zhuǎn)載請總結(jié)
以上是生活随笔為你收集整理的Web流程图的绘画指南的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: IDEA开发中包(package)的作用
- 下一篇: Office2019 卸载重新安装-20