20個設計技巧：從美工成為真正的設計師

20個設計技巧：從美工成為真正的設計師!說到對比，你會想到什么？也許是黑白對比，大小對比，但是對比所存在的形式還有很多，遠不止于此。事實上，對比度是最重要的設計原則之一，它也是每個設計項目中必不可少的設計要求。為什么這么說呢？控制對比度有助于設計項目的組織結(jié)構(gòu)化，建立信息和視覺的層次，讓你最重要的部分成為視覺的重心，讓關鍵信息突出展示。善于使用有對比度的設計，能增加視覺的觀賞性和趣味性。在相同的布局、相同的視覺元素中，形態(tài)和色彩的變化有時候非常單調(diào)，但是對比能讓變化顯得不同凡響。然而，和絕大多數(shù)的設計規(guī)則一樣，平衡是對比度控制的核心規(guī)則。如果對比度反差太大，這樣的視覺設計可能是混亂而不和諧的，如果對比度不明顯，那么設計作品可能看起來單調(diào)而晦暗，毫不突出。那么，怎么控制對比度才能真正提升設計項目的視覺效果呢？遺憾的是，你所期待的神奇公式并不存在。正如同你剛剛開始學習設計技能的時候一樣，對比度設計中的許多技巧不是非此即彼的簡單規(guī)程。但是如果你認為它過于神秘那就錯了，對比度是成就好設計的一種規(guī)則，它還是有跡可循的，任何人都可以將它添加到設計項目中，作出優(yōu)秀的作品。如果你對對比有興趣的話，不妨都下去，下面的20個設計技巧，也許會幫你打開一扇門。01.深淺色彩對比LighterMiddle

Value這個值通常指的是色彩的明暗度，純黑和純白深淺的極致。但是要創(chuàng)造高對比度的色調(diào)并不是非得使用黑色和白色。將一個色彩調(diào)亮一個調(diào)暗是調(diào)出對比度的有效手段。案例中，深藍色的背景和淺色的文本就很好的構(gòu)成了對比。

