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

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

前言

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

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

然而，上述文章有一個(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)則：

a.基本思路

b.視覺詞匯表

c.范例

d.建議和提示

e.工具和模版

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è)核心的工具。它可以幫你：

2.視覺詞匯

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

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

b.界面

c.對(duì)話框

d.決策點(diǎn)

e.條件分支

f.子流程

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

h.描述

i.系統(tǒng)行為

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

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

標(biāo)簽： 交互設(shè)計(jì) 流程圖 Web流程圖 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。