1 什么是交互設計

Alan Cooper對交互設計的經典定義：交互設計是人工制品、環境和系統的行為，以及傳達這種行為的外觀元素的設計和定義。交互設計首先規劃和描述事物的行為的方式，然后描述傳達這種行為的最有效形式。

這個定義很抽象，讀起來晦澀難懂。以下是本書對其定義的解讀：

所謂交互，就是輸入和輸出。（如下圖所示）所以交互設計就是針對輸入方式（通常是人）和輸出方式（通常是產品或者系統）的設計。比如我們通過“觸摸”來控制手機便是一種輸入方式，然后手機在屏幕上提供相應的界面就是輸出方式。更具體的說，交互設計就是設計師對產品或者系統與它的使用者（人）之間的交互機制（輸入方式與輸出方式）進行分析、預測、定義、規劃、描述和探索的過程。即設計和定義使用者如何使用一個產品達到其目標，完成某一任務的過程。這里涉及到三個交互設計要素：目標、任務和完成任務的過程，即使用者的行為。

交互設計定義.png

讓我們以一個小故事來具體闡述以上提到的交互設計三要素。

小張是個銷售員，下午出去拜訪客戶，從客戶那出來發現已經晚上六點多了，感到肚子很餓。本來小張是想回家自己做飯吃，但是實在是太餓了，回家又要做好久的地鐵，還不如就在附近找家小飯館吃了呢，于是小張環顧四周，發現馬路對面左前方200米有個麥當勞，小張于是就穿過馬路，沿著道路走了過去，到了麥當勞要了一份套餐，風卷殘云的吃完了。

問題來了，在這個故事中，什么是目標？

小張餓了，想填飽肚子。這就是目標。

什么是任務？

回家自己做飯是一種任務，到附近的地方吃也是一種任務,實現同一個目標可能有很多不同的任務。如何選擇任務要視具體情境（包括用戶的動機、期望、外部環境限制等）而定，如上述故事中小張因為太餓，想快點填飽肚子（動機、期望）但是回家所要花費的時間太長（外部環境）所以才選擇到附件飯館吃。任務是利用產品達成某個目的的具體步驟，多個步驟合起來就達成了目標，比如上面故事中小張需要完成到達對面麥當勞-點餐-吃-結賬-走人等五個任務。

什么是行為？
穿過馬路，走到麥當勞，推門進去，排隊，選擇食物，等候，就餐等等這些就是行為，行為是每個任務的具體動作，比如吃的時候你用筷子還是刀叉，坐在靠走廊還是靠窗，行為體現出了用戶的操作習慣和對這個事件的認知水平。在人機交互領域，行為就是可以看到的用戶的具體操作，專業點的術語我們稱之為“用例”。

一個普遍的問題是，目標和任務容易混淆。如何區分呢？其實很簡單，如下圖：

交互設計三要素.png

目標是可以不斷抽象的，比如回家過年是為了什么?目標是跟親人團聚。那跟親人團聚是為了什么?是為了得到親情和愛。（用戶研究和需求分析的目的就是得到這種抽絲剝繭之后的用戶目標）

任務是可以不斷細化的。比如如果我們選擇做火車（任務）來達到“回家過年”這個目標，那么要如何才能做火車呢？你需要先買票，然后才能乘坐火車。怎么買票？一種方式是通過網上訂票：涉及登錄\注冊12306網站—查找列車信息—下單—支付這四個步驟。再細分、具體化這四個步驟就是用戶行為。如下圖查找列車信息下的5個用戶行為：

12306訂票.jpg

界定任務和行為，我們可以拋一個問題：這個事要怎么做?如果不能立即做那就是任務，如果能夠立即做那就是行為。

從以上定義中可以看出：交互設計以用戶目標為出發點(目標導向)，關注的重點在于用戶行為，任務則是聯結目標和行為的紐帶。我們所做的所有設計最終都是為了幫助用戶達成其目標。（如下圖）這種目標導向的設計理念可以幫助交互設計師始終站在一個相對較高的水平上來看問題，而這正是設計的產品具有良好用戶體驗的前提：設計總是朝著用戶的最終目標的方向前進而不會太過偏離用戶目標。

目標導向的設計.png

