具有相似視覺(jué)特征的物體最有可能是相關(guān)的，或者至少在用戶界面設(shè)計(jì)方面應(yīng)該如此。清晰、一致地為每種類型的UI元素應(yīng)用可視化規(guī)則對(duì)于幫助用戶輕松地理解和使用設(shè)計(jì)至關(guān)重要。這是因?yàn)槊看谓换ザ紩?huì)開(kāi)發(fā)出用戶對(duì)其他類似元素如何發(fā)揮作用的期望。

定義：相似原則表明，具有相同視覺(jué)特征的項(xiàng)目被認(rèn)為比不相似的項(xiàng)目更相關(guān)。

由于相似原則，這種形狀的網(wǎng)格通常被認(rèn)為是四列（而不是三行，或者是一個(gè)大的組）。每種形狀類型構(gòu)成一組。

相似原則是20世紀(jì)初格式塔心理學(xué)家發(fā)現(xiàn)的視覺(jué)分組原則（以及接近性和閉合性）的原始集合之一。這些心理學(xué)家的目的是了解人們是如何從視覺(jué)上感知世界的，并決定某些元素是否屬于同一群體。后來(lái)，更多的分組原則（如公共區(qū)域）被添加到原始格式塔列表中。

視覺(jué)設(shè)計(jì)師可以也應(yīng)該使用這些格式塔原則來(lái)創(chuàng)建可用的用戶界面。

1、使用共享特征表示關(guān)系

相似性原則簡(jiǎn)單地說(shuō)，當(dāng)物品具有某種視覺(jué)特征時(shí)，它們被假定在某種程度上是相關(guān)的。這些物品不需要完全相同，只要至少有一個(gè)明顯的特征，比如顏色、形狀或大小，就可以被認(rèn)為是同一組的一部分。

相似性原則與其他幾個(gè)可視化分組原則不同，因?yàn)楣蚕淼奶卣骺梢栽诜植嘉恢玫那闆r下將元素統(tǒng)一起來(lái)。此外，視覺(jué)上相似的項(xiàng)目也可能是其他基于位置的分組的一部分。因此，雖然相似性原則不一定是最強(qiáng)的分組原則，因?yàn)樗?jīng)常被鄰近或共同區(qū)域所壓倒，但它可以被認(rèn)為是最具彈性的。

2、顏色

應(yīng)用共享的顏色來(lái)表示某些項(xiàng)目是相關(guān)的，因此可能具有相似的功能，這是很強(qiáng)大的。共同的顏色往往比其他特征（如形狀）更突出，因此可以用來(lái)統(tǒng)一不同類型的元素，并表明它們確實(shí)是相關(guān)的。

色彩是一種強(qiáng)烈的相似性特征，它可以將不同類型的元素統(tǒng)一起來(lái)。在這里，共享的藍(lán)色創(chuàng)建行的感覺(jué)，盡管柱狀排列的形狀。

顏色繼續(xù)作為一種清晰的共同特征，創(chuàng)造出一種分組的感覺(jué)，即使是在不同形狀的隨機(jī)模式中使用。

在用戶界面設(shè)計(jì)中，顏色通常用來(lái)表示常用的功能。例如，這是一個(gè)最佳實(shí)踐是使用一個(gè)鏈接顏色作為主要通信方式向用戶可點(diǎn)擊：共享顏色允許點(diǎn)擊元素來(lái)突出作為一個(gè)群體不管頁(yè)面上的鏈接的位置，與純非交互的文本出現(xiàn)在默認(rèn)文本顏色。這種鏈接顏色應(yīng)該只保留給交互文本和其他可點(diǎn)擊元素，因?yàn)橛脩魰?huì)認(rèn)為所有共享這種特征的項(xiàng)目都是相關(guān)的，并且以相同的方式工作。因此，鏈接顏色不應(yīng)該用于關(guān)鍵詞，不可點(diǎn)擊的標(biāo)題，或附近不能點(diǎn)擊的圖標(biāo)。

上傳圖標(biāo)和它下面的錄制或上傳視頻按鈕都是紅色的，看起來(lái)好像是同一組。在這樣的設(shè)計(jì)中，用戶可能會(huì)認(rèn)為點(diǎn)擊圖標(biāo)或按鈕都會(huì)觸發(fā)相同的功能——然而，這個(gè)圖標(biāo)純粹是裝飾性的，不能點(diǎn)擊。

