做設計的同學都知道這句話，叫做：無對比不設計。雖然很多人都知道對比在設計中的重要程度，但在工作中卻還是會出現前面所說的那些問題。所以本期的內容就以對比作為切入點，解決上面所說的問題。

首先，什么是對比？

通俗一點來講，對比就是一個元素與另外其他元素相互比較的設計手法，通過營造視覺元素之間的差異化，從而制造視覺沖突。

這里主要說下在使用對比手法時的誤區：

1. 對比不夠明朗：這也是很多新手設計師會犯的失誤，明明使用了對比，但差異化的體現總是似有非有，不夠直觀。下面看個錯誤的案例：

2. 對比缺少目的性：尤其是當畫面元素多時，這也想強調那也想強調，結果導致畫面缺少主次關系、元素與元素之間相互搶。

對比的重點在于：你想要強調的元素是什么，就通過對比的手法讓他跟其他元素形成視覺上的明顯差異化。

你有沒有想過，在設計工作中，運營和老板常說的：放大、標紅、加粗具體指的是什么？

答案是：對比！

對比是不可或缺的重要設計手法之一，可以說只要是設計師，就離不開對比。那么該有人問了：對比在設計中的作用有哪些？

第一：對比是信息整理的好手段，他能讓用戶快速分別出哪些是主要信息，哪些是次要信息，提高閱讀效率。

第二：改變作品呆板、單調的視覺感受，提升畫面整體的跳躍率以及層次感。

第三：強烈的對比能提升視覺沖擊力，讓畫面更加生動、有趣。

第四：對比手法還可以提升作品的出彩度，更吸引用戶眼球。

對比手法在設計中的具體表現形式有很多種，比如：大小、長短、粗細、顏色、材質、形態、留白、虛實、方向、透視、圖文、文字、表情、年齡等等。

雖然說對比手法在設計中的表現形式多種多樣，但在作用及目的性上，很多也都是有共通性的，下面我們就以對比目的作為分類，逐一來說。

說到對比，最被人所熟知的作用就是突出主體，通俗點理解就是通過對比的手法讓用戶知道哪個是主角、哪些是配角。

不管是通過大小、長短、粗細、形態、色彩、形態等等不同的表現手法，都要確保能形成明顯的視覺差異化，讓元素之間互為參照物，舉個簡單的例子：

很顯然，紅色色塊更吸引人的眼球，也更容易引起注意，因為周圍黑色色塊都很雷同，沒有明顯的視覺沖突，而相反，紅色色塊與其他元素不同，差異化很強烈，所以這就是通過色彩對比的表現形式突出了主體。

這里不得不提格式塔原理：人類會無意識之中，把相同形狀或形狀、形態相似的物品看做一個整體。對比就是利用了這個原理，制造視覺差異化，突出你想突出的視覺元素。 

下面看幾個類似的案例：

通過色彩對比，重點主體得到了凸顯，其他視覺元素保持了相對統一，這就是對比最基本的作用。同樣適用于其他表現形式：大小、促銷、長短、虛實……

其實在設計中，只要恰當的使用對比手法，對于作品整體的層次感提升就有幫助，比如最簡單的大小對比：

如圖所示，在層級上已經算是有大有小、有主有次了，可以說是設計中最簡單的層次感體現方式了。即使最簡單的對比，也能體現出視覺上的層級關系，如果是為了提升設計作品整體的層次感，那么對比可以做的更豐富一些，比如：結合大小、虛實的對比形式，對于層次感的提升會很有幫助。

下面看兩個案例：

如圖所示，虛實對比的手法讓作品具備了一定空間上的前后遮擋關系，視覺層次上給人的感覺更加豐富、立體。

再比如我們經常看到的產品場景圖，也很喜歡使用這種虛實對比的形式展示：

虛化的視覺元素是為了體現整體的層次，實物是主體，為了突出強調的，這樣就形成了虛實對比。

類似的案例還有：

這里需要說一點：視覺層次感不單純指空間維度的變化，還可以通過提升整體視覺豐富度來體現，比如下面這個案例：

