如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

引言

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

                                                                                                                                              —— 唐納德·諾曼

目錄

1.引言

2.7±2法則

3.席克定律

4.萊斯托夫效應(yīng)

5.費(fèi)茨定律

6.格式塔原則

7.本能反應(yīng)

8.色彩心理學(xué)

9.總結(jié)

定義

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

簡(jiǎn)單點(diǎn)理解就是：當(dāng)用戶同時(shí)操作任務(wù)的數(shù)量越少，分散的注意力越少，正確率越高。

7±2法則依據(jù)

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

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

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

7±2法則的作用

a.信息分類

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

b.優(yōu)化選項(xiàng)

我們可以查看線上大部分的 app 頂部導(dǎo)航欄，都嚴(yán)格遵循了7±2法則，雖然在橫軸可無限滑動(dòng)，但在顯示區(qū)域只保持7±2法則的顯示數(shù)量，例如今日頭條、美團(tuán)等等。

c.頁面布局

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

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

席克定律的定義

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

席克定律，又稱席克-海曼定律，?？艘缓Ｂ桑℉ick Hymalrs 1aw）是一種心理物理學(xué)定律。表征人的信息傳遞時(shí)間與刺激的平均信息量之間呈線性關(guān)系的定律。?？撕蚏．海曼1952年在選擇反應(yīng)時(shí)研究中得到。

用數(shù)學(xué)公式表達(dá)為：RT=a+blog2(n)，其中，RT表示反應(yīng)時(shí)間，a表示跟做決定無關(guān)的總時(shí)間，b表示根據(jù)對(duì)選項(xiàng)認(rèn)知的處理時(shí)間實(shí)證衍生出的常數(shù)，n表示同樣可能的選項(xiàng)數(shù)字。

這里我們核心注意一下“b - 對(duì)選項(xiàng)認(rèn)知的處理時(shí)間實(shí)證衍生出的常數(shù)”，這是造成我們成本上升的主要原因，在處理100個(gè)和10個(gè)的選項(xiàng)認(rèn)知處理時(shí)間的成本存在著巨大的差異。

席克定律的作用

a.提高選擇效率

為了提高用戶的選擇效率，我們需要盡可能的避免的過多的選擇擺在用戶面前，否則用戶會(huì)因?yàn)檫x項(xiàng)過多而猶豫不決，造成時(shí)間成本直線上升而導(dǎo)致用戶放棄當(dāng)前操作。

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

在網(wǎng)易云音樂中的歌單頁面中，側(cè)滑刪除歌單的時(shí)候，只給用戶“一到兩個(gè)”選擇，用戶可以根據(jù)自身的需求進(jìn)行快速的選擇，不需要耗費(fèi)大量時(shí)間進(jìn)行認(rèn)知思考。

b.提高信息獲取效率

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

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

c.提高用戶體驗(yàn)

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

same 創(chuàng)建頻道的過程分成“4步”，每一步用戶只需要面對(duì)少量的選項(xiàng)，直接將用戶的認(rèn)知時(shí)間成本降到了，無意為用戶創(chuàng)造了一次愉快的用戶體驗(yàn)。

d.建議

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

馮· 萊斯托夫效應(yīng)的定義

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

馮· 萊斯托夫效應(yīng)的主要成因，來自人們會(huì)格外注意一些東西里的某個(gè)特殊目標(biāo)，具有相對(duì)性，例如圖片中我們第一眼看到的就是紅色的西紅柿，因?yàn)橄鄬?duì)于當(dāng)前的環(huán)境單個(gè)物體具有特殊性才使得我們對(duì)紅色的西紅柿印象深刻。

發(fā)生萊斯托夫效應(yīng)的必要條件

與當(dāng)前“背景不同”或“經(jīng)驗(yàn)不同”時(shí)，萊斯托夫效應(yīng)就會(huì)發(fā)生。接下來我們看一下實(shí)際案例

a.背景不同

在當(dāng)前環(huán)境下，與周圍為元素具有明顯的不同，就發(fā)生了概“背景不同”的情況。

例如底部導(dǎo)航欄中的核心功能，我們會(huì)將其做增強(qiáng)的處理，放大 icon 、填充顏色或者區(qū)別設(shè)計(jì)樣式。例如閑魚和轉(zhuǎn)轉(zhuǎn)的底部導(dǎo)航欄中的icon：

我們可以明顯的看到轉(zhuǎn)轉(zhuǎn)的“賣二手”和閑魚的“發(fā)布”區(qū)別于其它的 icon 設(shè)計(jì)，使核心功能跳脫出來，讓用戶記憶深刻。

b.經(jīng)驗(yàn)不同

當(dāng)現(xiàn)在發(fā)生的事情與過去經(jīng)驗(yàn)有顯著不同時(shí)，就會(huì)觸發(fā)“經(jīng)驗(yàn)不同”的情況發(fā)生。

