編者按：可能是「對(duì)比」技法的最全面學(xué)習(xí)指南！對(duì)比是設(shè)計(jì)四大原則之一，可以增強(qiáng)吸引力，起強(qiáng)調(diào)作用，學(xué)會(huì)運(yùn)用這個(gè)技巧非常重要。今天@喪心病狂十六夜貓 這篇好文總結(jié)了20個(gè)利用「對(duì)比」做出亮點(diǎn)設(shè)計(jì)的方法，每一個(gè)都有實(shí)例演示，好學(xué)易上手。

如有翻譯錯(cuò)誤之處，還望不吝賜教。

在設(shè)計(jì)中的對(duì)比度（英: Contrast）是指，黑與白，大與小等等之類(lèi)的差異性。

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

當(dāng)然很多的設(shè)計(jì)概念是相同的，平衡對(duì)于對(duì)比來(lái)說(shuō)也是非常重要的。如果對(duì)比度太高，做成之后就變得混亂，視線就不能馬上落在重要的東西上了。

那么，靈活運(yùn)用對(duì)比的秘密究竟是什么呢？令人悲傷的是，并沒(méi)有那樣完美的魔法公式。就像學(xué)習(xí)設(shè)計(jì)技巧一樣，學(xué)習(xí)的過(guò)程往往是無(wú)意識(shí)的積累案例的過(guò)程。這是設(shè)計(jì)師們所擁有的不可思議的力量，所以千萬(wàn)不要放棄。我們可以將與對(duì)比有關(guān)的項(xiàng)目情報(bào)進(jìn)行整理，為了加上視覺(jué)的趣味性，成為誰(shuí)都可以利用的設(shè)計(jì)工具。這需要有哪些需要注意的點(diǎn)與技術(shù)呢？這次就讓我們一起來(lái)看一看吧。

詳細(xì)從以下開(kāi)始。

01 將色彩的明暗增加對(duì)比

ym201608072

值（英: Value）是指，色彩的亮度或者暗度的表示用語(yǔ)。使用白色和黑色，可以做成無(wú)數(shù)的對(duì)比值（英: Contrasting Value）。但是，當(dāng)作成對(duì)比度強(qiáng)的設(shè)計(jì)時(shí)，也就沒(méi)有必要使用黑色和白色了。通過(guò)調(diào)整色彩的明暗度來(lái)增強(qiáng)對(duì)比使設(shè)計(jì)中的一部分變得可見(jiàn)是最簡(jiǎn)單的技術(shù)之一。

在下面的這個(gè)設(shè)計(jì)案例中，在照片上配上文字會(huì)使其變得難以閱讀，在白色的文字上添加紫色到藍(lán)色的漸變色，就成了一個(gè)很好的對(duì)比。

ym201608073

02 利用色相，色調(diào)增加對(duì)比

ym201608074

色相，色調(diào)（英：Hue）是指，在從很久以前就開(kāi)始使用的12色色輪中，所選擇的特定的顏色名稱(chēng)的繪畫(huà)用語(yǔ)。但是這種色彩的原理，不管是繪畫(huà)還是網(wǎng)頁(yè)設(shè)計(jì)，都可以去利用他。不知道從什么世紀(jì)開(kāi)始，為了創(chuàng)建出對(duì)比的組合，畫(huà)家們就開(kāi)始利用色輪上的對(duì)比色了。

1. 互補(bǔ)色（英: Complementary）：他指的是選擇色輪上面對(duì)面的那一組顏色，例如紅和綠，藍(lán)和橙?；パa(bǔ)色的特點(diǎn)是高對(duì)比度，所以如何掌握顏色之間的平衡，也就成了難點(diǎn)。

在下面的設(shè)計(jì)案例中，使用了簡(jiǎn)單的互補(bǔ)色，他看起來(lái)非常的有吸引力，他將圖像中的各種情報(bào)都整理的很好，是非常具有實(shí)際意義的設(shè)計(jì)案例。

ym201608075

2. 分散互補(bǔ)色（英: Split-Complementary）：它指的是選中主色之后，分布在主色對(duì)面的互補(bǔ)色兩側(cè)相鄰的顏色。這種配色有較強(qiáng)的視覺(jué)對(duì)比，可以設(shè)計(jì)出有著強(qiáng)烈碰撞的設(shè)計(jì)效果。