如上圖案例所示，單純的看左側黑白稿，僅僅通過大小、粗細對比就讓整體在視覺上很有層次感。再看右側案例，在左側基礎上結合色彩對比的形式，使得整體層次感受更加豐富，而這種層次感就是通過視覺豐富度進行體現的。

強調：對比的形式不要拘泥于某一種，可以相互結合使用，這樣不管對于信息整理還是主次關系、層次感，都會起到很好的加強、輔助的作用。

有些時候，作品會給人感覺很平淡、枯燥，這讓很多設計師頭疼，而通過對比手法就可以改善以上問題。

首先簡單的理解下跳躍率：版面上“大塊的部分”與“小塊的部分”之間的比叫做“跳躍率”，通俗一點來說：就是大塊與小塊之間的對比強度。

而對比強度的體現可以是一種或者多種。

下面看個案例：

如上圖所示，左側和右側案例從設計的角度來說都很好，只是兩者給人的感覺有些不同，左側案例給人一種相對安靜、統一的視覺感受。而右側案例則通過明顯的色塊分割，形成了很強烈的視覺沖突，使得作品整體給人的感覺更加活躍、富有跳躍性，也更有層次感。類似的案例還有：

大多數情況下可以這么理解：在視覺元素不變的情況下，對比強度越強，作品的活躍度就越大，再舉個很簡單的例子：

雖然文案都一樣，但兩者給人的視覺感受卻天差地別，很顯然右側作品視覺上更富有跳躍性，文字信息更有層次感。這一切都要歸功于對比的手法，因為加強了對比，所以作品在視覺上給人的感受也更活躍。

當你的作品總是給人很單調、呆板、平淡、缺少亮點時，不妨仔細審查一遍作品有沒有做好對比？

但也要強調：作品并不是越跳躍就越好，比如一些作品本身就是想營造一種安靜、統一的感覺。而像兒童節海報，整體感覺活躍一些會更好。所以一定要結合最終目的進行設計。

首先我們先來說下：設計感對于作品來說有用嗎？比如我們常說的點綴性的元素、英文、線條等等，其元素本身在作品中并沒有太大的含義，只是起到輔助、點綴的作用。

所以你可能會聽到甲方或者老板問你：為什么要加英文，誰能看懂？

除了填充空白的作用，還有個目的就是提升作品的設計感。舉個現實中的例子：同時有兩女生站在男生面前，一位普普通通，另一位膚白貌美大長腿，你會看誰多一眼？

人向往美好事物是天性！延伸到設計中一樣如此。

但需要注意的是：不要一味的強調設計感而忽略了目的性，設計感也許可以讓你原本70分的作品向90分提升，但肯定不會將50分作品提升到70分，因為你最基本的都沒做好，談設計感就是本末倒置了。

如何更直觀的理解呢？看下面這張示例：

同樣都是以設計二字為主體，下面兩個案例就屬于過分強調設計感而忽略了目的性，關鍵文字的識別性高于一切設計感。而上側兩個案例，相比而言，右側在兼顧文字識別性的前提下，給人的感覺更新穎、富有層次感和設計感。

所以當標題性關鍵文案經特殊處理后，與常規文字就形成了對比，可以理解為對比手法中的形態對比，下面看個案例：

如圖所示，案例就用到了文字之間肌理和大小的對比形式，不僅豐富了主次文案的層次，還間接的提升了作品整體的設計感。

類似的案例還有：

綜上所述：尤其是形態、虛實、空間、圖文、角度、位置此類的對比形式，對作品設計感的提升有很大幫助。

多數情況下，形式感強的對比都會依附于常規對比形式之上，也就是說先要做好基礎，再追求設計感。要切記：設計目的高于設計感！

說到氛圍感大家并不陌生，比如：對抗、活潑、有趣、激烈等等，而常用的對比手法就有提升氛圍感的作用，比如：強烈的色彩對比，能體現出對抗、激烈、活潑的氛圍；空間位置對比能體現出有趣……

下面看幾個案例：

如圖所示，案例通過顏色對比的形式，即冷暖色對比，加強了作品整體的氛圍感和視覺沖擊力，也正因如此，使得作品給人的視覺感受更加立體。對比無處不在，往往一些很有意思的創意都來源于對比手法，只是呈現形式有所不同而已，比如：

