本文作者了介紹界面設(shè)計中最基礎(chǔ)、最常用的法則：「格式塔法則」與「交互設(shè)計五定律」。通過學習這些法則，可以幫助設(shè)計師更好地組織頁面元素，使頁面更加清晰、美觀、易于理解和操作。

設(shè)計基礎(chǔ)法則是指在設(shè)計過程中，為了達到更好的用戶體驗，需要遵循的一些基本原則。常見的設(shè)計法則有很多，包括尼爾森10大可用性原則、約翰遜9大界面設(shè)計原則、格式塔法則等。

今天我們將著重介紹界面設(shè)計中最基礎(chǔ)、最常用的法則：「格式塔法則」與「交互設(shè)計五定律」。通過學習這些法則，可以幫助設(shè)計師更好地組織頁面元素，使頁面更加清晰、美觀、易于理解和操作。希望這些法則能夠為你的設(shè)計工作帶來幫助。

一、格式塔法則

格式塔心理學是現(xiàn)代認知心理學的基礎(chǔ)，由三位德國心理學家(威特海默，科勒，考卡夫)創(chuàng)立，其核心觀點是「整體決定部分的性質(zhì)，部分依從于整體」。聽起來有點像是哲學概念，但是不重要，關(guān)鍵是我們需要了解的是其主張的7大基本原則，這些原則與我們的體驗設(shè)計才是息息相關(guān)的。

1. 簡單原則

簡單原則是指在人眼的認知過程中，大腦會把一個復雜的物體分解成較為簡單化的物象來理解，以降低大腦的認知負荷。

▲簡單原則

左圖可以有多種拆解方式，但大多數(shù)人會將其拆分為右側(cè)的簡單方形，而非中間的復雜形狀。這體現(xiàn)了簡單原則：越是簡單的圖形認知難度越低。通常來說，簡單圖形的認知難度大約為“圓≈方≤三角形＜多邊形”。

▲基本幾何體與復雜幾何體

除此之外，與過去學習到的規(guī)律相似的對象也更容易被認知。因此在設(shè)計中使用常見的圖標和符號，如放大鏡表示搜索、紅色表示警告等，可以幫助用戶更容易理解和使用產(chǎn)品。

知識小延展：

關(guān)于簡單原則，我們提到最終是為了給大腦減少負荷，那所謂的負荷到底有幾類？如何衡量這些負荷的輕重？

答案：

負荷一般可以分為認知負荷、操作負荷和視覺負荷三類：

1）認知負荷指人腦在思考、記憶或計算時所消耗的能量負載，簡單來說就是燒腦程度；

2）操作負荷就是因抬手、點擊、眼動等運動所消耗的能量負載，簡單來說就是操作復雜度；

3）視覺負荷是指我們?yōu)g覽一個頁面時，人眼所接受到的信息量，簡單來說就是信息復雜度；

通常情況下，認知負荷的難度最大，其次是操作負荷，視覺負荷的難度較低。舉個例子：

▲登錄頁面的迭代

在Web端設(shè)計時，手機號和短信驗證碼同頁呈現(xiàn)是非常普遍的一個設(shè)計模式。移動端設(shè)計興起時，這樣的設(shè)計也延續(xù)了過來，但隨著移動端設(shè)計的發(fā)展，就逐步被更主流的拆分設(shè)計（分兩個頁面分別呈現(xiàn)手機號和短信驗證碼）所替代。

這樣的設(shè)計對于操作負荷來說其實是沒什么變化的，主要的就是對認知負荷的降低，達到一個頁面一個核心關(guān)注點的設(shè)計目標。

2. 接近性原則

又稱親密法則，就近原則或者鄰近原則，指距離相近的各部分區(qū)域組成整體，強調(diào)位置。

▲接近性原則

以上圖為例，當元素之間的間距保持一致時，視覺上會顯得比較均衡，不會讓人產(chǎn)生將元素聯(lián)系起來的錯覺。但當元素的橫向和縱向距離發(fā)生變化時，我們的大腦會傾向于將距離較近的元素看成一個組，這就是接近性法則最直觀的體現(xiàn)。

