超多案例！從3個方面幫你學習色彩層級的奧秘

@傻傻的張曉明 ：如何快速簡單讓你的設計看起來更加有系統性和節奏感，并且有自己分析設計的方法？因為之前也看過很多關于設計的分析，大都是“色彩心理學”、“配色原理”之類的巴拉巴拉… 這些內容大都落在單個畫面中，不太強調色彩的系統規劃。今天這篇好文帶你一窺色彩層級的奧秘。

提高層次感的3個方法：

1. 對比設計篇：《實例教學！利用「對比原則」做出搶眼設計的20個方法》
2. 字體組合設計篇：《實例教學！10個幫你運用好字體組合的設計原則》
3. 集大成者：《想提高作品層次感？先學會這12個字體運用技巧！》

一，Banner 圖的色彩分解

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

A、主產品美觀突出型

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

上面的這3張圖，算是汽車中的高端車型和一個高爾夫奢侈品，其實想一想看過的大部分高端（貴貴貴）的產品設計大都是這種風格。這里面說的貴是相對的，就好像哈根達斯幾個雪球100多元，也算奢侈了！

1、因為產品本身已經非常精美，所以文字大都用白色或灰黑做輔助（根據底色來定）

2、為了最大化產品優勢，文字所占空間也相對較小，且多用系統字體（因為不搶眼）

3、背景多數選擇實景，且接近產品本身色系，要么君臨天下的大場景、要么卓爾不凡的近距離

當然了，無論汽車還是奢侈品，他們也都有更加細分的市場和投放渠道，如汽車的高端車、家庭型、運動型、白領代步……所以在設計中會根據產品不同的市場方向進行規劃。我們做任何設計也都是如此，所以在每次接到設計任務的時候一定一定要和需求方溝通清楚具體方向。

上面這幾個圖就是青年運動型咯，用動感的背景來表達“看我動力十足，快來一起撒野”

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

當最終還是開始說的那樣，當產品（美女帥哥也是哦！）本身足夠美觀的時候，一定要最大化突出產品本身，信息只是作為輔助，層級排在商品之后。

B、產品展示型?

當然這個也是我們最常見的設計圖，并且更新頻率更快（想起來都夠了是不是）,電商里面最常見的就是這類圖，這時候就需要在文字字形色彩、背景色彩或輔助元素上多做一點設計排列了，看下面布靈布靈……↘(ˇ?ˇ)↘

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

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

2、文字占據空間偏小，且字體較細視覺感不強烈，置于前景（右側兩張↗）

3、這些常規性產品推廣，他們都把背景色接近了產品本身色系（減淡或加深后突出前景）

尤其是走長線宣傳的產品，盡可能要有常規推廣型和事件型（促銷、新功能）兩種模式做區別

C、標題突出型

韓國也是有暴力型促銷Banner出現的，不過相對比還是清晰些，這里還要說下天貓官方設計，現在的設計也都是很贊了，本人也是經常看的內心驚嘆。

上面幾張圖的特點幾乎都是一樣的：

1、標題占據前景，且占據空間大

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

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

D、產品展示、標題點睛

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

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

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

這樣做的優點就是你的圖要看起來是促銷，而不是廉價！

二，網頁的色彩分解

單張的設計圖說了一大堆，下面把網頁部分盡可能的說的簡單一點咯！

A、首屏引導型

這類型的網站或網頁是我們看到的大部分網頁設計類型，多數是以公司或產品LOGO的主色系進行色彩延續，在頁面需要突出重點的地方，他們選用首屏的主色調，輔以黑白灰或在加一個臨近色（點綴使用）

這類型的網頁設計不需要做太多介紹，隨便點開兩個網站就有一個這樣咯！

如果非要說要點，那就是設計整體頁面的時候劃分好你的重要信息分級，不要在同一屏內出現過多重要信息，那樣無論信息還是主色彩，你一定會流失一樣才能保住頁面美感.

B、單底色、多色彩型

這類型設計多出現于宣傳活動頁，由于需要展現的內容較多，甚至多線（品類）展示，所以在不同屏次間做不同色系區分，但詳細文字的基礎色的黑白灰盡量不變，這樣才能穩定整個頁面。

1、不同頁面用不同色系來做區分，前提一定要保持色彩在同一級明度、飽和度范圍

2、主推產品色彩反差和空間最大化（↖左上）

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

C、色彩對比型

這類型網頁不那么常見，多出現在對陣游戲、競技賽事、電影傳播、時間軸展示頁，常見的色彩多為紅V藍、紅V黑、藍V綠、青V粉……還有一個特點就是，這類型頁面多為敘述性排列信息！

上面兩個頁面一個是上下跳躍分色（↖左上），一個是左右對比分色（看↑）。他們的雖然都是在各自敘述一個產品故事，但第1個是每個頁面表現一段內容，右邊則是連貫性展示整體內容。當然一段一段講述內容的頁面自然就是比較長的，因為他要讓訪客（受眾）有一個單獨停留時間，而不是滿篇文字；而左右對比色的連續展示頁面相對都較短，畢竟一連串的看內容難道你還想表現很多屏么！

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

三，色彩在APP中的分級應用

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

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

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

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

A、主頁面的色彩分析

從首次安裝時的啟動閃屏、啟動頁、節日閃屏，豆瓣已經把主色系展現

1、主色系（明度飽和度）用手寫方式展現

2、輔助色黃色同時并行出現

3、無論Hello、還是小插畫都把清新風表現出來和豆瓣的主色系形成呼應

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

首頁為兩張，第1張常態（↓）、第2張向上翻閱內容的瀏覽形式（↓）。

1、在Tabbar、內容提示標簽、Button中都應用了LOGO的主色（作為第一級提示常態）

2、APP中的具體產品剛好都用到了輔助色橙黃色，產品星標和優秀內容提示標簽（重點提示），這個用法是不是和那個Banner圖的最后一部分有點像的感覺（小面積高反差的點睛作用）

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

加個小重點：在豆瓣的Titlebar上面，進入小組后有一個關注的Icon選項，當點擊選中后你會發現那個關注的小心型依然是綠色的哎！不得不說這個和個人中心的小反差他們做的確實很大膽，系統性很牛逼！

B、第二層級色彩

現在重點來了，在點擊進入list page后，很明顯的第二層級色彩

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

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

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

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

C、第三層級色彩

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

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

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

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

寫在最后，其實多數的移動端設計，產品方（項目組）已經把整個產品項目進行了規劃，并且把梳理后的原型圖給到了UI和視覺設計師（小公司就全做咯），這時候產品信息和交互架構的層級已經分割非常明確，更需要我們把屬于視覺方向的色彩、圖標甚至是分割線設計規劃出同樣有層級的系統形式！

歡迎添加作者的微信個人號：

「技多不壓身的設計師才有高薪資」

1. 平面設計：《超贊！設計師完全自學指南》
2. 交互設計：《交互設計師修煉指南！教你從零開始成為優秀交互設計師》
3. UI設計：《超實用新手指南！零基礎如何自學UI設計？》
4. 前端開發：《天貓高手來教你！零基礎如何系統地學習前端開發？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎知識學起來！為設計師量身打造的DPI指南》
8. 交互設計自學路徑圖：《零基礎入門！給非科班生的自學路徑圖之交互設計篇》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量150萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com