設(shè)計(jì)師初學(xué)必備寶典繪制交互流程圖

作者：曉生 2011-02-18 11:22:01

學(xué)習(xí)產(chǎn)品設(shè)計(jì)初期肯定會(huì)遇到兩個(gè)問(wèn)題：第一，如何考慮更全面；第二，如何繪制交互流程圖。本文將介紹如何繪制交互流程圖。

學(xué)習(xí)產(chǎn)品設(shè)計(jì)初期肯定會(huì)遇到兩個(gè)問(wèn)題：第一，如何考慮更全面；第二，如何繪制交互流程圖。開(kāi)始產(chǎn)品設(shè)計(jì)前先要考慮所有可能性，如何才能以線性流程圖的方法組織所需的設(shè)計(jì)元素。

流程圖是產(chǎn)品經(jīng)理和交互設(shè)計(jì)都必須掌握的技能，一張流程圖可以省去需求文檔和交互設(shè)計(jì)文檔的很多文字描述，讓技術(shù)人員一目了然地明白設(shè)計(jì)意圖，便于組織程序的邏輯順序。

繪制流程圖準(zhǔn)從簡(jiǎn)單的原則，流程圖是設(shè)計(jì)師的產(chǎn)出物，體現(xiàn)設(shè)計(jì)意圖，主要給技術(shù)人員和測(cè)試人員瀏覽，至于自己是如何思考不應(yīng)體現(xiàn)在流程圖中。別人也要早點(diǎn)回家被老婆，沒(méi)有時(shí)間關(guān)心你如何的細(xì)心的考慮，也不關(guān)心用戶(hù)會(huì)如何思考和操作的，請(qǐng)直接給他們展示設(shè)計(jì)的結(jié)果。

復(fù)雜和糾結(jié)留給自己，簡(jiǎn)單留給別人。對(duì)用戶(hù)是這樣，對(duì)工作同伴也是如此。

圖例1：手機(jī)程序開(kāi)機(jī)檢查更新的流程圖

流程圖包括以下圖形：

◆矩形表示交互環(huán)節(jié)

◆菱形表示問(wèn)題判斷

◆箭頭表示工作流方向

也有用圓角矩形表示“開(kāi)始”和“結(jié)束”，個(gè)人一般不要該圖形，因?yàn)閺纳隙碌木€性流程圖。最頂部的圖形或者箭頭開(kāi)始的部分是流程圖的“開(kāi)始”，如圖例中，開(kāi)啟程序觸發(fā)了事件，程序開(kāi)始檢查更新；最底部的圖形或者箭頭終止的部分是流程圖的“結(jié)束”，如重啟程序和不再提示表示本次事件結(jié)束，無(wú)須以圖形區(qū)分表示“開(kāi)始”和“結(jié)束”。

流程圖容易和操作步驟混淆，比如《交互設(shè)計(jì)表格》中的登錄框操作步驟是：

◆點(diǎn)擊登錄，彈出登錄框

◆點(diǎn)擊用戶(hù)名輸入框，輸入用戶(hù)名

◆點(diǎn)擊密碼輸入框，輸入密碼

點(diǎn)擊登錄

操作步驟是用戶(hù)正常情況下完成某項(xiàng)操作所需的操作，而交互流程圖（嚴(yán)格意義上叫程序流程圖）表達(dá)是執(zhí)行邏輯的路徑，通俗地將是當(dāng)用戶(hù)點(diǎn)擊某個(gè)按鈕之后，程序執(zhí)行命令的順序。更復(fù)雜的系統(tǒng)流程圖可用于產(chǎn)品架構(gòu)。

當(dāng)用戶(hù)點(diǎn)擊的登錄框之后，文字描述程序執(zhí)行的順序：

檢查用戶(hù)名是否為空。如為空，提醒用戶(hù)“請(qǐng)您輸入用戶(hù)名”。如果用戶(hù)名設(shè)置要輸入手機(jī)號(hào)碼，還要檢查手機(jī)號(hào)碼是否是否以13/15/18開(kāi)頭的11位數(shù)字。

檢查密碼是否為空。如為空，提醒用戶(hù)“請(qǐng)您輸入密碼”。

檢查用戶(hù)名是否是已用賬戶(hù)。程序提交數(shù)據(jù)與服務(wù)器數(shù)據(jù)進(jìn)行比對(duì)。如果不是，提醒用戶(hù)“用戶(hù)名不正確”。疑問(wèn)：用戶(hù)名有誤和不存在是如何判斷的?

檢查密碼是否與賬戶(hù)匹配。如錯(cuò)誤，提醒用戶(hù)“密碼輸入不正確”。

現(xiàn)多數(shù)登錄框?qū)?和3合并，只提醒“用戶(hù)名或密碼不正確”，可能是告知用戶(hù)過(guò)于準(zhǔn)確的信息之后會(huì)增加盜號(hào)風(fēng)險(xiǎn)。