色彩層級的奧秘介紹

　　本文介紹了從3個方面幫你學(xué)習(xí)色彩層級的奧秘。一起來看看吧!

　　一，Banner 圖的色彩分解

　　這部分我會著重說的比較多，因為在后面的網(wǎng)頁和APP當(dāng)中都會有涉及，而且當(dāng)了解的大概的原理后看到后面自然也就會很容易的明白了。

　　A、主產(chǎn)品美觀突出型

　　首先從汽車類Banner 圖開始說起吧!因為這算是一大類，如：“汽車、奢侈品、高級音響……”，甚至是模特、演員相關(guān)的設(shè)計原理也大都如此，就是需要宣傳推廣的產(chǎn)品本身忒漂亮。

　　上面的這3張圖，算是汽車中的高端車型和一個高爾夫奢侈品，其實想一想看過的大部分高端(貴貴貴)的產(chǎn)品設(shè)計大都是這種風(fēng)格。這里面說的貴是相對的，就好像哈根達(dá)斯幾個雪球100多元，也算奢侈了!

　　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è)計排列了，看下面布靈布靈……

　　這一組還是以產(chǎn)品本身突出為主，輔助以文字信息介紹

　　1、文字占空間略大，和背景反差色彩較大置于后景(↖左側(cè)兩張)