相同顏色的按鈕會(huì)被認(rèn)為具有相同的重要性。因此，應(yīng)該為主要的動(dòng)作調(diào)用保留一個(gè)單獨(dú)的顏色，以幫助它們?cè)诖我粹o中脫穎而出。在下面的示例中，消息中心中的所有按鈕都是綠色的，因此用戶必須花時(shí)間弄清楚哪個(gè)是提交表單的主按鈕。（此外，提交按鈕遠(yuǎn)離消息區(qū)，而且根據(jù)菲茨定律，這種距離的不近也會(huì)降低用戶的速度。）

Synchrony Bank消息中心的Submit按鈕與Cancel和Add Attachment按鈕的顏色相同，并與這些二次操作混合在一起。

3、形狀

正如在前面的插圖中看到的，形狀還可以用來(lái)表示分組。在界面設(shè)計(jì)中，我們經(jīng)常對(duì)某些元素使用相同的矩形形狀來(lái)表示它們都是按鈕或樣式某些類別鏈接為圓形或圓形的"藥丸"形狀來(lái)加強(qiáng)它們之間的關(guān)系。

Asos.com上的子類別鏈接都被做成圓角矩形，以加強(qiáng)他們的群體感知，并傳達(dá)他們類似導(dǎo)航的功能。與此相反，下面矩形形狀的過(guò)濾器表明，這一組具有不同的功能。

當(dāng)元素共享一個(gè)形狀時(shí)，我們可能會(huì)認(rèn)為它們是相同的，從而忽略了一些細(xì)節(jié)，比如附加標(biāo)簽、形狀中的小文本和形式中的細(xì)微差異。如果元素實(shí)際上是不同的，那么這可能會(huì)產(chǎn)生問(wèn)題。例如，Makr平板電腦應(yīng)用程序中產(chǎn)品導(dǎo)航中的幾個(gè)圖標(biāo)形狀非常相似，其中兩個(gè)圖標(biāo)是相同的。視覺(jué)上的相似性會(huì)錯(cuò)誤地傳達(dá)出類別是相關(guān)的——除非有目的地將這些類別放在一起？在確保一組圖標(biāo)在視覺(jué)上一致和暗示非有意的對(duì)之間的關(guān)系過(guò)于強(qiáng)烈之間有一條很好的界限。

避免使用形狀相同或非常相似的圖標(biāo)來(lái)代表不同的類別，因?yàn)樗鼈兛赡苠e(cuò)誤地表明一種關(guān)系。在Makr應(yīng)用程序的導(dǎo)航中，保存日期和RSVPs使用了相同的圖標(biāo)，感謝卡也使用了另一個(gè)非常類似的圖標(biāo)。

同樣，我們過(guò)去研究視覺(jué)指標(biāo)作為列表中的項(xiàng)目的差異發(fā)現(xiàn)，用戶能夠更快更準(zhǔn)確地找到某些項(xiàng)目指標(biāo)有一個(gè)獨(dú)特的形狀，如果指標(biāo)顯得過(guò)于相似，需要花費(fèi)很長(zhǎng)的時(shí)間來(lái)掃描，發(fā)現(xiàn)他們是如何不同。例如，在Etsy的主頁(yè)上，一些產(chǎn)品被標(biāo)記為免費(fèi)送貨或具有類似形狀指標(biāo)的暢銷產(chǎn)品。幸運(yùn)的是，這兩個(gè)指標(biāo)至少是不同的顏色，暢銷書(shū)指標(biāo)包括一個(gè)小圖標(biāo)，以幫助在視覺(jué)上區(qū)分他們是一個(gè)不同的組與免費(fèi)送貨的商品。

免費(fèi)送貨和暢銷書(shū)的指標(biāo)用不同顏色的圓角矩形括起來(lái)，暢銷書(shū)還包括一個(gè)特殊的圖標(biāo)。這些特征使得這兩個(gè)指標(biāo)很容易區(qū)分。如果它們的顏色相同，共享的形狀會(huì)使它們看起來(lái)太相似，并會(huì)減慢用戶的速度。