02.不同色調(diào)構(gòu)建對比度MonochromaticAnalogous傳統(tǒng)的色輪上有12種色彩，但是常用的配色方案有很多，系統(tǒng)的配色理論中對于如何借助色輪來創(chuàng)建配色方案有比較系統(tǒng)的介紹，比如大家所熟知的單色方案、相似色方案、對比色方案、對稱三色方案等等。在諸多配色方案中，有一些對比度非常高的配色方案，比如：?對比色：色輪對稱位置的兩種色彩對比強烈，比如紅和綠，藍和黃，等等。下方案例中就很好地運用了對比色，配合繁復的結(jié)構(gòu)，整個設計實用且充滿了視覺沖擊力。MonochromaticAnalogous傳統(tǒng)的色輪上有12種色彩，但是常用的配色方案有很多，系統(tǒng)的配色理論中對于如何借助色輪來創(chuàng)建配色方案有比較系統(tǒng)的介紹，比如大家所熟知的單色方案、相似色方案、對比色方案、對稱三色方案等等。在諸多配色方案中，有一些對比度非常高的配色方案，比如：?對比色：色輪對稱位置的兩種色彩對比強烈，比如紅和綠，藍和黃，等等。下方案例中就很好地運用了對比色，配合繁復的結(jié)構(gòu)，整個設計實用且充滿了視覺沖擊力。Split-ComplementaryTriadicTetradic(Double-Camplemenitaxy)■分離式對比色：色輪上任意位置的色彩，和它正對位置的色彩兩側(cè)的色彩，三種色彩共同組成的配色方案。?對稱三色：色輪上相互構(gòu)成120度角度的三種色彩。值得注意的是，在實際運用中不要使用高飽和度的純色，雖然那樣對比強烈，但是并不一定好看。適當?shù)卣{(diào)整深淺和色調(diào)，會讓整個配色更優(yōu)秀。03.控制色溫營造對比

Cool Neutral Warm色彩都有著不同的色溫，黑白灰是中性色（米色和棕色有時候也會被歸類與中性色），紅色、橙色是暖色調(diào)，藍色、綠色是冷色調(diào)。不同色溫的色調(diào)在一起的時候能夠形成不錯的對比度。下面的案例中，藍色和黃色就構(gòu)成了不錯的對比，大塊的綠色包圍著明亮的黃色按鈕，整個配色充滿凝聚力。04.借助飽和度控制對比SaturatedDesaturatedContrasting

Saturation色彩的強度最強的時候，也就是飽和度最高的時候，是最純粹的色彩。飽和度越高色彩越鮮艷，飽和度越低越接近于灰色。同一色彩不同飽和度下的色彩能夠構(gòu)成對比，不同色彩不同飽和度下也能構(gòu)成對比。下面的案例中，高飽和度的紅色和低飽和度的綠色對比明顯。MW05.形狀對比：幾何形狀與有機形狀我所熟知的幾何形狀，諸如矩形、三角形和圓形都是規(guī)整的形狀，而流態(tài)的、或者源自自然物體的各種不規(guī)整的有機形狀則通常不是特別規(guī)整，和幾何形狀可以構(gòu)成對比。下面的LOGO整體的構(gòu)成都是規(guī)整的幾何圖形，而其中填充著自然的、插畫式的圖案，兩者構(gòu)成對比又相互依存。GA宮LAKGA宮LAKlawpiirlav4iliiidji~iuJ-“」d』Arria*nd:cSum^4.$.knIr■/坨.■i^t-pdld4?lL.正下門期，B：I1i4T|im.Mwp-irTI■■■til.AH^VhieE?力???印，*l-gtAfl feb It即。3r昌TftmTV:idlp1l曲It47iriNywF4*??，1* VIbaMdbaU**力aPIZZASAUCEQitriiH，升06.用邊角構(gòu)成對比圓潤的形狀會更加柔和，給人友好的感覺，而帶有尖角的形狀則會給人鋒銳明快的感覺。在進行設計的時候，巧妙地將圓角和銳利的邊緣搭配到一起，可以形成互相映襯互相調(diào)和的效果。

07.07.用紋理來對比vs.SMOOTH和形狀類似，紋理能賦予形體以性格，不同的性格則能形成對比。粗糙與光滑、堅硬與柔軟、參差和平整，它們都是對比。網(wǎng)絡上的紋理資源非常多，如果你合理運用能夠達到不錯的效果。案例中的圖案整體上都是平滑的線條和形狀，唯有其中的數(shù)字添加了少敘粗糙而復古的紋理，讓巨大的數(shù)字增加的信息量和對比，不再單調(diào)。08.調(diào)整比例構(gòu)成對比Boring??YOURNAME7,心仆￥汽.Dynamic除了為設計作品增加有趣的內(nèi)容增加視覺吸引力，還可以通過調(diào)整比例，構(gòu)成大小對比來增加對比度。相同大小的元素很難構(gòu)成層次感，而有了大小對比就有了重心區(qū)別和差異，這樣也更利于構(gòu)建有張力的布局和有趣的樣式。下面案例中，巨大的漢堡擁有壓倒一切的分量感，這就是通過比例大小差異呈現(xiàn)出來的對比。09.調(diào)整視覺重心來對比Equal

VisualWeightEqual

VisualWeightBIGSALE!Intentional

VisualWeightBIG

SALE!Loremip?umdolor 甘met，consectelurddipiscing日lit,sedeiusmod(ernporincidHuntutlaboreetdolorsmagnamliqu;Clickhere.5『emdolorsitmehconsecteturddipiscingelit,secEdociusinodtemperin亡id-idtintutlaboreetdolorem^gnaaliqua,CLICKHERE視覺重心也是設計中常說的概念，你需要告訴用戶某個部分比其他的更重要，可以將它設計成視覺重心，通過調(diào)整它的色彩、造型、尺寸、樣式、紋理等屬性，同周圍的元素區(qū)分開來，成為視覺重心。案例中是一組辛辛那提的明信片設計，雖然整個建筑物是明信片中最大的視覺元素，但是哪些“EnjoyMor刑文字在視覺上更加突出，那就是視覺重心。10.通過留白形成對比TooLittleWhiteSpaceGoodSpacing&MarginsBIGHEADLINEInterestingsublieadlineAuthorMameLoremipsumdolorsitullumLiier-niis式口rad.jiiiino^pppllanLnrsitan.etiiIIuttid?tcrnshcndreritcum.ClItafctiKialnmn^squcmei,debilisviicibusitiipn.[nsiirnatu>nc^lcEftitiir■aitpiqti]Hulls'nnniinjvi,norilHc?m-piLTtillirHim,PosterviK'i'niHinionim帑uvim,Kius

BIGHEADLINEfnterestfn</subheudilneAuthorHamcLniYFiipt;ii]nd^lorsitamiLiilluniiiHTiiii!；admul,uiino^ppHlanhirsil-Jin,rtullumcpli'inh：hm4nlritrum.Clitnfuii^iikL annivi.(Irhitis￥o(jh(isru川i.lusornatlisehLiiotiiiiuiAthascitis.雖然將頁面或者畫布填滿信息是非常誘人的事情，但是效果往往不好，留白同樣重要。留白可以期待分割內(nèi)容、組織設計元素、形成對比的作用。越是復雜多變的布局，留白越是重要（值得注意的是，它并不一定非得是白色）。留白出現(xiàn)之后，可以讓設計不同的部分有明顯的對比。案例中，留白分割出兩個側(cè)邊欄和中間的圖片，讓信息更加有組織，也突出了重點。

11.通過位置控制來實現(xiàn)對比?鼠,…Siliberovase心貝11.通過位置控制來實現(xiàn)對比?鼠,…Siliberovase心貝5fintirw"戶1、caucusi3nl^cqpft*vdCbU#$u州匹在內(nèi)卬，那b口LEfeRPl'-Ed%例籍Ff?LWNVU.P&LE種冊娜片牌藏中引用5WmBipti/F<lZ變』，E標■】！丁上看62lEdEi*npiw^fc葉5<九.，W際Htmg*SGff*LE；**aTK也rrfwi同*1儲zr153000e.rhibiliuN\pril1-JuneNXfonslMuseumnFrerRuleofThirdsPHOTOGRAPHY從某種程度上來說，每個設計作品都需要兼顧到平衡和張力，這樣可以讓設計均衡而又不沉悶，有條理又不紊亂。具體怎么做呢？最常見的是借助三分法和對角線結(jié)構(gòu)來控制布局。?三分法：頁面被兩橫兩豎劃分成9塊區(qū)域，而四條線的四個交點是視覺重心。這是一種動態(tài)的布局方式，它更自然舒適，什么都放到正中心的設計是單調(diào)而枯燥的。-PerfbctHants②/因察塞義4&bx?? AMfs 9Kum.<icMa-it >?iv>rvr?fv< uawcfcimAvacrc 4zc<uda>a?OURPRODUCTSloroprtatumB2S(99loroprtatumB2S(99ISINTHEAIR口—“V案例中的頁面，玫瑰和標題都處于整個布局的兩個節(jié)點上，對稱而自然，不同屬性的元素也錯落開構(gòu)成了對比。?對角線：對角線和S型布局都可以讓設計充滿動感，眼睛會更自然地運動，不會沿襲傳統(tǒng)的橫豎方向運動，更有趣，消解了布局的單調(diào)性。.用意外來營造對比UnexpectedUnexpectedIS—1IS—1MENUChickenJf出乎意料的設計很多時候非常有效，因為它讓人更加難忘。突變、不集中、不典型都是意外的特征。充滿驚喜的元素會讓設計內(nèi)出現(xiàn)前后對比。意想不到的色彩和圖形都是這樣的設計。這個頁面的設計、排版就是這么做的，原本簡單的布局通過元素間的遮蓋“互動”了起來。.通過重復和模式來對比

嚴格意義上來講，重復的樣式和模式化的設計是通過營造視覺焦點和趣味性的視覺來實現(xiàn)對比效果的。這個名片設計中，設計師在左側(cè)使用了模式化的圖形來填充，它不僅和右邊形成對比，而且還有助于強化品牌認知。

.使用位置和方向來對比錯落的位置、不一致的方向能夠構(gòu)成對比。不一樣的間距，不同的空間特征，打破了整個設計的一致性特征，合理地掌控其中的平衡，可以營造出頗為不錯的對比，又不會太過違和。案例中的部分文字采用了傾斜式的布局，使得布局不再單調(diào)，手寫體與非襯線字體構(gòu)成了對比。15.通過靠近和分離來對比Pioximily廠〉STAFFBIOS:SeparationSTAFFBIOS：JOINTHETEAM：AboutUs. hlotcmip5UHidolorsitainetronicct-clur\jdlpi-itirEelik-,上凸dd。eiusmodtemperill-elfdiduntuthboreetdoloremagnjjliquj.*AvailablePq-siHotis.

3 JOINTHETEAM：AboutUs.Loremipsumdfllor5ilarnb,cfiiw-Etrlijrddipisclrigclit.swddofidsincid上匕r?i戶占rincid(duntutIabortctdclorc atiauj.AvailablePushions.通過靠近分組的方式來組織內(nèi)容也是一種常見的設計技巧，可以更加便于瀏覽，更清晰地分割內(nèi)容。通過這種方式劃分出群體和個體，這也是一種對比。案例是一份簡歷，其中良好的結(jié)構(gòu)就是通過不同內(nèi)容的靠近和分離來呈現(xiàn)的，結(jié)合對齊和配色設定，很好地完成了這一工作。16.借助視覺引導來構(gòu)建對比WithoutVisualCues3%l叩K」Pirsijloiv-niipsufudetpr禺打外,liHidmin^rmisiad qpp^U^iituram.宅tulhimwetu門臣h^i)dreritturn-.Second,clttiifciigiatomnc^qucanmci,4ebitiiiviKihuscLipti.hi5oriWU5iit^e^eiiturad,ciqifirequenominal,no-einsconi-ptcclilurparruThindHpostcavocenlmaici-nirnenvim.EiusrrmipreHeusatnnasitm,adipisciri^mtxkratiusseaeu,viinlibe「laboresid.

With

VisualCues3Sleps;用rsLk)『en】 dolorsitainetfmIIiiiiiinenulsadmet+111moa國對hetur疝anTelulluinceteroshemdnerii>eiii】L5ecqi】d.ditj律ugiiHomnesqucanmci,(iebilLs;;acibu￡cupri.]usornalusn電W4gcniuriitl.oiquln^iuen?niiti；u1,no(?iducuniplcetilure^ni.T^it-d.pojeatiXNil 沁niitiEiLtitti.I'.ius.L'(m]-|Ttfhvi!5：iinri；iin^：t.nriif)!.<ciimmaderatinsseacll,vimliber儲boresid.Getyourfreedownload GetyourfreedownloadHERE?^^>HERE研究表明，人能記住他們所看到的80%的內(nèi)容，這也是為什么設計是強大的工具。但是用戶需要適當?shù)囊曈X引導來找到重要的內(nèi)容。所以，視覺引導很重要，通過圓點、箭頭、下劃線等多種方式來區(qū)分內(nèi)容的重要性、條理性。而下面的案例也正是這樣做的。

VS.SIMPLE將復雜和簡單的樣式混合使用，常常能夠產(chǎn)生足夠的對比度。這種對立本身就是對比。下面的案例就是很好的例子，繁復的花卉樣式和中間簡約的留白與文字構(gòu)成對比。Slickers!ContrastingStyles18.字體組合的對比SERIFSANSSERIFMONTSERRATNDRWESTERArvoltalicLEAGUEGOTHICGeorgiaMONTSERRATNDRWESTERArvoltalicLEAGUEGOTHICGeorgiaAbrilratfaceLatoUght不同于使用單一字體家族所追求的一致性設計，講究對比度的字體組合往往會使用不同類型的字體搭配。不過這樣的設計有一些地方值得注意：如果要對比度，那么字體一定要有明顯的差異，只有這樣才有區(qū)分度。不同字體應對不同的職能，不要在同樣的功能區(qū)使用不同的字體，這樣會造成混亂。一般而言，使用一個襯線體和一個非襯線體來搭配是個不錯的選擇。下面的案例就是這么做的。

.在進行排版的對比度設計的時候務必要注意當你尋求字體組合的時候，你需要的是對比度而非沖突，這兩者是有區(qū)別的。兩種字體有差異，有的時候是對比，