3. 三色系（英: Triadic）：它指的是選中主色后，以主色畫(huà)一個(gè)等邊三角形的配色方案。

當(dāng)你在使用色輪進(jìn)行設(shè)計(jì)時(shí)，我們要有“沒(méi)必要只是用純色”這樣的念頭。在越來(lái)越多的實(shí)踐中，不斷的去嘗試提高降低顏色的明度和各種各樣的顏色組合，來(lái)表現(xiàn)出最棒的對(duì)比效果吧。

03 利用色溫增加對(duì)比

ym201608076

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

就好像下面這個(gè)設(shè)計(jì)案例，使用鮮艷的藍(lán)色和黃色這樣不同的色溫，在網(wǎng)頁(yè)布局上實(shí)現(xiàn)了對(duì)比。像這樣，Call?to?Action（行為召喚）將按鈕與背景區(qū)分出來(lái)，產(chǎn)生引人注意的效果。更進(jìn)一步來(lái)說(shuō)，什么樣的顏色被稱(chēng)為寒色（呈綠色的色調(diào)：英: ‘Greenish’ Tinge）等，已經(jīng)有一個(gè)統(tǒng)一的對(duì)比的組合。

ym201608077

04. 利用顏色的濃度增加對(duì)比

ym201608078

顏色的濃度（英: The Intensity of A Color），也被稱(chēng)為色彩飽和度（英: Saturation）。純粹明亮的顏色，他的飽和度狀態(tài)就是100%；越是接近灰色，他的飽和度也就越低。明亮的色調(diào)和黑色一起使用的話，就能產(chǎn)生特別的引人注意的效果。在設(shè)計(jì)中可以作為一個(gè)特別的組成部分，為了強(qiáng)調(diào)出重要的部分，一定要謹(jǐn)慎的使用。

在下面的這個(gè)設(shè)計(jì)案例中，可以使用降低了飽和度的橙紅色，將其放置在山頂同樣降低了飽和度的綠色上。利用互補(bǔ)色組合（英：Complementary Color Scheme），通過(guò)調(diào)整色彩的飽和度來(lái)吸引眼球，為你的設(shè)計(jì)賦予更多的活力。

ym201608079

05. 利用圖形增加對(duì)比：幾何圖形VS不規(guī)則圖形

ym2016080710

大多數(shù)圖形（英: Shape），是可以被分類(lèi)為具有幾何意義的幾何圖形（英: Geometric）（例如長(zhǎng)方形，三角形和圓形），或者不規(guī)則（英: Organic）（流線型（英: Fluid）或者受自然影響的形狀（英:Nature-Inspired））。在均勻?qū)ΨQ(chēng)的幾何圖形的角落，使用一些柔和的非對(duì)稱(chēng)（英: Asymmetrical Quality）的不規(guī)則圖形，可以進(jìn)行很好的對(duì)比。

下面的這個(gè)設(shè)計(jì)案例，在復(fù)雜抽象的（英: Abstract）有機(jī)圖片中，我們可以看到，很好的插入了強(qiáng)調(diào)排版的直線和曲線，他們補(bǔ)充的位置非常好。

ym2016080711

06. 利用圖形增加對(duì)比：銳角邊VS曲線邊

ym2016080712

在使用圖形幫助設(shè)計(jì)的另一個(gè)方法，就是利用邊框。在任何設(shè)計(jì)要素中，比如按鈕，就可以使用銳角邊（英: Edges）或者是曲線邊（英: Corner）。按鈕的形狀越柔軟，圓滑，給人的視覺(jué)效果就越友好。角的形狀越是整齊，給人的感覺(jué)就越是嚴(yán)肅。通過(guò)兩種不同的形狀，我們可以創(chuàng)建一個(gè)對(duì)比。在下面這個(gè)設(shè)計(jì)案例中，我們可以看到很好的利用了銳角和曲線進(jìn)行排版，表現(xiàn)出了一種驚人的對(duì)比感。

ym2016080713

07. 利用紋理增加對(duì)比

ym2016080714

圖片相同，設(shè)計(jì)的要素不同，例如使用紋理（英: Textures），對(duì)比的效果也就出來(lái)了。粗糙（英: Rough）與細(xì)致（英: Smooth），硬（英：Hard）與軟（英: Soft），立體（英: Raised）與平面（英: Flat）等。作為特殊的打印加工，紋理和別的技術(shù)不同，可以應(yīng)用于任何內(nèi)容。通過(guò)使用網(wǎng)絡(luò)上免費(fèi)的素材，可能性是非常廣闊的。

