從零做一款產(chǎn)品的時(shí)候，需要制定產(chǎn)品的主色。怎么制定呢？

很多文章歸納出來(lái)這幾步：

A?歸納產(chǎn)品特性和理念

B?提取關(guān)鍵詞

C?建立情緒版

D?選擇色相

E?制定色系

按照這個(gè)方法，使用的時(shí)候能夠按步就班，且有理論依據(jù)。

但我想說點(diǎn)不一樣的。

在這個(gè)時(shí)代，產(chǎn)品五花八門，想用哪一類別的產(chǎn)品一搜一大把，在七麥數(shù)據(jù)搜索購(gòu)物類的APP榜單，光第一頁(yè)單榜就有200多個(gè)。

我們模糊一下這張圖，你會(huì)發(fā)現(xiàn)對(duì)APP的記憶，依靠色彩的比例較大。

換做在手機(jī)看也是一樣的，打開你的APP列表，快速往下滑去找一個(gè)APP，你會(huì)發(fā)現(xiàn)它們最終只剩下色彩——“我想找愛奇藝，它在我記憶中是綠色的，剛才快速滑過的紅色黃色都不是”。當(dāng)然，這只是拿來(lái)舉例，通常你不需要這樣去找一個(gè)APP。用這個(gè)例子只想強(qiáng)調(diào)APP主色的意義——它是區(qū)別于競(jìng)品的第一特征，是調(diào)性概括，是一種態(tài)度，甚至是你趁手的兵器。

所以當(dāng)你去確定產(chǎn)品主色的時(shí)候，有三種思路：1、隨大眾；2、反著來(lái)；3、搞特殊。

隨大眾

不同的行業(yè)發(fā)展至今，已經(jīng)“自帶色相”了。比如電商購(gòu)物是紅黃色、醫(yī)療健康是藍(lán)綠色、商務(wù)是藍(lán)色...如果我們每次都用產(chǎn)品或者行業(yè)特性去推導(dǎo)色相，出來(lái)的大多數(shù)都是第一種思路。

反著來(lái)

使用和競(jìng)品色相相差大于90度（中差色、對(duì)比色、互補(bǔ)色）的，差別較大的就是反著來(lái)。這是逆向思維，通過差異較大的色相能讓你在一堆顏色同質(zhì)化的競(jìng)品中跳出來(lái)。

搞特殊

抖音和keep是我心中“搞特殊”的top，既不使用行業(yè)相同的色相，也不使用相反的色相，而是雙色相或雙色相疊加。

以下用小易APP作為例子，說一下我制定色系時(shí)的思路和過程吧，僅作參考。步驟大綱如下：

01 基于行業(yè)與場(chǎng)景確認(rèn)色相

02 色相偏移

03 WCAG標(biāo)準(zhǔn)驗(yàn)證顏色

04 色系拓展

基于行業(yè)與場(chǎng)景確認(rè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)品的情況，因此隨大眾更容易取得方案的通過（領(lǐng)導(dǎo)的認(rèn)可）。為免出現(xiàn)“這個(gè)顏色一點(diǎn)都不科技和智能”的質(zhì)疑和返工，我非?？茖W(xué)（識(shí)相）地選擇了藍(lán)色作為主要色相。

色相偏移

用HSB參數(shù)來(lái)看，正藍(lán)色的H值（色相）是240。我在優(yōu)設(shè)大課堂上態(tài)爺?shù)氖掷L課時(shí)，他說過要想顏色好看，色相別太正。所以我選擇偏移藍(lán)色的色相。偏移方向有兩個(gè)：往冷色偏移或者往暖色偏移。
這里加入一個(gè)空間的概念：假設(shè)我們的產(chǎn)品產(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)頁(yè)無(wú)障礙指南。其中關(guān)于顏色的使用標(biāo)準(zhǔn)，簡(jiǎn)單來(lái)說就是色彩要在頁(yè)面中達(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ì)比度在白色頁(yè)面中范圍是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)頁(yè)很好用，輸入色值就可以得出結(jié)果。contrast ratio：https://contrast-ratio.com/#%23FF784A-on-white
還有個(gè)網(wǎng)站會(huì)更直觀，輸入色值后下面還有網(wǎng)頁(yè)例子預(yù)覽效果。color review：https://color.review

我選擇的藍(lán)色對(duì)比值在白色背景是3.9，黑色背景是5.2，在正常范圍內(nèi)。其實(shí)小易APP大概率不會(huì)有暗夜模式，因?yàn)樾枰度敫嗟拈_發(fā)資源，淺色模式也不是不能用。在這個(gè)考量下，可以拋開黑色背景不考慮，但是話又說回來(lái)，做好準(zhǔn)備總是沒錯(cuò)的。

色系拓展

色系拓展需要拓展兩類：中性色和輔助色。
中性色中性色相對(duì)來(lái)說比較簡(jiǎn)單，所以放在前面先講。前面我已經(jīng)選定主色是#1b7aff，打開拾色器，將明度調(diào)為10%，就可以得到一個(gè)深色偏藍(lán)的顏色。用這個(gè)作為界面中性色最深的顏色，疊加白色（白色的透明度以10%作為基礎(chǔ)依次遞減），得出中性色的色階。

輔助色我看過很多寫得不錯(cuò)的文章，文末會(huì)放相關(guān)參考的鏈接。下面的四種選色思路，是根據(jù)他們的歸納為基礎(chǔ)，加入一點(diǎn)其它的角度來(lái)進(jìn)行輔助色系的選定。

看到這里你應(yīng)該也發(fā)現(xiàn)規(guī)律了：
選色離不開色彩的理論知識(shí)。在理論的基礎(chǔ)上不斷嘗試搭配，組合出不一樣的色板。
而且要基于目的來(lái)選擇搭配，跟畫畫一樣。如果想要畫面和諧，就不要出現(xiàn)多組互補(bǔ)色。畫面中有一組互補(bǔ)色時(shí)，要取兩者中間的顏色來(lái)勸架，以達(dá)到和諧的目的。如果希望畫面沖擊力強(qiáng)，則相反。基于這樣的色彩理論，可以讓我們不出錯(cuò)且有依據(jù)地搭配出界面的色系。

我的選色我希望顏色能有更細(xì)膩的色相變化，所以我把色環(huán)按照10度作為基準(zhǔn)細(xì)化。選擇互補(bǔ)輔助色的時(shí)候，我沒有選正互補(bǔ)色，偏移了10度。從黃色到綠色的亮度都很高，所以我的選色更多偏右邊。以選取的這六種顏色作為小易的基礎(chǔ)色，微調(diào)飽和度稍微降低色彩的黑白灰差值。

制作色板階梯可使用線上的工具，比如ant design的色板生成工具。鏈接：https://ant.design/docs/spec/colors-cn

按照色彩體系調(diào)整后的頁(yè)面：

參考文章：
被慣性思維牢籠禁錮的產(chǎn)品色彩“方法”https://www.zcool.com.cn/article/ZMTIwNzM2NA==.html
如何科學(xué)地建立色彩體系？我總結(jié)了這5個(gè)方面https://www.uisdc.com/color-order-system
授權(quán)W3G文檔，網(wǎng)頁(yè)無(wú)障礙指南（WCAG2.1）翻譯版https://www.w3.org/Translations/WCAG21-zh/
優(yōu)設(shè)態(tài)爺手繪提高班關(guān)于色彩的內(nèi)容（課程鏈接）https://xue.uisdc.com/detail?id=5f365ff7dbd5ea3cf97cee73

? ? ? ? ?

本文轉(zhuǎn)載出自 牙線y2x? 僅供個(gè)人學(xué)習(xí)使用