如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

對(duì)比并不僅僅只是黑與白或大與小

對(duì)比實(shí)際上是每一項(xiàng)設(shè)計(jì)都應(yīng)體現(xiàn)的重要原則，因?yàn)閷?duì)比能夠組織設(shè)計(jì)并構(gòu)建設(shè)計(jì)的層次，也就是說(shuō)它能夠告訴觀眾什么才是最重要的部分。恰當(dāng)?shù)剡\(yùn)用對(duì)比不僅能強(qiáng)調(diào)焦點(diǎn)，還可以增添視覺(jué)趣味性。如果一項(xiàng)設(shè)計(jì)中的所有元素都是相同的尺寸、相同的形狀顏色，那么看起來(lái)就會(huì)十分枯燥，但加入一點(diǎn)對(duì)比就全然不同。

但是，與大多數(shù)設(shè)計(jì)概念一樣，在運(yùn)用對(duì)比的時(shí)候一定要記住掌握平衡。正所謂物極必反，太多的對(duì)比元素會(huì)導(dǎo)致混亂甚至是不和諧的視覺(jué)效果，如果你在所有設(shè)計(jì)元素中都使用了對(duì)比，反而會(huì)突不出重點(diǎn)，倒不如一開(kāi)始就不用對(duì)比。

 

那么怎樣才能恰如其分地運(yùn)用對(duì)比，提升設(shè)計(jì)品質(zhì)呢？很遺憾，并沒(méi)有什么萬(wàn)能公式可供套用，因?yàn)樗窃谠O(shè)計(jì)過(guò)程中不知不覺(jué)體現(xiàn)出來(lái)的。你可能會(huì)覺(jué)得這聽(tīng)起來(lái)像是某種只可意會(huì)的獨(dú)家秘方，實(shí)際上并非如此，對(duì)比是所有人都能學(xué)會(huì)的組織和增添視覺(jué)趣味的設(shè)計(jì)工具，想要知道其中的技巧就接著往下看吧。

   

如何在設(shè)計(jì)中加入對(duì)比

01.亮暗色的對(duì)比

色值是用來(lái)表示顏色亮暗程度的單位，純白和純黑是極限值。但是你并不一定要用黑白來(lái)創(chuàng)造強(qiáng)烈的對(duì)比，一點(diǎn)點(diǎn)色彩的亮暗對(duì)比就能讓設(shè)計(jì)中的某些部分更突出。

 

舉一個(gè)簡(jiǎn)單的例子，比如暗的文本搭配亮背景，或用亮文本搭配暗背景，就像下圖這個(gè)設(shè)計(jì)一樣。圖片上的文本很小，原來(lái)應(yīng)該很難辨認(rèn)，但設(shè)計(jì)師巧妙地將文本調(diào)成亮白色，背景調(diào)成暗的藍(lán)紫色，于是一下子就把文本凸顯出來(lái)了。

 

 

 

02.色調(diào)的對(duì)比

 

色調(diào)是畫家用來(lái)稱呼某一種特定顏色的術(shù)語(yǔ)，也就是色環(huán)上的十二種顏色之一。這種色彩理論對(duì)圖片和網(wǎng)頁(yè)設(shè)計(jì)也十分有用，我們可以借鑒這種畫家用來(lái)制造強(qiáng)烈對(duì)比的方法來(lái)進(jìn)行設(shè)計(jì)。以下是一些經(jīng)典色彩搭配的色環(huán)。

?互補(bǔ)色（complementary）:色環(huán)上相對(duì)的顏色，比如紅和綠或藍(lán)和橘；互補(bǔ)色具有高對(duì)比性和高密度性

 

下圖這個(gè)徽章使用了簡(jiǎn)單的對(duì)比色來(lái)創(chuàng)造醒目的視覺(jué)效果，同時(shí)也將設(shè)計(jì)分成幾個(gè)不同的部分。

 

