互動設計的方法

2021-08-31 23:08:44 字數 2844 閱讀 4831

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

這篇文章是我幾年來在美國從事互動設計工作的乙個經驗總結。當時我們遵循以使用者為中心(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.設計說明

最後一步需要做的是對所有頁面進行詳細的描述,包括對頁面上所有元素進行說明,比如預設狀態,跳轉頁面,字型大小字型,尺寸等。這裡就不解釋了。這是交給開發人員的文件,以及測試人員進行測試的依據。

小結

互動設計是乙個過程,它不僅僅是畫線框圖。互動設計最關鍵的兩個環節是頁面流程和頁面布局,前者建立清晰的架構和嚴密的邏輯,後者整合零散的資訊並 確定分明的主次關係。這一切都是為了我們的終極目標——讓我們的介面符合使用者的預期,不帶給他們任何的意外。一切都在使用者的意料之中。

互動設計 設計思路

1 分析階段 需求分析 使用者場景模擬 競品分析 聆聽使用者心聲 需求分析 對於乙個產品來說,必然有對使用者需求的分析內容,更多的是從mrd與prd獲得,或者從產品需求評審會議上得到需求分析的內容,當然可以直接與產品經理交流獲得相關產品需求。如果說設計原則是所有設計的出發點的話,那麼使用者需求就是本...

互動設計的規範

當產品規模大了之後就需要多個產品設計師協作完成整個產品,由於不同產品設計師之間的設計理念 設計方法 設計習慣的不同,協作完成的產品往往會導致產品一致性差,質量參差不齊。這個時候會需要乙份互動設計規範來規範和指導產品設計,從而保證產品設計的一致性,提公升整體產品質量。頁面資訊規範主要指頁面的靜態資訊應...

互動設計的本質是什麼?互動設計哪些意義?

互動設計的本質是什麼?互動設計哪些意義?首先我們先來了解下什麼是互動設計?互動設計是指設計人和產品或服務互動的一種機制,以使用者體驗為基礎進行的人機互動設計是要考慮使用者的背景 使用經驗以及在操作過程中的感受,從而設計符合終端使用者的產品,使得終端使用者在使用產品時愉悅 符合自己的邏輯 有效完成並且...