[ 平面理論教程 ] 新手設計師如何學習色彩層級的奧秘- 設計教程 - 骨子愛創意

教學主題: 新手設計師如何學習色彩層級的奧秘

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 新手設計師如何學習色彩層級的奧秘

這教學的重點為這幾點 [ 層級,奧秘,色彩,學習,設計師,如何,新手,產品,頁面,設計 ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

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

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

一，Banner 圖的色彩分解

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

A、主產品美觀突出型

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

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

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

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

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

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

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

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

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

B、產品展示型

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

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

1、文字占空間略大，和背景反差色彩較大置於後景(I左側兩張)

2、文字佔據空間偏小，且字體較細視覺感不強烈，置於前景(右側兩張J)

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

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

C、標題突出型

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

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

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

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

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

D、產品展示、標題點睛

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

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

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

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

二，網頁的色彩分解

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

A、首屏引導型

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

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

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

B、單底色、多色彩型

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

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

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

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

C、色彩對比型

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

上面兩個頁面一個是上下跳躍分色(I左上)，一個是左右對比分色(看↑)。他們的雖然都是在各自敘述一個產品故事，但第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后，很明顯的第二層級色彩

貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

貼心提醒: 使用選框工具( Marquee Tools )的時候，按住Shift鍵可以劃出 正方形和正圓
的選區；按住Alt鍵將從起始點為中心勾劃選區。

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

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

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

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

C、第三層級色彩

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

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

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

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

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

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

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 新手設計師如何學習色彩層級的奧秘 這教學會喜歡

文章標題: 骨子愛創意- 新手設計師如何學習色彩層級的奧秘–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 層級,奧秘,色彩,學習,設計師,如何,新手,產品,頁面,設計

本文永久連結 :新手設計師如何學習色彩層級的奧秘

本文轉載自 :VIA