2019-2-15 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
無論是色彩學(xué)還是其他學(xué)科，所謂的理論也好方法也好，它們的本質(zhì)無非就是規(guī)律的總結(jié)。我經(jīng)常喜歡做一個比喻，就是你可以想象色彩是一座高山，而配色方法就是通往山頂?shù)牡缆罚峭ㄍ巾數(shù)牡缆凡恢挂粭l，配色的方法也不只一個，你可以選擇一條路走到底，也可以從一條路換到另一條路，還可以每次上山都走不同的路，這就是我所理解的色彩學(xué)。所以今天我就帶大家走一條新的路來登山，這個路就是背景色的類型與應(yīng)用技巧。
背景，應(yīng)該很好理解，我相信應(yīng)該沒有人會不清楚，比如這里我們做的這個案例，很明顯白色的底就是背景。如果讓大家填充背景色，我相信大部分人的本能反應(yīng)就是填充基本色相。
比如這里的背景我們填充了紅色。
當(dāng)然其他任何色相在原則上都是可以的，因為都是背景色。
但是我們本期教程所要探討的不是這種在色相上的背景色，那我們所要總結(jié)的背景色規(guī)律是什么呢？我們先來看圖。
大家可以思考一下，看看能不能發(fā)現(xiàn)這其中的規(guī)律。這里的背景色類型并不是我們通常所認為的具體色相，也不是在色調(diào)上的劃分，而是從更寬泛的角度去探索背景色的規(guī)律，然后更好的運用到我們的設(shè)計當(dāng)中。
那我們就來看看背景色的四種類型是如何劃分的：分別是白底型、淡色型、深色型、黑底型。
首先我們來看白底型。
說到白底不能不說白色，白色是沒有任何色彩的顏色，是非常好的調(diào)和色，可以和任何色彩搭配。
而研究色彩最重要的就是要了解它的屬性和氣質(zhì)，而任何色彩都有兩面性，白色最突出的屬性就是干凈、簡潔、純潔等等，再結(jié)合相應(yīng)的設(shè)計內(nèi)容和題材也可以傳遞出非常多的屬性，只要和這些屬性相吻合都可以使用白色。
而白底型又分為大白底和小白底，比如畫面中的這個就屬于小白底，也就是說雖然是白色背景，但是內(nèi)容信息比較多留白比較少，就屬于小白底型。小白底型具有的意象是實用、干凈、知性以及舒暢、通透、簡潔等等。
大白底型也很容易理解，就是類似這種留白較多內(nèi)容或元素較少的版面，我們平時說的比較多的極簡和留白風(fēng)格，基本上都是這種大白底型的。大白底型具有的明顯屬性是簡約、樸素、開放、文藝、雅致、清淡等等。下面我們來看看白底型的相關(guān)作品。
這是一個美食招貼，畫面以白色為背景，通過文字的編排以及不同色彩的食品來豐富版面，干凈、簡潔的同時又能夠很好的讓人關(guān)注食品的本身，而且這里使用的就是小白底型。
這個海報也是小白底型，像這種在白色背景上使用黑色文字、淡色圖形或插畫的設(shè)計也很多，給人的感覺非常干凈，直接。
這種純文字的海報相信大家也肯定見過不少，就是白色背景上方黑色的純文字編排，看似簡單其實是非常難的一種形式，難的地方不是色彩，而在于對版式能力的考驗。
這個海報雖然也是白底黑字的純文字編排，但是也屬于大白底型，文字信息量非常少，屬于極簡留白的風(fēng)格，給人的感覺就是簡約、雅致甚至是文藝和藝術(shù)。
這是一個純凈水的海報，也是采用的白底型，上方的文字和圖形以藍色為主、紅色為輔，藍色代表水，紅色是印章的顏色，通過元素之間合理的空間以及整體的白色背景，體現(xiàn)出了純凈水產(chǎn)品的天然、健康、純凈，沒有任何其他雜質(zhì)。
我們再來看看第二種背景型，淡色型。
淡色是比較冷靜的色調(diào)，沒有什么很強的主張，給人冷淡的感覺，所以淡色的使用范圍就有局限，但是只要合理的運用淡色的特點，就可以發(fā)揮出淡色的最大優(yōu)勢。
淡色最適合表現(xiàn)纖細、優(yōu)雅、溫柔等屬性，淡色會讓人產(chǎn)生幸福溫柔的情緒，讓人們進入沒有刺激感的色彩世界，但是淡色調(diào)沒有積極性，太過溫柔反而給人冷淡的印象。
背景用淡色調(diào)雖然也可以體現(xiàn)白色的簡潔、干凈，但是卻多了些色彩本身的傾向性，無論用什么色相都可以給人優(yōu)雅、簡潔的印象，淡色最適合表現(xiàn)女性、優(yōu)雅、平和等印象，富有情緒變化，輕柔、輕快。下面我們還是來看看相關(guān)設(shè)計。
這個海報的背景就是采用的淡色型，背景是比較淡的黃色，海報中唯一色彩比較豐富的元素就是五個小人的插畫，而且以暖色調(diào)為主，所以背景使用暖色調(diào)的黃色可以讓整體版面的色彩很均衡，結(jié)合人物的卡通插畫給人一種純真、輕柔，以及淡雅的恬靜風(fēng)格。
這個海報是關(guān)于美食產(chǎn)品的，典型的日式風(fēng)格，包括書法字、櫻花等等，這里的背景雖然帶有微弱的漸變和紋理，但是并不影響整體的淡粉色調(diào)，雖然是美食主題，但是這種淡雅、清新、柔軟的風(fēng)格一點都不會影響到人的食欲。
這個海報雖然是關(guān)于文化的，但是整體的風(fēng)格偏向這種卡通、插畫的感覺，而且色彩使用的也比較豐富，純度和明度都控制的很好，整體協(xié)調(diào)統(tǒng)一，背景色使用了淡色的黃色，統(tǒng)一了整體畫面的色調(diào)，充滿了可愛、童趣。
第三種背景類型就是深色型。
深色就是在純色中加入大量的黑色，從而讓純色變得內(nèi)斂了許多，而且增添了力量感，更加嚴(yán)肅莊重。
深色可以表現(xiàn)強力感和深度，這是其他色調(diào)所不具備的，如果說淡色是女性的顏色，深色就是男性的顏色，充滿了力量和陽剛，當(dāng)然這并不是絕對的。
深色融合了純色和黑色的特點，可以有效的突顯位于背景之上的元素和色彩，同時又帶有強烈的情緒，具有高格調(diào)。深色型最大的特點就是深沉，給人堅實可靠的感覺，并且還帶有神秘和幻想，配合適當(dāng)?shù)纳嗫梢猿錆M激情。
美食相關(guān)的海報很多都喜歡用深色型背景，尤其是傳統(tǒng)類美食，還有就是巧克力、咖啡相關(guān)的主題。這個海報的背景就是使用了深色調(diào)，給人一種高檔感和格調(diào)感。
這個海報的背景色使用了深色調(diào)的藍色，結(jié)合白色的線稿畫，充滿了神秘感，而且很有深度，同時又不失傳統(tǒng)和古典的韻味。
這是一個酒類招貼海報，深色的背景沒有任何其他顏色的干擾，純白色的文字，使得整個版面干凈利落，同時背景的深色又為畫面帶來力量感、強勁而有力，正符合了酒品類的風(fēng)格和屬性。
最后一種背景型就是黑底型。
黑色代表什么都看不見，是抑制力很強的顏色，與黑色組合的顏色都會被很好的襯托出來。
黑色最適合用來表現(xiàn)奢華、男性和神秘，也可以表現(xiàn)幻想性、神秘性和強大的力量，同時黑色也代表了閉鎖，是帶有不安和恐懼的顏色，而且還代表犯罪和暴力。
黑色作為背景的時候，會激發(fā)觀者的想象力，讓其他色彩看上去更加鮮艷。任何元素在黑色的背景上都富有神秘感和幻想，黑色面積越大這種感覺越明顯，此外黑底型最突出的特點就是力量感、高級、內(nèi)斂和莊重。
這是張藝謀導(dǎo)演的電影《影》的其中一款海報，并沒有使用太過復(fù)雜的背景，就是采用純黑色為底色，上方水墨武俠的人物以及書法字，帶有傳統(tǒng)、古典、深沉的韻味，如果是看過這部電影的同學(xué)回過頭來看這個海報，你會發(fā)現(xiàn)其實電影中的爾虞我詐、人心險惡也都蘊藏在黑色的世界里。
這個海報的主體人物是日本拳擊手村田諒太，也就是和體育、運動相關(guān)的內(nèi)容，而背景正是使用了黑底型配色，體現(xiàn)出男性的陽剛以及拳擊的力量感。
這個電影海報也是大面積的黑色背景，上方的元素很簡單，就是地球和文字，通過光影的處理和深邃的黑色，給人的感覺很直接，神秘、恐怖、遙不可及。
這個海報相對來說比較偏藝術(shù)化，純黑色的背景，各種幾何圖形，簡單的文字內(nèi)容，給人一種高級感和格調(diào)感。
這個海報從字面意思以及圖形來看應(yīng)該是與地震相關(guān)的主題，那么自然災(zāi)害肯定是非常嚴(yán)肅的話題，所以設(shè)計者也很簡單直接，黑底白字，讓人有效的閱讀文字信息，充滿了正式感和莊重感。
最后我們來看看案例演示，這里我們設(shè)計一個書籍封面，書籍的名稱是無聲告白。
首先我們創(chuàng)建出網(wǎng)格，根據(jù)網(wǎng)格來編排文字信息，這里我們創(chuàng)建的是橫向八欄，豎向五欄的模塊網(wǎng)格。
然后先將書籍名稱編排到版面兩側(cè)，各占一個格子，中間放置引言信息，同樣占據(jù)一個網(wǎng)格寬度，標(biāo)題放在版面上方可能會顯得有些重。
所以這里我們可以將標(biāo)題下移，然后頂部編排作者名和書籍的英文名。
然后將其他文字內(nèi)容編排到版面的最下方。因為我們主要是講色彩，所以文字編排這塊就不過多講解了。
然后將書脊部分加入進來，將書籍名稱、作者以及出版社的相關(guān)信息編排好，版式部分基本就差不多了。
下面我們根據(jù)本期教程所講的背景類型來配色，而這里應(yīng)該使用哪種背景型呢？這個要根據(jù)設(shè)計的內(nèi)容來決定，因為這本小說的名字叫做無聲告白，而且小說的故事內(nèi)容也比較壓抑充滿悲劇色彩，所以這里我決定使用黑底型的配色。
將背景填充黑色，文字反白。但如果是現(xiàn)在這樣單純的黑色，可能看上去會顯得有些單調(diào)。
所以這里我們從書籍名字中的無聲來找靈感，為背景填充象征聲波的抽象圖形來豐富版面。
最后添加書籍的腰封，使用白色來形成對比，腰封上的文字填充黑色，這個書籍封面就設(shè)計完成了。
我們來看下效果圖，整體的黑色調(diào)還是比較有這種陰暗、憂郁、孤獨的感覺的。
那有的人可能會有疑問，其他三種背景色就不可以么？當(dāng)然也可以，配色在很多情況下并不是對錯的問題，而是要看你想通過色彩傳遞出什么樣的感覺。所以這里我也做了其他三種背景型的配色，如果單從版面的整體配色感覺來看，也是沒有任何問題的。
還是那句話，關(guān)鍵點是你想讓這個設(shè)計給人什么樣的感覺，如果想傳遞白底型所代表的印象，那么你就可以使用白底型。
同樣的道理，如果你想傳遞淡色型的色彩印象，當(dāng)然你也可以使用淡色型。
如果想傳遞深色型的意象那就使用深色型，這個邏輯應(yīng)該很容易理解。
本期教程到這里就結(jié)束了，我們主要從白底型、淡色型、深色型、黑底型這四個角度出發(fā)，來探討不同的背景型所傳遞出的不同感受。這四種背景類型屬于大的范圍，如果想對配色深入研究，當(dāng)然背景色不可能就四種，理論上來講任何色彩都可以充當(dāng)設(shè)計的背景，所以除了要掌握好這四種背景型，還要做到兼顧色相的屬性和色調(diào)的屬性，這樣才是一個多維度視角的配色，就像我們開頭講到的，配色就是一座高山，你知道通往山頂?shù)牡缆吩蕉啵憔涂赡鼙葎e人更快地到達山頂。
藍藍設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍藍設(shè)計的小編 http://www.wnxcall.com