1.1 交互設計的基本概念

交互設計是指設計人和產品或服務互動的一種機制﹐以用戶體驗為基礎進行的人機交互設計要考慮用戶的背景、使用經驗及在操作過程中的感受，從而設計符合最終用戶需求的產品，使得最終用戶在使用產品時愉悅、符合自己的邏輯、有效完成并且高效使用產品。

1.1.1 交互設計的定義

國際交互設計協會（Interaction Design Association,IxDA）對交互設計的定義如下。

以用戶為中心作為設計的基本原理，交互設計的實際操作必須建立在對實際用戶的了解之上，包括他們的目標、任務、體驗、需求等。從以用戶為中心的角度出發(fā)，同時努力平衡用戶需求、商業(yè)發(fā)展目標和科技發(fā)展水平之間的關系，交互設計師為復雜的設計挑戰(zhàn)提供解決方法，同時定義和發(fā)展新的交互產品和服務。

交互設計通常涉及美學設計、動態(tài)設計、聲音設計、空間設計等領域，這些領域交疊融合，可以說交互設計是一個多領域的融合結果。

1.1.2 交互設計與用戶體驗

用戶體驗這個詞被廣泛認知是在20世紀90年代中期，由用戶體驗設計師唐納德·諾曼（Donald Arthur Norman）提出和推廣。

用戶體驗（user experience, UE/UX）是指用戶在使用產品的過程中建立起來的一種純主觀感受。隨著計算機技術和互聯網的發(fā)展，以用戶為中心、以人為本的原則越來越得到重視，用戶體驗是用戶關于產品的一整套體驗，包括跟產品相關的設計、制作、生產、營銷、售后和技術支持等各個環(huán)節(jié)，交互設計是用戶體驗設計的一部分。

用戶體驗分為5個層面：戰(zhàn)略層、范圍層、結構層、框架層、表現層，如圖1-1所示。

微課視頻

用戶體驗——結構層

① 戰(zhàn)略層對應的是“用戶需求、產品目標”。

② 范圍層指的是“功能規(guī)格、內容需求”，當我們把用戶需求和產品目標轉變成產品后，思考應該提供給用戶什么樣的內容和功能時，戰(zhàn)略就變成了范圍。

③ 結構層就是“交互設計、信息架構”，目的是確定各個將要呈現給用戶的元素的“模式”和“順序”。

對于功能型的產品，在結構層注重交互設計：定義系統如何響應用戶的請求。

對于信息型的產品，在結構層注重信息架構：合理安排內容元素，以幫助用戶理解信息。

信息架構要求創(chuàng)建分類體系，創(chuàng)建方式可以是從上到下，也可以是從下到上，分類中的關系可以是線性關系或層級關系，如圖1-2所示。

信息架構的基本單位是節(jié)點。節(jié)點可以對應任意的信息片段或組合，可以是一個數字、一個控件、一個組件、一個頁面，甚至可以是一個功能。常見的結構類型有層級結構、矩陣結構、自然結構、線性結構。

④ 框架層指的是“界面設計、導航設計、信息設計”，確定用什么樣的功能和形式來實現產品。

⑤ 表現層指的是“視覺設計”，主要解決“產品框架層的邏輯排布”的感知呈現問題。

1.1.3 交互設計的可用性原則

這里講的可用性原則是指十大交互設計可用性原則，由人機交互學博士雅各布·尼爾森（Jakob Nielsen）提出，用來評價用戶體驗的好壞。

尼爾森十大交互設計可用性原則被稱為“啟發(fā)式”原則，是對廣泛經驗的總結，可以把它當作一種經驗來學習，并與現實中的設計技巧結合使用，如圖1-3所示。

1.靈活高效原則

App產品應該同時滿足有經驗用戶和無經驗用戶的使用需求，并允許用戶定制常用功能。

如支付寶中的編輯應用功能，如圖1-4所示，支付寶首頁的應用是可以根據個人喜好自定義的，包括排序、刪除、新增等常用應用，如圖1-5所示；這樣用戶可以根據自己的興趣和習慣定制適合自己的應用分布方式，如圖1-6所示，這是靈活高效原則的一種體現。

