編者按：「讓設(shè)計(jì)更有說(shuō)服力的 20 條經(jīng)典原則」系列文章已經(jīng)到了第 8 篇，每篇文章針對(duì)一個(gè)設(shè)計(jì)原則進(jìn)行探討，通過(guò)真實(shí)案例為你解析在設(shè)計(jì)中該如何運(yùn)用。

在本篇文章中，帶你了解相似性原則與鄰近性原則有何不同，在設(shè)計(jì)中又是如何運(yùn)用的。

往期回顧：

• 《讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：美即好用效應(yīng)》
• 《讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：多爾蒂門檻》
• 《讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：菲茨定律》
• 《讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：?？硕伞?/a>
• 《讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：雅各布定律》
• 《讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：簡(jiǎn)潔法則》
• 《讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：鄰近性》

簡(jiǎn)介說(shuō)明

1. 理論表述

相似的元素傾向于被視為一個(gè)組。

2. 理論背景

相似性原則是格式塔組織律中的一個(gè)部分，是簡(jiǎn)潔法則的一種具體的表現(xiàn)場(chǎng)景。

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

設(shè)計(jì)案例

首先我們需要達(dá)成一個(gè)共識(shí)：元素的相似并不等于完全一致，更多時(shí)候細(xì)節(jié)統(tǒng)一我們就會(huì)認(rèn)為元素是相似的。

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

• 矩形比例、圓角大小、描邊樣式
• 不同字段對(duì)應(yīng)的字體、字重、字號(hào)、色彩
• 顏色的明度、飽和度、色相
• 圖標(biāo)樣式、色彩、大小

1. 界面內(nèi)相同功能的組件保持樣式統(tǒng)一

這一點(diǎn)想必不用多說(shuō)，擁有相同功能、含義、層次結(jié)構(gòu)的組件保持樣式上的統(tǒng)一可以使用戶快速理解這個(gè)組件的操作方式，降低用戶學(xué)習(xí)成本。想一想，如果為一個(gè)新聞 APP 的首頁(yè)做卡片式設(shè)計(jì)，使用不同的樣式，不僅作為設(shè)計(jì)師會(huì)很累，用戶也會(huì)很累。

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

所以，相同的組件保持樣式上的統(tǒng)一是十分有必要的，不論是對(duì)快速制作原型完成界面設(shè)計(jì)的要求，還是對(duì)降低用戶學(xué)習(xí)成本的考量，都不應(yīng)該把相同的組件設(shè)計(jì)得相去甚遠(yuǎn)。

2. APP風(fēng)格保持統(tǒng)一

除了頁(yè)面內(nèi)部的組件或元素具備一定的相似性之外，頁(yè)面與頁(yè)面之間也需要，這是為了 APP 整體風(fēng)格的統(tǒng)一。

應(yīng)用（或網(wǎng)站）風(fēng)格的統(tǒng)一是 UI 設(shè)計(jì)中相當(dāng)重要的一個(gè)論題，統(tǒng)一的風(fēng)格能夠讓用戶清晰地感知到自己處在同一個(gè)應(yīng)用（或網(wǎng)站）中，而不是覺(jué)得點(diǎn)一下就跳到了別人家的地盤里，這不僅僅是用戶體驗(yàn)的要求，也是視覺(jué)上的需求。

正如我之前強(qiáng)調(diào)的那樣，細(xì)節(jié)上面保持統(tǒng)一就可以使用戶將這些頁(yè)面聯(lián)系起來(lái)，認(rèn)為它們屬于同一個(gè)應(yīng)用。

應(yīng)用案例2：小黑盒發(fā)現(xiàn)頁(yè)、游戲頁(yè)、個(gè)人頁(yè)

我們會(huì)覺(jué)得這幾個(gè)頁(yè)面屬于同一個(gè)應(yīng)用，因?yàn)樗鼈兌季邆湟恍┫嗤募?xì)節(jié)特征，比如一致的分頁(yè)組件、相同大小的圓角、不斷復(fù)現(xiàn)的色彩（小黑盒中主要是主色黑色）、相同的字體、有規(guī)律的字號(hào)字重、一些相同形式的 icon 等等，這些小細(xì)節(jié)相互影響并不斷加強(qiáng)我們對(duì)頁(yè)面相似處的感知，所以我們會(huì)覺(jué)得這些頁(yè)面的風(fēng)格是統(tǒng)一的。

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

3. 特異點(diǎn)更易獲得視覺(jué)焦點(diǎn)

反過(guò)來(lái)思考，在相似的元素中，突然躥出一個(gè)截然不同的東西，你立馬就會(huì)被其吸引，這其實(shí)也是相似性原理的一種逆向應(yīng)用的方法。

應(yīng)用案例3：豆瓣書(shū)影音頁(yè)特異點(diǎn)的應(yīng)用

最顯眼的是那些沒(méi)被選中的、全部長(zhǎng)得一模一樣的 tab 嗎？不是，最顯眼的是那個(gè)唯一長(zhǎng)得不一樣的，所以無(wú)論在什么時(shí)候用戶都能夠清楚地知道自己在哪個(gè)頁(yè)面。

注意事項(xiàng)

注意點(diǎn)1：相似不等于高度重復(fù)

有些初學(xué)者（或新人設(shè)計(jì)師）會(huì)做出一個(gè)頁(yè)面內(nèi)全是一模一樣的、雷同的模塊，沒(méi)有絲毫變化的設(shè)計(jì)，這其實(shí)是一個(gè)誤區(qū)。相似不等于過(guò)度重復(fù)，在那些有大量 feed 列表的應(yīng)用內(nèi)，過(guò)度重復(fù)尤其要命。

如果一個(gè)頁(yè)面從上到下看起來(lái)全是一模一樣的，頁(yè)面呆板沉悶不說(shuō)還全是字，這樣就會(huì)對(duì)用戶造成閱讀上的壓力。

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

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

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

注意點(diǎn)2：不同模塊不要做得太相似

比如說(shuō)，廣告。

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

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

一個(gè)是廣告，一個(gè)是正常的功能模塊，兩者長(zhǎng)得一樣，交互一樣，用戶就容易忽略那很小的廣告標(biāo)簽而誤點(diǎn)擊，從而進(jìn)入一個(gè)預(yù)期之外甚至?xí)咕艿膱?chǎng)景。

總結(jié)

• 利用相似性原理，使應(yīng)用內(nèi)頁(yè)面達(dá)到風(fēng)格統(tǒng)一；
• 特異點(diǎn)更容易獲得視覺(jué)焦點(diǎn)；
• 相似不等于過(guò)度重復(fù)。

參考文獻(xiàn)

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

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」