網(wǎng)站設(shè)計web流程圖的繪畫指南

1、網(wǎng)站設(shè)計：Web流程圖的繪畫指南編者按：本文作者為設(shè)計師FelixDing，丁宇。在作者設(shè)計生涯開始的早期，就開始接觸流程圖。一個好的流程圖，可以用來理解需求、解析復(fù)雜的業(yè)務(wù)流程、同時也有助于交互設(shè)計。為了使流程圖的價值最大化，文中著重分析了開始和結(jié)束標記、界面、對話框、決策點、條件分支、子流程、跳轉(zhuǎn)點、描述、系統(tǒng)行為等視覺詞匯。前言在我設(shè)計生涯的早期，我就開始繪制流程圖了。剛開始的時候，我所繪制的流程圖大都比較簡單，圖中的節(jié)點不多，邏

2、輯也是直截了當?shù)?。因此，一直到我加入支付寶中國最大的線上支付平臺，我才意識到復(fù)雜的流程圖的用處巨大。在支付寶，業(yè)務(wù)需求和流程之復(fù)雜、變化之迅速，使得理解它們本身已經(jīng)是一件非常有挑戰(zhàn)性的工作。正是此時，我開始依靠流程圖來理解需求，并使用這一方法來做交互設(shè)計。漸漸地，流程圖顯現(xiàn)它的魅力：產(chǎn)品經(jīng)理喜歡它，連工程師也用它來指導(dǎo)開發(fā)。2008年秋天，我將自己的經(jīng)驗總結(jié)為一篇題為《畫Web流程圖的一點心得》的文章，發(fā)表在自己的blog上。該文立即引

3、起了廣泛的注意。各種推薦、轉(zhuǎn)載、討論和跟進的文章在線上線下都頻頻出現(xiàn)，甚至有人按照我在文章中提到的方法制作了一套流程圖模板。時至今日，這篇發(fā)表于四年前的文章仍然給我的個人主頁帶來不少流量。然而，上述文章有一個比較嚴重的問題，使得其內(nèi)容帶有誤導(dǎo)性：它并沒有使用用于“描述信息架構(gòu)和交互設(shè)計”的《視覺詞匯表》。坦白講，寫作的時候我并沒有注意到有這樣一份廣為人知的詞匯表存在，而是創(chuàng)建了我自己的詞匯，并將其介紹給大眾。因此，文章的部分內(nèi)容沒有遵循

4、慣例，從DRY(Don’tRepeatYourself，不要重復(fù)自己)的角度講這并不是很合適。該文發(fā)表一年后，我的確在另一篇文章中指出了這一問題，但遺憾地是這次沒能像上次一樣引起廣泛的注意。此外，距離該文章發(fā)表已經(jīng)有幾年過去了，我又積累了不少新的經(jīng)驗和想法，希望分享給大家，特別是英文讀者們。因此現(xiàn)在如你所見，我完成了英文版、帶有最新內(nèi)容的《畫Web流程圖的一點心得》，并且提供了自制的配套模版下載。條件分支子流程跳轉(zhuǎn)點描述系統(tǒng)行為起點和終