編者按：「讓設計更有說服力的 20 條經典原則」系列文章已經到了第 8 篇，每篇文章針對一個設計原則進行探討，通過真實案例為你解析在設計中該如何運用。

在本篇文章中，帶你了解相似性原則與鄰近性原則有何不同，在設計中又是如何運用的。

往期回顧：

• 《讓設計更有說服力的20條經典原則：美即好用效應》
• 《讓設計更有說服力的20條經典原則：多爾蒂門檻》
• 《讓設計更有說服力的20條經典原則：菲茨定律》
• 《讓設計更有說服力的20條經典原則：希克定律》
• 《讓設計更有說服力的20條經典原則：雅各布定律》
• 《讓設計更有說服力的20條經典原則：簡潔法則》
• 《讓設計更有說服力的20條經典原則：鄰近性》

簡介說明

1. 理論表述

相似的元素傾向于被視為一個組。

2. 理論背景

相似性原則是格式塔組織律中的一個部分，是簡潔法則的一種具體的表現場景。

上一篇鄰近性表達的是元素空間位置上的接近，而相似性則表達的是元素形式和內容上的接近，包括形狀、顏色、大小、運動狀態(tài)等等。如果在一堆元素中有一些具有某種相同的特征，那么在我們的認知中這些元素具有更強的相關性。

設計案例

首先我們需要達成一個共識：元素的相似并不等于完全一致，更多時候細節(jié)統一我們就會認為元素是相似的。

細節(jié)包括但不限于：

• 矩形比例、圓角大小、描邊樣式
• 不同字段對應的字體、字重、字號、色彩
• 顏色的明度、飽和度、色相
• 圖標樣式、色彩、大小

1. 界面內相同功能的組件保持樣式統一

這一點想必不用多說，擁有相同功能、含義、層次結構的組件保持樣式上的統一可以使用戶快速理解這個組件的操作方式，降低用戶學習成本。想一想，如果為一個新聞 APP 的首頁做卡片式設計，使用不同的樣式，不僅作為設計師會很累，用戶也會很累。

圖1：蝦米、京東、小黑盒

所以，相同的組件保持樣式上的統一是十分有必要的，不論是對快速制作原型完成界面設計的要求，還是對降低用戶學習成本的考量，都不應該把相同的組件設計得相去甚遠。

2. APP風格保持統一

除了頁面內部的組件或元素具備一定的相似性之外，頁面與頁面之間也需要，這是為了 APP 整體風格的統一。

應用（或網站）風格的統一是 UI 設計中相當重要的一個論題，統一的風格能夠讓用戶清晰地感知到自己處在同一個應用（或網站）中，而不是覺得點一下就跳到了別人家的地盤里，這不僅僅是用戶體驗的要求，也是視覺上的需求。

正如我之前強調的那樣，細節(jié)上面保持統一就可以使用戶將這些頁面聯系起來，認為它們屬于同一個應用。

應用案例2：小黑盒發(fā)現頁、游戲頁、個人頁

我們會覺得這幾個頁面屬于同一個應用，因為它們都具備一些相同的細節(jié)特征，比如一致的分頁組件、相同大小的圓角、不斷復現的色彩（小黑盒中主要是主色黑色）、相同的字體、有規(guī)律的字號字重、一些相同形式的 icon 等等，這些小細節(jié)相互影響并不斷加強我們對頁面相似處的感知，所以我們會覺得這些頁面的風格是統一的。

習慣使用 XD 或 Sketch 中的 Symbol 功能，并不斷去復用色彩、字體字重字號、矩形元素的圓角和比例，相信你可以更快速地做出一套風格一致的頁面。

3. 特異點更易獲得視覺焦點

反過來思考，在相似的元素中，突然躥出一個截然不同的東西，你立馬就會被其吸引，這其實也是相似性原理的一種逆向應用的方法。

應用案例3：豆瓣書影音頁特異點的應用

最顯眼的是那些沒被選中的、全部長得一模一樣的 tab 嗎？不是，最顯眼的是那個唯一長得不一樣的，所以無論在什么時候用戶都能夠清楚地知道自己在哪個頁面。

注意事項

注意點1：相似不等于高度重復

有些初學者（或新人設計師）會做出一個頁面內全是一模一樣的、雷同的模塊，沒有絲毫變化的設計，這其實是一個誤區(qū)。相似不等于過度重復，在那些有大量 feed 列表的應用內，過度重復尤其要命。

如果一個頁面從上到下看起來全是一模一樣的，頁面呆板沉悶不說還全是字，這樣就會對用戶造成閱讀上的壓力。

反面案例1：蒸汽幫所有文章類條目只有一種樣式

我們常用的做法就是在大量 feed 中每隔 3~5 個就插入一種不太一樣的條目，這種「不一樣」的 feed、模塊穿插在正常的 feed 中間能夠活躍頁面、控制用戶的閱讀節(jié)奏，避免枯燥。

這里需要我們注意的是，修改 feed 的樣式不是改到面目全非，而是需要保留一些共通之處，就比如之前提到的那些細節(jié)，這樣就會讓組件看起來不一樣，但相似性得到保留，我們依然會認為這兩者是保持風格統一的。

注意點2：不同模塊不要做得太相似

比如說，廣告。

有時候就是需要廣告和正常的模塊長得差不多，以誘導用戶點擊獲得盈利，這是產品的商業(yè)性需求。但我說這一點需要注意，是從用戶的體驗需求出發(fā)的，誘導點擊長期以來廣受人詬病，所以應用需謹慎。如何衡量還得具體情況具體分析。

反面案例2：Instagram，左為正常的動態(tài)，右為廣告

一個是廣告，一個是正常的功能模塊，兩者長得一樣，交互一樣，用戶就容易忽略那很小的廣告標簽而誤點擊，從而進入一個預期之外甚至會抗拒的場景。

總結

• 利用相似性原理，使應用內頁面達到風格統一；
• 特異點更容易獲得視覺焦點；
• 相似不等于過度重復。

參考文獻

• 《The Law of Similarity - Gestalt Principles (1)》?MADS SOEGAARD
• 《格式塔心理學5項法則的學習與思考》?zhongnanli
• 格式塔 百度百科

歡迎關注作者的微信公眾號：「超人的電話亭」