　　2、文字占據(jù)空間偏小，且字體較細(xì)視覺感不強(qiáng)烈，置于前景(右側(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)品占的空間大然后還在前景，突出文字就是文字占的空間大置于前景么?!多簡單點事兒啊……其實好像……也就是這樣咯，但我還是找了點例外如下↓(ˇˍˇ) ↓

　　1、把背景色接近產(chǎn)品(弱化產(chǎn)品本身)，文字顏色和背景較大明暗度和色相反差，突出文字(左上↖)。

　　2、把文字組模塊化、圖形化，可以用會話氣泡、框線、標(biāo)簽……能讓文字作為一個整體突出，然后這個整體和背景色有較大的反差!

　　這樣做的優(yōu)點就是你的圖要看起來是促銷，而不是廉價!

　　二，網(wǎng)頁的色彩分解

　　單張的設(shè)計圖說了一大堆，下面把網(wǎng)頁部分盡可能的說的簡單一點咯!

　　A、首屏引導(dǎo)型

　　這類型的網(wǎng)站或網(wǎng)頁是我們看到的大部分頁面設(shè)計類型，多數(shù)是以公司或產(chǎn)品LOGO的主色系進(jìn)行色彩延續(xù)，在頁面需要突出重點的地方，他們選用首屏的主色調(diào)，輔以黑白灰或在加一個臨近色(點綴使用)

　　這類型的頁面設(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)很多屏么!

　　這里只說一個重點就是，這類型頁面大都要有較好的圖才行，要么攝影圖片、要么游戲原畫、至少要有精致的圖標(biāo)……沒有怎么辦，去搜圖、去畫圖標(biāo)啊/(ㄒoㄒ)/~~!

　　三，色彩在APP中的分級應(yīng)用

　　寫到這我的內(nèi)心是崩潰的，這個坑挖的太大了，居然來分析APP的色彩運用，簡直就是作啊……

　　第二次崩潰下載了一個看起來漂亮的韓國應(yīng)用CongKong，然后……用不了，于是我只好用國內(nèi)一小撮文藝青年和一大部分偽文藝青年聚集的豆瓣來叨叨叨了!

　　當(dāng)我自己看完了豆瓣的設(shè)計后，還是恨贊嘆的，心想我啥時候能做的這么好啊(又一波馬屁拍的真棒)!他們的APP當(dāng)中色彩確實也很有系統(tǒng)分級性了，甚至是在版本迭代后的閃屏圖都保留了整體的色彩傳承，此處給予掌聲 啪啪啪……啊!

　　寫在此處，整個A部分大家看不看都行(都是廢話)，因為大部分APP都是走這種主色系統(tǒng)形式。

　　A、主頁面的色彩分析

　　從首次安裝時的啟動閃屏、啟動頁、節(jié)日閃屏，豆瓣已經(jīng)把主色系展現(xiàn)

　　1、主色系(明度飽和度)用手寫方式展現(xiàn)

　　2、輔助色黃色同時并行出現(xiàn)

　　3、無論Hello、還是小插畫都把清新風(fēng)表現(xiàn)出來和豆瓣的主色系形成呼應(yīng)

　　下面的6張為APP主頁面，截圖色調(diào)的不同，我只能說也許是因為小米手機(jī)

　　首頁為兩張，第1張常態(tài)(↓)、第2張向上翻閱內(nèi)容的瀏覽形式(↓)。

　　1、在Tabbar、內(nèi)容提示標(biāo)簽、Button中都應(yīng)用了LOGO的主色(作為第一級提示常態(tài))

　　2、APP中的具體產(chǎn)品剛好都用到了輔助色橙黃色，產(chǎn)品星標(biāo)和優(yōu)秀內(nèi)容提示標(biāo)簽(重點提示)，這個用法是不是和那個Banner圖的最后一部分有點像的感覺(小面積高反差的點睛作用)

　　3、在個人中心頁面的Icon與Tabbar上面Icon的綠色基本保持了同級的明暗度和飽和度，這些都是較為常用的操作項，所以色彩層級也都用了同一級

　　加個小重點：在豆瓣的Titlebar上面，進(jìn)入小組后有一個關(guān)注的Icon選項，當(dāng)點擊選中后你會發(fā)現(xiàn)那個關(guān)注的小心型依然是綠色的哎!不得不說這個和個人中心的小反差他們做的確實很大膽，系統(tǒng)性很牛逼!

　　B、第二層級色彩

　　現(xiàn)在重點來了，在點擊進(jìn)入list page后，很明顯的第二層級色彩

　　1、第1張圖在欄目內(nèi)的標(biāo)簽由于大都是非常用圖標(biāo)，所以使用了填色圖形形式，明度較高飽和度較低(說人話就是淡色)，這樣更好的突出了小組文字標(biāo)題，這里的視覺層級就是 1、欄目標(biāo)題 2、圖標(biāo) 3、內(nèi)容概略。

　　2、第2張圖在進(jìn)入詳細(xì)內(nèi)容列表頁面后，右側(cè)的大色塊圖標(biāo)用了相對較深的顏色，因為在這一處圖標(biāo)的目的是和內(nèi)容圖片相等(圖片、圖標(biāo)會并行出現(xiàn))，因為每屏只能展示三個標(biāo)簽，如果偏淡會讓整個頁面內(nèi)容視覺感偏空，且弱于同層級圖片。

　　3、第3張圖這里面，小組的快捷使用圖標(biāo)雖然色彩并沒有減淡，但由于用的線性圖標(biāo)空間留白較大，整體視覺感弱化，同樣重要的下面小組推薦話題Banner圖，視覺感在整個畫面中第一層級。當(dāng)然你可以說隨便做個圖在這個位置和大小占比上都第一層級啊(再次提醒這里我說的層級是視覺展現(xiàn)性，而非交互層面或用戶操作習(xí)慣)，但他們在色調(diào)飽和度以及畫面形式上也用了非常相近的統(tǒng)一樣式，并沒有過深或過淺。

　　咳咳：在這里我還補充一下，豆瓣君你的小組推薦話題Banner左右滑動的時候經(jīng)常失靈啊!

　　C、第三層級色彩

　　下面的這幾張圖算是產(chǎn)品詳情和話題內(nèi)容頁了，在這幾個頁面中很明顯的大量使用第三層級色彩

　　再次補充請原諒我截圖的偏色……

　　1、在這些內(nèi)容頁當(dāng)中，話題(無評論 有評論 熱門)和討論、搜索圖標(biāo)都使用了更加偏淺的色系，再加上圖標(biāo)本身又較小，很明顯的形成了第三層級

　　2、值得深思的是豆瓣在Title的設(shè)計，無論是色彩還是狀態(tài)并沒有做色彩統(tǒng)一，而是整體分成了白色和APP同級色系兩種樣式。在首屏常態(tài)和產(chǎn)品詳情(向下瀏覽時會呈現(xiàn))時會呈現(xiàn)LOGO的綠色主色系，同時在進(jìn)入小組子級的各個小組首頁會隨機(jī)分成明度同級但飽和度偏低一點的多色彩。其它主頁面和子頁面Title則均為為白色，有興趣的同學(xué)可以去研究一下，到時候歡迎追加評論!

　　韓國也是有暴力型促銷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)品占的空間大然后還在前景，突出文字就是文字占的空間大置于前景么?!多簡單點事兒啊……其實好像……也就是這樣咯，但我還是找了點例外如下↓(ˇˍˇ) ↓

