UI設計 有關互動設計的系統流程

2022-09-05 10:06:05 字數 2194 閱讀 9196

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

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

第一步,是任務分析,列出介面所要完成的所有任務。第二步按各任務確定頁面流程,建立資訊架構。接下來是建立統一的頁面布局包括分割槽等。

然後在頁面布局的基礎上進行原型設計,可以是低保真和高保真的原型圖。最後編寫設計說明。

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

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.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.互動設計不是憑空猜測。使用者介面應該基於使用者的心裡模型,而不是基於實現模型。目標導向的互動反映了使用者的心理模型。使用者不理解布林邏輯。...

UX和UI的區別,介面設計和互動設計的區別

ux和ui的區別 在這個技術的世界,ux和ui這兩個詞條在幾乎所有公司都很流行,無論大小,都在尋找招聘ux ui設計師。這兩個縮寫詞條使得整個技術工業為之瘋狂,因為它們是最先進的前沿技術。那這兩個詞條實際上是什麼意思呢?首先,ui是指使用者介面,ux是指使用者體驗。有一點很重要,這兩個詞條不可互換,...

互動設計中的專案跟進怎麼進行

如果開發過程中出現了大的互動疏漏,這個時候切勿六神無主,要知道自己已經不是小孩子,出了問題沒人給你兜底。首先正視問題的存在,至少沒發生在上線以後被使用者黑成一片就該萬幸,接下來就是做好補救措施。這個時候發封郵件是不錯的選擇,表明因自己疏漏造成的影響和對大家的歉意,同時說清楚問題的解決方案,接下來呢當...