在日常生活中，接近性法則的應用案例有很多。例如，在進行書籍排版時，由于橫向閱讀和縱向閱讀的版式不同，為了讓用戶能夠直觀地理解閱讀順序，我們需要增加行間距、縮小字間距，以使橫向排版和縱向排版的差異一目了然，而無需依靠具體的語義來傳遞信息。

▲書籍排版中的接近性原則

在生活中，如果不注重接近法則進行設(shè)計，還有可能鬧出以下的笑話：

▲小炒便飯

在界面設(shè)計中，我們經(jīng)常運用接近性原則，將屬性相同或場景相似的信息放在一起，以降低用戶的閱讀成本，提高用戶的感知效率。同時，我們也要盡可能將不相關(guān)的信息區(qū)分開來，避免將它們混合在一起而導致不必要的誤解和混淆。

▲視頻卡片

我們也可以用接近性原則來保持組件密度和網(wǎng)格布局之間的平衡。如果在組件密集的情況下，想要用戶能夠快速瀏覽內(nèi)容組，就需要增加邊距和間距寬度，使內(nèi)容的分組更明顯，以便用戶更加清晰地瀏覽信息。

▲谷歌布局建議

在設(shè)計交互流程時，也可以通過結(jié)合接近性原則，將相關(guān)的操作步驟放在一起，以提高用戶的操作效率和體驗。

▲相關(guān)的內(nèi)容放在一起

看了這么久，下面做個小測試，以下左右兩圖展示相同的信息，大家覺得哪種形式更合理？

▲測試來自網(wǎng)絡(luò)

左圖中信息間隔分布較為平均，這使得大腦試圖分組和簡化信息時所需要花費的時間更長，且橫行和縱向的信息似乎都可以分組解讀，大腦需要花費更多的精力進行解讀。

相比之下，右圖運用接近法則，用較大的間隔清晰地區(qū)分球隊和數(shù)據(jù)，大腦不需要再為此付出額外的精力。即使添加新的信息，也不會增加整體感知的負擔。因此右側(cè)的布局更清晰合理。

知識小延展：

多近能成組 ？多遠會分離？

答案：

接近性是相對而言的。在書籍設(shè)計中，核心間距原則是：字間距＜行間距＜段間距＜欄間距＜頁邊距。借鑒到我們的界面設(shè)計中，這個設(shè)計標準依然成立，當有一個明顯的大間距作為對照時，小間距之間的元素就會形成一個組。

以朋友圈的九宮格為例，當圖片間距普通保持較小且間距統(tǒng)一時，其看起來是一個整體，當我們將圖片的間距擴大到一定程度，九宮格的整體性就被破壞了，甚至當圖片間距足夠大時，每張圖片都像單獨的個體。

▲朋友圈九宮格

3. 相似性原則

相似指的是在某一方面相似的元素趨向于形成一個組。

▲相似性法則

如上圖所示，人們會把那些明顯具有共同特性(如形狀、大小、顏色等)的事物當成一個整體，與不具有相似視覺特征的元素相比，具有相似視覺特征的元素被認為更加相關(guān)。

在界面設(shè)計中也有許多利用相似性法則進行信息分組的案例。如在搜索推薦中，使用顏色來區(qū)分普通搜索詞和熱搜詞；在導航應用中，同時關(guān)于同一種類型的地點（如車站）統(tǒng)一使用同一種圖標，幫助用戶快速識別。

▲相似性法則應用案例

知識小延展：

『接近性 』VS 『相似性』誰更占主導？

答案：

接近性比重較大。如下圖的圓形改變形狀，甚至添加顏色，人們也會把相近的一組當成一個整體。

▲相似與接近性對比

4. 連續(xù)性原則

連續(xù)原則，又被稱為延續(xù)原則，即在直線或曲線上的元素，比不在直線或曲線上的元素更相關(guān)。

▲連續(xù)性原則

視覺系統(tǒng)在感知過程中更傾向于感知連續(xù)、整體的形式，而不是分散的碎片，通過尋找微小的共性，可以將多個不同的信息整合成一個整體。例如上圖，由于視覺慣性的作用，我們傾向于讓知覺對象的直線保持直線，曲線保持曲線。

連續(xù)性原則被廣泛應用于界面設(shè)計和logo設(shè)計中，以提高設(shè)計的效果和用戶的體驗。舉個例子：

▲連續(xù)性原則案例

左圖我們不會認為是兩個殘缺的圓，而是兩個相交的圓；右圖IBM的logo 我們之所以能看出來是 IBM，就是因為我們在視覺上看到的不是離散的線條，而是連續(xù)的圖形。

再比如在“簽到”頁面設(shè)計中，利用連續(xù)性法則將簽到獎勵與進展連接起來， 引導用戶持續(xù)簽到獲得獎勵。除此之外，在數(shù)值趨勢圖、加載進度、身份認證、視頻播放進度等場景下也會較多用到連續(xù)性原則。

▲簽到獎勵的連續(xù)性設(shè)計

5. 閉合性原則

人們在觀察熟悉的視覺形象時，會把不完整的局部形象當作一個整體的形象來感知，這種視覺上的自動補齊，稱之為閉合。如果局部形象過于陌生或者簡略，則不會產(chǎn)生整體閉合聯(lián)想。

▲閉合性原則

比如圖上這些點，我們不會認為這是各種零碎的點，而是感知到了這是一個圓的形狀。

常見的閉合方式有：形狀閉合、負形閉合、經(jīng)驗閉合。

1）“形狀閉合”是指大腦會將形狀趨于完整的形狀閉合。

在界面設(shè)計中經(jīng)常用形狀閉合的方式，來提示用戶界面外隱藏的內(nèi)容。如下左圖中，新游預約模塊的第二個卡片僅露出了以一小部分，但大腦會將露出的這一小部分卡片閉合成一個完整的卡片，由此提示用戶旁邊隱藏者更多內(nèi)容。右圖中問題卡片也是同理。

▲形狀閉合案例

2）“負形閉合”是指畫面中的負形（留白）會形成用戶熟悉的形象，被當做整體感知。負形閉合，多用在LOGO，海報等藝術(shù)設(shè)計中。

▲負形閉合案例

3）“經(jīng)驗閉合”是利用人們已經(jīng)累積新的認知習慣，來進行內(nèi)容的傳達。

選項卡的設(shè)計便是經(jīng)驗閉合的典型按鈕。一開始的選項卡都是有明確的邊界線的，利用邊界線的界定，讓用戶把它認知為一個整體，但隨著扁平化設(shè)計的發(fā)展，到后來已經(jīng)省略成完全不帶邊界線的Tab設(shè)計了，用更少的視覺元素表達，減輕人在圖形識別上的精力消耗。這種選項卡可能對初期接入互聯(lián)網(wǎng)產(chǎn)品的用戶來說，有一定的理解門檻的，需要一定的經(jīng)驗積累，所以才叫經(jīng)驗閉合。

▲經(jīng)驗閉合案例

講了這么多，我們再來看一個網(wǎng)上很火的小測試，以下圖片中你看到的是什么字？

▲閉合性原則的小測試

這個測試就是閉合性原則的一個應用，它也從側(cè)面告訴我們想讓閉合性原則起作用，需要把握一個“度”。如果缺失的部分是很容易補全的，閉合就會發(fā)生；當缺失的太多，或缺失的形式很難理解、需要努力思考，閉合發(fā)生的可能就很小。就像一開始案例里的小點，很容易就會發(fā)生閉合，變成圓形。但是在這個小測試中，就會有不同答案發(fā)生。

知識小延展：

『連續(xù)性 』和 『閉合性 』 有什么關(guān)系？