貓與虎在形態上形成了強烈的對比，作品給人的感受有趣、新穎，這就是對比所帶來的氛圍感受。

類似的案例還有：

前面也說了，對比在一定程度上也能體現出對抗、激烈的氛圍，除了被大家所熟知的冷暖色對比外，還有哪些？下面看幾個案例：

通過位置、表情、形態的對比，也可以體現出激烈、對抗的氛圍感受。

通過整篇文章你會發現，即使同樣的對比手法，有時候所帶給我們的視覺感受也各不相同，往往在強調某一作用時，無形之中也兼顧了另外其他的作用，比如：當對比是強調突出主體時，也兼顧了整體層次感……

所以在工作中，我們無需刻意強調哪種對比形式對應哪種作用，因為很多都是互通的，根據自己的設計目的，做到靈活使用即可。

原文地址：美工美邦（公眾號）

作者：美工美邦

然而在實際的對比中，你需要從全部的項目上去思考，這是設計的重要原則之一。對比是為了將設計中的重要元素進行分類整理，然后按照不同的重要階層來傳遞給讀者。設計的重點，不僅僅是為了傳遞出焦點（英: Focal Point），也要給用戶帶來視覺性的趣味。相同大小的形狀，顏色按照布局并列的放在一起，可能會讓你覺得無聊。但是，如果在這之中加入對比，設計立馬就變得有趣起來了。
 

當然很多的設計概念是相同的，平衡對于對比來說也是非常重要的。如果對比度太高，做成之后就變得混亂，視線就不能馬上落在重要的東西上了。

那么，靈活運用對比的秘密究竟是什么呢？令人悲傷的是，并沒有那樣完美的魔法公式。就像學習設計技巧一樣，學習的過程往往是無意識的積累案例的過程。這是設計師們所擁有的不可思議的力量，所以千萬不要放棄。我們可以將與對比有關的項目情報進行整理，為了加上視覺的趣味性，成為誰都可以利用的設計工具。這需要有哪些需要注意的點與技術呢？這次就讓我們一起來看一看吧。

詳細從以下開始。

讓設計增加對比的方法。

1.將色彩的明暗增加對比

值（英: Value）是指，色彩的亮度或者暗度的表示用語。使用白色和黑色，可以做成無數的對比值（英: Contrasting Value）。但是，當作成對比度強的設計時，也就沒有必要使用黑色和白色了。通過調整色彩的明暗度來增強對比使設計中的一部分變得可見是最簡單的技術之一。

在下面的這個設計案例中，在照片上配上文字會使其變得難以閱讀，在白色的文字上添加紫色到藍色的漸變色，就成了一個很好的對比。

2.利用色相，色調增加對比

色相，色調（英：Hue）是指，在從很久以前就開始使用的12色色輪中，所選擇的特定的顏色名稱的繪畫用語。但是這種色彩的原理，不管是繪畫還是網頁設計，都可以去利用他。不知道從什么世紀開始，為了創建出對比的組合，畫家們就開始利用色輪上的對比色了。

1.互補色（英: Complementary）：他指的是選擇色輪上面對面的那一組顏色，例如紅和綠，藍和橙。互補色的特點是高對比度，所以如何掌握顏色之間的平衡，也就成了難點。

在下面的設計案例中，使用了簡單的互補色，他看起來非常的有吸引力，他將圖像中的各種情報都整理的很好，是非常具有實際意義的設計案例。

2.分散互補色（英: Split-Complementary）：他只的是選中主色之后，分布在主色對面的互補色兩側相鄰的顏色。這種配色有較強的視覺對比，可以設計出有著強烈碰撞的設計效果。

3.三色系（英: Triadic）：他指的是選中主色后，以主色畫一個等邊三角形的配色方案。

當你在使用色輪進行設計時，我們要有“沒必要只是用純色”這樣的念頭。在越來越多的實踐中，不斷的去嘗試提高降低顏色的明度和各種各樣的顏色組合，來表現出最棒的對比效果吧。

3.利用色溫增加對比

