如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

引言

如果在旅館里弄不清楚怎么開水龍頭，或者面對不熟悉的爐灶或電燈開關時，即使再聰明的人也會手足無措。唐納德A諾曼大膽地指出，不是你太笨，而是物品的設計沒有考慮到用戶的需求和心理。雖然拙劣的設計俯拾即是，但是設計出易于理解、方便使用、令人愉悅的產品并不困難。

                                                                                                                                              —— 唐納德·諾曼

目錄

1.引言

2.7±2法則

3.席克定律

4.萊斯托夫效應

5.費茨定律

6.格式塔原則

7.本能反應

8.色彩心理學

9.總結

定義

7±2法則是指：人在處理信息的時候同時最多可以處理9個，最少可處理5個。

簡單點理解就是：當用戶同時操作任務的數量越少，分散的注意力越少，正確率越高。

7±2法則依據

這個規律最早是在19世紀中葉,由愛爾蘭哲學家威廉漢密爾頓觀察到的。他發現，如果將一把子彈撒在地板上，人們很難一下子觀察到超過7顆子彈。1887年，雅各布斯通過實驗發現，對于無序的數字，被試能夠回憶出的最大數量約為7個。發現遺忘曲線的愛賓浩斯也發現，人在閱讀一次后，可記住約7個字母。這個神奇的“7”引起許多心理學家的研究興趣，從20世紀50年代起，心理學家用字母、音節、字詞等各種不同的材料進行過類似的實驗，所得結果都約是“7”。1956年，美國心理學家米勒（George A. Miller）教授發表了一篇重要的論文《神奇的數字7加減2：我們加工信息能力的某些限制》，明確提出短時記憶的容量為7±2，即一般為7并在5~9之間波動。這就是神奇的7±2效應。

但是實驗中采用的材料都是無序的、隨機的，如果是熟悉的字詞或數字，這樣短時記憶還只能容納“7”個嗎？例如“c-o-o-p-e-r-a-t-i-o-n”,這個字母序列已經有11個字母，如果學過英語的人聽到這個序列很快就能明白這是個詞，意思是“合作”，并能很好地回憶出來，這不是違背了短時記憶的“7±2”效應了嗎？不是的，這恰恰是神奇“7±2”存在的另一個奇特的現象。

因為短時記憶中的信息單位“組塊”本身具有神奇的彈性，一個字母是一個組塊，一個由多個字母組成的字詞也是一個組塊，甚至可以通過一些方法把小一些的單位聯合成為熟悉的、較大的單位，而且對知識的熟悉程度還會對它產生影響。例如“認知心理學”5個字對于不懂心理學的人來說是5個組塊；對稍懂心理學的人來說是兩個組塊；而對專業心理學學生、心理學家來說這5個字就只有一個組塊。但不論人們儲存的組塊是什么，短時記憶的容量為7±2個組塊。

7±2法則的作用

a.信息分類

7±2法則最簡單的應用就是信息分類，最最常見的例子就是手機號的模塊組合，通常情況下被割裂成“3-4-4”的組合方式，減少用戶的記憶方式。例如大眾點評的注冊頁面和電話呼叫彈窗，都遵循了7±2法則。

b.優化選項

我們可以查看線上大部分的 app 頂部導航欄，都嚴格遵循了7±2法則，雖然在橫軸可無限滑動，但在顯示區域只保持7±2法則的顯示數量，例如今日頭條、美團等等。

c.頁面布局

7±2法則可以幫助我們來優化界面布局，通過對模塊的分類，將同類型的內容組成模塊，用戶可以通過先查詢模塊再來尋找具體的內容，看似交互路徑變長，實則提高了用戶的效率。例如支付寶頁面：

支付寶通過對同類型的功能內容進行組合，將大量的內容組合成模塊，通過現尋找模塊在尋找具體功能的方式，提高了用戶的操作路徑。

席克定律的定義

席克定律的核心意義：人在面臨選擇越多的時候，所要消耗的時間成本越高。

