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

對比并不僅僅只是黑與白或大與小

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

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

 

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

   

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

01.亮暗色的對比

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

 

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

 

 

 

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

 

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

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

 

下圖這個徽章使用了簡單的對比色來創(chuàng)造醒目的視覺效果，同時也將設(shè)計分成幾個不同的部分。

 

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

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

 

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

 

 

03.色溫的對比

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

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

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

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

 

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

 

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

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

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

 

 

06.形狀的對比：棱和角

  

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

07.質(zhì)感對比

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

 

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

 

 

 

08.尺寸和層次的對比

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

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

 

09.視覺重量的對比

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

 

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

 

 

 

10.邊距的對比

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

 

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

 

 

11.比例分割的對比

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

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

 

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

 

12.出人意料的對比

 

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

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

 

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

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

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

 

 

14.位置和方向的對比

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

 

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

 

15.間距的對比

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

 

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

 

16．視覺線索的對比

 

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

 

17.復(fù)雜和簡單元素的對比

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

  

18.字體的對比

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

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

 

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

 

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

 

19.使用字體對比的注意事項

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

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

 

 

 

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

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

 

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

 

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