所有的顏色都是有溫度的，他可以被分為暖色（英: Warm）、冷色（英: Cool）或者中性色（英: Neutral）。紅色、橙色或者黃色會給人溫暖的感覺，而藍色、綠色則會給人冷的感覺，黑和白就給人中性的感覺（還有些不常見的米色和茶色，也歸屬這一類。），顏色就按這樣來進行劃分。利用顏色的溫度的不同來進行配色，例如暖色和冷色進行組合，可以給人一種巨大的反差。

就好像下面這個設計案例，使用鮮艷的藍色和黃色這樣不同的色溫，在網頁布局上實現了對比。像這樣，Call−to−Action（行為召喚：http://cued.xunlei.com/log046）將按鈕與背景區分出來，產生引人注意的效果。更進一步來說，什么樣的顏色被稱為寒色（呈綠色的色調：英: ‘Greenish’ Tinge）等，已經有一個統一的對比的組合。

4.利用顏色的濃度增加對比

顏色的濃度（英: The Intensity of A Color），也被稱為色彩飽和度（英: Saturation）。純粹明亮的顏色，他的飽和度狀態就是100%；越是接近灰色，他的飽和度也就越低。明亮的色調和黑色一起使用的話，就能產生特別的引人注意的效果。在設計中可以作為一個特別的組成部分，為了強調出重要的部分，一定要謹慎的使用。

在下面的這個設計案例中，可以使用降低了飽和度的橙紅色，將其放置在山頂同樣降低了飽和度的綠色上。利用互補色組合（英：Complementary Color Scheme），通過調整色彩的飽和度來吸引眼球，為你的設計賦予更多的活力。

5.利用圖形增加對比：幾何圖形VS不規則圖形

大多數圖形（英: Shape），是可以被分類為具有幾何意義的幾何圖形（英: Geometric）（例如長方形，三角形和圓形），或者不規則（英: Organic）（流線型（英: Fluid）或者受自然影響的形狀（英:Nature-Inspired））。在均勻對稱的幾何圖形的角落，使用一些柔和的非對稱（英: Asymmetrical Quality）的不規則圖形，可以進行很好的對比。

下面的這個設計案例，在復雜抽象的（英: Abstract）有機圖片中，我們可以看到，很好的插入了強調排版的直線和曲線，他們補充的位置非常好。

6.利用圖形增加對比：銳角邊VS曲線邊

在使用圖形幫助設計的另一個方法，就是利用邊框。在任何設計要素中，比如按鈕，就可以使用銳角邊（英: Edges）或者是曲線邊（英: Corner）。按鈕的形狀越柔軟，圓滑，給人的視覺效果就越友好。角的形狀越是整齊，給人的感覺就越是嚴肅。（參考：http://www.jianshu.com/p/f575891409c8）通過兩種不同的形狀，我們可以創建一個對比。在下面這個設計案例中，我們可以看到很好的利用了銳角和曲線進行排版，表現出了一種驚人的對比感。

7.利用紋理增加對比

圖片相同，設計的要素不同，例如使用紋理（英: Textures），對比的效果也就出來了。粗糙（英: Rough）與細致（英: Smooth），硬（英：Hard）與軟（英: Soft），立體（英: Raised）與平面（英: Flat）等。作為特殊的打印加工，紋理和別的技術不同，可以應用于任何內容。通過使用網絡上免費的素材，可能性是非常廣闊的。

在下面這個案例中，在清爽的LOGO上，添加上砂質紋理（英: Gritty），表現出一種復古的質感。粗糙質感的紋理和復古的顏色，是為了表現出復古氛圍的最佳選擇。

8.利用比例和尺寸增加對比

對比不僅可以增加視覺趣味，也可以幫助我們展現相關聯的設計要素的優先級。如果設計要素的尺寸相同，就無法表現出他們的層級（英: Hierachy）關系。不管是怎樣的讀者，我們都需要將重要的東西優先傳達給他們。有效的利用比例（英: Scale），在實踐中不僅非常重要，在添加動態布局設計中，也是非常簡單的一種技術。

