如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

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

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

 

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

   

如何在設計中加入對比

01.亮暗色的對比

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

 

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

 

 

 

02.色調的對比

 

色調是畫家用來稱呼某一種特定顏色的術語，也就是色環上的十二種顏色之一。這種色彩理論對圖片和網頁設計也十分有用，我們可以借鑒這種畫家用來制造強烈對比的方法來進行設計。以下是一些經典色彩搭配的色環。

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

 

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

 

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

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

 

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

 

 

03.色溫的對比

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

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

04.色彩強度的對比

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

 

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

 

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

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

下圖的商標設計融入大量有機的抽象形狀，對整齊的文字排版進行補充和突出。

 

 

06.形狀的對比：棱和角

  

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

07.質感對比

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

 

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

 

 

 

08.尺寸和層次的對比

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

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

 

09.視覺重量的對比

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

 

我們來看看這一系列美國辛辛那提市為宣傳當地文化場所而發行的明信片。各種建筑插圖是每一張明信片上的最大元素，但是“Enjoy More”的標語卻是最醒目的，因為它是整個畫面中最暗的元素。

 

 

 

10.邊距的對比

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

 

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

 

 

11.比例分割的對比

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

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

 

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

 

12.出人意料的對比

 

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

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

 

13.重復元素和圖案的對比

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

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

 

 

14.位置和方向的對比

每一項設計都需要一定的組織結構。文本需要通過某種方法排列在一起，各種元素需要放置在布局中某些特定的位置，空白的分布也需要仔細設定。雖然連貫性是統一設計的關鍵，但是有目的性地、恰當地將一些元素打亂卻能創造出有趣的對比。

 

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

 

15.間距的對比

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

 

好的結構對于簡歷之類以文本為主的設計來說尤為關鍵，適當的間距、排列和顏色使用都能夠使其變得層次分明、一目了然。

 

16．視覺線索的對比

 

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

 

17.復雜和簡單元素的對比

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

  

18.字體的對比

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

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

 

根據經驗，最好選擇一種襯線字體和一種非襯線字體來設置對比，因為通常來說，互補的兩種元素會產生很好的對比效果。

 

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

 

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

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

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

 

 

 

20.字體風格和重量的對比

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

 

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

 

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務