萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 交互設計的方法

交互設計的方法

長期以來我就有對幾年來交互設計的心得進行總結整理的想法。回到中國來親身體會到不少同行,主要是交互設計師和視覺設計師對於交互設計的困惑,以及 其他行業對於交互設計的誤解和濫用。後來我在小范圍內開設了一個關於交互設計的講座;現在把它整理成文,希望與同行切磋,共同進步。

 這篇文章是我幾年來在美國從事交互設計工作的一個經驗總結。當時我們遵循以用戶為中心(User-Centered-Design, 簡稱UCD)的設計原則,每一個項目都是不折不扣的按所有UCD的步驟進行。下面總結的交互設計的方法,是從UCD的過程中提煉出來,也就是說,同樣適用 於任何非UCD的設計過程。

交互設計的流程

如果一提到交互設計,你就想到畫線框圖或原型圖,那你只對了五分之一。交互設計是一個過程,從開始到結束有一套系統的流程。原型圖只是其中的一個環節。

 當接到一個設計項目,怎麼開始?都應該做哪些工作?怎樣盡可能的保證交付物滿足既定的功能以及用戶體驗層面的易用性?

第一步,是任務分析,列出界面所要完成的所有任務。第二步按各任務確定頁面流程,建立信息架構。接下來是創建統一的頁面布局包括分區等。然後在頁面布局的基礎上進行原型設計,可以是低保真和高保真的原型圖。最後編寫設計說明。

下面以設計一款動感相冊界面為例,逐步講解各個環節。 

1. 任務分析

第一步任務分析。這裡要做的是對於將要設計的這個新界面的所有任務的分析,也就是用戶在界面上能進行的所有操作。這個分析在功能需求的基礎上進行,需求方一般提供一個功能點的列表。

任務分析最常見的是任務列表,另外有任務流程和任務場景等。下面以任務列表為例。

列出所有主要任務,以及每個主要任務的子任務。再把子任務細分到各個步驟。形成下面這個列表。

          主要任務1

                             子任務1

                                             步驟1

                                             步驟2

                               子任務2

                                               步驟1

                                                步驟2

           主要任務2

                              …

以動感相冊為例,任務分析列表如下: 

              1.   浏覽相冊

                     1)       浏覽相冊列表

                     2)       選擇相冊

                     3)       浏覽照片

              2.    創建新相冊

                      1)       添加照片

                                  a)       選擇已有相冊

                                  b)       選擇照片

                                  c)       排列順序

                                  d)       添加字幕文字

                                  e)       選擇動畫效果

                      2)       添加模板

                                  a)       浏覽模板

                                  b)       選擇模板

                      3)       添加音樂

                                   a)       浏覽音樂列表

                                                              I.      試聽音樂

                                                              II.      選擇音樂

                                   b)       增加新音樂

  &nbs

copyright © 萬盛學電腦網 all rights reserved