席克定律，又稱席克-海曼定律，希克一海曼定律（Hick Hymalrs 1aw）是一種心理物理學定律。表征人的信息傳遞時間與刺激的平均信息量之間呈線性關系的定律。?？撕蚏．海曼1952年在選擇反應時研究中得到。

用數學公式表達為：RT=a+blog2(n)，其中，RT表示反應時間，a表示跟做決定無關的總時間，b表示根據對選項認知的處理時間實證衍生出的常數，n表示同樣可能的選項數字。

這里我們核心注意一下“b - 對選項認知的處理時間實證衍生出的常數”，這是造成我們成本上升的主要原因，在處理100個和10個的選項認知處理時間的成本存在著巨大的差異。

席克定律的作用

a.提高選擇效率

為了提高用戶的選擇效率，我們需要盡可能的避免的過多的選擇擺在用戶面前，否則用戶會因為選項過多而猶豫不決，造成時間成本直線上升而導致用戶放棄當前操作。

為此我們需要保持選項足夠簡潔，排除多余選項，只留下能夠滿足用戶需求的選項。例如網易云音樂：

在網易云音樂中的歌單頁面中，側滑刪除歌單的時候，只給用戶“一到兩個”選擇，用戶可以根據自身的需求進行快速的選擇，不需要耗費大量時間進行認知思考。

b.提高信息獲取效率

通過“席克定律”將信息分類組合可以幫助用戶提高閱讀效率，通過同類信息的組合提高用戶對信息的接受度，使得信息更加容易閱讀。例如淘票票的電影詳情頁:

淘票票的詳情頁通過的同類型信息的組合，幫助用戶減少了對信息進行檢索再組合認知的過程，減少了用戶的成本輸出，提高了用戶的閱讀效率。

c.提高用戶體驗

當用戶在處理應用操作的時候，所消耗的成本越少，心情自然會更加愉悅。我們完全可以借鑒“席克定律”來幫助產品提高用戶體驗。例如我們在進行一系列操作的時候，如果將所有選項都聚集在一起，會給用戶造成極其差的用戶體驗，反之我們將所有選項拆解、歸類讓用戶按照一定的步驟在每一頁盡量做少的選擇，則會營造一種較為舒適的用戶體驗。例如 same ：

same 創建頻道的過程分成“4步”，每一步用戶只需要面對少量的選項，直接將用戶的認知時間成本降到了，無意為用戶創造了一次愉快的用戶體驗。

d.建議

將任何選項，包括按鈕、圖片、頁面保持在限度的原因，消除不必要的選擇，使產品的可用性更高；但是切勿綁架用戶，限制用戶的選擇，例如一下系統的升級選項只有一個選項那就是“升級”。

馮· 萊斯托夫效應的定義

馮· 萊斯托夫效應指的是相對于普通事物，記住獨特或特殊事物的可能性更大。我們可以簡單理解為：特殊事物才容易被人牢記。例如下面的紅蘋果：

馮· 萊斯托夫效應的主要成因，來自人們會格外注意一些東西里的某個特殊目標，具有相對性，例如圖片中我們第一眼看到的就是紅色的西紅柿，因為相對于當前的環境單個物體具有特殊性才使得我們對紅色的西紅柿印象深刻。

發生萊斯托夫效應的必要條件

與當前“背景不同”或“經驗不同”時，萊斯托夫效應就會發生。接下來我們看一下實際案例

a.背景不同

在當前環境下，與周圍為元素具有明顯的不同，就發生了概“背景不同”的情況。

例如底部導航欄中的核心功能，我們會將其做增強的處理，放大 icon 、填充顏色或者區別設計樣式。例如閑魚和轉轉的底部導航欄中的icon：

我們可以明顯的看到轉轉的“賣二手”和閑魚的“發布”區別于其它的 icon 設計，使核心功能跳脫出來，讓用戶記憶深刻。

b.經驗不同

當現在發生的事情與過去經驗有顯著不同時，就會觸發“經驗不同”的情況發生。

