交互設計的方法「最新」

來源:文萃谷 3.42K

交互設計是一個過程,它不僅僅是畫線框圖。下面是YJBYS小編整理的交互設計的方法,希望對你有幫助!

交互設計的方法「最新」

  交互設計的流程

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

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

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

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

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. 設計説明

最後一步需要做的是對所有頁面進行詳細的描述,包括對頁面上所有元素進行説明,比如默認狀態,跳轉頁面,字號字體,尺寸等。這裏就不解釋了。這是交給開發人員的文檔,以及測試人員進行測試的依據。

熱門標籤