用CAD繪制交互流程圖的方法步驟(2)
用cad繪制交互流程圖的方法
設(shè)計(jì)流程圖長(zhǎng)得并不特別,跟全世界流程圖都差不多,也同樣是作為一種表達(dá)工具存在。區(qū)別只在于描述的對(duì)象和組成的內(nèi)容不一樣。設(shè)計(jì)流程圖的一大重點(diǎn)是面向表現(xiàn)層,也就是說,描述的是界面(或叫屏幕)的變化,是用戶看到的界面的行為流。什么行為呢,界面之間的跳轉(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á)出來(或者也可以說用流程圖來輔助設(shè)計(jì)吧),這也是個(gè)人覺得設(shè)計(jì)流程圖的最重要運(yùn)用??聪聢D:
從圖中可以看出構(gòu)成:
a 界面。
一個(gè)矩形代表一個(gè)界面,這個(gè)流程中用戶走過兩個(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)示出來,上圖例子就是“單擊提交按鈕”。
c 條件。
一個(gè)動(dòng)作之后可能有多種“是/否”的結(jié)果,則在矩形之間、動(dòng)作之后加上一個(gè)或多個(gè)判斷菱形。如上圖的檢驗(yàn)賬號(hào)密碼是否輸入正確。
繪制流程圖的注意事項(xiàng):
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包起來:
c 如果你想把一些警告窗口等臨時(shí)窗口表達(dá)出來,也可以自定義一些圖形,比如:
d 更詳細(xì)一點(diǎn),如果你想把一個(gè)界面的主要內(nèi)容表達(dá)出來,也可以如下圖(還可以細(xì)分里面的內(nèi)容究竟是信息還是下個(gè)界面的入口):
看了“如何用CAD繪制交互流程圖”的人還看了: