UX入門9：設計基礎法則

Sponsor

中國每年有50萬的設計畢業生，相比之下，能夠進入大廠的寥若晨星。但所有投身于設計的設計師，都有一顆渴望成長的心?！扼w驗設計師入門實戰課程》是vivo VMIC UED 為新入職設計師量身打造的專業成長課程，是UED全體講師的結晶?，F在，我們將這套課程整理成文章發表出來，希望給選擇并從事設計行業的你一點成長的力量。感興趣的小伙伴記得關注我們VMIC UED的公眾號，和我們一起共成長~

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

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

二、格式塔法則?格式塔心理學是現代認知心理學的基礎，由三位德國心理學家(威特海默，科勒，考卡夫)創立，其核心觀點是「整體決定部分的性質，部分依從于整體」。聽起來有點像是哲學概念，但是不重要，關鍵是我們需要了解的是其主張的7大基本原則，這些原則與我們的體驗設計才是息息相關的。1、簡單原則簡單原則是指在人眼的認知過程中，大腦會把一個復雜的物體分解成較為簡單化的物象來理解，以降低大腦的認知負荷。

▲簡單原則

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

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

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

知識小延展：

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

答案：

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

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

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

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

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

▲登錄頁面的迭代

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

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

2、接近性原則

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

▲接近性原則

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

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

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

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

▲小炒便飯

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

▲視頻卡片

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

▲谷歌布局建議

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

▲相關的內容放在一起看了這么久，下面做個小測試，以下左右兩圖展示相同的信息，大家覺得哪種形式更合理？ ▲測試來自網絡

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

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

?知識小延展：

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

答案：

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

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

▲朋友圈九宮格

3、相似性原則

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

▲相似性法則

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

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

▲相似性法則應用案例

?知識小延展：

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

答案：

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

▲相似與接近性對比

4、連續性原則

連續原則，又被稱為延續原則，即在直線或曲線上的元素，比不在直線或曲線上的元素更相關。

▲連續性原則

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

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

▲連續性原則案例

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

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

▲簽到獎勵的連續性設計

5、閉合性原則

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

▲閉合性原則

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

常見的閉合方式有：形狀閉合、負形閉合、經驗閉合。

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

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

▲形狀閉合案例

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

▲負形閉合案例

3）“經驗閉合”是利用人們已經累積新的認知習慣，來進行內容的傳達。

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

▲經驗閉合案例

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

▲閉合性原則的小測試

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

?知識小延展：

『連續性 』和 『閉合性 』 有什么關系？

答案：

連續性原則強調方向，重在信息方向的指引；閉合性原則強調始終，重在信息的完整性（開始與結束）。

▲連續性與閉合性的區分

6、主體與背景原則

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

▲主體與背景原則

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

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

1）場景大?。何覀儍A向于將處于大場景中的中間小區域部分視為主體，而大場景視為背景，比如在應用開屏中，利用大小對比，突出應用logo或slogan信息；

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

▲主體與背景原則案例

7、共同命運原則

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

▲共同命運原則

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

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

▲共同命運原則案例

8、小結

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

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

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

少——奧卡姆剃刀原理、米勒定律

快——多爾蒂門檻

好——雅各布定律省——能省則省原則

1、奧卡姆剃刀原理

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

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

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

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

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

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

▲?案例：新功能引導

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

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

2）只放置必要的元素；

3）減少點擊次數；

4）減少段落個數；

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

6）讓新用戶輕松使用。

2、米勒定律

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

我們來做個小測試，你能在30秒內快速記住這串數字嗎？

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

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

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

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

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

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

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

3、多爾蒂門檻

系統需要在 400ms 內對使用者的操作做出響應，這樣才能夠讓使用者保持專注，并提高生產效率。

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

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

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

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

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

4、雅各布定律

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

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

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

▲?案例：商品詳情頁的設計模式

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

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

5、能省則省原則

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

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

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

▲?費茨定律

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

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

?? ????

▲ 加載動效

6、小結

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

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

設計法則相當于我們日常生活中的常識，每一個法則背后都蘊含著很多優秀的案例和設計思考。作為設計師，去學習并掌握設計基礎法則是能力進階的必經之路，它能夠提高設計決策時的效率。但是在實際項目中，我們還需要綜合考慮各種因素，靈活運用設計法則，以創造出最符合產品需求和用戶需求的設計。

來源：VMIC UED 公眾號

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。