【第76期】交互設計與心理學

1、認知心理學

在對交互（interaction）的眾多定義中，我比較喜歡這個：所謂交互，即輸入（input）和輸出（output）。所以，交互設計（Interaction Design）就是針對輸入方式（通常是人）和輸出方式（通常是機器）的設計。比如我們通過「觸摸」來控制手機便是一種輸入方式，然後手機在屏幕上提供相應的界面就是輸出方式。而作為交互設計師，我們要思考的就是在何時採取何種輸入輸出方式。這裡就涉及到一系列問題：我們為什麼要用觸摸而不是其他方式？機器反饋的界面又該如何設計才能使用戶更容易理解，才能使人與機器的溝通更加舒暢自然？要回答這些問題，就要求我們能夠從根本上認識人是如何處理信息的以及人是如何行動的。這就是認知心理學的範疇。

而認知心理學理論將人比喻成計算機，人像計算機一樣對外界信息進行加工，如下圖所示：

認知心理學無法一兩句話就說明白，我這裡只介紹幾個最關鍵的概念帶大家入門。

A、感受器即人的感覺器官，視覺、聽覺、觸覺等等。研究人的感受器的特點將有利於交互設計師理解人們如何接收信息，才能設計出合適的交互方式來使人們輕鬆愉快地接收你要提供的信息。其中，一般來說，從信息量的大小來看，視覺、聽覺、觸覺依次減小。因此，我們通常使用聽覺和觸覺來輔助視覺上的設計，比如提示音和手機的震動。

B、效應器指手、足、語言器官等。效應器的質量指標通常是反應時間、運動速度和運動準確性，因此交互設計師可以以這三個指標來檢測你的設計是否符合人的認知模型。

C、加工器，這個比較複雜，但也是最重要的一部分，簡單來說，它告訴我們，除了客觀因素（如刺激強度、數量、作用方式）外，諸如動機、興趣、知識經驗等主觀因素也是影響人們理解信息的重要因素。學習它，將有利於交互設計師更準確地挖掘需求和提高設計質量。

2、格式塔心理學

這是交互設計中實際運用的最多的心理學理論之一。它主要包括三個部分：相似原則、接近原則和完形原則。

A、相似原則：相等或相似的元素形成整體或群體。如下圖左圖中，你會不自覺地認為它是縱向排列的，而右圖中是橫向排列。

相似原則告訴我們，人們通常把具有相似特徵（如大小、形狀、顏色等）的事物組合在一起。在交互設計中，我們經常用到這個原則，如網站的導航，使用不同顏色即可很容易將一級導航和二級導航區分開；再比如淘寶首頁的橫向標籤導航中，「天貓」、「聚划算」和「二手」這三個板塊和同一排的其他板塊比較，使用了更大的字體更鮮艷的顏色，通過這種方法來強調這三個板塊的與其他板塊的重要性不同。

B、接近原則：緊密靠在一起的元素形成整體或群體。比如下圖中，你會不自覺地把它分成左右各一組。

接近原則告訴我們如果你希望將多個元素進行分類，那麼讓同一類元素靠近在一起是個不錯的選擇。比如iPhone的「通用」界面：

同樣的道理，很多同學在網站排版或者平面設計排版的時候習慣用各種線條來劃分區域，其實沒有必要，很多時候只需要合理利用留白就能夠起到相同的作用並且更加簡潔美觀。另外，這裡有一個小知識：由於人們的閱讀順序是從左往右，所以左右相鄰比上下相鄰顯得更為密切。比如下圖中，人們可能會覺得圖片對應的文字是右邊的文字，而事實上是圖片下方的文字。所以，我們要盡量避免出現這種錯誤，解決的辦法就是遵循用戶認知習慣，採用橫向的排版，或者加大留白。

C、閉合原則：我們傾向於將圖形中缺失的部分「填滿」。如下圖，你會不自覺地認為它是個三角形，實際上它們只是幾根線條而已。

在交互設計中，這個原則也很常用，比如下面兩個方案，右邊的方案運用了閉合原則，將標題放在未閉合的線框線上，卻起到了很好的分組效果。

3、色彩心理學

色彩心理學對於設計的重要性相信任何一個設計師都了解，這裡不再贅述。

4、心流狀態

心流（flow）是人們全身心投入某事的一種心理狀態。人們處於這種情境時，往往不願意被打擾，心流狀態會產生極高的興奮感和充實感。

把握這個心理狀態對於沉浸式的交互設計特別有用，比如設計一款閱讀類應用，一款大型網遊，我們都希望用戶能夠不被打擾地沉浸到應用中去。這樣的設計例子很多，比如遊戲的全屏功能，比如使用safari瀏覽器時，向上滑動頁面時自動隱藏工具類和地址欄。

那麼，如何讓用戶達到心流狀態呢？心理學告訴我們至少要具備以下條件：

A、明確且可實現的目標；所以，我們應該記得始終讓用戶明確地知道他的目標，並且目標是可實現的。比如，你需要你的遊戲玩家去消滅10個叫做強盜的怪，那就在任務菜單里寫清楚「10個」和「強盜」，並且要保證這個任務是玩家有辦法完成的。

B、流暢的任務；保持流暢的任務直到目標實現為止。比如我們通常會忽視網站的404錯誤頁面，但是，如果在通知錯誤的同時告訴用戶接下來該怎麼辦會更好。

C、持續性的反饋；時刻告訴用戶當前的狀態、所處位置以及操作的效果。此類的設計包括很多，比如導航設計、轉場動畫設計、狀態界面設計等等。

D、可控制的操作；儘管用戶全心全意地沉浸到其中，但依然希望能夠在需要的時候可以控制自己的行為。此類設計包括可撤銷設計、防錯設計等。

以上4個是目前我掌握的、我認為對於交互設計最實用的幾個心理學理論，除此以外，還有很多心理學理論都能夠運用到交互設計當中去，比如消費心理學等。這裡我再給大家介紹一種有趣並且也挺實用的一種心理學理論：目標趨近效應（goal-gradient effect）。

目標趨近效應指的是人們在接近目標時會加快行動。比如，咖啡店送你一張積分卡，每買一杯咖啡就得1個積分貼卡，等積分卡滿的時候就可以換取禮物。下面是兩種不同的方法：

A、積分卡有10個貼槽，給你卡時所有貼槽都是空著的；

B、積分卡有12個貼槽，給你卡時已經貼上了2張貼紙；

問：貼滿一張卡需要多久，A和B是否相同？答案當然是不同，儘管同樣需要買10杯咖啡，但往往B方案會更快地貼滿。這就是目標趨近效應，離目標越近，人們就越有動力完成它。這在交互設計中也有使用到，比如我們剛註冊一個網站時，網站會提醒我們已經填寫了70%的資料，繼續完善就會得到什麼樣的獎勵，這就是利用人們的目標趨近心理。

PS:看完之後早讀君比較有印象的應該是通過空白來劃分模塊，通過線條來劃分頁面的模塊是比較清晰的知道模塊的歸屬，但多了會導致頁面太多線條產生雜亂的PSD。