- 零基礎學網頁UI設計
- 胡雪梅
- 768字
- 2020-11-02 10:02:39
1.4.2 交互設計

圖1-19 交互設計示意圖
將需求梳理好后,接下來開始進行交互設計。交互設計是產品成型的階段,產品從抽象的需求轉化成具象的界面,需要產品經理和交互設計師配合完成,當然大部分公司都是產品經理獨立完成。交互設計的工作流程如圖1-19所示。
1.信息架構
交互設計中的信息架構其實就是產品信息分類。產品由哪些功能組成,將相關功能內容組織分類,明確邏輯關系,并平衡信息展現的深廣度,引導用戶尋找信息。
2.業務流程
業務流程是一個產品功能設計的基礎,確定了流程,后面的工作才能順利進行。否則會出現產品功能實現搖擺不定、反復修改的狀況。
3.頁面流程
頁面流程是業務流程的延伸,要用以用戶為中心的思路來整理,按用戶使用頁面的順序進行組織,把頁面結構和跳轉邏輯梳理得更清楚,并確定每個頁面的展現主題。
4.產品原型
根據前面的一系列工作,初步確定網頁界面風格、顏色搭配、信息內容和構圖布局等內容,之后進行原型圖的繪制。原型圖的繪制比較簡單,但是它可以對網頁UI進行初步的功能測試。在沒有設計稿之前,如果遺漏什么重要的信息或功能板塊,也可以在原型稿中及時做出調整。
產品原型可以分為低保真模型和高保真模型,其目的和產出物如圖1-20所示。

圖1-20 產品原型的目的和產出物
☆ 小技巧:低保真和高保真模型的使用
低保真模型就是驗證交互想法的粗略展現,不用精細,因為在這個階段會有很多更改,需要不斷地評審和討論,最好就是紙和筆手繪,可以用Axure RP或sketch做一些簡單的草圖。高保真模型要將詳細的頁面控件、布局、內容、操作指示、轉場動畫、異常情況等都詳細表達出來,給視覺設計人員和開發人員詳細參考。
5.說明文件
此處的說明文件指的是交互說明文件。寫交互說明文件要以開發為中心,使用開發人員能夠理解的交互邏輯和規則。如果沒有專門的交互說明文件,一般會在原型旁邊添加注釋說明,目的都是要把交互邏輯和交互規則表達清楚。