例如現(xiàn)在每年的電商購(gòu)物節(jié)，明顯區(qū)別于日常的電商界面，通過對(duì)設(shè)計(jì)風(fēng)格定制化的設(shè)計(jì)，加深對(duì)用戶的印象，同時(shí)擴(kuò)大了活動(dòng)弄對(duì)用戶的影響力。

c.建議

萊斯托夫效應(yīng)在設(shè)計(jì)中是為了強(qiáng)調(diào)重要模塊或核心功能，如果處處強(qiáng)調(diào)，那等同于所有的事情都不重要。

費(fèi)茨定律定義

費(fèi)茨定律我們可以簡(jiǎn)單的理解為：

a.目標(biāo)越大，越容易點(diǎn)擊或操作

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

公式&來源

1954年，當(dāng)時(shí)擔(dān)任美國(guó)空軍人類工程學(xué)部門主任的保羅·費(fèi)茨（Paul M. Fitts）博士，對(duì)人類操作過程中的運(yùn)動(dòng)特征、運(yùn)動(dòng)時(shí)間、運(yùn)動(dòng)范圍和運(yùn)動(dòng)準(zhǔn)確性進(jìn)行了研究，提出了著名的Fitts定律。

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

其中a，b是經(jīng)驗(yàn)參數(shù)，它們依賴于具體的指點(diǎn)設(shè)備的物理特性，以及操作人員和環(huán)境等因素。

費(fèi)茨定律的應(yīng)用

a.按鈕越大越容易點(diǎn)擊

例如nice、閑魚、轉(zhuǎn)轉(zhuǎn)的發(fā)布欄按鈕，屬于產(chǎn)品的重要核心功能，放大之后擴(kuò)大了按鈕的熱區(qū)范圍并增強(qiáng)了視覺沖擊力，更加容易操作。

b.相關(guān)聯(lián)的功能按鈕放在一起更容易點(diǎn)擊

相關(guān)聯(lián)的功能經(jīng)常出現(xiàn)在底部操作欄中，我們以淘寶、網(wǎng)易嚴(yán)選、高德地圖為例，它們的底部操作欄相關(guān)聯(lián)的功能按鈕都靠在一起，如淘寶中“加入購(gòu)物車和立即購(gòu)買”、網(wǎng)易嚴(yán)選中的“立即購(gòu)買和加入購(gòu)物車”、高德中“探路和開始導(dǎo)航”，都是緊密相連的業(yè)務(wù)，放在一起更加容易點(diǎn)擊。

c.次要功能的按鈕可以放的小一點(diǎn)

根據(jù)功能層級(jí)的重要性，我們可以將次要的功能放小一點(diǎn)。例如淘寶中介紹詳情頁的底部，“去購(gòu)買”的功能層級(jí)明顯大于其他三項(xiàng)（點(diǎn)贊、評(píng)論、收藏）的重要性。

d.功能類型不同的按鈕要放得遠(yuǎn)一點(diǎn)

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

格式塔原則定義

格式塔理論（Gestalt）強(qiáng)調(diào)經(jīng)驗(yàn)和行為的整體性，認(rèn)為整體不等于部分之和，意識(shí)不等于感覺元素的集合，行為不等于反射弧的循環(huán)。

我們可以簡(jiǎn)單的理解為：整體與個(gè)體的關(guān)系，整體和個(gè)體之間并不是單一的對(duì)等關(guān)系。

格式塔原則應(yīng)用

UI設(shè)計(jì)中我們主要利用格式塔原則中的：相似性原則、延續(xù)性原則、封閉性原則、鄰近原則、簡(jiǎn)單原則。

a.相似性原則

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

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

b.延續(xù)性原則

人的眼睛會(huì)自然的從一個(gè)物體移動(dòng)到另一個(gè)物體，同時(shí)我們也更加傾向于把部分具有一定規(guī)則的獨(dú)立的個(gè)體看成一個(gè)整體。

例如 Fancy 頁面中的活動(dòng)模塊下的功能入口 ，我們的眼睛會(huì)自然的將他們的 icon 看成一條連續(xù)的線。

再例如我們常見的列表設(shè)計(jì)，都是遵循延續(xù)性原則。

c.封閉的原則

人眼會(huì)自動(dòng)將帶有一定動(dòng)向趨勢(shì)的不完全閉合的圖形看做一個(gè)整體，

封閉原則的應(yīng)用十分常見，在工作中我們稱作為截?cái)嗍皆O(shè)計(jì)。例如我們常見的橫向交互，會(huì)在屏幕右側(cè)故意露出一部分，來告訴用戶通過滑動(dòng)可以得到更多內(nèi)容。

如上圖，F(xiàn)ancy 利用橫向交互隱藏更多內(nèi)容，同時(shí)又在屏幕的右邊展現(xiàn)出一部分內(nèi)容來吸引用戶滑動(dòng)查看更多內(nèi)容。

d.鄰近原則