在下面這個設計案例中，使用了被擴展的非常大的照片作為雜志封面，也不會對其他的設計要素進行干擾。實際上，通過調整大小，形狀和配色、版式，可以強調出照片的焦點部分。

9.利用視覺重量增加對比

在比例和尺寸相同的情況下，利用視覺重量（英: Visual Weight）【http://uec.nq.com/works/176】就可以將設計中重要的部分給凸顯出來了。在視覺重量中，將那個元素與剩余的元素進行顯著的區分，這種方法我們稱之為高對比度（英: High-Contrast）。被視覺重量所采用的設計要素，沒有必要是最大的。此外，通過使用紋理。配色和圖形等，給他一種【重（英: Weighty）】的印象，也能做出有魅力的設計。

在下面的設計案例中，是介紹在美國辛辛那提，有著當地文化氣息的建筑的明信片。當然，建筑在明信片中是最大的設計要素，但關鍵詞“Enjoy more”卻更能吸引眼球。這當然是因為，他的顏色是最暗（英: Darkest）的。

10.利用留白增加對比

在有限的空間中，為了最大化的填入信息，我們常利用填補式的設計，但留白或者空白（英: Blank），負（英: Negative）空間等方法，將設計要素進行區分/整理，做成一個平衡的布局，也是非常重要的。當然，如果你在設計時使用了很多復雜的布局，在設計重要的要素時就要記得留白。通過這種方法，你可以將用戶的時間集中到重要的要素上，從而和其他的要素產生有效的對比。

在下面的這個設計案例中，留白和細邊框線相結合，我們就完成了將網頁信息精辟概括的設計模型。在左右上下進行了適當的留白，在產品信息中也利用了留白，引起了用戶的興趣。

11.利用構圖增加對比

當你開始做設計時，需要有一定的布局的概念。那么，如何讓設計變得平衡而不枯燥，動而不亂，想明白了這點，作品就會變得非常有魅力。我們可以從舊時代的藝術家和攝影師身上來學習構圖的方法。

①.三分割法（英: The rule of thirds）：也是老生常談的一種方法。有時也稱作井字構圖法，是一種在攝影、繪畫、設計等藝術中經常使用的構圖手段。在這種方法中，攝影師需要將場景用兩條豎線和兩條橫線分割，就如同是書寫中文的“井”字。這樣就可以得到4個交叉點，然后再將需要表現的重點放置在4個交叉點中的一個即可。

下面的這個設計案例中，作為banner的圖片就利用了三分割法，將玫瑰放在了重要的地方，是一種非常方便均衡的構圖方法。

②.對角（英: Diagonals）：對角線或S形布局，可以給你的設計賦予一些流動感（英: Flow），幫助誘導用戶的視線。相較于正常的網格布局，它可以給你的設計帶來更多的樂趣。

12.利用意料之外的要素增加對比

介紹這個合成效果方法的一個理由是，讓用戶對這個要素期望不大。利用適當的設計手法，賦予要素驚奇的感覺，從而產生對比。設計是一個自然的主題，通過添加上鮮艷流動的色彩，打破之前固有的規則，從而引起讀者的興趣。

在下面這個設計案例中，將文字和照片上的山組合在一起，將邊框隱藏在山后而資卻放在山前，非常簡單，且易于理解。

13.利用重復來增加對比

在設計戰略上，通過不斷重復（英: Repeating）利用設計要素和圖案素材，創建一個視覺焦點，會產生與上圖的合成技術類似的視覺效果。此外，通過不斷的重復利用主題本身，你就能完成更好的設計。

在下面這個設計案例中，通過重復利用圖案，讓文字成為焦點，很好的完成了平衡。在設計上成功的反應出了，和LOGO相呼應的效果。

14.利用位置和方向來增加對比

無論哪種設計，控制信息結構（英: Struction）是很有必要的。在文字或設計要素上，通過一定的編排，確保有留白的空間。整理你的設計，讓他具有一致性（英: Consistency），然后我們再有目的的去打破、混合，從而引起用戶的興趣。

在下面的這個設計案例中，LOGO的設計使用了稍微沿著對角線稍稍向上傾斜，這立刻將它與其他沿直線分布的要素區別出來了。另外，通過使用和其他印刷字體有顯著區別的手寫體，進一步的提高了對比度。

