了解對比如何在設(shè)計中發(fā)揮作用，在用戶界面中可以找到哪些類型的對比，以及為什么它對積極的用戶體驗很重要。

一般而言，“對比”一詞用于描述彼此截然不同的對象。談到視覺感知，對比度基本上與顏色或光線的差異有關(guān)，可以使物體清晰可辨。

為什么對比度很重要？因為人眼自然會捕捉到對比度。圖像的最高可能對比度稱為對比度或動態(tài)范圍。更重要的是，對于色盲等視力不佳的人來說，對比度成為他們看到的物體的核心特征，并讓他們能夠區(qū)分它們。

在學術(shù)藝術(shù)中，對比處理對立元素和效果的排列，例如明暗顏色、大小形狀、粗糙或光滑的紋理。在這種情況下，對比不僅可以用來吸引注意力，還可以設(shè)置情緒和氛圍，在藝術(shù)品中創(chuàng)造多樣性、視覺趣味和戲劇性。

在設(shè)計中，對比度是影響效果的關(guān)鍵因素之一。 可掃描性網(wǎng)頁或移動屏幕的視覺層次結(jié)構(gòu)。它使設(shè)計師能夠以一種方式呈現(xiàn)布局，告知用戶哪些交互點是重要的，哪些是次要的。對比度可以有效地吸引用戶的注意力并將其吸引到特定元素上，因此它在支持數(shù)字產(chǎn)品的直觀導(dǎo)航和可用性方面發(fā)揮著重要作用。

Pass-On 應(yīng)用程序登錄頁面的設(shè)計展示了有效的顏色和尺寸對比示例，為頁面構(gòu)建了堅實的視覺層次結(jié)構(gòu)。

UI設(shè)計中的對比類型

對比可以基于 UI 元素的不同特性，包括：

A. 顏色：這種類型是人眼最自然和最明顯的對比之一；它適用于顏色明顯不同的情況，例如，通過互補、分裂互補或三元方案組合，這種類型的對比最廣泛地用于制作按鈕和其他關(guān)鍵導(dǎo)航元素。在網(wǎng)頁布局或應(yīng)用程序屏幕中立即看到，支持清晰直觀的導(dǎo)航。

B. 大小：這種類型的對比是基于首先引起注意的元素明顯大于其他元素。

C. 形狀：通過使一個元素的形狀與其他元素不同來吸引用戶的眼球。

D. 位置：在這種類型中，設(shè)計師以這種方式更改一個元素的位置，使其看起來不同，例如，文本片段的新段落以縮進開頭。

E. 紋理：這里的差異是由于使用彼此明顯區(qū)分的紋理而建立的。

F. 方向：改變元素的物理位置，使其在其他方向，這樣以不尋常的方式吸引用戶的注意力。

經(jīng)常想到的關(guān)于對比度的第一個想法是黑白的東西。在沒有陰影和多種顏色的情況下，單色圖像使用對比度作為表現(xiàn)潛力的主要助推器。這在用戶界面中的工作方式相同。更重要的是，與藝術(shù)品或攝影作品相比，對比度不僅會影響美感，而且對布局的可用性也有重大影響。因此，深思熟慮的對比度使用是使網(wǎng)站和應(yīng)用程序用戶友好且易于使用的強大方法。

排版對比

另一種特定類型的對比是排版對比，它基于設(shè)計作品文本部分所用字體的區(qū)別特征的差異。

加拿大字體設(shè)計師卡爾·戴爾定義了 7 種核心類型的排版對比：

A. 尺寸對比：它是關(guān)于由表格創(chuàng)建的基本圖案的物理放大和用于文本的類型的重量。這里最常見的情況是使標題或標題明顯大于文本。

B. 重量對比：粗體在同款較輕的對比中突出。它有助于將注意力吸引到文本的特定部分，并讓用戶了解它們的重要性。

C. 形式對比：這里的形式是指大寫字母和小寫字母之間的區(qū)別，或者羅馬字母和它的斜體變體，壓縮和擴展版本，與標準類型協(xié)調(diào)的腳本類型——所有提到的都可以用于戲劇性的形式的改變。

D. 結(jié)構(gòu)對比：結(jié)構(gòu)意味著不同類型字體的不同字母形式，例如單線無襯線與高對比度現(xiàn)代，或斜體與黑體。

E. 紋理對比：這是關(guān)于字體的線條如何看起來像一個整體，這部分取決于字體本身，部分取決于它們的排列方式。

F. 顏色對比：第二種顏色通常不如基本的白底黑字（或黑底白字）強調(diào)，因此必須仔細考慮需要強調(diào)的元素并注意色調(diào)值使用的顏色。

G. 方向?qū)Ρ龋哼@種類型是關(guān)于垂直和水平之間的對立以及它們之間的角度。出文本塊也有它們的垂直或水平方面，將寬的長線塊與高的短線列混合可以產(chǎn)生對比。

另外，還有一些不太流行的對比，比如所謂的孤立對比，就是把一個詞或詞組放在遠離其他元素的地方，這樣就可以從人群中脫穎而出，以及對比按節(jié)奏（空間間隔）——破碎的部分形成對比并吸引注意力。

對比輔助功能

閱讀上面提到的所有內(nèi)容，很容易假設(shè)這里的經(jīng)驗法則是對比度越高，設(shè)計越好。然而，事實并非如此：以及任何其他設(shè)計方面太多并不意味著更好。雖然低對比度會使內(nèi)容難以感知和閱讀，但過高的對比度會引起眼睛疲勞，使交互更加困難。

根據(jù)網(wǎng)頁內(nèi)容無障礙指南 2.0，文字的視覺呈現(xiàn)和文字的圖像應(yīng)該堅持至少 7:1的對比度，以下情況除外：

大文本：大文本和大文本圖像的對比度至少為 4.5:1；

裝飾：作為界面組件的一部分的文本或文本圖像，作為裝飾沒有對比度要求。

標識：作為徽標或品牌名稱一部分的文本沒有最低對比度要求。

注意留白

空白是留空的布局區(qū)域，不僅在對象周圍，還包括對象之間和內(nèi)部?？瞻资琼撁婊蚱聊簧纤袑ο蟮囊环N呼吸空間，因此它極大地影響了 UI 中應(yīng)用的不同類型對比度的有效性。

總結(jié)

生活充滿了對比，無論你會采取什么方面。對于所有的生命，我們必須學會如何接受這一點，并嘗試享受如此多樣化和不可預(yù)測的生活。與現(xiàn)實相呼應(yīng)，設(shè)計也充滿對比，并盡可能多地借鑒。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)