這組紋理你一定不能錯(cuò)過(guò)：《10個(gè)設(shè)計(jì)師必備的頂尖用戶界面紋理》

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

ym2016080715

08. 利用比例和尺寸增加對(duì)比

ym2016080716

對(duì)比不僅可以增加視覺(jué)趣味，也可以幫助我們展現(xiàn)相關(guān)聯(lián)的設(shè)計(jì)要素的優(yōu)先級(jí)。如果設(shè)計(jì)要素的尺寸相同，就無(wú)法表現(xiàn)出他們的層級(jí)（英: Hierachy）關(guān)系。不管是怎樣的讀者，我們都需要將重要的東西優(yōu)先傳達(dá)給他們。有效的利用比例（英: Scale），在實(shí)踐中不僅非常重要，在添加動(dòng)態(tài)布局設(shè)計(jì)中，也是非常簡(jiǎn)單的一種技術(shù)。

在下面這個(gè)設(shè)計(jì)案例中，使用了被擴(kuò)展的非常大的照片作為雜志封面，也不會(huì)對(duì)其他的設(shè)計(jì)要素進(jìn)行干擾。實(shí)際上，通過(guò)調(diào)整大小，形狀和配色、版式，可以強(qiáng)調(diào)出照片的焦點(diǎn)部分。

ym2016080717

09. 利用視覺(jué)重量增加對(duì)比

ym2016080718

在比例和尺寸相同的情況下，利用視覺(jué)重量（英: Visual Weight）就可以將設(shè)計(jì)中重要的部分給凸顯出來(lái)了。在視覺(jué)重量中，將那個(gè)元素與剩余的元素進(jìn)行顯著的區(qū)分，這種方法我們稱(chēng)之為高對(duì)比度（英: High-Contrast）。被視覺(jué)重量所采用的設(shè)計(jì)要素，沒(méi)有必要是最大的。此外，通過(guò)使用紋理。配色和圖形等，給他一種【重（英: Weighty）】的印象，也能做出有魅力的設(shè)計(jì)。

在下面的設(shè)計(jì)案例中，是介紹在美國(guó)辛辛那提，有著當(dāng)?shù)匚幕瘹庀⒌慕ㄖ拿餍牌?。?dāng)然，建筑在明信片中是最大的設(shè)計(jì)要素，但關(guān)鍵詞“Enjoy more”卻更能吸引眼球。這當(dāng)然是因?yàn)?，他的顏色是最暗（? Darkest）的。

ym2016080719

10. 利用留白增加對(duì)比

ym201608071

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

在下面的這個(gè)設(shè)計(jì)案例中，留白和細(xì)邊框線相結(jié)合，我們就完成了將網(wǎng)頁(yè)信息精辟概括的設(shè)計(jì)模型。在左右上下進(jìn)行了適當(dāng)?shù)牧舭?，在產(chǎn)品信息中也利用了留白，引起了用戶的興趣。

ym2016080720

11. 利用構(gòu)圖增加對(duì)比

ym2016080721

當(dāng)你開(kāi)始做設(shè)計(jì)時(shí)，需要有一定的布局的概念。那么，如何讓設(shè)計(jì)變得平衡而不枯燥，動(dòng)而不亂，想明白了這點(diǎn)，作品就會(huì)變得非常有魅力。我們可以從舊時(shí)代的藝術(shù)家和攝影師身上來(lái)學(xué)習(xí)構(gòu)圖的方法。

1、三分割法（英: The rule of thirds）：也是老生常談的一種方法。有時(shí)也稱(chēng)作井字構(gòu)圖法，是一種在攝影、繪畫(huà)、設(shè)計(jì)等藝術(shù)中經(jīng)常使用的構(gòu)圖手段。在這種方法中，攝影師需要將場(chǎng)景用兩條豎線和兩條橫線分割，就如同是書(shū)寫(xiě)中文的“井”字。這樣就可以得到4個(gè)交叉點(diǎn)，然后再將需要表現(xiàn)的重點(diǎn)放置在4個(gè)交叉點(diǎn)中的一個(gè)即可。

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

ym2016080722