15.利用接近、分離來增加對比

將你的設計要素進行整理，有目的的將要素進行分組，讓要素之間的關聯性變得易懂，使其更容易的引導用戶。同樣的，將沒有關聯的要素分離獨立出來，讓用戶易于了解，他們是不同的兩個信息。此外，利用對比，還能將要素的數量表示出來。例如，在大量的設計要素中，單獨存在的要素肯定會脫穎而出。

下面這個設計案例，是使用了大量文字的個人簡歷設計，良好的結構（英: Structure）會便于閱讀。在這里，利用了接近（英: Proximity），對齊（英: Align）和配色技術相結合，將信息進行劃分，誘導視線，使之更容易閱讀。

16.利用視覺提示增加對比

根據最近的一項研究，人類記住的東西80%都是看到的，在這之中，優秀的設計也是幫助記憶的強大工具之一。但是要注意的是觀看的時間其實是很短的，引導用戶的視線，就顯得很有必要了。在這種情況下，好的視覺提示（英: Visual Cues），能起到不錯的作用。我們可以直截了當的使用箭頭標記希望用戶看到的要素，或者在它周圍畫個圈，來進行強調。

在下面的設計案例中，在文字下面使用了下劃線（英: Underline），著重號（英: Bullet Points）和圖標，可以看出是很好的利用了視覺化的概念。

17.利用復雜和簡單增加對比

復雜（英: Complex）或簡單（英: Simple），利用這些個別的要素，可以進一步強化對比。在下面這個設計案例中，成功的利用了貼紙設計技術，通過在鮮花背景上放置一個清爽的白板，將文字與周圍進行區分，讓設計發生了急劇的變化。

18.利用字體組合來增加對比

在版式設計中，這是必不可少的設計要素，你可以用這種獨特的方式來增加對比。事實上，在這篇文章中所涵蓋的技術中，都可以應用到版式設計中。但在使用字體組合或這自己創建一個自定義的字體時，有特別需要注意的幾點。

那么接下來我們來看一下在字體設計上最后需要注意的三點。首先，是字體組合（英: Combining Fonts）。當使用一種以上的字體時，良好的對比，是確保其成功的關鍵；當標題使用了，就不要將他再次使用在正文中了。如果標題和正文的字體太過相似，就會讓用戶變得混亂。這也是非常容易犯的一個錯誤。

另一個經驗，可以選擇一種襯線（英: Serif）字體一種無襯線（英: Sans Serif）字體。這種組合不但能互補，也是一種非常好的對比效果。至于其他的字體組合技術，你們可以參考這篇文章【http://photoshopvip.net/78213】【http://www.digitaling.com/articles/12293.html】，我就不進行詳細的講解了。

19.利用文字進行對比需要小心

在字體組合中，使用設計性區別很大的字體非常容易導致失敗。除非你有意去這樣設計，否則就會非常難看。由字體的組合，可以決定設計的好壞。將各種各樣的字體組合記錄到你的筆記本中，不斷的練習吧。字體組合這項技能，你可以利用電腦去摸索各種各樣的組合，總有一天會掌握的（英: Second Nature）。

在下面的這個設計案例中，利用不同的字體營造了一個非常有趣的氛圍，類似YES/NO形式的流程圖。值得參考的地方是，字體的區別（英: Loud）不是很大，一直保持著平衡。通過有目的的巧妙編排，表現出了很棒的設計。

20.利用字體的風格和重量來增加對比

很多字體，都有著類似Light、Bold這樣廣泛的自定義范圍。就算你只用一種字體來設計，都可以產生很多種不同的對比，讓我們的設計變得更輕松。除了不同的重量，大小和配色方案，你能強調的對比有很多種。

在下面這個設計中，使用了粗和細兩種無襯線字體，給人一種洗練的感覺。實際上襯線字體作為客串也被使用了，進一步的增加了對比感。

這些都是從過去的經驗之中誕生的，非常實用的可以增加對比度的設計方法。那么，讓我們一起在實踐中去嘗試這些方法吧~一起來感受設計的樂趣~

Via: Lofter