答案：

連續(xù)性原則強調(diào)方向，重在信息方向的指引；閉合性原則強調(diào)始終，重在信息的完整性（開始與結(jié)束）。

▲連續(xù)性與閉合性的區(qū)分

6. 主體與背景原則

主體與背景原則是指大腦將視覺區(qū)域分為主體和背景，主體包括一個場景中占據(jù)我們主要注意力的所有元素，其余則是背景。

▲主體與背景原則

如上圖所示，左圖大腦看上去就會感覺是一個白色的方形疊在藍色的背景中，白色的方塊一下就吸引了我們的注意力，右圖則相反。這是因為大腦通常認為構(gòu)圖中最小的物體是圖形主體，而更大的物體則是背景。

在界面設(shè)計中，利用主體背景法則，營造一種空間感，給用戶帶來視覺引導，讓用戶快速感知重要的信息內(nèi)容。主體和背景的區(qū)別可以從以下兩個方面來控制：

1）場景大小：我們傾向于將處于大場景中的中間小區(qū)域部分視為主體，而大場景視為背景，比如在應用開屏中，利用大小對比，突出應用logo或slogan信息；

2）層級關(guān)系：如果在同一個平面中，我們傾向于將處于視覺第一層級的物體視為主體。比如重要信息的彈窗提示，以及弱化背景從而突出內(nèi)容等。

▲主體與背景原則案例

7. 共同命運原則

無論元素之間的距離有多遠，或者它們看起來有多不同，如果它們一起運動或變化，它們都被認為是相關(guān)的。

▲共同命運原則

這里的共同命運針對的是運動的物體。與接近性原理和相似性原理相像，都與我們的視覺系統(tǒng)會有著給對象進行分組來感知事物的傾向相關(guān)。

共同命運強調(diào)的是方向，當元素的運動、方向具有共同運動形式或者某種規(guī)律使，我們會將其視為為彼此相關(guān)的一個群組或整體。

▲共同命運原則案例

8、小結(jié)

以上是界面設(shè)計中常用的格式塔法則，包括簡單性原則、接近性原則、相似性原則、連續(xù)性原則、閉合性原則、主體與背景原則以及共同命運原則。

簡單原則要求設(shè)計簡潔明了，接近性原則要求將相關(guān)元素放在一起，相似性原則要求相似元素使用相同的視覺形式，連續(xù)性原則要求將相關(guān)元素放在相鄰的位置，閉合性原則要求將相關(guān)元素組成一個封閉的形狀，主體與背景原則要求將主體與背景進行清晰的區(qū)分，共同命運原則要求相關(guān)元素表現(xiàn)出相似的運動狀態(tài)。這些原則可以幫助設(shè)計師更好地組織和呈現(xiàn)信息，提升用戶的使用體驗和效率。

二、交互設(shè)計5定律

交互設(shè)計5定律是結(jié)合交互設(shè)計時常見的過程目標：少、快、好、省，總結(jié)對應的5個常用設(shè)計定律：

• 少——奧卡姆剃刀原理、米勒定律
• 快——多爾蒂門檻
• 好——雅各布定律
• 省——能省則省原則

1. 奧卡姆剃刀原理

奧卡姆剃刀原理指的是“如無必要，勿增實體” 。不必要的元素會增加認知的負擔，降低瀏覽的效率，而且會增加不可預測后果發(fā)生的機率。

▲案例：三星遙控器&小米遙控器

如上圖的遙控器，以前很多遙控器上面布滿了密密麻麻的按鍵，這類遙控器的學習成本比較高，且使用時很容易誤操作。而小米遙控器在傳統(tǒng)遙控器上進行了優(yōu)化，僅保留最核心的操作，去除一切不需要的按鈕，這就是奧卡姆剃刀原理的一個典型應用。

