交互設(shè)計(jì)的方法

1、交互設(shè)計(jì)的方法長(zhǎng)期以來(lái)我就有對(duì)幾年來(lái)交互設(shè)計(jì)的心得進(jìn)行總結(jié)整理的想法?；氐街袊?guó)來(lái)親身體會(huì)到不少同行，主要是交互設(shè)計(jì)師和視覺(jué)設(shè)計(jì)師對(duì)于交互設(shè)計(jì)的困惑，以及其他行業(yè)對(duì)于交互設(shè)計(jì)的誤解和濫用。后來(lái)我在小范圍內(nèi)開(kāi)設(shè)了一個(gè)關(guān)于交互設(shè)計(jì)的講座；現(xiàn)在把它整理成文，希望與同行切磋，共同進(jìn)步。這篇文章是我?guī)啄陙?lái)在美國(guó)從事交互設(shè)計(jì)工作的一個(gè)經(jīng)驗(yàn)總結(jié)。當(dāng)時(shí)我們遵循以用戶(hù)為中心（User-Centered-Design, 簡(jiǎn)稱(chēng)UCD）的設(shè)計(jì)原則，每一個(gè)項(xiàng)目都是不折不扣的按所有UCD的步驟進(jìn)行。下面總結(jié)的交互設(shè)計(jì)的方法，是從UCD的過(guò)程中提煉出來(lái)，也就是說(shuō)，同樣適用于任何非UCD的設(shè)計(jì)過(guò)程。交互設(shè)計(jì)的流程如果一提到交互

2、設(shè)計(jì)，你就想到畫(huà)線(xiàn)框圖或原型圖，那你只對(duì)了五分之一。交互設(shè)計(jì)是一個(gè)過(guò)程，從開(kāi)始到結(jié)束有一套系統(tǒng)的流程。原型圖只是其中的一個(gè)環(huán)節(jié)。當(dāng)接到一個(gè)設(shè)計(jì)項(xiàng)目，怎么開(kāi)始？都應(yīng)該做哪些工作？怎樣盡可能的保證交付物滿(mǎn)足既定的功能以及用戶(hù)體驗(yàn)層面的易用性？第一步，是任務(wù)分析，列出界面所要完成的所有任務(wù)。第二步按各任務(wù)確定頁(yè)面流程，建立信息架構(gòu)。接下來(lái)是創(chuàng)建統(tǒng)一的頁(yè)面布局包括分區(qū)等。然后在頁(yè)面布局的基礎(chǔ)上進(jìn)行原型設(shè)計(jì)，可以是低保真和高保真的原型圖。最后編寫(xiě)設(shè)計(jì)說(shuō)明。下面以設(shè)計(jì)一款動(dòng)感相冊(cè)界面為例，逐步講解各個(gè)環(huán)節(jié)。1. 任務(wù)分析第一步任務(wù)分析。這里要做的是對(duì)于將要設(shè)計(jì)的這個(gè)新界面的所有任務(wù)的分析，也就是用戶(hù)在界面

3、上能進(jìn)行的所有操作。這個(gè)分析在功能需求的基礎(chǔ)上進(jìn)行，需求方一般提供一個(gè)功能點(diǎn)的列表。任務(wù)分析最常見(jiàn)的是任務(wù)列表，另外有任務(wù)流程和任務(wù)場(chǎng)景等。下面以任務(wù)列表為例。列出所有主要任務(wù)，以及每個(gè)主要任務(wù)的子任務(wù)。再把子任務(wù)細(xì)分到各個(gè)步驟。形成下面這個(gè)列表。主要任務(wù)1             子任務(wù)1               

4、0;            步驟1                            步驟2          &#

5、160;  子任務(wù)2                           步驟1                     

6、;      步驟2      主要任務(wù)2                           以動(dòng)感相冊(cè)為例，任務(wù)分析列表如下： 1.瀏覽相冊(cè)1) 瀏覽相冊(cè)列表2) 選擇相冊(cè)3) 瀏覽照片2.

7、60;創(chuàng)建新相冊(cè)1)  添加照片a) 選擇已有相冊(cè)b) 選擇照片c) 排列順序d) 添加字幕文字e) 選擇動(dòng)畫(huà)效果2) 添加模板a) 瀏覽模板b) 選擇模板3) 添加音樂(lè)a) 瀏覽音樂(lè)列表I. 試聽(tīng)音樂(lè)II. 選擇音樂(lè)b)  增加新音樂(lè)I.  打開(kāi)本地文件II.  選擇音樂(lè)4)   預(yù)覽（略）5)   命名（略）6)  

