色彩層級(jí)的奧秘介紹

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

　　一，Banner 圖的色彩分解

　　這部分我會(huì)著重說(shuō)的比較多，因?yàn)樵诤竺娴木W(wǎng)頁(yè)和APP當(dāng)中都會(huì)有涉及，而且當(dāng)了解的大概的原理后看到后面自然也就會(huì)很容易的明白了。

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

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

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

　　1、因?yàn)楫a(chǎn)品本身已經(jīng)非常精美，所以文字大都用白色或灰黑做輔助(根據(jù)底色來(lái)定)

　　2、為了最大化產(chǎn)品優(yōu)勢(shì)，文字所占空間也相對(duì)較小，且多用系統(tǒng)字體(因?yàn)椴粨屟?

　　3、背景多數(shù)選擇實(shí)景，且接近產(chǎn)品本身色系，要么君臨天下的大場(chǎng)景、要么卓爾不凡的近距離

　　當(dāng)然了，無(wú)論汽車(chē)還是奢侈品，他們也都有更加細(xì)分的市場(chǎng)和投放渠道，如汽車(chē)的高端車(chē)、家庭型、運(yùn)動(dòng)型、白領(lǐng)代步……所以在設(shè)計(jì)中會(huì)根據(jù)產(chǎn)品不同的市場(chǎng)方向進(jìn)行規(guī)劃。我們做任何設(shè)計(jì)也都是如此，所以在每次接到設(shè)計(jì)任務(wù)的時(shí)候一定一定要和需求方溝通清楚具體方向。

　　上面這幾個(gè)圖就是青年運(yùn)動(dòng)型咯，用動(dòng)感的背景來(lái)表達(dá)“看我動(dòng)力十足，快來(lái)一起撒野”

　　下面這幾張圖很明顯是為了表現(xiàn)繽紛生活，愉快出行的生活狀態(tài)!畫(huà)面背景色和產(chǎn)品本身有較大反差，這樣依然是最大化的突出了我們的宣傳目的。

　　當(dāng)最終還是開(kāi)始說(shuō)的那樣，當(dāng)產(chǎn)品(美女帥哥也是哦!)本身足夠美觀的時(shí)候，一定要最大化突出產(chǎn)品本身，信息只是作為輔助，層級(jí)排在商品之后。

　　B、產(chǎn)品展示型

　　當(dāng)然這個(gè)也是我們最常見(jiàn)的設(shè)計(jì)圖，并且更新頻率更快(想起來(lái)都?jí)蛄耸遣皇?,電商里面最常見(jiàn)的就是這類(lèi)圖，這時(shí)候就需要在文字字形色彩、背景色彩或輔助元素上多做一點(diǎn)設(shè)計(jì)排列了，看下面布靈布靈……

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

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

　　2、文字占據(jù)空間偏小，且字體較細(xì)視覺(jué)感不強(qiáng)烈，置于前景(右側(cè)兩張↗)

　　3、這些常規(guī)性產(chǎn)品推廣，他們都把背景色接近了產(chǎn)品本身色系(減淡或加深后突出前景)

　　尤其是走長(zhǎng)線宣傳的產(chǎn)品，盡可能要有常規(guī)推廣型和事件型(促銷(xiāo)、新功能)兩種模式做區(qū)別

　　C、標(biāo)題突出型

　　韓國(guó)也是有暴力型促銷(xiāo)Banner出現(xiàn)的，不過(guò)相對(duì)比還是清晰些，這里還要說(shuō)下天貓官方設(shè)計(jì)，現(xiàn)在的設(shè)計(jì)也都是很贊了，本人也是經(jīng)?？吹膬?nèi)心驚嘆。

　　上面幾張圖的特點(diǎn)幾乎都是一樣的：

　　1、標(biāo)題占據(jù)前景，且占據(jù)空間大

　　2、色彩與背景色做較大反差

　　3、讓背景色和產(chǎn)品本身色系接近，且明暗度也略接近，目的是增加產(chǎn)品氛圍渲染，但削弱產(chǎn)品本身視覺(jué)沖擊，把標(biāo)題最大化

　　D、產(chǎn)品展示、標(biāo)題點(diǎn)睛

　　好像看了上面的讓我自己都覺(jué)得，不就是突出產(chǎn)品就是產(chǎn)品占的空間大然后還在前景，突出文字就是文字占的空間大置于前景么?!多簡(jiǎn)單點(diǎn)事兒啊……其實(shí)好像……也就是這樣咯，但我還是找了點(diǎn)例外如下↓(ˇˍˇ) ↓

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

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

　　這樣做的優(yōu)點(diǎn)就是你的圖要看起來(lái)是促銷(xiāo)，而不是廉價(jià)!

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

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

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

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

　　這類(lèi)型的頁(yè)面設(shè)計(jì)不需要做太多介紹，隨便點(diǎn)開(kāi)兩個(gè)網(wǎng)站就有一個(gè)這樣咯!