　　1、把背景色接近產(chǎn)品(弱化產(chǎn)品本身)，文字顏色和背景較大明暗度和色相反差，突出文字(左上↖)。

　　2、把文字組模塊化、圖形化，可以用會話氣泡、框線、標(biāo)簽……能讓文字作為一個整體突出，然后這個整體和背景色有較大的反差!

　　這樣做的優(yōu)點就是你的圖要看起來是促銷，而不是廉價!

　　二，網(wǎng)頁的色彩分解

　　單張的設(shè)計圖說了一大堆，下面把網(wǎng)頁部分盡可能的說的簡單一點咯!

　　A、首屏引導(dǎo)型

　　這類型的網(wǎng)站或網(wǎng)頁是我們看到的大部分頁面設(shè)計類型，多數(shù)是以公司或產(chǎn)品LOGO的主色系進(jìn)行色彩延續(xù)，在頁面需要突出重點的地方，他們選用首屏的主色調(diào)，輔以黑白灰或在加一個臨近色(點綴使用)

　　這類型的頁面設(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)很多屏么!

　　這里只說一個重點就是，這類型頁面大都要有較好的圖才行，要么攝影圖片、要么游戲原畫、至少要有精致的圖標(biāo)……沒有怎么辦，去搜圖、去畫圖標(biāo)啊/(ㄒoㄒ)/~~!

　　三，色彩在APP中的分級應(yīng)用

　　寫到這我的內(nèi)心是崩潰的，這個坑挖的太大了，居然來分析APP的色彩運用，簡直就是作啊……

　　第二次崩潰下載了一個看起來漂亮的韓國應(yīng)用CongKong，然后……用不了，于是我只好用國內(nèi)一小撮文藝青年和一大部分偽文藝青年聚集的豆瓣來叨叨叨了!

　　當(dāng)我自己看完了豆瓣的設(shè)計后，還是恨贊嘆的，心想我啥時候能做的這么好啊(又一波馬屁拍的真棒)!他們的APP當(dāng)中色彩確實也很有系統(tǒng)分級性了，甚至是在版本迭代后的閃屏圖都保留了整體的色彩傳承，此處給予掌聲 啪啪啪……啊!

　　寫在此處，整個A部分大家看不看都行(都是廢話)，因為大部分APP都是走這種主色系統(tǒng)形式。

　　A、主頁面的色彩分析

　　從首次安裝時的啟動閃屏、啟動頁、節(jié)日閃屏，豆瓣已經(jīng)把主色系展現(xiàn)

　　1、主色系(明度飽和度)用手寫方式展現(xiàn)

　　2、輔助色黃色同時并行出現(xiàn)

　　3、無論Hello、還是小插畫都把清新風(fēng)表現(xiàn)出來和豆瓣的主色系形成呼應(yīng)

　　下面的6張為APP主頁面，截圖色調(diào)的不同，我只能說也許是因為小米手機(jī)

　　首頁為兩張，第1張常態(tài)(↓)、第2張向上翻閱內(nèi)容的瀏覽形式(↓)。