人們會(huì)將相鄰比較近的元素自動(dòng)歸為一組。例如微信的發(fā)現(xiàn)頁面，我們第一印象就是相互靠近就是同類型的一組功能。

e.簡(jiǎn)單原則

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

本能反應(yīng)定義

本能反應(yīng)是指：用戶第一眼見到產(chǎn)品時(shí)的感受，而此時(shí)用戶還沒有與產(chǎn)品產(chǎn)生交互。

*對(duì)本能設(shè)計(jì)的誤解

對(duì)于本能設(shè)計(jì)的時(shí)常會(huì)存在一個(gè)誤解，認(rèn)為“漂亮美觀”的設(shè)計(jì)即是本能設(shè)計(jì)，這種想法是錯(cuò)誤的。

更有趣的是人會(huì)認(rèn)為漂亮具有吸引力的界面會(huì)更加好用，用戶會(huì)對(duì)這個(gè)觀念持續(xù)很久，直至付出巨大的成本，積累了足夠的經(jīng)驗(yàn)之后才會(huì)放棄并推翻之前的理論。

本能設(shè)計(jì)實(shí)際上是情感設(shè)計(jì)的一種，在特定的情境下一起人們心理上和情感上的反應(yīng)，而不是單純的美學(xué)設(shè)計(jì)。

本能設(shè)計(jì)的應(yīng)用

a.營(yíng)造出干凈漂亮，具有美學(xué)設(shè)計(jì)的界面更容易受到用戶青睞。

例如 Fancy 極簡(jiǎn)化的設(shè)計(jì)，在配圖和布局上都十分考究。

b.注重情感設(shè)計(jì)，關(guān)注細(xì)節(jié)。

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

色彩心理學(xué)的定義

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

色彩的應(yīng)用，很重視這種因果關(guān)系，即由對(duì)色彩的經(jīng)驗(yàn)積累而變成對(duì)色彩的心理規(guī)范，當(dāng)受到什么刺激后能產(chǎn)生什么反應(yīng)，都是色彩心理所要探討的內(nèi)容。

我們可以簡(jiǎn)單的理解為：色彩心理學(xué)是一種注重因果關(guān)系的心理學(xué)說，側(cè)重于觀看色彩之后產(chǎn)生的感受。

色彩心理學(xué)的應(yīng)用

不同的色彩在不同的地區(qū)與國(guó)家存在著不同的含義，在這里我們不會(huì)展開的進(jìn)行詳細(xì)的論述，我們核心關(guān)注的是色彩給用戶帶來什么樣子的作用。

a.信息指示

經(jīng)過社會(huì)長(zhǎng)期的發(fā)展與培養(yǎng)，人們對(duì)色彩已經(jīng)有相對(duì)成熟的認(rèn)知，色彩能夠幫助產(chǎn)品來傳遞信息，例如綠色是“同意”的意思、紅色是“反對(duì)”的意思、橙黃色是“警告”的意思，最典型的案例就是紅綠燈。

在界面設(shè)計(jì)中我們需要在圖形化的基礎(chǔ)上結(jié)合色彩更好的準(zhǔn)確的傳遞信息，引導(dǎo)用戶。

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

b.建立印象

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

例如每日故宮的界面設(shè)計(jì)，設(shè)色典雅，整體色調(diào)極為融合，給人一種溫潤(rùn)、典雅的感覺。

最后我們?cè)賮砘仡櫼幌聞偛诺姆窒恚?

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

簡(jiǎn)單點(diǎn)理解就是：當(dāng)用戶同時(shí)操作任務(wù)的數(shù)量越少，分散的注意力越少，正確率越高。

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

3.馮· 萊斯托夫效應(yīng)指的是相對(duì)于普通事物，記住獨(dú)特或特殊事物的可能性更大。

我們可以簡(jiǎn)單理解為：特殊事物才易被人牢記。我們需要注意的是引發(fā)萊斯托夫效的兩個(gè)必要條件是：“背景不同”和“經(jīng)驗(yàn)不同”。

4.費(fèi)茨定律：目標(biāo)越大，越容易點(diǎn)擊或操作；兩者的距離越近越容易操作。

5.格式塔原則我們提到在設(shè)計(jì)中我們主要參考“相似性原則、延續(xù)性原則、封閉性原則、鄰近原則、簡(jiǎn)單性原則”這五大原則進(jìn)行界面設(shè)計(jì)。

6.本能反應(yīng)是指用戶第一眼見到產(chǎn)品時(shí)的感受，而此時(shí)用戶還沒有與產(chǎn)品產(chǎn)生交互。我們需要注意的一點(diǎn)是：美觀不等于本能設(shè)計(jì)。

7.色彩心理學(xué)是一種注重因果關(guān)系的心理學(xué)說，側(cè)重于觀看色彩之后產(chǎn)生的感受，同樣是情感設(shè)計(jì)中的一種。

 

 

 藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。