然而，不像與大多數實體人工制品的交互，只涉及簡單的行為，人機交互領域或者說人們與數字產品的交互機制具有很多潛在的復雜性：普通用戶在利用數字產品完成某一任務時，他們對數字產品或系統的心理模型（人們對數字產品如何工作、響應的心理預期和行為習慣）往往和數字產品或系統的實現模型（技術上如何實現）存在很大的差距，這就要求設計師考慮如何設計才能使數字產品或系統的響應或工作方式表現得盡可能符合普通用戶的心理預期和行為習慣。這就好比跳雙人舞：用戶移動，系統響應；接著用戶再移動來回應系統的響應，兩者需要步調一致舞蹈才能繼續進行。以往的數字產品或系統的開發過程是不考慮這種舞步的協調的，系統往往自己跳自己的，用戶需要努力學習才能跟上系統的步調，在學習過程中被踩腳是用戶必須付出的代價。而用戶中心的設計思想則要求系統能預測用戶的舞步，和用戶的舞步保持一致，或者能夠引導用戶輕松跟上系統的舞步。這就要求交互設計師在設計用戶和系統的行為（操作和反饋）時需要具備很多學科知識。所涉及學科包含認知心理學、人類學、工業設計、人因工程、信息架構、邏輯學等等。

2 交互設計與相關學科

從用戶角度來說，交互設計是一種如何讓產品更易用，更能幫助用戶達成目標，且有效而讓人愉悅的技術。可見它是提升用戶體驗不可或缺的重要過程。對于交互設計師而言，為達成用戶的目標，我們需要綜合運用多門學科知識，了解用戶的行為習慣、心理特性、實際需求，并將其表現在產品的功能特性和傳達的形式上。以下是交互設計借鑒較多的幾門學科：

2.1 工業設計與交互設計

工業設計中應用的很多知識技能和交互設計具有很大的重疊。工業設計研究實體產品的功能和傳達形式，以及產品，用戶和外部環境之間的平衡關系。比如，在工業設計領域，實體產品的設計需要綜合考慮產品的形狀、色彩，人們對其的感知、心理欲望，以及產品的可用性等方面。有人認為交互設計是工業設計在軟件及數字領域的延生。此外，隨著技術的發展，軟件和硬件的界限呈現逐漸模糊的趨勢，交互設計和工業設計的界限也將逐漸變得不明確。例如各種可穿戴設備、智能硬件、智能家居等產品的出現就是這種趨勢的有利佐證。（案例：智能手環）

2.2 認知心理學與交互設計

認知心理學是一門主要研究人的認知過程規律的學科，認知過程包括感知覺，注意，表象，記憶思維，語言等等。認知心理學能為交互設計和視覺設計提供基礎的設計原則。這些原則包括心理模型（Mental Model），映射原理（Mapping），隱喻（Metaphor）以及可操作啟示性（Affordance）等等。所謂心理模型，有時也稱為心智模型，就是人們對于現實世界如何運作的一種內在思維過程。它是人們對周圍世界以及各組成部分之間的關系的一種內在表征（概念），以及個體對自己的行為，行為所引發的結果的一種直覺認識。心理模型是基于過去經驗和行為習慣而形成的。當個體面對一個新的事物或者產品時，沒有對應的心理模型，這時個體會選擇用一個與其相近的概念去嘗試理解這個新的產品，并嘗試學習如何使用，這就是映射。隱喻就是人們將現實世界中所形成的概念、認知模式映射到數字產品的一個例子。例如網頁或應用中的電子郵箱通常以信封圖標來表現（盡管發送電子郵件從未涉及到物理信件）。啟示性，指的是某物體或者對象具有某種操作或功能上的暗示性。舉例來說，一張高于你膝蓋高度的椅子，它可以暗示你坐。牙刷的手柄略長于人類的手掌，它暗示可以用來握緊。啟示性是一個重要的交互設計原則，在下節交互設計原則中我們進行詳細闡述。

以上認知心理學所提供的設計原則是設計出易用有效的產品的重要指導原則。不遵循這些原則的產品很可能會造成用戶體驗不良。下面這個例子就是市面上背離這些原則的不良產品設計：

下圖是常見的馬桶按鈕設計。這個按鈕由一大一小兩部分組成。不知有多少人知道這個設計的奧秘所在。有沒有曾方便完疑惑過，該按哪一個？大多數人最后的選擇可能都是同時按。

馬桶按鈕.jpg