　　1、在Tabbar、內(nèi)容提示標(biāo)簽、Button中都應(yīng)用了LOGO的主色(作為第一級提示常態(tài))

　　2、APP中的具體產(chǎn)品剛好都用到了輔助色橙黃色，產(chǎn)品星標(biāo)和優(yōu)秀內(nèi)容提示標(biāo)簽(重點提示)，這個用法是不是和那個Banner圖的最后一部分有點像的感覺(小面積高反差的點睛作用)

　　3、在個人中心頁面的Icon與Tabbar上面Icon的綠色基本保持了同級的明暗度和飽和度，這些都是較為常用的操作項，所以色彩層級也都用了同一級

　　加個小重點：在豆瓣的Titlebar上面，進(jìn)入小組后有一個關(guān)注的Icon選項，當(dāng)點擊選中后你會發(fā)現(xiàn)那個關(guān)注的小心型依然是綠色的哎!不得不說這個和個人中心的小反差他們做的確實很大膽，系統(tǒng)性很牛逼!

　　B、第二層級色彩

　　現(xiàn)在重點來了，在點擊進(jìn)入list page后，很明顯的第二層級色彩

　　1、第1張圖在欄目內(nèi)的標(biāo)簽由于大都是非常用圖標(biāo)，所以使用了填色圖形形式，明度較高飽和度較低(說人話就是淡色)，這樣更好的突出了小組文字標(biāo)題，這里的視覺層級就是 1、欄目標(biāo)題 2、圖標(biāo) 3、內(nèi)容概略。

　　2、第2張圖在進(jìn)入詳細(xì)內(nèi)容列表頁面后，右側(cè)的大色塊圖標(biāo)用了相對較深的顏色，因為在這一處圖標(biāo)的目的是和內(nèi)容圖片相等(圖片、圖標(biāo)會并行出現(xiàn))，因為每屏只能展示三個標(biāo)簽，如果偏淡會讓整個頁面內(nèi)容視覺感偏空，且弱于同層級圖片。

　　3、第3張圖這里面，小組的快捷使用圖標(biāo)雖然色彩并沒有減淡，但由于用的線性圖標(biāo)空間留白較大，整體視覺感弱化，同樣重要的下面小組推薦話題Banner圖，視覺感在整個畫面中第一層級。當(dāng)然你可以說隨便做個圖在這個位置和大小占比上都第一層級啊(再次提醒這里我說的層級是視覺展現(xiàn)性，而非交互層面或用戶操作習(xí)慣)，但他們在色調(diào)飽和度以及畫面形式上也用了非常相近的統(tǒng)一樣式，并沒有過深或過淺。

　　咳咳：在這里我還補充一下，豆瓣君你的小組推薦話題Banner左右滑動的時候經(jīng)常失靈啊!

　　C、第三層級色彩

　　下面的這幾張圖算是產(chǎn)品詳情和話題內(nèi)容頁了，在這幾個頁面中很明顯的大量使用第三層級色彩

　　再次補充請原諒我截圖的偏色……

　　1、在這些內(nèi)容頁當(dāng)中，話題(無評論 有評論 熱門)和討論、搜索圖標(biāo)都使用了更加偏淺的色系，再加上圖標(biāo)本身又較小，很明顯的形成了第三層級

　　2、值得深思的是豆瓣在Title的設(shè)計，無論是色彩還是狀態(tài)并沒有做色彩統(tǒng)一，而是整體分成了白色和APP同級色系兩種樣式。在首屏常態(tài)和產(chǎn)品詳情(向下瀏覽時會呈現(xiàn))時會呈現(xiàn)LOGO的綠色主色系，同時在進(jìn)入小組子級的各個小組首頁會隨機(jī)分成明度同級但飽和度偏低一點的多色彩。其它主頁面和子頁面Title則均為為白色，有興趣的同學(xué)可以去研究一下，到時候歡迎追加評論!