　　如果非要說(shuō)要點(diǎn)，那就是設(shè)計(jì)整體頁(yè)面的時(shí)候劃分好你的重要信息分級(jí)，不要在同一屏內(nèi)出現(xiàn)過(guò)多重要信息，那樣無(wú)論信息還是主色彩，你一定會(huì)流失一樣才能保住頁(yè)面美感.

　　B、單底色、多色彩型

　　這類(lèi)型設(shè)計(jì)多出現(xiàn)于宣傳活動(dòng)頁(yè)，由于需要展現(xiàn)的內(nèi)容較多，甚至多線(品類(lèi))展示，所以在不同屏次間做不同色系區(qū)分，但詳細(xì)文字的基礎(chǔ)色的黑白灰盡量不變，這樣才能穩(wěn)定整個(gè)頁(yè)面。

　　1、不同頁(yè)面用不同色系來(lái)做區(qū)分，前提一定要保持色彩在同一級(jí)明度、飽和度范圍

　　2、主推產(chǎn)品色彩反差和空間最大化(↖左上)

　　3、前景都用那么多色彩了，背景當(dāng)然是黑白色系咯

　　C、色彩對(duì)比型

　　這類(lèi)型網(wǎng)頁(yè)不那么常見(jiàn)，多出現(xiàn)在對(duì)陣游戲、競(jìng)技賽事、電影傳播、時(shí)間軸展示頁(yè)，常見(jiàn)的色彩多為紅V藍(lán)、紅V黑、藍(lán)V綠、青V粉……還有一個(gè)特點(diǎn)就是，這類(lèi)型頁(yè)面多為敘述性排列信息!

　　上面兩個(gè)頁(yè)面一個(gè)是上下跳躍分色(↖左上)，一個(gè)是左右對(duì)比分色(看↑)。他們的雖然都是在各自敘述一個(gè)產(chǎn)品故事，但第1個(gè)是每個(gè)頁(yè)面表現(xiàn)一段內(nèi)容，右邊則是連貫性展示整體內(nèi)容。當(dāng)然一段一段講述內(nèi)容的頁(yè)面自然就是比較長(zhǎng)的，因?yàn)樗屧L客(受眾)有一個(gè)單獨(dú)停留時(shí)間，而不是滿(mǎn)篇文字;而左右對(duì)比色的連續(xù)展示頁(yè)面相對(duì)都較短，畢竟一連串的看內(nèi)容難道你還想表現(xiàn)很多屏么!

　　這里只說(shuō)一個(gè)重點(diǎn)就是，這類(lèi)型頁(yè)面大都要有較好的圖才行，要么攝影圖片、要么游戲原畫(huà)、至少要有精致的圖標(biāo)……沒(méi)有怎么辦，去搜圖、去畫(huà)圖標(biāo)啊/(ㄒoㄒ)/~~!

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

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

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

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

　　寫(xiě)在此處，整個(gè)A部分大家看不看都行(都是廢話)，因?yàn)榇蟛糠諥PP都是走這種主色系統(tǒng)形式。

　　A、主頁(yè)面的色彩分析

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

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

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

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

　　下面的6張為APP主頁(yè)面，截圖色調(diào)的不同，我只能說(shuō)也許是因?yàn)樾∶资謾C(jī)

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

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

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

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

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

　　B、第二層級(jí)色彩

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

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

　　2、第2張圖在進(jìn)入詳細(xì)內(nèi)容列表頁(yè)面后，右側(cè)的大色塊圖標(biāo)用了相對(duì)較深的顏色，因?yàn)樵谶@一處圖標(biāo)的目的是和內(nèi)容圖片相等(圖片、圖標(biāo)會(huì)并行出現(xiàn))，因?yàn)槊科林荒苷故救齻€(gè)標(biāo)簽，如果偏淡會(huì)讓整個(gè)頁(yè)面內(nèi)容視覺(jué)感偏空，且弱于同層級(jí)圖片。

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

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

　　C、第三層級(jí)色彩

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

　　再次補(bǔ)充請(qǐng)?jiān)徫医貓D的偏色……

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

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

　　韓國(guó)也是有暴力型促銷(xiāo)Banner出現(xiàn)的，不過(guò)相對(duì)比還是清晰些，這里還要說(shuō)下天貓官方設(shè)計(jì)，現(xiàn)在的設(shè)計(jì)也都是很贊了，本人也是經(jīng)常看的內(nèi)心驚嘆。

　　上面幾張圖的特點(diǎn)幾乎都是一樣的：

　　1、標(biāo)題占據(jù)前景，且占據(jù)空間大

　　2、色彩與背景色做較大反差

　　3、讓背景色和產(chǎn)品本身色系接近，且明暗度也略接近，目的是增加產(chǎn)品氛圍渲染，但削弱產(chǎn)品本身視覺(jué)沖擊，把標(biāo)題最大化