其實一大一小的按鈕設計初衷是出水量的不同：大按鈕出水量多，小按鈕出水量小。咋看起來這個設計很合理，然而它試圖挑戰的是大多數人早已建立的認知結構和關系模式（心理模型），以致每次操作時都要付諸額外的認知記憶和判斷。不是嗎？最自然的設計和操作該是什么？其實大多數人的實際操作已經給了答案，一個按鈕就夠了！那出水量怎么辦？在人們的認知模式（心理模型）中，什么與出水量是最自然的關聯？答案是按下的時間長短或力度。這是比按鈕大小更早建立或更普遍的關聯關系。每次放水時的猶豫，就在于設計者要挑戰我們早已形成的認知模式。

此外，這個產品在交互設計上存在另一個問題：反饋。即便人們曾經分別按過大或小按鈕，結果呢？我們關注的是水有沒有出來。我們并不能感受到按大小按鈕時出水量的不同。在認知心理學中，有個概念叫最小可覺差（ just noticeable difference）。簡單舉例說，手拿一張紙或兩張紙，這個重量差別你體會不到，但拿一張紙或一沓紙，這個差別你是能分辨出的，因為一張兩張紙的差別小于你能分辨出的重量差別（即最小可覺差），而一張紙和一沓紙的區別大于最小可覺差。對于馬桶出水量，我們缺少水流判斷的視覺線索，水量差別小于最小可覺差。我們感知到的是：不同操作所引發的結果是一樣的。這就會導致我們感到困惑。

2.3 人因工程與交互設計

人因工程學（又稱工效學、人機工程學、人體工學、人因學）是一門重要的工程技術學科，是研究人和機器、環境的相互作用及其合理結合，使設計的機器和環境系統適合人的生理及心理等特點，達到在生產中提高效率、安全、健康和舒適目的的一門科學。例如下圖是一張理想的辦公室人體工學圖。它給出了良好地辦公桌，電腦，椅子的合理配置。從而使機器、環境適合人，提高工作效率。

人體工程學電腦椅.png

類似地，在交互設計中人因工程學也提供了支持，如下圖是一張標準化熱點圖，顯示了人們在屏幕上進行滾動手勢操作的三個明顯區域。

手機滾動操作.png

圖片來源: http://www.uxmatters.com/mt/archives/2014/09/insights-on-switching-centering-and-gestures-for-touchscreens.php

為什么是這三個區域？這和屏幕中的內容類型有關。左側的圖像顯示的是在對話框中對短內容的滾動；中間和右側的圖顯示得是對全屏內容列表的滾動。在中間的圖像中，列表條目由非常簡短的信息構成，所以在屏幕中央有大量空白區域，你會發現用戶更喜歡觸摸中央。在右側的圖像中，長列表條目占據了許多屏幕的寬度，用戶就在屏幕更右側進行滾動操作。甚至左利手用戶也遵循這種操作模式。

對于那些語言上是從右往左閱讀的文化中，結果剛好相反。人們點擊屏幕左側的空白間隔。

在內容區域用戶對于使用滾動手勢會顯得不自信。因為他們不是擔心他們會不小心和內容交互，就是擔心他們會遮住內容。當頁面中充滿了內容，沒有任何多余的觸摸空間時，用戶選擇在右側滾動操作。

2.4 信息架構與交互設計

信息架構是指組織信息內容的結構和方式，在互聯網產品中，信息架構就是對內容的分類，并通過建立一種引導人使用的方式，讓人更易于獲得想要的內容而進行的設計。有效的信息架構能夠讓用戶按照邏輯，沒有障礙地，逐步地得到他們想要的內容，在交互設計中，建立起這個行之有效的信息架構的人，被稱為信息架構師。有時候這部分工作也由交互設計師完成。

3 交互設計原則

3.1 什么是設計原則

設計原則其實就是對一些設計過程中基于人類的認知規律對設計做出的一些指導性原則，并且對已經成為行業共識的設計經驗做個總結，用來指導設計師界定問題、提高效率。

3.2 常用的交互設計原則

1. 可視性

普通用戶在瀏覽一個網頁或者應用界面時往往只是一掃而過，所以要讓產品界面做到不言而喻，一目了然。普通用戶只要看一眼就知道是什么內容，知道如何使用。或者產品界面至少要做到自我解釋，借助提示或幫助，普通用戶只需要花一點點時間去理解產品界面。（即產品的表現模式要趨近用戶的心理模型）