2.一致性原則

對于用戶來說，同樣的文字、狀態(tài)、按鈕應該觸發(fā)相同的事情，遵從通用的平臺慣例，即同一用語、功能、操作保持一致。

結構一致性：保持一種類似的結構，新的結構會讓用戶再次進行思考，有規(guī)律的排列順序能減輕用戶的思考負擔。

色彩一致性：產品所使用的主要色調應該是統一的，而不是換一個頁面顏色就不同。

操作一致性：能在產品更新換代后仍然讓用戶保持對原產品的認知，降低用戶的學習成本。

反饋一致性：用戶在點擊按鈕或者條目的時候，反饋效果應該是一致的。

文字一致性：產品中呈現給用戶閱讀的文字大小、樣式、顏色、布局等應該是一致的。

3.優(yōu)美且簡約原則

展示的內容應該去除不相關的信息或用戶幾乎不需要的信息。不相關的信息會讓原本重要的信息變得難以察覺。

如某軟件的音樂播放界面，如圖1-7所示，其在視覺及功能布局方面做得美觀簡約，看起來有留聲機的代入感，功能主次分明、用戶體驗感好，這是優(yōu)美且簡約原則的一種體現。

4.狀態(tài)可見原則

系統應該讓用戶時刻清楚當前發(fā)生了什么事情，也就是快速地讓用戶了解自己處于何種狀態(tài)，對過去發(fā)生的事情、當前目標及未來去向有所了解。一般的方法是在合適的時間給予用戶適當的反饋，防止用戶出現操作錯誤。

5.環(huán)境貼切原則

軟件系統應該使用用戶熟悉的語言、文字、語句，或者其他用戶熟悉的概念，而非系統語言，軟件中的信息應該盡量貼近真實世界，讓信息更自然，在邏輯上更容易被用戶理解。

6.易取原則

把組件、按鈕及選項可視化，以降低用戶的記憶負荷。用戶不需要記住各個對話框中的信息。軟件產品的使用指南應該是可見的，而且在合適的時候用戶可以再次查看。例如一些App更新后的“新功能引導”,App更新完以后，當用戶觸發(fā)某些功能時，會出現類似遮罩的提示，如圖1-8所示；這些提示用于告訴用戶功能所在的地方以及功能的具體作用，如圖1-9所示。這種做法在很多App中都會出現，這就是易取原則的一種體現。

7.人性化幫助原則

任何產品都應該提供一份幫助文檔。任何幫助文檔都應該可以方便地被找到，以用戶的任務為中心，列出相應的步驟。

以兩款App登錄界面為例：有必要在比較重要的功能入口處提供相應的幫助入口，如圖1-10和圖1-11所示。不管是什么樣的產品，都要給用戶提供一個幫助入口，以幫助用戶解決操作過程中遇到的問題。

8.防錯原則

比錯誤提醒彈窗更好的設計是在這個錯誤發(fā)生之前就避免它。系統應該幫助用戶排除一些容易出錯的情況，或在提交之前給用戶一個確認的選項。

特別要注意的是，在用戶操作具有不可逆效果的功能時要有提示，防止用戶犯不可挽回的錯誤。

9.用戶可控原則

用戶常常會誤觸到某些功能，系統應該讓用戶可以方便地退出。很多用戶在完成一項操作時，會忽然意識到有不對的地方，所以系統最好支持撤銷/重做功能。

10.容錯原則

錯誤提示應用簡潔的文字指出錯誤是什么，并給出處理建議。錯誤提示既要幫助用戶識別出錯誤，分析出錯的原因，還要幫助用戶回到正確的操作上。

如用戶注冊郵箱，在輸入出錯時不但會出現錯誤提示，還會給出相應的建議，如圖1-12所示，幫助用戶進行正確的操作，在提高注冊效率的同時也提供了良好的用戶體驗。