　　D、產(chǎn)品展示、標(biāo)題點(diǎn)睛

　　好像看了上面的讓我自己都覺(jué)得，不就是突出產(chǎn)品就是產(chǎn)品占的空間大然后還在前景，突出文字就是文字占的空間大置于前景么?!多簡(jiǎn)單點(diǎn)事兒啊……其實(shí)好像……也就是這樣咯，但我還是找了點(diǎn)例外如下↓(ˇˍˇ) ↓

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

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

　　這樣做的優(yōu)點(diǎn)就是你的圖要看起來(lái)是促銷(xiāo)，而不是廉價(jià)!

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

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

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

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

　　這類(lèi)型的頁(yè)面設(shè)計(jì)不需要做太多介紹，隨便點(diǎn)開(kāi)兩個(gè)網(wǎng)站就有一個(gè)這樣咯!

　　如果非要說(shuō)要點(diǎn)，那就是設(shè)計(jì)整體頁(yè)面的時(shí)候劃分好你的重要信息分級(jí)，不要在同一屏內(nèi)出現(xiàn)過(guò)多重要信息，那樣無(wú)論信息還是主色彩，你一定會(huì)流失一樣才能保住頁(yè)面美感.

　　B、單底色、多色彩型

　　這類(lèi)型設(shè)計(jì)多出現(xiàn)于宣傳活動(dòng)頁(yè)，由于需要展現(xiàn)的內(nèi)容較多，甚至多線(品類(lèi))展示，所以在不同屏次間做不同色系區(qū)分，但詳細(xì)文字的基礎(chǔ)色的黑白灰盡量不變，這樣才能穩(wěn)定整個(gè)頁(yè)面。

　　1、不同頁(yè)面用不同色系來(lái)做區(qū)分，前提一定要保持色彩在同一級(jí)明度、飽和度范圍

　　2、主推產(chǎn)品色彩反差和空間最大化(↖左上)

　　3、前景都用那么多色彩了，背景當(dāng)然是黑白色系咯

　　C、色彩對(duì)比型

　　這類(lèi)型網(wǎng)頁(yè)不那么常見(jiàn)，多出現(xiàn)在對(duì)陣游戲、競(jìng)技賽事、電影傳播、時(shí)間軸展示頁(yè)，常見(jiàn)的色彩多為紅V藍(lán)、紅V黑、藍(lán)V綠、青V粉……還有一個(gè)特點(diǎn)就是，這類(lèi)型頁(yè)面多為敘述性排列信息!

　　上面兩個(gè)頁(yè)面一個(gè)是上下跳躍分色(↖左上)，一個(gè)是左右對(duì)比分色(看↑)。他們的雖然都是在各自敘述一個(gè)產(chǎn)品故事，但第1個(gè)是每個(gè)頁(yè)面表現(xiàn)一段內(nèi)容，右邊則是連貫性展示整體內(nèi)容。當(dāng)然一段一段講述內(nèi)容的頁(yè)面自然就是比較長(zhǎng)的，因?yàn)樗屧L客(受眾)有一個(gè)單獨(dú)停留時(shí)間，而不是滿(mǎn)篇文字;而左右對(duì)比色的連續(xù)展示頁(yè)面相對(duì)都較短，畢竟一連串的看內(nèi)容難道你還想表現(xiàn)很多屏么!

　　這里只說(shuō)一個(gè)重點(diǎn)就是，這類(lèi)型頁(yè)面大都要有較好的圖才行，要么攝影圖片、要么游戲原畫(huà)、至少要有精致的圖標(biāo)……沒(méi)有怎么辦，去搜圖、去畫(huà)圖標(biāo)啊/(ㄒoㄒ)/~~!

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

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

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

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

　　寫(xiě)在此處，整個(gè)A部分大家看不看都行(都是廢話)，因?yàn)榇蟛糠諥PP都是走這種主色系統(tǒng)形式。

　　A、主頁(yè)面的色彩分析

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

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

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

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

　　下面的6張為APP主頁(yè)面，截圖色調(diào)的不同，我只能說(shuō)也許是因?yàn)樾∶资謾C(jī)

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

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

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

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

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

　　B、第二層級(jí)色彩

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

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

　　2、第2張圖在進(jìn)入詳細(xì)內(nèi)容列表頁(yè)面后，右側(cè)的大色塊圖標(biāo)用了相對(duì)較深的顏色，因?yàn)樵谶@一處圖標(biāo)的目的是和內(nèi)容圖片相等(圖片、圖標(biāo)會(huì)并行出現(xiàn))，因?yàn)槊科林荒苷故救齻€(gè)標(biāo)簽，如果偏淡會(huì)讓整個(gè)頁(yè)面內(nèi)容視覺(jué)感偏空，且弱于同層級(jí)圖片。

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

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

　　C、第三層級(jí)色彩

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

　　再次補(bǔ)充請(qǐng)?jiān)徫医貓D的偏色……

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

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