2、對(duì)角（英: Diagonals）：對(duì)角線或S形布局，可以給你的設(shè)計(jì)賦予一些流動(dòng)感（英: Flow），幫助誘導(dǎo)用戶的視線。相較于正常的網(wǎng)格布局，它可以給你的設(shè)計(jì)帶來(lái)更多的樂(lè)趣。

12. 利用意料之外的要素增加對(duì)比

ym2016080723

介紹這個(gè)合成效果方法的一個(gè)理由是，讓用戶對(duì)這個(gè)要素期望不大。利用適當(dāng)?shù)脑O(shè)計(jì)手法，賦予要素驚奇的感覺(jué)，從而產(chǎn)生對(duì)比。設(shè)計(jì)是一個(gè)自然的主題，通過(guò)添加上鮮艷流動(dòng)的色彩，打破之前固有的規(guī)則，從而引起讀者的興趣。

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

ym2016080724

13. 利用重復(fù)來(lái)增加對(duì)比

ym2016080725

在設(shè)計(jì)戰(zhàn)略上，通過(guò)不斷重復(fù)（英: Repeating）利用設(shè)計(jì)要素和圖案素材，創(chuàng)建一個(gè)視覺(jué)焦點(diǎn)，會(huì)產(chǎn)生與上圖的合成技術(shù)類(lèi)似的視覺(jué)效果。此外，通過(guò)不斷的重復(fù)利用主題本身，你就能完成更好的設(shè)計(jì)。

在下面這個(gè)設(shè)計(jì)案例中，通過(guò)重復(fù)利用圖案，讓文字成為焦點(diǎn)，很好的完成了平衡。在設(shè)計(jì)上成功的反應(yīng)出了，和LOGO相呼應(yīng)的效果。

ym2016080726

14. 利用位置和方向來(lái)增加對(duì)比

ym2016080727

無(wú)論哪種設(shè)計(jì)，控制信息結(jié)構(gòu)（英: Struction）是很有必要的。在文字或設(shè)計(jì)要素上，通過(guò)一定的編排，確保有留白的空間。整理你的設(shè)計(jì)，讓他具有一致性（英: Consistency），然后我們?cè)儆心康牡娜ゴ蚱?、混合，從而引起用戶的興趣。

在下面的這個(gè)設(shè)計(jì)案例中，LOGO的設(shè)計(jì)使用了稍微沿著對(duì)角線稍稍向上傾斜，這立刻將它與其他沿直線分布的要素區(qū)別出來(lái)了。另外，通過(guò)使用和其他印刷字體有顯著區(qū)別的手寫(xiě)體，進(jìn)一步的提高了對(duì)比度。

ym2016080728

15.利用接近、分離來(lái)增加對(duì)比

ym2016080729

將你的設(shè)計(jì)要素進(jìn)行整理，有目的的將要素進(jìn)行分組，讓要素之間的關(guān)聯(lián)性變得易懂，使其更容易的引導(dǎo)用戶。同樣的，將沒(méi)有關(guān)聯(lián)的要素分離獨(dú)立出來(lái)，讓用戶易于了解，他們是不同的兩個(gè)信息。此外，利用對(duì)比，還能將要素的數(shù)量表示出來(lái)。例如，在大量的設(shè)計(jì)要素中，單獨(dú)存在的要素肯定會(huì)脫穎而出。

下面這個(gè)設(shè)計(jì)案例，是使用了大量文字的個(gè)人簡(jiǎn)歷設(shè)計(jì)，良好的結(jié)構(gòu)（英: Structure）會(huì)便于閱讀。在這里，利用了接近（英: Proximity），對(duì)齊（英: Align）和配色技術(shù)相結(jié)合，將信息進(jìn)行劃分，誘導(dǎo)視線，使之更容易閱讀。

ym2016080730

16. 利用視覺(jué)提示增加對(duì)比

ym2016080731

根據(jù)最近的一項(xiàng)研究，人類(lèi)記住的東西80%都是看到的，在這之中，優(yōu)秀的設(shè)計(jì)也是幫助記憶的強(qiáng)大工具之一。但是要注意的是觀看的時(shí)間其實(shí)是很短的，引導(dǎo)用戶的視線，就顯得很有必要了。在這種情況下，好的視覺(jué)提示（英: Visual Cues），能起到不錯(cuò)的作用。我們可以直截了當(dāng)?shù)氖褂眉^標(biāo)記希望用戶看到的要素，或者在它周?chē)?huà)個(gè)圈，來(lái)進(jìn)行強(qiáng)調(diào)。

