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

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

為什么對(duì)比度很重要？因?yàn)槿搜圩匀粫?huì)捕捉到對(duì)比度。圖像的最高可能對(duì)比度稱(chēng)為對(duì)比度或動(dòng)態(tài)范圍。更重要的是，對(duì)于色盲等視力不佳的人來(lái)說(shuō)，對(duì)比度成為他們看到的物體的核心特征，并讓他們能夠區(qū)分它們。

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

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

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

UI設(shè)計(jì)中的對(duì)比類(lèi)型

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

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

B. 大?。哼@種類(lèi)型的對(duì)比是基于首先引起注意的元素明顯大于其他元素。

C. 形狀：通過(guò)使一個(gè)元素的形狀與其他元素不同來(lái)吸引用戶(hù)的眼球。

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

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

F. 方向：改變?cè)氐奈锢砦恢茫蛊湓谄渌较?，這樣以不尋常的方式吸引用戶(hù)的注意力。

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

排版對(duì)比

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

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

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

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

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

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

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

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

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

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

對(duì)比輔助功能

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

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

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

裝飾：作為界面組件的一部分的文本或文本圖像，作為裝飾沒(méi)有對(duì)比度要求。

標(biāo)識(shí)：作為徽標(biāo)或品牌名稱(chēng)一部分的文本沒(méi)有最低對(duì)比度要求。

注意留白

空白是留空的布局區(qū)域，不僅在對(duì)象周?chē)?，還包括對(duì)象之間和內(nèi)部?？瞻资琼?yè)面或屏幕上所有對(duì)象的一種呼吸空間，因此它極大地影響了 UI 中應(yīng)用的不同類(lèi)型對(duì)比度的有效性。

總結(jié)

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

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

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

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

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