8、; 保存（略）3.修改相冊(cè)（略）任務(wù)列表包括所有功能點(diǎn)，并對(duì)每一個(gè)功能點(diǎn)的邏輯關(guān)系進(jìn)行整合。必要時(shí)會(huì)對(duì)各任務(wù)的使用頻率和其它影響設(shè)計(jì)的重要因素進(jìn)行分析，這里不做解釋了。2. 頁(yè)面流程任務(wù)分析完成后，進(jìn)入設(shè)計(jì)的第一步，即設(shè)計(jì)頁(yè)面流程。頁(yè)面流程是設(shè)計(jì)的開(kāi)始，也是重要的一環(huán)。它決定整個(gè)界面的信息架構(gòu)和操作邏輯。頁(yè)面流程是上一步任務(wù)分析的自然轉(zhuǎn)化。一般來(lái)說(shuō)，一個(gè)主要任務(wù)就是一個(gè)頁(yè)面，其它子任務(wù)也可以轉(zhuǎn)化為頁(yè)面。以動(dòng)感相冊(cè)為例，頁(yè)面流程如下：頁(yè)面幾乎是把任務(wù)分析照搬過(guò)來(lái)了。所以上一步做好了，這一步很輕松，而且越往后越輕松。注意這個(gè)流程圖應(yīng)該包括所有將要設(shè)計(jì)的新頁(yè)面，一個(gè)不少，一個(gè)不多。它不僅確

9、定頁(yè)面內(nèi)容，頁(yè)面數(shù)量，還確定各頁(yè)面之間的關(guān)系。如果在后來(lái)設(shè)計(jì)具體頁(yè)面原型時(shí)，發(fā)現(xiàn)這個(gè)流程圖多了或少了頁(yè)面，或者頁(yè)面關(guān)系發(fā)生了變化，說(shuō)明你的功夫不到家（這個(gè)比較難，我一般不苛求我們的設(shè)計(jì)師）。根據(jù)原型圖來(lái)創(chuàng)建或者修改頁(yè)面流程圖，不是在做設(shè)計(jì)，而是在寫(xiě)設(shè)計(jì)說(shuō)明。3. 頁(yè)面布局第三步頁(yè)面布局是具體頁(yè)面設(shè)計(jì)的開(kāi)始，在上一步知道有哪些頁(yè)面需要進(jìn)行設(shè)計(jì)后，這里對(duì)頁(yè)面進(jìn)行劃分，對(duì)內(nèi)容進(jìn)行組織。最重要的一點(diǎn)是確定頁(yè)面分區(qū)。以動(dòng)感相冊(cè)為例，頁(yè)面布局如下：總布局，即通用布局，適合所有頁(yè)面。具體頁(yè)面布局，在不與總布局沖突的情況下，有更細(xì)節(jié)的布局。頁(yè)面布局賦予零碎的內(nèi)容以邏輯性，以分區(qū)的形式把頁(yè)面各區(qū)域所對(duì)應(yīng)的功能區(qū)確定下來(lái)，減少具體設(shè)計(jì)時(shí)的隨意性。這是設(shè)計(jì)嚴(yán)謹(jǐn)與否的表現(xiàn)所在。把類(lèi)似的操作放在一起，對(duì)于用戶(hù)來(lái)說(shuō)是可以預(yù)見(jiàn)的，用戶(hù)能夠判斷哪個(gè)操作在哪個(gè)區(qū)域，減少盲目尋找?guī)?lái)的困難和疑惑。4. 原型設(shè)計(jì)這一步是大家熟知的，即具體頁(yè)面的設(shè)計(jì)。這一步設(shè)計(jì)把所有的界面元素表現(xiàn)出來(lái)。可以有低保真和高保真原型圖。低保真即是線(xiàn)框圖，高保真多是接近最終效果圖。下面是動(dòng)感相冊(cè)的低保真原型圖。5. 設(shè)計(jì)說(shuō)明最后一步需要做的是對(duì)所有頁(yè)面進(jìn)行詳細(xì)的描述，包括對(duì)頁(yè)面上所有元素進(jìn)行說(shuō)明，比如默認(rèn)狀態(tài)，跳轉(zhuǎn)頁(yè)面，字號(hào)字體，尺寸等。這里就不解釋了。這是交