如何制定產(chǎn)品主色?試試超容易上手的色彩理論取色法
從零做一款產(chǎn)品的時(shí)候,需要制定產(chǎn)品的主色。怎么制定呢?
"歸納產(chǎn)品特性和理念-提取關(guān)鍵詞-建立情緒版-選擇色相-制定色系",這是很多文章里面歸納出來的幾步,使用的時(shí)候也有理論依據(jù)。但我想說點(diǎn)不一樣的。在這個(gè)時(shí)代,產(chǎn)品五花八門,想用哪一類別的產(chǎn)品一搜一大把,在七麥數(shù)據(jù)搜索購(gòu)物類的 APP 榜單,光第一頁單榜就有 200 多個(gè)。
我們模糊一下這張圖,你會(huì)發(fā)現(xiàn) APP 最終記憶點(diǎn)是色彩。
換做在手機(jī)看也是一樣的,打開你的 APP 列表,快速往下滑去找一個(gè) APP,你會(huì)發(fā)現(xiàn)它們最終只剩下色彩——"我想找愛奇藝,它在我記憶中是綠色的,剛才快速滑過的紅色黃色都不是"。當(dāng)然,這只是拿來舉例,通常你不需要這樣去找一個(gè)APP。用這個(gè)例子只想強(qiáng)調(diào)APP主色的意義——它是區(qū)別于競(jìng)品的第一特征,是調(diào)性概括,是一種態(tài)度,甚至是你趁手的兵器。
所以當(dāng)你去確定產(chǎn)品主色的時(shí)候,有三種思路:隨大眾;反著來;搞特殊。
隨大眾
不同的行業(yè)發(fā)展至今,已經(jīng)自帶色相了。比如電商購(gòu)物是紅黃色、醫(yī)療健康是藍(lán)綠色、商務(wù)是藍(lán)色…如果我們每次都用產(chǎn)品或者行業(yè)特性去推導(dǎo)色相,出來的大多數(shù)都是第一種思路。
反著來
使用和競(jìng)品色相相差大于 90 度(中差色、對(duì)比色、互補(bǔ)色)的,差別較大的就是反著來。這是逆向思維,通過差異較大的色相能讓你在一堆顏色同質(zhì)化的競(jìng)品中跳出來。
搞特殊
抖音和 keep 是我心中搞特殊的 top,既不使用行業(yè)相同的色相,也不使用相反的色相,而是雙色相或雙色相疊加。
用我做的小易 APP 來做例子說一下制定色系的過程吧
- 基于行業(yè)與場(chǎng)景確認(rèn)色相
- 色相偏移
- WCAG 標(biāo)準(zhǔn)驗(yàn)證顏色
- 色系拓展
小易是一款助力銷售的 CRM 產(chǎn)品,主打銷售智能化。取色就要看你立足點(diǎn)是"數(shù)據(jù)智能"還是"銷售"了。與數(shù)據(jù)智能相關(guān)的繞不開藍(lán)綠色,與銷售系統(tǒng)相關(guān)的繞不開橙色。這個(gè)產(chǎn)品是內(nèi)部定制化的,不存在有競(jìng)品的情況,因此隨大眾更容易取得方案的通過。為免出現(xiàn)"這個(gè)顏色一點(diǎn)都不科技和智能"的質(zhì)疑和返工,我非??茖W(xué)(識(shí)相)地選擇了藍(lán)色作為主要色相。
色相偏移
用 HSB 參數(shù)來看,正藍(lán)色的 H 值(色相)是 240。引用優(yōu)設(shè)大課堂態(tài)爺?shù)囊痪湓捠牵阂腩伾每?,色相別太正。那么正藍(lán)色就要偏移:往冷色偏移或者往暖色偏移。
這里加入一個(gè)空間的概念:假設(shè)產(chǎn)品是一個(gè)空間,里面主打智能和數(shù)據(jù),我設(shè)定了大環(huán)境偏冷光,所以里面的物體會(huì)受冷光的影響。
在冷光環(huán)境下,藍(lán)色的色相受環(huán)境影響,會(huì)往冷色偏移。色相偏移 15 度是同類色,偏移 45 度是近似色。我在兩者之間取了中間值,約 25 度。對(duì)市面上的產(chǎn)品取色進(jìn)行研究的時(shí)候,會(huì)發(fā)現(xiàn)它們的色值一般在拾色器九宮格的右上格,所以 S 值(飽和度)的取值范圍大致在 77%-100%之間,我取了中間偏下的值 89%。B 值(明度)一般為 100%,除了黃綠色相本身明度偏高,則會(huì)適當(dāng)降低明度。
WCAG 標(biāo)準(zhǔn)驗(yàn)證顏色
WCAG 是網(wǎng)頁無障礙指南其中關(guān)于顏色的使用標(biāo)準(zhǔn),簡(jiǎn)單來說就是色彩要在頁面中達(dá)到一定的對(duì)比度,才能讓人看清。WCAG 用色標(biāo)準(zhǔn)中普通文本與背景對(duì)比度不低于 4.5:1,那么對(duì)于高亮文字顏色(通常是產(chǎn)品主色)是不是也需要達(dá)到這個(gè)標(biāo)準(zhǔn)呢。我用幾個(gè) APP 進(jìn)行了測(cè)試,下列 APP 的對(duì)比度在白色頁面中范圍是 2.3-4.5。
我估計(jì)原因有二,一是飽和度太高有點(diǎn)太艷了,二是現(xiàn)在很多 APP 都有暗夜模式,觀察這張圖上的 APP 顏色情況,可以發(fā)現(xiàn)一個(gè)顏色在白色背景對(duì)比度越低,在黑色背景對(duì)比度就越高。且高亮文字使用的頻次相比文本文字少,多數(shù)伴隨色塊按鈕使用,所以 3-4 是較合適的對(duì)比值范圍。
有個(gè)快速計(jì)算對(duì)比度的網(wǎng)頁很好用,輸入色值就可以得出結(jié)果。
contrast ratio:https://contrast-ratio.com/#%23FF784A-on-white
還有個(gè)網(wǎng)站會(huì)更直觀,輸入色值后下面還有網(wǎng)頁例子預(yù)覽效果。
color review:https://color.review
我選擇的藍(lán)色對(duì)比值在白色背景是 3.9,黑色背景是 5.2,在正常范圍內(nèi)。其實(shí)小易 APP 大概率不會(huì)有暗夜模式,因?yàn)樾枰度敫嗟拈_發(fā)資源,淺色模式也不是不能用。在這個(gè)考量下,可以拋開黑色背景不考慮,但是話又說回來,做好準(zhǔn)備總是沒錯(cuò)的。
色系拓展
色系拓展需要拓展兩類:中性色和輔助色。
中性色相對(duì)來說比較簡(jiǎn)單,所以放在前面先講。前面我已經(jīng)選定主色是#1b7aff,打開拾色器,將明度調(diào)為 10%,就可以得到一個(gè)深色偏藍(lán)的顏色。用這個(gè)作為界面中性色最深的顏色,疊加白色(白色的透明度以 10%作為基礎(chǔ)依次遞減),得出中性色的色板。
我看過很多寫得不錯(cuò)的文章,文末會(huì)放相關(guān)參考的鏈接。下面的四種選色思路,是根據(jù)他們的歸納為基礎(chǔ),加入一點(diǎn)其它的角度來進(jìn)行輔助色系的選定。
看到這里你應(yīng)該也發(fā)現(xiàn)規(guī)律了:
選色離不開色彩的理論知識(shí)。在理論的基礎(chǔ)上不斷嘗試搭配,組合出不一樣的色板。
而且要基于目的來選擇搭配,跟畫畫一樣。如果想要畫面和諧,就不要出現(xiàn)多組互補(bǔ)色。畫面中有一組互補(bǔ)色時(shí),要取兩者中間的顏色來勸架,以達(dá)到和諧的目的。如果希望畫面沖擊力強(qiáng),則相反。基于這樣的色彩理論,可以讓我們不出錯(cuò)且有依據(jù)地搭配出界面的色系。
我的選色
我希望顏色能有更細(xì)膩的色相變化,所以我把色環(huán)按照 10 度作為基準(zhǔn)細(xì)化。選擇互補(bǔ)輔助色的時(shí)候,我沒有選正互補(bǔ)色,偏移了 10 度。從黃色到綠色的亮度都很高,所以我的選色更多偏右邊。以選取的這六種顏色作為小易的基礎(chǔ)色,微調(diào)飽和度稍微降低色彩的黑白灰差值。
參考文章:
如何科學(xué)地建立色彩體系?我總結(jié)了這5個(gè)方面!
如何拋棄慣性思維,重新定義一款產(chǎn)品的主色?
授權(quán) W3G 文檔,網(wǎng)頁無障礙指南(WCAG2.1)翻譯版
優(yōu)設(shè)態(tài)爺手繪提高班關(guān)于色彩的內(nèi)容
作者:牙線y2x
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問:網(wǎng)站技術(shù)