?分散互補(bǔ)色（Split-Complementary）：由色環(huán)上的一種基本色和與該基本色的互補(bǔ)色相鄰的兩種顏色組成。這種色彩體系仍具有強(qiáng)烈的視覺(jué)對(duì)比性，但是沒(méi)有互補(bǔ)色搭配那么夸張。

?三色系（Triadic）：任何在色環(huán)上均勻分布的三種顏色。

 

要記住你沒(méi)有必要使用這些色調(diào)的最純色，就像我們?cè)谏h(huán)圖中會(huì)發(fā)現(xiàn)有些顏色搭配起來(lái)其實(shí)并不協(xié)調(diào)，選擇一些更深、更淺、更柔和的顏色對(duì)現(xiàn)實(shí)生活中的設(shè)計(jì)可能更加實(shí)用，但是你也可以借鑒其中一些好的搭配。

 

 

03.色溫的對(duì)比

顏色可以根據(jù)色溫分成幾個(gè)類型：暖色、冷色和中性色。紅、橘、黃屬于暖色；藍(lán)、綠為冷色；黑、白、灰為中性色（在某些情況下淡棕色和棕色也屬于中性色）。在設(shè)計(jì)種加入不同色溫的顏色搭配可以創(chuàng)造出強(qiáng)烈的對(duì)比效果，特別是冷色和暖色搭配。

例如，這個(gè)網(wǎng)頁(yè)設(shè)計(jì)運(yùn)用了淺藍(lán)色和亮黃色這兩種屬于不同色溫的顏色來(lái)進(jìn)行對(duì)比。這能夠喚起消費(fèi)者的行動(dòng)欲，而且也使主要畫面得到有效突出。由于這兩種顏色都偏冷調(diào)，而且都略微帶點(diǎn)綠，使得整個(gè)設(shè)計(jì)在強(qiáng)烈對(duì)比的同時(shí)還具有銜接性。

04.色彩強(qiáng)度的對(duì)比

色彩強(qiáng)度也叫作色彩飽和度。當(dāng)顏色達(dá)到最純最亮的時(shí)候，我們就說(shuō)這種顏色100%飽和，而如果一個(gè)顏色越灰它就越不飽和。亮色和暗色無(wú)論是單獨(dú)還是搭配使用都能有效地在設(shè)計(jì)中形成高低對(duì)比。亮色總能吸引人的注意，尤其是當(dāng)它以黑色為背景的時(shí)候，因此你可以用亮色來(lái)強(qiáng)調(diào)設(shè)計(jì)中的重要部分。

 

下圖的網(wǎng)頁(yè)設(shè)計(jì)就恰恰做到這一點(diǎn)，橙紅色的文本在灰綠色背景的襯托下顯得尤為突出。這其中不僅僅使用了醒目的互補(bǔ)色，還加入不同級(jí)別的飽和度來(lái)增強(qiáng)對(duì)比效果。

 

05.形狀的對(duì)比——有機(jī)形狀和幾何形狀

大部分形狀可以分為幾何形狀（橢圓形、三角形、圓形等）和有機(jī)形狀（液態(tài)形狀和自然啟發(fā)的形狀）兩大類。規(guī)整的幾何形狀可以和有機(jī)形狀的曲線等不對(duì)稱線條形成很好的對(duì)比。

下圖的商標(biāo)設(shè)計(jì)融入大量有機(jī)的抽象形狀，對(duì)整齊的文字排版進(jìn)行補(bǔ)充和突出。

 

 

06.形狀的對(duì)比：棱和角

  

另一種形狀對(duì)比的方法就是在字體或邊框等設(shè)計(jì)元素的棱角中運(yùn)用一點(diǎn)形狀。圓潤(rùn)的形狀使設(shè)計(jì)看起來(lái)更柔和、更隨意親切，而尖銳的形狀看起來(lái)就更整齊干脆。你可以結(jié)合二者來(lái)創(chuàng)造對(duì)比，下圖就結(jié)合文本運(yùn)用了這種對(duì)比。

07.質(zhì)感對(duì)比

