交互設(shè)計的方法

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

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

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

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

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

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

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

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

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