2021-9-26 鶴鶴
世界中從不缺少的就是對(duì)比，人和人的對(duì)比，價(jià)格和價(jià)格的對(duì)比，生活和生活的對(duì)比，而今天我說(shuō)的，是設(shè)計(jì)中的對(duì)比，是按鈕、顏色、排版布局的對(duì)比，設(shè)計(jì)中通過(guò)有效的對(duì)比技法，可以更加快速的傳遞產(chǎn)品信息，從而提升用戶(hù)體驗(yàn)。
對(duì)比，是把具有明顯差異、矛盾和對(duì)立的雙方安排在一起，進(jìn)行對(duì)照比較的表現(xiàn)手法。對(duì)比是把對(duì)立的意思或事物、或把事物的兩個(gè)方面放在一起作比較，讓讀者在比較中分清好壞、辨別是非。
那么，為什么說(shuō)對(duì)比度很重要呢？因?yàn)槿搜圩羁焖俨蹲降降木褪菍?duì)比度。而圖像的最高可能對(duì)比度，我們稱(chēng)它為對(duì)比度或動(dòng)態(tài)范圍。更重要的是，對(duì)于色盲等弱視視覺(jué)障礙的人來(lái)說(shuō)，對(duì)比度顯得更加重要，因?yàn)槭挛锏膶?duì)比度是成為他們看到的物體的核心特征，使他們能夠區(qū)分它們，沒(méi)有了對(duì)比度，對(duì)他們而言，也就失去了視覺(jué)。
在學(xué)術(shù)藝術(shù)中，對(duì)比是處理對(duì)立元素和效果的一種排列方式，例如：明暗顏色、大小形狀、粗糙或光滑的紋理。在這種情況下，對(duì)比不僅可以用來(lái)吸引注意力，還可以設(shè)置情緒和氛圍，在藝術(shù)品中創(chuàng)造多樣性、視覺(jué)趣味和戲劇性。
在設(shè)計(jì)中，對(duì)比度還是影響效果的關(guān)鍵因素之一。 不管是PC端網(wǎng)頁(yè)還是手機(jī)中的APP，它們的視覺(jué)層次、結(jié)構(gòu)，設(shè)計(jì)師在通過(guò)對(duì)比度設(shè)計(jì)后，也能夠以一種獨(dú)特的方式呈現(xiàn)，并告知用戶(hù)哪些交互點(diǎn)是重要的，哪些是次要的。同時(shí)，對(duì)比度還可以有效地吸引用戶(hù)的注意力并將其吸引到特定元素上，因此它在產(chǎn)品的直觀引導(dǎo)和可用性方面也發(fā)揮著重要作用。
Lucibel的網(wǎng)站設(shè)計(jì)展示了純粹的單色顏色對(duì)比，為頁(yè)面構(gòu)建了堅(jiān)實(shí)的視覺(jué)層次結(jié)構(gòu)。
LAUDEMIO的品牌網(wǎng)站使用黑色背景和產(chǎn)品主體進(jìn)行層次分離，最后加上白色文案說(shuō)明
對(duì)比在UI中具有很多不同的特征屬性，其中就包括：
顏色：顏色是人眼最快發(fā)現(xiàn)和最明顯對(duì)比之一，它適用于各種內(nèi)容下使用，例如：通過(guò)互補(bǔ)色、對(duì)比色或類(lèi)似色進(jìn)行多種組合。這鞋方式最廣泛地用于潔面按鈕、導(dǎo)航、卡片、產(chǎn)品背景等地方，就是希望用戶(hù)能在打開(kāi)的第一時(shí)間看到，并快速進(jìn)行操作使用。
大小：這種對(duì)比類(lèi)型是希望重要元素或內(nèi)容首先引起用戶(hù)注意所使用的，多數(shù)情況下設(shè)計(jì)師會(huì)將元素設(shè)計(jì)成明顯大于其他元素。
形狀：這種對(duì)比類(lèi)型屬于形狀改變，通過(guò)使一個(gè)元素的形狀與其他元素不同來(lái)吸引用戶(hù)的眼球。
位置：在這種類(lèi)型中，設(shè)計(jì)師以這種方式更改行中一個(gè)元素的位置，使其看起來(lái)不同，我們看到最多的這種對(duì)比案例就是閱讀文本片段時(shí)，新段落會(huì)以縮進(jìn)開(kāi)頭。
紋理：這里的差異是由于使用彼此明顯區(qū)分的紋理而建立的。
方向：在這里，設(shè)計(jì)師通過(guò)更改元素的物理位置，使其使用其他或意想不到的方向進(jìn)行，通過(guò)這種不尋常的方式來(lái)吸引用戶(hù)的注意力。
以上這幾種對(duì)比類(lèi)型，我現(xiàn)在通過(guò)可視化的方式為大家呈現(xiàn)一遍，這樣可以加深大家對(duì)對(duì)比的理解。
不同特征屬性的對(duì)對(duì)比方式
其實(shí)，多數(shù)人只要想到對(duì)比，我想第一想到的會(huì)是黑白的東西吧。在沒(méi)有陰影和多種顏色的情況下，單色的對(duì)比度是表現(xiàn)潛力最好的形式。更重要的是，與藝術(shù)品或攝影作品相比，對(duì)比度不僅會(huì)影響美感，而且對(duì)布局的可用性和可見(jiàn)性也有重大影響。因此，對(duì)比度的使用應(yīng)該算是用戶(hù)最友好、最易于使用的方法了。
F2Pool APP的界面中，顏色對(duì)比有助于數(shù)據(jù)和內(nèi)容形成分割，便于用戶(hù)閱讀使用
區(qū)塊鏈APP界面通過(guò)使用多色的插畫(huà)設(shè)計(jì)，使整體產(chǎn)品更加具有活力和動(dòng)感，同時(shí)吸引力更強(qiáng)
根據(jù)相關(guān)數(shù)據(jù)結(jié)果表明，“黑白”的配色方式，是對(duì)用戶(hù)幫助和引導(dǎo)最大的。所以，使用黑白配色進(jìn)行對(duì)比，可以有效提升用戶(hù)的體驗(yàn)。當(dāng)然，多色對(duì)比也是可以的，這里我提供一個(gè)色輪配色法，大家可以自行采納。
該色輪可以幫助設(shè)計(jì)師找到最佳水平的顏色組合
除了剛才說(shuō)到的哪些，接下來(lái)我在說(shuō)一種對(duì)比類(lèi)型，它主要是基于字體的區(qū)別進(jìn)行做排版對(duì)比的。
這里提供幾種關(guān)于字體、排版的對(duì)比方式：
尺寸：通過(guò)對(duì)字體字號(hào)的設(shè)定進(jìn)行對(duì)比實(shí)現(xiàn)，可以有效的展示主次分明。比如以及標(biāo)題使用30px的字號(hào)，而內(nèi)容文本則使用24px的字號(hào)。
重量：主要的方式是將字體加粗呈現(xiàn)，在視覺(jué)上看起來(lái)更加具有厚重感，這樣加粗的文本在視覺(jué)上會(huì)更加具有地位和突出性。
結(jié)構(gòu)：形式在這里可以理解成是字體的字像，通過(guò)改變字體字象進(jìn)行區(qū)別，比如標(biāo)準(zhǔn)的蘋(píng)方體和花體就是很好的視覺(jué)對(duì)比。
形式：將字體加以?xún)A斜，也可以呈現(xiàn)出不一樣的結(jié)果。
顏色：這里的顏色不光是指字體顏色本身，同時(shí)也可以為字體添加背景色，用來(lái)襯托字體。
方向：通過(guò)改變單個(gè)字體的方向、或一句話(huà)的排列方向，都可以形成有效的對(duì)比效果。
藝術(shù)學(xué)院概念展示的不同類(lèi)型排版對(duì)比
說(shuō)了剛才那么多，可能你已經(jīng)抓住了設(shè)計(jì)的要害，那就是對(duì)比度越高，設(shè)計(jì)就越好。其實(shí)，并不是這樣的，任何事物都需要掌握一個(gè)度，超過(guò)那個(gè)度，有時(shí)候就會(huì)適得其反。雖然我們知道對(duì)比度會(huì)使內(nèi)容更加明顯，但是你還應(yīng)該知道，過(guò)高的對(duì)比度也會(huì)使用戶(hù)感到疲勞。按照文本視覺(jué)呈現(xiàn)的正確比例，我們應(yīng)該將對(duì)比度控制在7:1之間才是比較合適的選擇。
在當(dāng)前這個(gè)概念A(yù)PP界面中，通過(guò)明顯的顏色來(lái)提升按鈕的視覺(jué)焦點(diǎn)，同時(shí)，加粗的文本也是重點(diǎn)提醒，這些手法都是便于閱讀和操作的方式
除了剛才說(shuō)到的這些對(duì)比方式和規(guī)則外，作為設(shè)計(jì)師，還應(yīng)該考慮的一些問(wèn)題。
內(nèi)容加在了圖片上，要是用高對(duì)比度
由于圖片本身的體積較大，覆蓋面積也大，所以用戶(hù)在瀏覽時(shí)，視覺(jué)很容易會(huì)被圖片吸引過(guò)去，但是，由于圖片內(nèi)容的情況，很多相關(guān)文案就會(huì)顯得柔弱不堪，在這種情況下，一般的對(duì)比就無(wú)法解決視覺(jué)問(wèn)題了，而是需要你加大提高文案和背景的對(duì)比，比如使用了類(lèi)似黑色圖片的背景，就要使用純白色文本，如果使用了亮色的圖片背景，文本就需要考慮使用暗色。
注意對(duì)比度給用戶(hù)帶來(lái)的傷害
這種情況多數(shù)出現(xiàn)在閱讀類(lèi)產(chǎn)品上，比如我們?nèi)粘Ｊ褂玫男≌f(shuō)類(lèi)app，產(chǎn)品里就有一種功能叫做背景自定義，它的主要目的就是擔(dān)心用戶(hù)在長(zhǎng)時(shí)間閱讀的情況下產(chǎn)生視覺(jué)疲勞，所以需要設(shè)計(jì)柔和的背景進(jìn)行自定義切換。有的產(chǎn)品還會(huì)增加字體大小、顏色修改、夜間模式等多個(gè)功能，都是為了降低對(duì)比度，使用戶(hù)在體驗(yàn)上不再那么刺眼。
留白的重要性
留白是極其重要的設(shè)計(jì)手法之一，它同樣是產(chǎn)生對(duì)比的好技法，通過(guò)給產(chǎn)品界面留有適當(dāng)?shù)目瞻子嗟兀墒巩a(chǎn)品具有通透感，用戶(hù)在使用產(chǎn)品時(shí)也不會(huì)產(chǎn)生壓抑，另外由于留白是大面積的空白空間，這也就產(chǎn)生了和密集內(nèi)容的強(qiáng)烈對(duì)比。
最后總結(jié)一下所有的內(nèi)容，我們可以定義一下對(duì)比度的幾個(gè)關(guān)鍵優(yōu)勢(shì)和好處：
更強(qiáng)的視覺(jué)層次
更好的專(zhuān)注
創(chuàng)意氛圍
增強(qiáng)可讀性
與人類(lèi)自然感知和反應(yīng)的對(duì)應(yīng)
生活充滿(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.wtxcl.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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.wtxcl.cn