就像形狀對(duì)比一樣，具有不同特性的質(zhì)感也可以用來(lái)創(chuàng)造對(duì)比，比如粗糙和光滑、堅(jiān)硬和柔軟、立體和平面等。任何質(zhì)感都是具有視覺(jué)性的（除非運(yùn)用了特殊的印刷效果或其他物理手段），只要你把在網(wǎng)上找到的各種素材與不同的設(shè)計(jì)主題相結(jié)合，就能創(chuàng)造出許多對(duì)比效果。

 

在下圖案例中，磨砂質(zhì)感為整潔的logo加入了一點(diǎn)復(fù)古的感覺(jué)。磨砂質(zhì)感或破壞處理能夠?yàn)槟愕脑O(shè)計(jì)添加一點(diǎn)復(fù)古或磨損的效果。

 

 

 

08.尺寸和層次的對(duì)比

對(duì)比除了能夠在設(shè)計(jì)中添加視覺(jué)趣味之外，還可以為不同的設(shè)計(jì)元素安排層次。如果設(shè)計(jì)中的所有元素大小相同，那么就不會(huì)有層級(jí)區(qū)別。觀眾怎樣才能知道什么是最重要的？顯然運(yùn)用層次就能既有效又簡(jiǎn)便地創(chuàng)造出動(dòng)態(tài)、有趣、戲劇化的效果。

這款雜志封面上的巨幅圖片強(qiáng)調(diào)了雜志的主題，但與此同時(shí)并沒(méi)有淹沒(méi)其他元素的光彩。實(shí)際上是字體的尺寸、形狀和色彩的綜合作用強(qiáng)調(diào)了圖片的主要焦點(diǎn)。

 

09.視覺(jué)重量的對(duì)比

就像層次對(duì)比一樣，視覺(jué)重量也是強(qiáng)調(diào)設(shè)計(jì)元素重要性的另一辦法。視覺(jué)重量指的是讓某一元素突出于其他元素的設(shè)計(jì)手法，換句話說(shuō)就是高對(duì)比。設(shè)計(jì)中具有最多視覺(jué)重量的元素（通常為設(shè)計(jì)的主要焦點(diǎn)）不一定要是頁(yè)面上最大的元素，你可以運(yùn)用色彩、質(zhì)感、形狀等特性來(lái)區(qū)分或突出某個(gè)元素。

 

我們來(lái)看看這一系列美國(guó)辛辛那提市為宣傳當(dāng)?shù)匚幕瘓?chǎng)所而發(fā)行的明信片。各種建筑插圖是每一張明信片上的最大元素，但是“Enjoy More”的標(biāo)語(yǔ)卻是最醒目的，因?yàn)樗钦麄€(gè)畫面中最暗的元素。

 

 

 

10.邊距的對(duì)比

很多人在設(shè)計(jì)的時(shí)候都想要盡可能地將整個(gè)版面填滿，但記得邊距在設(shè)計(jì)平衡的布局中起到非常重要的作用，它能夠歸納整理各種設(shè)計(jì)元素。當(dāng)你處理一個(gè)復(fù)雜布局時(shí)的時(shí)候，記得在重要元素周圍留出一些邊距（當(dāng)然不一定要是白色），這樣會(huì)把觀眾的注意力吸引到那些元素上，而且也讓這些元素與其他部分產(chǎn)生有效對(duì)比。

 

這個(gè)網(wǎng)頁(yè)設(shè)計(jì)使用空白和細(xì)分界線來(lái)有效組織信息。頁(yè)面左邊和右邊的兩欄環(huán)繞了一圈空白，而且產(chǎn)品圖片四周的空白范圍更大，使其成為吸引消費(fèi)者注意的中心。

 

 

11.比例分割的對(duì)比

從某種程度上說(shuō)，每一項(xiàng)設(shè)計(jì)都需要達(dá)到一種平衡。如何讓你的設(shè)計(jì)和諧而不無(wú)聊，活潑卻不浮躁？在兩者之間找到一個(gè)平衡點(diǎn)的好辦法就是比例的分割。通過(guò)學(xué)習(xí)藝術(shù)家作品中經(jīng)典的比例分割是掌握這種技巧的好辦法。