如果使用得當(dāng)，在整個(gè)界面中重復(fù)顯示相同的圖標(biāo)，說(shuō)明這些相關(guān)元素將以類似的方式運(yùn)行。例如，不同的圖標(biāo)可以顯示哪些菜單項(xiàng)是指向著陸頁(yè)面的鏈接，哪些是指向伸縮菜單的鏈接，或者哪些鏈接可以將用戶發(fā)送到外部站點(diǎn)。下面的例子來(lái)自Etsy主頁(yè)，箭頭圖標(biāo)被放置在各種元素的旁邊，以表明它們是可點(diǎn)擊的，而不是使用類似的顏色特征。

箭頭圖標(biāo)同樣放置在每個(gè)可點(diǎn)擊元素的旁邊。這表明它們?cè)诠δ苌鲜窍嗨频?，盡管字體處理不同。

4、尺寸

大小也可以用來(lái)表示信號(hào)關(guān)系。大小相似的物體很可能被認(rèn)為是相關(guān)的，通常具有相同的重要性水平。

圖中較大的圓圈與較小的圓圈相比，可能被認(rèn)為是相關(guān)的，屬于不同的組。

在用戶界面中，我們經(jīng)常使用大小來(lái)強(qiáng)調(diào)內(nèi)容或行動(dòng)的哪些區(qū)域是最重要的。同樣的大小意味著同樣的視覺(jué)突出，并且，在所有其他事物相同的情況下，連接所有共享這一屬性的元素。始終如一地使用大小創(chuàng)建一個(gè)視覺(jué)層次結(jié)構(gòu)，并使頁(yè)面易于掃描，因?yàn)槿藗兛梢粤⒓纯吹讲⒗斫膺@些類型分組。

例如，在產(chǎn)品列表頁(yè)面中，每個(gè)單獨(dú)的產(chǎn)品列表都以相同的大?。ê拖嗤男螤睿╋@示。這種一致的視覺(jué)樣式告訴我們，該區(qū)域的所有項(xiàng)目都是產(chǎn)品；共享的大小將它與其他不同的UI元素分開(kāi)。當(dāng)一個(gè)產(chǎn)品以不同的大小或形狀出現(xiàn)在這個(gè)列表中時(shí)，它會(huì)被認(rèn)為不屬于產(chǎn)品分組。例如，在Anthropologie.com網(wǎng)站上，產(chǎn)品系列的促銷活動(dòng)的規(guī)模是單個(gè)產(chǎn)品列表的兩倍。

與周圍的產(chǎn)品列表相比，產(chǎn)品集合的促銷信息以更大的尺寸顯示，以有效地傳達(dá)它們是不同類型的內(nèi)容元素。

相反，當(dāng)不同類型的內(nèi)容以相同或非常相似的大小顯示時(shí)，它們通常被認(rèn)為是相關(guān)的——即使它們是不同的。這個(gè)問(wèn)題通常發(fā)生在網(wǎng)站的右欄，那里的實(shí)際內(nèi)容和外部廣告通常以相似的大小顯示。因?yàn)橛脩粝Ｍ谡_的軌道上看到廣告，所以所有的內(nèi)容都受到橫幅盲目性的影響，特別是在樣式類似的情況下。這就是為什么在我們的教學(xué)視頻研究中，一些參與者完全沒(méi)有看到瑪莎·斯圖爾特網(wǎng)站上展示如何折疊餐巾的視頻教程——它的大小和周圍所有展示廣告的大小一模一樣。

用戶將這篇Martha Stewart how-to文章右邊的視頻誤認(rèn)為是一個(gè)廣告，因?yàn)樗拇笮『托螤钆c該區(qū)域的其他廣告相似。

5、許多其他相似的特征

顏色、形狀和大小并不是顯示相似的唯一方式；還有更多的視覺(jué)特征可以用來(lái)傳達(dá)某些相關(guān)元素。相同的字體處理（粗體、斜體等）可以表明文本片段是相關(guān)的，并表示相同類型的信息。類似地，方向甚至移動(dòng)都可以表明元素屬于同一組，并且可能具有相同的意義或功能。相似原理在視覺(jué)設(shè)計(jì)中無(wú)處不在，幾乎在所有存在的界面設(shè)計(jì)中都可以看到相似的效果。

在我們關(guān)于人類思維和可用性的培訓(xùn)課程中學(xué)習(xí)更多關(guān)于視覺(jué)感知，它如何應(yīng)用于UI設(shè)計(jì)，以及其他心理學(xué)原理。