在下面的設(shè)計(jì)案例中，在文字下面使用了下劃線（英: Underline），著重號(hào)（英: Bullet Points）和圖標(biāo)，可以看出是很好的利用了視覺(jué)化的概念。

ym2016080732

17. 利用復(fù)雜和簡(jiǎn)單增加對(duì)比

ym2016080733

復(fù)雜（英: Complex）或簡(jiǎn)單（英: Simple），利用這些個(gè)別的要素，可以進(jìn)一步強(qiáng)化對(duì)比。在下面這個(gè)設(shè)計(jì)案例中，成功的利用了貼紙?jiān)O(shè)計(jì)技術(shù)，通過(guò)在鮮花背景上放置一個(gè)清爽的白板，將文字與周?chē)M(jìn)行區(qū)分，讓設(shè)計(jì)發(fā)生了急劇的變化。

ym2016080734

18. 利用字體組合來(lái)增加對(duì)比

ym2016080735

在版式設(shè)計(jì)中，這是必不可少的設(shè)計(jì)要素，你可以用這種獨(dú)特的方式來(lái)增加對(duì)比。事實(shí)上，在這篇文章中所涵蓋的技術(shù)中，都可以應(yīng)用到版式設(shè)計(jì)中。但在使用字體組合或這自己創(chuàng)建一個(gè)自定義的字體時(shí)，有特別需要注意的幾點(diǎn)。

那么接下來(lái)我們來(lái)看一下在字體設(shè)計(jì)上最后需要注意的三點(diǎn)。首先，是字體組合（英: Combining Fonts）。當(dāng)使用一種以上的字體時(shí)，良好的對(duì)比，是確保其成功的關(guān)鍵；當(dāng)標(biāo)題使用了，就不要將他再次使用在正文中了。如果標(biāo)題和正文的字體太過(guò)相似，就會(huì)讓用戶變得混亂。這也是非常容易犯的一個(gè)錯(cuò)誤。

另一個(gè)經(jīng)驗(yàn)，可以選擇一種襯線（英: Serif）字體一種無(wú)襯線（英: Sans Serif）字體。這種組合不但能互補(bǔ)，也是一種非常好的對(duì)比效果。至于其他的字體組合技術(shù)，你們可以參考這篇文章：http:///78213、http://www./articles/12293.html，我就不進(jìn)行詳細(xì)的講解了。

ym2016080736

19. 利用文字進(jìn)行對(duì)比需要小心

ym2016080737

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

在下面的這個(gè)設(shè)計(jì)案例中，利用不同的字體營(yíng)造了一個(gè)非常有趣的氛圍，類(lèi)似YES/NO形式的流程圖。值得參考的地方是，字體的區(qū)別（英: Loud）不是很大，一直保持著平衡。通過(guò)有目的的巧妙編排，表現(xiàn)出了很棒的設(shè)計(jì)。

ym2016080738

20. 利用字體的風(fēng)格和重量來(lái)增加對(duì)比

ym2016080739

很多字體，都有著類(lèi)似Light、Bold這樣廣泛的自定義范圍。就算你只用一種字體來(lái)設(shè)計(jì)，都可以產(chǎn)生很多種不同的對(duì)比，讓我們的設(shè)計(jì)變得更輕松。除了不同的重量，大小和配色方案，你能強(qiáng)調(diào)的對(duì)比有很多種。

在下面這個(gè)設(shè)計(jì)中，使用了粗和細(xì)兩種無(wú)襯線字體，給人一種洗練的感覺(jué)。實(shí)際上襯線字體作為客串也被使用了，進(jìn)一步的增加了對(duì)比感。

ym2016080740

這些都是從過(guò)去的經(jīng)驗(yàn)之中誕生的，非常實(shí)用的可以增加對(duì)比度的設(shè)計(jì)方法。那么，讓我們一起在實(shí)踐中去嘗試這些方法吧~一起來(lái)感受設(shè)計(jì)的樂(lè)趣~

-----

作者：@喪心病狂十六夜貓

轉(zhuǎn)摘請(qǐng)注明優(yōu)設(shè)網(wǎng)譯文出處，謝謝各位小編。

關(guān)注優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)官方微信號(hào)：youshege；和百萬(wàn)設(shè)計(jì)師一起來(lái)學(xué)習(xí)設(shè)計(jì)