?三分之一法：將設(shè)計(jì)頁(yè)面分別從豎直和水平方向三等分分割，讓后把主要焦點(diǎn)放在某一個(gè)分割線相交點(diǎn)，這就是創(chuàng)建一個(gè)動(dòng)態(tài)布局的辦法。將所有元素不假思索地堆在頁(yè)面中央造就的只能是十分乏味的設(shè)計(jì)。

 

這個(gè)網(wǎng)站首頁(yè)的標(biāo)題和玫瑰花圖片大約就處于三分之一分割網(wǎng)的前兩個(gè)交界點(diǎn)，形成一種平衡的吸引眼球的布局。三組原則（Groups of Three，另一種比例分割法）也在該設(shè)計(jì)中體現(xiàn)。

 

12.出人意料的對(duì)比

 

之前提到的比例分割法發(fā)揮效用的一部分原因在于它是出人意料的，它達(dá)到的不是整齊劃一的典型效果。驚喜的元素使用是創(chuàng)造對(duì)比的好方法，比如在一個(gè)平淡的設(shè)計(jì)中加入明亮的顏色就能打破整齊劃一的感覺(jué)，從而吸引觀眾的興趣。

在這個(gè)登錄頁(yè)面中文本與圖像的互動(dòng)方式與眾不同，為原本簡(jiǎn)單直接的設(shè)計(jì)加入了一點(diǎn)活力。

 

13.重復(fù)元素和圖案的對(duì)比

巧妙地使用重復(fù)元素和圖案可以像比例分割法一樣創(chuàng)造焦點(diǎn)和視覺(jué)趣味性，而且重復(fù)視覺(jué)主題也可以讓設(shè)計(jì)更具效力。

下面這個(gè)圖片設(shè)計(jì)師的名片運(yùn)用了圖案來(lái)平衡及組織文字，使其成為視覺(jué)焦點(diǎn)。而且這種圖案設(shè)計(jì)也巧妙地為該品牌結(jié)合了一些個(gè)性化元素。

 

 

14.位置和方向的對(duì)比

每一項(xiàng)設(shè)計(jì)都需要一定的組織結(jié)構(gòu)。文本需要通過(guò)某種方法排列在一起，各種元素需要放置在布局中某些特定的位置，空白的分布也需要仔細(xì)設(shè)定。雖然連貫性是統(tǒng)一設(shè)計(jì)的關(guān)鍵，但是有目的性地、恰當(dāng)?shù)貙⒁恍┰卮騺y卻能創(chuàng)造出有趣的對(duì)比。

 

下圖的logo在整齊排列的文本中使用斜體來(lái)突出最關(guān)鍵的信息，除此之外，書寫體與正式的無(wú)襯線字體也是另一大對(duì)比。

 

15.間距的對(duì)比

有目的地組織元素可以向觀眾展現(xiàn)各個(gè)元素之間的關(guān)系，也可以為設(shè)計(jì)分出內(nèi)容層次，使其更容易理解。此外，還可以通過(guò)數(shù)量來(lái)形成對(duì)比，比如在幾組元素之間加入一個(gè)單獨(dú)元素或在幾個(gè)單獨(dú)元素中加入一組元素，就會(huì)使這個(gè)或這組元素成為焦點(diǎn)。

 

好的結(jié)構(gòu)對(duì)于簡(jiǎn)歷之類以文本為主的設(shè)計(jì)來(lái)說(shuō)尤為關(guān)鍵，適當(dāng)?shù)拈g距、排列和顏色使用都能夠使其變得層次分明、一目了然。

 

16．視覺(jué)線索的對(duì)比

 

研究表明人類能夠記住80%所看到的信息，這就是設(shè)計(jì)如此重要的原因之一。但是人們的注意廣度有時(shí)很有限，而且讀者有時(shí)候需要一點(diǎn)提示才能知道接下來(lái)應(yīng)該把注意力放到哪里，這個(gè)時(shí)候視覺(jué)線索便派上用場(chǎng)了。你可以運(yùn)用箭頭或高亮的圓圈等形狀直接指出要強(qiáng)調(diào)的設(shè)計(jì)元素；如果是在文本塊中，就是以下劃線、要點(diǎn)、符號(hào)等作為視覺(jué)線索（如下圖）。

 

