色彩的作用
產(chǎn)品提供的內(nèi)容和服務(wù)需要在用戶心中占有一席之地，必須先賦予它一定的情感內(nèi)涵。這就需要在設(shè)計(jì)的階段就確定產(chǎn)品的定位和品牌。色彩是品牌傳播的重要媒介，根據(jù)“語(yǔ)言釘，視覺(jué)錘”的理論，通過(guò)視覺(jué)反復(fù)把品牌的內(nèi)涵傳達(dá)給用戶，是占領(lǐng)用戶心智的好方法。
產(chǎn)品界面的色彩運(yùn)用需要和品牌的色彩保持一致，是互聯(lián)網(wǎng)時(shí)代品牌視覺(jué)語(yǔ)言的重要組成部分。除了傳達(dá)品牌的內(nèi)涵，界面色彩還有其他的作用：建立信息的層級(jí)、表現(xiàn)界面元素之間的關(guān)系和當(dāng)前的狀態(tài)。
色彩體系的構(gòu)建
情緒版推導(dǎo)主色
那么怎么建立一套產(chǎn)品界面色彩體系呢？下面總結(jié)下從主色出發(fā)到輔色的建立，再到系列色彩變體的過(guò)程。
為一個(gè)產(chǎn)品或公司確定一個(gè)主色，是品牌設(shè)計(jì)的重要環(huán)節(jié)。情緒板方法有一套成熟的推理邏輯：首先根據(jù)品牌的市場(chǎng)定位選擇抽象的關(guān)鍵詞，比如“安全”；關(guān)鍵詞可以選擇一到三個(gè)，再根據(jù)關(guān)鍵詞進(jìn)一步做形象化的關(guān)鍵詞推演，比如由“安全”聯(lián)想到“盾牌、鎖、安全帽”等具體形象；最后根據(jù)這些形象得出相關(guān)聯(lián)的色彩。結(jié)合色彩本身的含義、文化習(xí)俗和行業(yè)特點(diǎn)最后得出一個(gè)主要的顏色，運(yùn)用到品牌傳播和市場(chǎng)營(yíng)銷中去。
確定了“主色”之后，為了適應(yīng)多樣的適用場(chǎng)景，可以再確定一到三個(gè)輔色。輔色可以使色彩的運(yùn)用更加豐富多樣，也可以在界面中突出主要的信息和元素。
兩種方式得到輔色
輔色的建立可以有兩條思路：1、找主色的相似色，這樣色彩的搭配會(huì)比較和諧。在HSB模式下，把色相值H加和減30度，得到了兩個(gè)輔色；2、找主色的互補(bǔ)色，把色相值減（或加）180度得到了一個(gè)補(bǔ)色，為了避免配色對(duì)比過(guò)于強(qiáng)烈，在補(bǔ)色的基礎(chǔ)上加和減15度可以再得到兩個(gè)輔色（相當(dāng)于主色加165度和195度）。
感官明度的調(diào)節(jié)
于是我們得到了4個(gè)輔色，把輔色和主色放在一起后，我們觀察它們是否協(xié)調(diào)。由于色彩本身具有的亮度屬性（黃色本身就比較亮），需要對(duì)輔色以主色為基準(zhǔn)進(jìn)行感觀明度的調(diào)節(jié)?？梢赃m用肉眼的方式，調(diào)節(jié)色彩的B值（明度）。更為精準(zhǔn)的方式是，用一塊純黑的色條覆蓋在 5 個(gè)顏色上，混合模式選擇為“色相”。接著色彩的感官明度就非常明顯的轉(zhuǎn)換為絕對(duì)明度了，在此基礎(chǔ)上進(jìn)行微調(diào)可以使配色得到相對(duì)統(tǒng)一的明度。
色彩系列的建立
?為了建立界面豐富的信息層級(jí)，可以從5個(gè)配色出發(fā)推演出5個(gè)色彩系列。色彩在HSB模式的色板上向左三角和右下角劃兩條連線。連線各等分為5分，得到中間的8個(gè)點(diǎn)，這些點(diǎn)就可以和原色一起構(gòu)建為一個(gè)色彩系列。
通用的無(wú)彩色系列
色相H和純度S都為 0 時(shí)，就是沒(méi)有彩色的顏色，也就是灰色?；疑诮缑嬷衅鸬搅苏{(diào)和和緩解彩色沖擊的作用，作為背景能很好的突出和變現(xiàn)彩色，就像畫(huà)作中的留白。B值以20為單位從100遞減到0，得到了5階無(wú)彩色。對(duì)應(yīng)的色值可以速記為#000（純黑，B:0）、#333(B:20)、#666(B:40)、#999(B:60)、#CCC(B:80)、#FFF(純白，B:100)；為了色階更加細(xì)膩豐富，在 #CCC 和 #FFF之間再插入3個(gè)灰色：#DDD(B:87)、#EEE(B:93)、#F5F5F5(B:98).最后我們得到了8階的灰度，這種方式得到的灰度系列是可以在產(chǎn)品之間通用的，與某個(gè)品牌或產(chǎn)品不相關(guān)。因?yàn)榛疑旧聿粠в絮r明的情感傾向。
漸變色系列
圍繞主色建立兩種對(duì)角線性漸變方式：1、基于色相的漸變：選取一個(gè)主色的相似色，角度范圍不超過(guò)正負(fù)15度；2、在主色的色彩系列種選取一個(gè)明度相近的色彩，與主色形成漸變。漸變色可以運(yùn)用在標(biāo)題欄背景中，比純色背景更加細(xì)膩豐富。
色彩在界面中的使用
主色是構(gòu)成界面顏色的主要基調(diào)，在大面積的用色（比如標(biāo)題欄背景）或重復(fù)高頻操作的組件（主要按鈕和標(biāo)簽欄選中按鈕）中可以使用。輔色是界面的點(diǎn)綴，起到了豐富頁(yè)面，突出元素的作用。可以運(yùn)用到文字鏈接和部分組件上。
文字用色
特殊作用的文字如警示和錯(cuò)誤，可以使用所有產(chǎn)品通用的顏色如紅色。值得注意的是當(dāng)產(chǎn)品本身的主色是紅色時(shí)，可以考慮使用其他的顏色如橙色。強(qiáng)調(diào)的文字可以使用輔色，比如文字被選中時(shí)或文字亮顯時(shí)。鏈接文字可以使用通用的藍(lán)色，也可以使用主色或輔色，視具體情況而定。標(biāo)題、正文和備注等文字根據(jù)其視覺(jué)層級(jí)從灰色梯度中選擇相應(yīng)的顏色。
圖標(biāo)用色
底部標(biāo)簽欄的圖標(biāo)選中時(shí)一般為主色，未選中時(shí)為某個(gè)梯度的灰色(如 #ccc)。如果底部標(biāo)簽欄背景為主色的話，那么需要根據(jù)主色的明度選擇純黑或純白作為選中的顏色。界面的入口圖標(biāo)（如金剛區(qū)）可以選擇與業(yè)務(wù)相關(guān)的輔助色，其他與業(yè)務(wù)無(wú)關(guān)的功能性圖標(biāo)可以使用灰色。如果圖標(biāo)有選中狀態(tài)的話可以使用輔色把圖標(biāo)從界面凸顯出來(lái)。
組件用色
高頻操作的懸浮按鈕，可以使用輔色以形成界面的視覺(jué)焦點(diǎn)，引導(dǎo)用戶點(diǎn)擊使用。除此之外開(kāi)關(guān)、滑塊、進(jìn)度條和單復(fù)選框也可以嘗試使用輔色；主要頁(yè)面按鈕、文字按鈕、文本輸入框等使用主色；界面的背景、面板背景、分割線等使用低階的灰色，避免形成強(qiáng)烈的對(duì)比。
色彩使用原則
一致性，保持界面中顏色使用在相同的場(chǎng)景下是一致的；有意義，能夠變現(xiàn)出元素之間的關(guān)系和界面的信息層級(jí)；清晰可讀性，元素與背景之間的明度對(duì)比足夠明顯，避免形成識(shí)別可讀性上的障礙。
設(shè)計(jì)理性化
設(shè)計(jì)理性化的標(biāo)準(zhǔn)是推導(dǎo)過(guò)程清晰、具體，思路方法可描述、可復(fù)用。傳統(tǒng)的美學(xué)教育給我們傳達(dá)了配色需要靠感覺(jué)的這樣一種認(rèn)知；在這種認(rèn)知長(zhǎng)期影響之下，可能會(huì)忽略去尋找和總結(jié)其中的規(guī)律。而從經(jīng)驗(yàn)感覺(jué)到方法論的運(yùn)用，從混沌中尋找規(guī)則。才能從量變過(guò)度到質(zhì)變，從線性積累蛻變?yōu)橹笖?shù)增長(zhǎng)。
這邊文章是在閱讀《支付寶視覺(jué)》顏色部分后的學(xué)習(xí)筆記，希望能總結(jié)出一些界面設(shè)計(jì)中關(guān)于配色的通用思路和一般規(guī)律，給其他設(shè)計(jì)師特別是初學(xué)者提供參考。
其他關(guān)于界面配色的內(nèi)容，也參考了谷歌的Material Design 顏色的部分。還有一本關(guān)于色彩的書(shū)籍《貝蒂的色彩》推薦給大家。配色就像烹飪，因豐富而美味，希望大家能通過(guò)配色給用戶帶來(lái)愉悅的視覺(jué)體驗(yàn)。
