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

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

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

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

 

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

   

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

01.亮暗色的對比

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

 

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

 

 

 

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

 

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

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

 

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

 

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

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

 

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

 

 

03.色溫的對比

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

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

04.色彩強度的對比

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

 

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

 

05.形狀的對比——有機形狀和幾何形狀

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

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

 

 

06.形狀的對比：棱和角

  

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

07.質(zhì)感對比

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

 

在下圖案例中，磨砂質(zhì)感為整潔的logo加入了一點復(fù)古的感覺。磨砂質(zhì)感或破壞處理能夠為你的設(shè)計添加一點復(fù)古或磨損的效果。

 

 

 

08.尺寸和層次的對比

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

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

 

09.視覺重量的對比

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

 

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

 

 

 

10.邊距的對比

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

 

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

 

 

11.比例分割的對比

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

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

 

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

 

12.出人意料的對比

 

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

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

 

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

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

下面這個圖片設(shè)計師的名片運用了圖案來平衡及組織文字，使其成為視覺焦點。而且這種圖案設(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ù)量來形成對比，比如在幾組元素之間加入一個單獨元素或在幾個單獨元素中加入一組元素，就會使這個或這組元素成為焦點。

 

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

 

16．視覺線索的對比

 

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

 

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

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

  

18.字體的對比

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

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

 

根據(jù)經(jīng)驗，最好選擇一種襯線字體和一種非襯線字體來設(shè)置對比，因為通常來說，互補的兩種元素會產(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è)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)