17.復(fù)雜和簡(jiǎn)單元素的對(duì)比

簡(jiǎn)單和復(fù)雜的個(gè)性化元素混搭可以加強(qiáng)設(shè)計(jì)的對(duì)比效果。下圖是利用對(duì)比手法來(lái)突出設(shè)計(jì)元素的又一例子。這組便利帖將華麗復(fù)雜的花紋與簡(jiǎn)潔的字體搭配，兩種強(qiáng)烈對(duì)比的元素創(chuàng)造出戲劇化的效果。

  

18.字體的對(duì)比

文本是大多數(shù)設(shè)計(jì)的必要部分，同時(shí)也為創(chuàng)造對(duì)比提供更多可能。我們之前提過(guò)的創(chuàng)造對(duì)比的大多數(shù)方法都可以運(yùn)用到文本設(shè)計(jì)中，但是其中字體的選擇運(yùn)用或設(shè)計(jì)仍有許多特別的考量。

首先就是選擇不同的字體。如果你在設(shè)計(jì)中選擇一種以上的字體，那么就要確保這幾種字體能夠形成有效對(duì)比，所謂有效就是這些字體首先能夠通過(guò)視覺(jué)相互區(qū)別，而且它們之間的各種差異能具備不同的功能。比如一種字體可能用作標(biāo)題，另一種字體作為文本。但切記不要選擇類似的字體，因?yàn)檫@會(huì)給人一種印刷錯(cuò)誤的印象。

 

根據(jù)經(jīng)驗(yàn)，最好選擇一種襯線字體和一種非襯線字體來(lái)設(shè)置對(duì)比，因?yàn)橥ǔ?lái)說(shuō)，互補(bǔ)的兩種元素會(huì)產(chǎn)生很好的對(duì)比效果。

 

下圖logo中非襯線體和粗襯線體（以及書寫體）的對(duì)比完美平衡了整個(gè)設(shè)計(jì)。

 

19.使用字體對(duì)比的注意事項(xiàng)

當(dāng)你選擇使用不同字體的時(shí)候，肯定是為了創(chuàng)造對(duì)比效果而不是沖突。除非你刻意追求一種個(gè)性風(fēng)格，否則大多數(shù)沖突看起來(lái)效果都不好。然而并沒(méi)有固定的標(biāo)準(zhǔn)來(lái)評(píng)判對(duì)比效果的好壞，這往往取決于人的直覺(jué)，你要相信自己的判斷，借鑒一些出色的字體搭配，然后堅(jiān)持練習(xí)，直到你把這項(xiàng)技能變成一種習(xí)慣。

下圖的設(shè)計(jì)將各種不同的字體以一種活潑生動(dòng)的方式展現(xiàn)出來(lái)（也正好符合了這款設(shè)計(jì)的幽默主題），與此同時(shí)，沒(méi)有任何過(guò)于花哨的元素來(lái)引起沖突，所有的元素都相互合作，服務(wù)于設(shè)計(jì)目的。

 

 

 

20.字體風(fēng)格和重量的對(duì)比

許多字體都有一系列版本可供選擇，比如細(xì)體、粗體、斜體、長(zhǎng)體等等。這些選擇大大減輕了工作負(fù)擔(dān)，即使你只選擇一種字體，這種字體的的其他版本選擇也足以用來(lái)組織文本并創(chuàng)造有效對(duì)比。而且你還可以試著調(diào)整字體大小或顏色來(lái)設(shè)置另外的對(duì)比。

 

下圖的設(shè)計(jì)使用了同種無(wú)襯線字體的兩種重量來(lái)創(chuàng)造一種亮面的效果。此外，襯線字體的使用也表現(xiàn)出一種浮雕的效果，形成另一種對(duì)比。

 

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