例如現在每年的電商購物節，明顯區別于日常的電商界面，通過對設計風格定制化的設計，加深對用戶的印象，同時擴大了活動弄對用戶的影響力。

c.建議

萊斯托夫效應在設計中是為了強調重要模塊或核心功能，如果處處強調，那等同于所有的事情都不重要。

費茨定律定義

費茨定律我們可以簡單的理解為：

a.目標越大，越容易點擊或操作

b.兩者的距離越近越容易操作

公式&來源

1954年，當時擔任美國空軍人類工程學部門主任的保羅·費茨（Paul M. Fitts）博士，對人類操作過程中的運動特征、運動時間、運動范圍和運動準確性進行了研究，提出了著名的Fitts定律。

費茨定律的公式：t = a + b log2 (D / S + 1)

其中a，b是經驗參數，它們依賴于具體的指點設備的物理特性，以及操作人員和環境等因素。

費茨定律的應用

a.按鈕越大越容易點擊

例如nice、閑魚、轉轉的發布欄按鈕，屬于產品的重要核心功能，放大之后擴大了按鈕的熱區范圍并增強了視覺沖擊力，更加容易操作。

b.相關聯的功能按鈕放在一起更容易點擊

相關聯的功能經常出現在底部操作欄中，我們以淘寶、網易嚴選、高德地圖為例，它們的底部操作欄相關聯的功能按鈕都靠在一起，如淘寶中“加入購物車和立即購買”、網易嚴選中的“立即購買和加入購物車”、高德中“探路和開始導航”，都是緊密相連的業務，放在一起更加容易點擊。

c.次要功能的按鈕可以放的小一點

根據功能層級的重要性，我們可以將次要的功能放小一點。例如淘寶中介紹詳情頁的底部，“去購買”的功能層級明顯大于其他三項（點贊、評論、收藏）的重要性。

d.功能類型不同的按鈕要放得遠一點

功能類型不同按鈕放在一起很容易造成誤操作，例如UC瀏覽器中詳情頁的底部，“返回”和“評論、收藏、分享”的功能類型不同，如果靠在一起則容易引發誤觸，所以相隔很遠，盡量避免誤操作。

格式塔原則定義

格式塔理論（Gestalt）強調經驗和行為的整體性，認為整體不等于部分之和，意識不等于感覺元素的集合，行為不等于反射弧的循環。

我們可以簡單的理解為：整體與個體的關系，整體和個體之間并不是單一的對等關系。

格式塔原則應用

UI設計中我們主要利用格式塔原則中的：相似性原則、延續性原則、封閉性原則、鄰近原則、簡單原則。

a.相似性原則

當人們看到具有相似特征的元素會自動將其歸為一組。元素的相似性通常參考：大小、形狀、顏色、紋理等等來去界定。

例如貝殼租房的“資訊快遞”模塊，通過矩形相似性，我們會自然的將其看作一個整體。

b.延續性原則

人的眼睛會自然的從一個物體移動到另一個物體，同時我們也更加傾向于把部分具有一定規則的獨立的個體看成一個整體。

例如 Fancy 頁面中的活動模塊下的功能入口 ，我們的眼睛會自然的將他們的 icon 看成一條連續的線。

再例如我們常見的列表設計，都是遵循延續性原則。

c.封閉的原則

人眼會自動將帶有一定動向趨勢的不完全閉合的圖形看做一個整體，

封閉原則的應用十分常見，在工作中我們稱作為截斷式設計。例如我們常見的橫向交互，會在屏幕右側故意露出一部分，來告訴用戶通過滑動可以得到更多內容。

如上圖，Fancy 利用橫向交互隱藏更多內容，同時又在屏幕的右邊展現出一部分內容來吸引用戶滑動查看更多內容。

d.鄰近原則

人們會將相鄰比較近的元素自動歸為一組。例如微信的發現頁面，我們第一印象就是相互靠近就是同類型的一組功能。

e.簡單原則