具體來說，可視性的內容包括：明確當前所在位置，知道當前能干什么、接下來要干什么，能快速辨別界面中的元素并明白其功能。在設計時可采用合理的隱喻、習慣用法等有效的啟示性。

例如荔枝FM 這個APP界面中調頻顯示按鈕模擬了真實收音機，一目了然。其實這是隱喻啟示的手法，隱喻啟示是非常利于新用戶學習的，從現實世界中直接映射過來。

荔枝FM-功能啟示性.png

擴充閱讀：交互設計原則之啟示性

2. 一致性
良好的一致性，可以減少用戶學習成本和培養用戶習慣，也可體現產品設計的嚴謹。
一致性可以體現在以下幾個層級：

• 跨平臺一致性。如果用戶經常需要跨平臺使用你的產品，那么平臺間的一致性就非常非常重要，例如Evernote。Evernote的核心競爭力就是多終端多平臺，所以它的產品在跨平臺一致性的要求是非常高的。

• 系列產品的一致性。同一開發者的多款應用間，或者同一應用的新舊版本間，自由的切換使用，而不需付出太大的學習成本。例如微軟Office 套件，它們的菜單一致性設計可稱業界楷模。

  
  
  Office套件.jpg

• 單個網站、軟件或者應用的內部一致性。在相似的情景下，應在幾個方面保持一致性：視覺表現、交互邏輯、操作結果、信息架構。如果有不同，應作相應的區別處理，特別是視覺表現上要予以區分。例如，淘寶、京東、唯品會等網購類型的網站，無論你以什么形式搜索商品，到最后出現的商品都是以表格形式呈現。到你選擇商品進入詳細頁面，相關商品的詳細信息、商品評價的相對位置都是一樣的。再到添加到購物車或直接購買，一系列的交互行為都有一致性。

3. 簡潔性
少即是多，盡可能精簡界面上的元素。當設計出原型，先將元素減半，然后再看能否再簡化。保證主要任務流程順利完成，消減其余不相關元素的干擾。簡潔體現在三個方面：減輕視覺干擾、精簡文字表述、簡化操作步驟。在設計時可合理使用刪除、隱藏、組織、轉移等策略。

（案例：Evernote的注冊/登錄表單設計）

4. 流暢性
確保用戶操作連貫，任務完成順暢，避免干擾或打斷。明確最基本的核心任務，并保證它的順利執行，輔助操作應在不影響核心任務的基礎上展開。避免干擾，讓用戶明確在特定界面中的首要任務和目標，盡可能避免界面上的視覺噪音和其它干擾；避免打斷，讓用戶的操作保持連貫性，模態框的使用要謹慎。

例如下圖Gmail在把郵件刪除后，會將刪除的彈框設計成List Notification非模態這種方式，提醒用戶撤銷剛才的刪除操作，這種的處理，讓刪除的流程更加順暢和輕松自如。

gmail撤銷按鈕.png

5. 及時反饋
界面中任何可操作的地方，當用戶發生操作時，都應該及時給予反饋。讓用戶了解操作已經生效，界面還在用戶的控制之下。反饋內容包括：用戶操作反饋和產品狀態反饋。
操作反饋，指的是界面元素在用戶進行滑過、點擊、移開等操作時，元素的反饋變化。

狀態反饋，指的是產品在運行需要用戶等待或者系統出錯時的反饋，讓用戶明白狀況。（例如百度云、迅雷等每次下載完成都有聲音提醒，音樂播放時的進度條顯示就是這類反饋）

這是 Gmail 第一次加載收件箱的界面。

加載進度條.jpg

6. 可探索性（容錯）
用戶在使用產品過程也是一個探索過程，產品應該允許用戶犯錯，即使犯錯了也不能埋怨用戶，而且必須給用戶重新嘗試的機會，讓用戶處于放松的心態。設計過程中，首先要幫助用戶避免出錯，比如采用合適的控件（相同情況下選擇控件比輸入控件出錯機會更小），給予輸入幫助或啟示。在登陸郵箱的過程中如果忘記密碼，在登陸圖標的旁邊會有一個“忘記密碼？”的提示圖標，來提醒用戶不用擔心，點擊進入來解決問題。用戶出錯后，需要提供撤銷或返回功能，使用戶返回到上一步操作重新探索。出錯反饋要親和，避免責備用戶或魯莽的打斷或推出產品，要禮貌的指出錯誤所在并提供有用的補救建議。