在界面設(shè)計中采用奧卡姆剃刀原則，簡化頁面元素和布局，避免過多的圖形和文字，以保持頁面的清晰度和易用性。如下圖的瀏覽器界面，當其他網(wǎng)絡(luò)搜索服務商試圖在其網(wǎng)站上增加廣告與特別功能時，谷歌仍堅持簡單有效的設(shè)計。

▲案例：谷歌瀏覽器&其他瀏覽器

在實際的工作中，我們往往很容易就犯下未遵循奧卡姆剃刀原理的錯誤，比如我們之前外銷瀏覽器改版后，在啟動頁增加了新功能引導，結(jié)果引導頁上線后，搜索滲透率與搜索量都下降顯著。同樣在活動設(shè)計時，為了告訴用戶怎么操作，增加了一串長的功能引導，結(jié)果也導致了用戶的大量流失。這個反面案例也告訴我們在做功能引導時一定要謹慎，沒有必要不要增加。

▲案例：新功能引導

日常設(shè)計中怎么應用奧卡姆剃刀原理呢？

1）如果要從功能相同的設(shè)計中做出抉擇，最好選用最簡單的設(shè)計；

2）只放置必要的元素；

3）減少點擊次數(shù)；

4）減少段落個數(shù)；

5）提供用戶更少的選項；

6）讓新用戶輕松使用。

2. 米勒定律

人們工作記憶平均能記住的元素數(shù)量僅為4±1。所以設(shè)計時若選項較多，就需要對選項進行分類和分組。

我們來做個小測試，你能在30秒內(nèi)快速記住這串數(shù)字嗎？

再換成以下的圖呢？你能記住幾個？

第二張數(shù)字僅是對內(nèi)容進行了分組，就可以提升瀏覽和記憶的效率，這其實就是米勒定律的一個應用。在交互設(shè)計中，我們可以經(jīng)常利用米勒定律，來減少用戶的認知負荷，提高信息的易讀性。

那日常設(shè)計中具體怎么應用米勒定律呢？

1）控制信息呈現(xiàn)數(shù)量。例如，在一個導航欄中，將導航項控制在5個以內(nèi)，可以讓用戶更容易找到他們需要的信息。

2）分組、分段展示信息。例如，在登錄頁面中，將手機號碼按照344的間隔區(qū)分，可以讓用戶更容易識別手機號信息。

▲案例：登錄頁手機號分段顯示

3）保持設(shè)計一致性，避免用戶需要重新學習和適應不同的設(shè)計。例如，在一個應用程序中，將相同的操作和功能使用相同的視覺形式，可以讓用戶更容易理解和使用。

3. 多爾蒂門檻

系統(tǒng)需要在 400ms 內(nèi)對使用者的操作做出響應，這樣才能夠讓使用者保持專注，并提高生產(chǎn)效率。

上世紀 70 年代后期，計算機研究人員依然認為計算機可以花費兩秒的時間對使用者的操作做出反饋，因為他們認為人們大概正好需要兩秒時間來決定下一步的操作，所以 2s（2000ms）一度成為了當年計算機響應時間的標準值。直到 1979 年計算機的算力開始大幅提升，也有了足夠的能力在 2000ms 內(nèi)做出響應，這時 IBM 的研究員 Walter Doherty 進行了一系列研究來評估算力的增長對生產(chǎn)力的影響。

研究結(jié)果表明，計算機的響應速度直接影響了使用者做出下一個決定所要花費的時間（這個時間被稱為用戶響應時間），換句話說，計算機相應的時間越長，用戶就要花費越多的時間來思考和決定下一步的操作。

不僅如此，Doherty 還認為響應速度低于 400ms 的系統(tǒng)或者程序，會讓人上癮。放在當下的環(huán)境來看，這當然只是一句比較夸張的話，但是結(jié)論是需要我們重視的，程序的響應時間，務必在 400ms 之內(nèi)。

▲不同速度啟動demo（注：請務必挨個觀察）