具有對稱、規則、平滑的簡單圖形特征的各部分趨于組成整體。例如UC瀏覽器的詳情頁和閑魚以及京東金融的首頁，整體布局都趨于對稱、規則和平滑。

本能反應定義

本能反應是指：用戶第一眼見到產品時的感受，而此時用戶還沒有與產品產生交互。

*對本能設計的誤解

對于本能設計的時常會存在一個誤解，認為“漂亮美觀”的設計即是本能設計，這種想法是錯誤的。

更有趣的是人會認為漂亮具有吸引力的界面會更加好用，用戶會對這個觀念持續很久，直至付出巨大的成本，積累了足夠的經驗之后才會放棄并推翻之前的理論。

本能設計實際上是情感設計的一種，在特定的情境下一起人們心理上和情感上的反應，而不是單純的美學設計。

本能設計的應用

a.營造出干凈漂亮，具有美學設計的界面更容易受到用戶青睞。

例如 Fancy 極簡化的設計，在配圖和布局上都十分考究。

b.注重情感設計，關注細節。

本能反應作為情感化設計的一種，我們需要處處為用戶著想，在細節上為用戶提供便利。例如淘票票中的電影詳情頁，將電影的預告片提到頂部，用戶可以直接產看預告片，而不是再去下拉尋找。

色彩心理學的定義

色彩心理透過視覺開始，從知覺、感情到記憶、思想、意志、象征等，其反應與變化是極為復雜的。

色彩的應用，很重視這種因果關系，即由對色彩的經驗積累而變成對色彩的心理規范，當受到什么刺激后能產生什么反應，都是色彩心理所要探討的內容。

我們可以簡單的理解為：色彩心理學是一種注重因果關系的心理學說，側重于觀看色彩之后產生的感受。

色彩心理學的應用

不同的色彩在不同的地區與國家存在著不同的含義，在這里我們不會展開的進行詳細的論述，我們核心關注的是色彩給用戶帶來什么樣子的作用。

a.信息指示

經過社會長期的發展與培養，人們對色彩已經有相對成熟的認知，色彩能夠幫助產品來傳遞信息，例如綠色是“同意”的意思、紅色是“反對”的意思、橙黃色是“警告”的意思，最典型的案例就是紅綠燈。

在界面設計中我們需要在圖形化的基礎上結合色彩更好的準確的傳遞信息，引導用戶。

例如貝殼租房的詳情頁中的底部操作欄，“在線咨詢”和“電話咨詢”按鈕通過添加背景色來引導用戶點擊。

b.建立印象

色彩往往能給人建立第一印象的重要因素，例如我們經常聽到這個界面的“配色”很高級，或者這個界面看起來很干凈等等，都是色彩為用戶的建立的第一印象。例如莫蘭迪的畫作：

例如每日故宮的界面設計，設色典雅，整體色調極為融合，給人一種溫潤、典雅的感覺。

最后我們再來回顧一下剛才的分享：

1.7±2法則是指：人在處理信息的時候同時最多可以處理9個，最少可處理5個。

簡單點理解就是：當用戶同時操作任務的數量越少，分散的注意力越少，正確率越高。

2.席克定律的核心意義：人在面臨選擇越多的時候，所要消耗的時間成本越高。

3.馮· 萊斯托夫效應指的是相對于普通事物，記住獨特或特殊事物的可能性更大。

我們可以簡單理解為：特殊事物才易被人牢記。我們需要注意的是引發萊斯托夫效的兩個必要條件是：“背景不同”和“經驗不同”。

4.費茨定律：目標越大，越容易點擊或操作；兩者的距離越近越容易操作。

5.格式塔原則我們提到在設計中我們主要參考“相似性原則、延續性原則、封閉性原則、鄰近原則、簡單性原則”這五大原則進行界面設計。

6.本能反應是指用戶第一眼見到產品時的感受，而此時用戶還沒有與產品產生交互。我們需要注意的一點是：美觀不等于本能設計。

7.色彩心理學是一種注重因果關系的心理學說，側重于觀看色彩之后產生的感受，同樣是情感設計中的一種。

 

 

 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。