具有相似視覺特征的物體最有可能是相關(guān)的，或者至少在用戶界面設計方面應該如此。清晰、一致地為每種類型的UI元素應用可視化規(guī)則對于幫助用戶輕松地理解和使用設計至關(guān)重要。這是因為每次交互都會開發(fā)出用戶對其他類似元素如何發(fā)揮作用的期望。

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

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

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

視覺設計師可以也應該使用這些格式塔原則來創(chuàng)建可用的用戶界面。

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

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

相似性原則與其他幾個可視化分組原則不同，因為共享的特征可以在分布位置的情況下將元素統(tǒng)一起來。此外，視覺上相似的項目也可能是其他基于位置的分組的一部分。因此，雖然相似性原則不一定是最強的分組原則，因為它經(jīng)常被鄰近或共同區(qū)域所壓倒，但它可以被認為是最具彈性的。

2、顏色

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

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

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

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

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

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

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

3、形狀

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

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

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

避免使用形狀相同或非常相似的圖標來代表不同的類別，因為它們可能錯誤地表明一種關(guān)系。在Makr應用程序的導航中，保存日期和RSVPs使用了相同的圖標，感謝卡也使用了另一個非常類似的圖標。

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

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

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

箭頭圖標同樣放置在每個可點擊元素的旁邊。這表明它們在功能上是相似的，盡管字體處理不同。

4、尺寸

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

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

在用戶界面中，我們經(jīng)常使用大小來強調(diào)內(nèi)容或行動的哪些區(qū)域是最重要的。同樣的大小意味著同樣的視覺突出，并且，在所有其他事物相同的情況下，連接所有共享這一屬性的元素。始終如一地使用大小創(chuàng)建一個視覺層次結(jié)構(gòu)，并使頁面易于掃描，因為人們可以立即看到并理解這些類型分組。

例如，在產(chǎn)品列表頁面中，每個單獨的產(chǎn)品列表都以相同的大小（和相同的形狀）顯示。這種一致的視覺樣式告訴我們，該區(qū)域的所有項目都是產(chǎn)品；共享的大小將它與其他不同的UI元素分開。當一個產(chǎn)品以不同的大小或形狀出現(xiàn)在這個列表中時，它會被認為不屬于產(chǎn)品分組。例如，在Anthropologie.com網(wǎng)站上，產(chǎn)品系列的促銷活動的規(guī)模是單個產(chǎn)品列表的兩倍。

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

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

用戶將這篇Martha Stewart how-to文章右邊的視頻誤認為是一個廣告，因為它的大小和形狀與該區(qū)域的其他廣告相似。

5、許多其他相似的特征

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

在我們關(guān)于人類思維和可用性的培訓課程中學習更多關(guān)于視覺感知，它如何應用于UI設計，以及其他心理學原理。