作者整理了 20 條經(jīng)典原則，并通過正反例子說明這些原則在設(shè)計(jì)中是如何運(yùn)用的。系統(tǒng)學(xué)習(xí) 20 條經(jīng)典原則，讓你的設(shè)計(jì)更有說服力。

簡介說明

1. 理論表述

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

2. 理論背景

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

上一篇鄰近性表達(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é)包括但不限于：

? 矩形比例、圓角大小、描邊樣式

? 不同字段對應(yīng)的字體、字重、字號(hào)、色彩

? 顏色的明度、飽和度、色相

? 圖標(biāo)樣式、色彩、大小

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

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

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

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

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

除了頁面內(nèi)部的組件或元素具備一定的相似性之外，頁面與頁面之間也需要，這是為了 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)站）中，而不是覺得點(diǎn)一下就跳到了別人家的地盤里，這不僅僅是用戶體驗(yàn)的要求，也是視覺上的需求。

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

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

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

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

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

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

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

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

注意事項(xiàng)

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

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

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

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

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

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

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

比如說，廣告。

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

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

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

總結(jié)

? 利用相似性原理，使應(yīng)用內(nèi)頁面達(dá)到風(fēng)格統(tǒng)一；

? 特異點(diǎn)更容易獲得視覺焦點(diǎn)；

? 相似不等于過度重復(fù)。

作者：超人的電話亭