交互設(shè)計(jì)心得整理

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

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

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

4、160;              步驟1                            步驟2        

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

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

7、#160; 添加照片a) 選擇已有相冊b) 選擇照片c) 排列順序d) 添加字幕文字e) 選擇動畫效果2) 添加模板a) 瀏覽模板b) 選擇模板3) 添加音樂a) 瀏覽音樂列表I. 試聽音樂II. 選擇音樂b)  增加新音樂I.  打開本地文件II.  選擇音樂4)   預(yù)覽（略）5)   命名（略）6)   保存（略）3.修改相冊（略）任務(wù)列表包括所有功能點(diǎn)，并對每一個(gè)功能點(diǎn)的邏輯關(guān)系進(jìn)行整合。必要時(shí)會對各任務(wù)的使用頻率和其它影響設(shè)計(jì)的重要因素進(jìn)行分析，這里不做解釋了。2. 頁面流程任務(wù)分析完成后，進(jìn)入

8、設(shè)計(jì)的第一步，即設(shè)計(jì)頁面流程。頁面流程是設(shè)計(jì)的開始，也是重要的一環(huán)。它決定整個(gè)界面的信息架構(gòu)和操作邏輯。頁面流程是上一步任務(wù)分析的自然轉(zhuǎn)化。一般來說，一個(gè)主要任務(wù)就是一個(gè)頁面，其它子任務(wù)也可以轉(zhuǎn)化為頁面。以動感相冊為例，頁面流程如下：頁面幾乎是把任務(wù)分析照搬過來了。所以上一步做好了，這一步很輕松，而且越往后越輕松。注意這個(gè)流程圖應(yīng)該包括所有將要設(shè)計(jì)的新頁面，一個(gè)不少，一個(gè)不多。它不僅確定頁面內(nèi)容，頁面數(shù)量，還確定各頁面之間的關(guān)系。如果在后來設(shè)計(jì)具體頁面原型時(shí)，發(fā)現(xiàn)這個(gè)流程圖多了或少了頁面，或者頁面關(guān)系發(fā)生了變化，說明你的功夫不到家（這個(gè)比較難，我一般不苛求我們的設(shè)計(jì)師）。根據(jù)原型圖來創(chuàng)建或者修

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