長期以來我就有對幾年來交互設計的心得進行總結整理的想法。回到中國來親身體會到不少同行,主要是交互設計師和視覺設計師對於交互設計的困惑,以及其他行業對於交互設計的誤解和濫用。後來我在小範圍內開設了一個關於交互設計的講座;現在把它整理成文,希望與同行切磋,共同進步。
這篇文章是我幾年來在美國從事交互設計工作的一個經驗總結。當時我們遵循以用戶為中心(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) 增加新音樂
I. 打開本地文件
II. 選擇音樂
4) 預覽(略)…
5) 命名(略)…
6) 保存(略)…
3. 修改相冊(略)…
任務列表包括所有功能點,並對每一個功能點的邏輯關係進行整合。必要時會對各任務的使用頻率和其它影響設計的重要因素進行分析,這裡不做解釋了。
2. 頁面流程
任務分析完成後,進入設計的第一步,即設計頁面流程。頁面流程是設計的開始,也是重要的一環。它決定整個界面的信息架構和操作邏輯。
頁面流程是上一步任務分析的自然轉化。一般來說,一個主要任務就是一個頁面,其它子任務也可以轉化為頁面。
以動感相冊為例,頁面流程如下:
頁面幾乎是把任務分析照搬過來了。所以上一步做好了,這一步很輕鬆,而且越往後越輕鬆。
注意這個流程圖應該包括所有將要設計的新頁面,一個不少,一個不多。它不僅確定頁面內容,頁面數量,還確定各頁面之間的關係。如果在後來設計具體頁面原型時,發現這個流程圖多了或少了頁面,或者頁面關係發生了變化,說明你的功夫不到家(這個比較難,我一般不苛求我們的設計師)。根據原型圖來創建或者修改頁面流程圖,不是在做設計,而是在寫設計說明。
3. 頁面佈局
第三步頁面佈局是具體頁面設計的開始,在上一步知道有哪些頁面需要進行設計後,這裡對頁面進行劃分,對內容進行組織。最重要的一點是確定頁面分區。
以動感相冊為例,頁面佈局如下:
總佈局,即通用佈局,適合所有頁面。
具體頁面佈局,在不與總佈局衝突的情況下,有更細節的佈局。
頁面佈局賦予零碎的內容以邏輯性,以分區的形式把頁面各區域所對應的功能區確定下來,減少具體設計時的隨意性。這是設計嚴謹與否的表現所在。把類似的操作放在一起,對於用戶來說是可以預見的,用戶能夠判斷哪個操作在哪個區域,減少盲目尋找帶來的困難和疑惑。
4. 原型設計
這一步是大家熟知的,即具體頁面的設計。這一步設計把所有的界面元素表現出來。可以有低保真和高保真原型圖。低保真即是線框圖,高保真多是接近最終效果圖。
下面是動感相冊的低保真原型圖。
5. 設計說明
最後一步需要做的是對所有頁面進行詳細的描述,包括對頁面上所有元素進行說明,比如默認狀態,跳轉頁面,字號字體,尺寸等。這裡就不解釋了。這是交給開發人員的文檔,以及測試人員進行測試的依據。
小結
交互設計是一個過程,它不僅僅是畫線框圖。交互設計最關鍵的兩個環節是頁面流程和頁面佈局,前者建立清晰的架構和嚴密的邏輯,後者整合零散的信息並確定分明的主次關係。這一切都是為了我們的終極目標——讓我們的界面符合用戶的預期,不帶給他們任何的意外。一切都在用戶的意料之中。
來源:http://www.baiduux.com/blog/2010/08/03/ interaction_design/
特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy