交互設計方法

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

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

3、的所有操作。這個分析在功能需求的基礎上進行，需求方一般提供一個功能點的列表。任務分析最常見的是任務列表，另外有任務流程和任務場景等。下面以任務列表為例。列出所有主要任務，以及每個主要任務的子任務。再把子任務細分到各個步驟。形成下面這個列表。主要任務1子任務1步驟1步驟2子任務2步驟1步驟2主要任務2以動感相冊為例，任務分析列表如下：瀏覽相冊瀏覽相冊列表選擇相冊瀏覽照片創(chuàng)建新相冊1)添加照片選擇己有相冊b)選擇照片c)排列順序d)添加字幕文字選擇動畫效果e)2)添加模板瀏覽模板a)選擇模板b)3)添加咅樂a)瀏覽音樂列表試聽音樂I.選擇音樂II.b)增加新咅樂打開本地文件I.選擇音樂II.4)預

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

5、不僅確定頁面內容，頁面數(shù)量，還確定各頁面之間的關系。如果在后來設計具體頁面原型時，發(fā)現(xiàn)這個流程圖多了或少了頁面，或者頁面關系發(fā)生了變化，說明你的功夫不到家（這個比較難，我一般不苛求我們的設計師）。根據(jù)原型圖來創(chuàng)建或者修改頁面流程圖，不是在做設計，而是在寫設計說明。頁面布局第三步頁面布局是具體頁面設計的開始，在上一步知道有哪些頁面需要進行設計后，這里對頁面進行劃分，對內容進行組織。最重要的一點是確定頁面分區(qū)。以動感相冊為例，頁面布局如下：總布局，即通用布局，適合所有頁面。L00全局導航內容展示9操作具體頁面布局，在不與總布局沖突的情況下，有更細節(jié)的布局。Logo登錄全局導航預覽選擇編輯操作頁面布

6、局賦予零碎的內容以邏輯性，以分區(qū)的形式把頁面各區(qū)域所對應的功能區(qū)確定下來，減少具體設計時的隨意性。這是設計嚴謹與否的表現(xiàn)所在。把類似的操作放在一起，對于用戶來說是可以預見的，用戶能夠判斷哪個操作在哪個區(qū)域,減少盲目尋找?guī)淼睦щy和疑惑。原型設計這一步是大家熟知的，即具體頁面的設計。這一步設計把所有的界面元素表現(xiàn)出來?？梢杂械捅Ｕ婧透弑Ｕ嬖蛨D。低保真即是線框圖，高保真多是接近最終效果圖。下面是動感相冊的低保真原型圖。動感相冊logo我的h首頁動甬損冊創(chuàng)建新相柵歡迎你，霧中花！蟄出設計說明最后一步需要做的是對所有頁面進行詳細的描述，包括對頁面上所有元素進行說明，比如默認狀態(tài)，跳轉頁面，字號字體，尺寸等。這里就不解釋了。這是交給開發(fā)人員的文檔，以及測試人員進行測試的依據(jù)。小結交互設計是一個過程，它不僅僅是畫線框圖。交互設計最關鍵的兩個環(huán)節(jié)是頁