多爾蒂門檻給出了響應時間的上限參考，而后續(xù)的研究則提供了更為細致的響應標準。一般來說，元素點擊反饋間隔控制在0.1s左右 (0.14s以內(nèi))、元素入場退場時長控制在0.2s左右(225ms~195ms)、頁面轉(zhuǎn)場時長控制在0.3s 左右(300~400ms)是比較合適的。

4. 雅各布定律

用戶將大部分時間花在別人家的網(wǎng)站（產(chǎn)品）上，而不是你的。這意味著用戶希望你的網(wǎng)站（產(chǎn)品）跟別人的有相同的操作方法和使用模式。

雅各布定律是由尼爾森十大原則的創(chuàng)立者、尼爾森諾曼集團的創(chuàng)始人之一 雅各布·尼爾森提出的。他認為用戶在其他千千萬萬個網(wǎng)站（產(chǎn)品）上積累經(jīng)驗，學會如何使用網(wǎng)站，當一個網(wǎng)站跟其他網(wǎng)站一致的時候用戶會立刻知道該如何操作，但如果違反了雅各布定律，那么用戶會毫不猶豫地離開。

舉個例子，在電商網(wǎng)站的商品詳情頁中，都將商品圖片信息放在上面，商品價格放在商品圖下方，加入購物車與下單操作常駐在頁面下方。在進行商詳頁改版時一般會延續(xù)這種設(shè)計模式，再基于產(chǎn)品自己的特色進行改善，而不是完全從0開始定制。使用相似設(shè)計模式的優(yōu)勢是用戶在使用產(chǎn)品時無需重新學習。

▲案例：商品詳情頁的設(shè)計模式

雅各布定律不只是強調(diào)與其他產(chǎn)品保持設(shè)計模式的一致性，產(chǎn)品自身的一致性也很重要。這種一致性包括：一致的排版、一致的示能、一致的符號映射、一致的概念模型等，以提高用戶的使用效率和體驗。

▲按鈕的示能與反示能、常見的符號映射

5. 能省則省原則

包括省心、省力、省時三個部分：

省心是指設(shè)計符合視覺認知原理，符合行業(yè)設(shè)計習慣。這與格式塔法則、雅各布定律有一定的相似之處。

省力是指幫用戶降低操作的難度。我們可以結(jié)合費茨定律來降低用戶操作的難度和時間。費茨定律指出從一個起始位置移動到一個最終目標所需的時間由兩個參數(shù)來決定，到目標的距離、目標的大小。距離越短，操作越省力，所需的時間也就越短；目標越大，操作也越省力，時間也越短。

▲費茨定律

省時包括縮減物理時間和加速心理時間?？s短物理時間可以通過簡化操作路徑、減少加載時間等方式達成。加速心理時間一般應用在加載等需要用戶較長等待的場景中，通過動效的方式降低等待的焦慮。

▲ 縮短驗證碼校驗的操作路徑

▲ 加載動效

6. 小結(jié)

以上就是交互設(shè)計5定律：奧卡姆剃刀原理、米勒定律、多爾蒂門檻、雅各布定律、能省則省原則，設(shè)計時可以根據(jù)不同的設(shè)計目標與策略，結(jié)合這些原則進行設(shè)計，以提高用戶的使用體驗。

結(jié)語

如威廉·斯特倫克（William Strunk）所說：“優(yōu)秀的設(shè)計師有時會無視設(shè)計法則，但當他們這樣做的時候，通常會有一些補償性的措施。除非你確定你能做得那么好，否則最好還是遵守這些法則?！?/p>

設(shè)計法則相當于我們?nèi)粘Ｉ钪械某ＷR，每一個法則背后都蘊含著很多優(yōu)秀的案例和設(shè)計思考。作為設(shè)計師，去學習并掌握設(shè)計基礎(chǔ)法則是能力進階的必經(jīng)之路，它能夠提高設(shè)計決策時的效率。但是在實際項目中，我們還需要綜合考慮各種因素，靈活運用設(shè)計法則，以創(chuàng)造出最符合產(chǎn)品需求和用戶需求的設(shè)計。