學(xué)習(xí)網(wǎng)頁設(shè)計，優(yōu)設(shè)確實是一個不錯的平臺，在顏色、布局等方面細(xì)節(jié)上的文章，都可以找到不錯的文章，學(xué)習(xí)到很多東西。今天在優(yōu)設(shè)上看到一篇好文，關(guān)于banner色彩分解層級奧秘。在此，小編做出一個整理分享給大家：
讓網(wǎng)頁設(shè)計更節(jié)奏感、層次感，色彩運用是最重要的元素。
一，Banner 圖的色彩分解
這部分我會著重說的比較多，因為在后面的網(wǎng)頁和APP當(dāng)中都會有涉及，而且當(dāng)了解的大概的原理后看到后面自然也就會很容易的明白了。
A、主產(chǎn)品美觀突出型
首先從汽車類Banner 圖開始說起吧！因為這算是一大類，如：“汽車、奢侈品、高級音響……”，甚至是模特、演員相關(guān)的設(shè)計原理也大都如此，就是需要宣傳推廣的產(chǎn)品本身忒漂亮。
1、因為產(chǎn)品本身已經(jīng)非常精美，所以文字大都用白色或灰黑做輔助（根據(jù)底色來定）
2、為了最大化產(chǎn)品優(yōu)勢，文字所占空間也相對較小，且多用系統(tǒng)字體（因為不搶眼）
3、背景多數(shù)選擇實景，且接近產(chǎn)品本身色系，要么君臨天下的大場景、要么卓爾不凡的近距離
當(dāng)然了，無論汽車還是奢侈品，他們也都有更加細(xì)分的市場和投放渠道，如汽車的高端車、家庭型、運動型、白領(lǐng)代步……所以在設(shè)計中會根據(jù)產(chǎn)品不同的市場方向進(jìn)行規(guī)劃。我們做任何設(shè)計也都是如此，所以在每次接到設(shè)計任務(wù)的時候一定一定要和需求方溝通清楚具體方向。
上面這幾個圖就是青年運動型咯，用動感的背景來表達(dá)“看我動力十足，快來一起撒野”
下面這幾張圖很明顯是為了表現(xiàn)繽紛生活，愉快出行的生活狀態(tài)！畫面背景色和產(chǎn)品本身有較大反差，這樣依然是最大化的突出了我們的宣傳目的。
當(dāng)最終還是開始說的那樣，當(dāng)產(chǎn)品（美女帥哥也是哦�。┍旧碜銐蛎烙^的時候，一定要最大化突出產(chǎn)品本身，信息只是作為輔助，層級排在商品之后。
B、產(chǎn)品展示型
當(dāng)然這個也是我們最常見的設(shè)計圖，并且更新頻率更快（想起來都夠了是不是）,電商里面最常見的就是這類圖，這時候就需要在文字字形色彩、背景色彩或輔助元素上多做一點設(shè)計排列了，看下面布靈布靈……↘(ˇ＆#717;ˇ)↘
這一組還是以產(chǎn)品本身突出為主，輔助以文字信息介紹
1、文字占空間略大，和背景反差色彩較大置于后景（↖左側(cè)兩張）
2、文字占據(jù)空間偏小，且字體較細(xì)視覺感不強烈，置于前景（右側(cè)兩張↗）
3、這些常規(guī)性產(chǎn)品推廣，他們都把背景色接近了產(chǎn)品本身色系（減淡或加深后突出前景）
尤其是走長線宣傳的產(chǎn)品，盡可能要有常規(guī)推廣型和事件型（促銷、新功能）兩種模式做區(qū)別
C、標(biāo)題突出型
韓國也是有暴力型促銷Banner出現(xiàn)的，不過相對比還是清晰些，這里還要說下天貓官方設(shè)計，現(xiàn)在的設(shè)計也都是很贊了，本人也是經(jīng)常看的內(nèi)心驚嘆。
上面幾張圖的特點幾乎都是一樣的：
1、標(biāo)題占據(jù)前景，且占據(jù)空間大
2、色彩與背景色做較大反差
3、讓背景色和產(chǎn)品本身色系接近，且明暗度也略接近，目的是增加產(chǎn)品氛圍渲染，但削弱產(chǎn)品本身視覺沖擊，把標(biāo)題最大化
D、產(chǎn)品展示、標(biāo)題點睛
好像看了上面的讓我自己都覺得，不就是突出產(chǎn)品就是產(chǎn)品占的空間大然后還在前景，突出文字就是文字占的空間大置于前景么？！多簡單點事兒啊……其實好像……也就是這樣咯，但我還是找了點例外如下↓(ˇ＆#717;ˇ) ↓
1、把背景色接近產(chǎn)品（弱化產(chǎn)品本身），文字顏色和背景較大明暗度和色相反差，突出文字（左上↖）。
2、把文字組模塊化、圖形化，可以用會話氣泡、框線、標(biāo)簽……能讓文字作為一個整體突出，然后這個整體和背景色有較大的反差！
這樣做的優(yōu)點就是你的圖要看起來是促銷，而不是廉價！
二，網(wǎng)頁的色彩分解
單張的設(shè)計圖說了一大堆，下面把網(wǎng)頁部分盡可能的說的簡單一點咯！
A、首屏引導(dǎo)型
這類型的網(wǎng)站或網(wǎng)頁是我們看到的大部分網(wǎng)頁設(shè)計類型，多數(shù)是以公司或產(chǎn)品LOGO的主色系進(jìn)行色彩延續(xù)，在頁面需要突出重點的地方，他們選用首屏的主色調(diào)，輔以黑白灰或在加一個臨近色（點綴使用）
這類型的網(wǎng)頁設(shè)計不需要做太多介紹，隨便點開兩個網(wǎng)站就有一個這樣咯！
如果非要說要點，那就是設(shè)計整體頁面的時候劃分好你的重要信息分級，不要在同一屏內(nèi)出現(xiàn)過多重要信息，那樣無論信息還是主色彩，你一定會流失一樣才能保住頁面美感.
B、單底色、多色彩型
這類型設(shè)計多出現(xiàn)于宣傳活動頁，由于需要展現(xiàn)的內(nèi)容較多，甚至多線（品類）展示，所以在不同屏次間做不同色系區(qū)分，但詳細(xì)文字的基礎(chǔ)色的黑白灰盡量不變，這樣才能穩(wěn)定整個頁面。
1、不同頁面用不同色系來做區(qū)分，前提一定要保持色彩在同一級明度、飽和度范圍
2、主推產(chǎn)品色彩反差和空間最大化（↖左上）
3、前景都用那么多色彩了，背景當(dāng)然是黑白色系咯
C、色彩對比型
這類型網(wǎng)頁不那么常見，多出現(xiàn)在對陣游戲、競技賽事、電影傳播、時間軸展示頁，常見的色彩多為紅V藍(lán)、紅V黑、藍(lán)V綠、青V粉……還有一個特點就是，這類型頁面多為敘述性排列信息！
上面兩個頁面一個是上下跳躍分色（↖左上），一個是左右對比分色（看↑）。他們的雖然都是在各自敘述一個產(chǎn)品故事，但第1個是每個頁面表現(xiàn)一段內(nèi)容，右邊則是連貫性展示整體內(nèi)容。當(dāng)然一段一段講述內(nèi)容的頁面自然就是比較長的，因為他要讓訪客（受眾）有一個單獨停留時間，而不是滿篇文字；而左右對比色的連續(xù)展示頁面相對都較短，畢竟一連串的看內(nèi)容難道你還想表現(xiàn)很多屏么！