圖標(biāo)設(shè)計(jì)怎么配色？

徐大雨啊

杭州/設(shè)計(jì)愛(ài)好者/7年前/11909瀏覽

版權(quán)

徐大雨啊

讓圖標(biāo)“配色”不再憑感覺(jué)

圖標(biāo)是我們UI設(shè)計(jì)工作中不可避免的一項(xiàng)，也是基本技能之一。

圖標(biāo)的配色很大程度上決定了界面的視覺(jué)美觀度，工作中很多新手設(shè)計(jì)師配色都是憑感覺(jué)，這樣的做法其實(shí)并不科學(xué)，如果你很厲害，那這句話當(dāng)我沒(méi)說(shuō)。

設(shè)計(jì)其實(shí)是一門很嚴(yán)謹(jǐn)?shù)目茖W(xué)藝術(shù)，正確的配色會(huì)讓你的圖標(biāo)設(shè)計(jì)更加符合產(chǎn)品，更加貼合用戶。

本文將通過(guò)五個(gè)維度幫助你快速實(shí)現(xiàn)UI圖標(biāo)的配色

01.情緒板

02.用戶畫(huà)像

03.品牌調(diào)性

04.四色原則

05.巧用色板

延伸話題：

圖標(biāo)設(shè)計(jì)一般情況分為：

面性圖標(biāo)

線性圖標(biāo)

線面結(jié)合圖標(biāo)

異形圖標(biāo)

圖標(biāo)的可用性測(cè)試：

可查找性（Find-ability）：用戶是否能在某頁(yè)面上找到該圖標(biāo)。

可識(shí)性（Recognition）：用戶是否能夠理解圖標(biāo)所代表的意思。

預(yù)測(cè)性（Information scent）：用戶能否猜到點(diǎn)擊圖標(biāo)會(huì)發(fā)生什么。

吸引力（Attractiveness）：圖標(biāo)是否美觀。

01.情緒板

色彩心理學(xué)中提到，色彩對(duì)人們的心理活動(dòng)有著重要影響，特別是和情緒有非常密切的關(guān)系。

我們可以從色彩心理學(xué)的角度，再通過(guò)情緒板分析，快速確定圖標(biāo)顏色的色相。

02.用戶畫(huà)像

匹配目標(biāo)用戶人群。通過(guò)目標(biāo)用戶性別，年齡，興趣特征，行為偏好等，確定圖標(biāo)顏色采用同類色，鄰近色，對(duì)比色還是互補(bǔ)色，飽和度高還是飽和度低。

舉個(gè)簡(jiǎn)單的例子：

產(chǎn)品的目標(biāo)用戶是80%為女性，年齡在18-25歲之間的人群，圖標(biāo)的顏色要偏粉嫩，明度高，飽和度高。

產(chǎn)品的目標(biāo)用戶均為中產(chǎn)階級(jí)，年齡在25-39歲之間，追求品質(zhì)生活，圖標(biāo)的顏色盡量沉穩(wěn)，并且飽和度不易過(guò)高。

03.品牌調(diào)性

品牌調(diào)性是非常重要的，我們?cè)谔幚斫缑娴臅r(shí)候很多設(shè)計(jì)方向都是從品牌基因出發(fā)的。品牌的顏色，圖形，吉祥物等都屬于品牌基因。在這里我們單獨(dú)對(duì)顏色進(jìn)行使用或再加工。

04.四色原則

圖標(biāo)顏色盡量不超過(guò)四個(gè)，業(yè)務(wù)相鄰近時(shí)，顏色保持一致。

心理學(xué)上把色彩分為紅、黃、綠、藍(lán)四種，并稱為四原色。通常紅—綠、黃—藍(lán)稱為心理補(bǔ)色。

在色相上保持四色原則。當(dāng)業(yè)務(wù)相互鄰近時(shí)，比如租房，寫(xiě)字樓，同屬于出租房屋業(yè)務(wù)，可以采用色相一致。

05.巧用色板

其實(shí)有很多的色板值得大家借鑒和學(xué)習(xí)，在這里我暫時(shí)羅列出來(lái)兩個(gè)，僅供參考。

Ant Design

一個(gè)基于“自然”和“確定”的設(shè)計(jì)價(jià)值觀的設(shè)計(jì)語(yǔ)言。

Ant Design 的設(shè)計(jì)團(tuán)隊(duì)傾向于采用 HSB 色彩模型進(jìn)行設(shè)計(jì)，通過(guò)對(duì)自然場(chǎng)景的抽象捕捉，結(jié)合螞蟻的技術(shù)基因，形成了特有的 12 色。進(jìn)一步又通過(guò)大量的觀察，捕捉不同色彩在自然光下的變化規(guī)律，借助美術(shù)中素描的思路，對(duì) 12 個(gè)顏色進(jìn)行了衍生。

Ant Design 的基礎(chǔ)色板共計(jì) 120 個(gè)顏色，包含 12 個(gè)主色以及衍生色。