色彩的作用
產(chǎn)品提供的內(nèi)容和服務(wù)需要在用戶心中占有一席之地，必須先賦予它一定的情感內(nèi)涵。這就需要在設(shè)計(jì)的階段就確定產(chǎn)品的定位和品牌彩库。色彩是品牌傳播的重要媒介形帮，根據(jù)“語言釘槽惫，視覺錘”的理論，通過視覺反復(fù)把品牌的內(nèi)涵傳達(dá)給用戶辩撑，是占領(lǐng)用戶心智的好方法界斜。
產(chǎn)品界面的色彩運(yùn)用需要和品牌的色彩保持一致，是互聯(lián)網(wǎng)時代品牌視覺語言的重要組成部分合冀。除了傳達(dá)品牌的內(nèi)涵锄蹂，界面色彩還有其他的作用：建立信息的層級、表現(xiàn)界面元素之間的關(guān)系和當(dāng)前的狀態(tài)水慨。
色彩體系的構(gòu)建
情緒版推導(dǎo)主色
那么怎么建立一套產(chǎn)品界面色彩體系呢得糜？下面總結(jié)下從主色出發(fā)到輔色的建立，再到系列色彩變體的過程晰洒。
為一個產(chǎn)品或公司確定一個主色朝抖，是品牌設(shè)計(jì)的重要環(huán)節(jié)。情緒板方法有一套成熟的推理邏輯：首先根據(jù)品牌的市場定位選擇抽象的關(guān)鍵詞谍珊，比如“安全”治宣；關(guān)鍵詞可以選擇一到三個，再根據(jù)關(guān)鍵詞進(jìn)一步做形象化的關(guān)鍵詞推演，比如由“安全”聯(lián)想到“盾牌侮邀、鎖坏怪、安全帽”等具體形象；最后根據(jù)這些形象得出相關(guān)聯(lián)的色彩绊茧。結(jié)合色彩本身的含義铝宵、文化習(xí)俗和行業(yè)特點(diǎn)最后得出一個主要的顏色州袒，運(yùn)用到品牌傳播和市場營銷中去瑞信。
確定了“主色”之后贬堵，為了適應(yīng)多樣的適用場景榜轿，可以再確定一到三個輔色悼沈。輔色可以使色彩的運(yùn)用更加豐富多樣泼返，也可以在界面中突出主要的信息和元素最仑。
兩種方式得到輔色
輔色的建立可以有兩條思路：1梦重、找主色的相似色仑乌，這樣色彩的搭配會比較和諧百拓。在HSB模式下，把色相值H加和減30度晰甚，得到了兩個輔色耐版；2、找主色的互補(bǔ)色压汪，把色相值減（或加）180度得到了一個補(bǔ)色粪牲，為了避免配色對比過于強(qiáng)烈，在補(bǔ)色的基礎(chǔ)上加和減15度可以再得到兩個輔色（相當(dāng)于主色加165度和195度）止剖。
感官明度的調(diào)節(jié)
于是我們得到了4個輔色腺阳，把輔色和主色放在一起后，我們觀察它們是否協(xié)調(diào)穿香。由于色彩本身具有的亮度屬性（黃色本身就比較亮）亭引，需要對輔色以主色為基準(zhǔn)進(jìn)行感觀明度的調(diào)節(jié)∑せ瘢可以適用肉眼的方式焙蚓，調(diào)節(jié)色彩的B值（明度）。更為精準(zhǔn)的方式是洒宝，用一塊純黑的色條覆蓋在 5 個顏色上购公，混合模式選擇為“色相”。接著色彩的感官明度就非常明顯的轉(zhuǎn)換為絕對明度了雁歌，在此基礎(chǔ)上進(jìn)行微調(diào)可以使配色得到相對統(tǒng)一的明度宏浩。
色彩系列的建立
?為了建立界面豐富的信息層級，可以從5個配色出發(fā)推演出5個色彩系列靠瞎。色彩在HSB模式的色板上向左三角和右下角劃兩條連線比庄。連線各等分為5分求妹，得到中間的8個點(diǎn)，這些點(diǎn)就可以和原色一起構(gòu)建為一個色彩系列佳窑。
通用的無彩色系列
色相H和純度S都為 0 時制恍，就是沒有彩色的顏色，也就是灰色神凑【簧瘢灰色在界面中起到了調(diào)和和緩解彩色沖擊的作用，作為背景能很好的突出和變現(xiàn)彩色耙厚，就像畫作中的留白强挫。B值以20為單位從100遞減到0岔霸，得到了5階無彩色薛躬。對應(yīng)的色值可以速記為#000（純黑，B:0）呆细、#333(B:20)型宝、#666(B:40)、#999(B:60)絮爷、#CCC(B:80)趴酣、#FFF(純白，B:100)坑夯；為了色階更加細(xì)膩豐富岖寞，在 #CCC 和 #FFF之間再插入3個灰色：#DDD(B:87)、#EEE(B:93)柜蜈、#F5F5F5(B:98).最后我們得到了8階的灰度仗谆，這種方式得到的灰度系列是可以在產(chǎn)品之間通用的，與某個品牌或產(chǎn)品不相關(guān)淑履。因?yàn)榛疑旧聿粠в絮r明的情感傾向隶垮。
漸變色系列
圍繞主色建立兩種對角線性漸變方式：1、基于色相的漸變：選取一個主色的相似色秘噪，角度范圍不超過正負(fù)15度狸吞；2、在主色的色彩系列種選取一個明度相近的色彩指煎，與主色形成漸變蹋偏。漸變色可以運(yùn)用在標(biāo)題欄背景中，比純色背景更加細(xì)膩豐富至壤。
色彩在界面中的使用
主色是構(gòu)成界面顏色的主要基調(diào)暖侨，在大面積的用色（比如標(biāo)題欄背景）或重復(fù)高頻操作的組件（主要按鈕和標(biāo)簽欄選中按鈕）中可以使用。輔色是界面的點(diǎn)綴崇渗，起到了豐富頁面字逗，突出元素的作用京郑。可以運(yùn)用到文字鏈接和部分組件上葫掉。
文字用色
特殊作用的文字如警示和錯誤些举，可以使用所有產(chǎn)品通用的顏色如紅色。值得注意的是當(dāng)產(chǎn)品本身的主色是紅色時俭厚，可以考慮使用其他的顏色如橙色户魏。強(qiáng)調(diào)的文字可以使用輔色，比如文字被選中時或文字亮顯時挪挤。鏈接文字可以使用通用的藍(lán)色叼丑，也可以使用主色或輔色，視具體情況而定扛门。標(biāo)題鸠信、正文和備注等文字根據(jù)其視覺層級從灰色梯度中選擇相應(yīng)的顏色。
圖標(biāo)用色
底部標(biāo)簽欄的圖標(biāo)選中時一般為主色论寨，未選中時為某個梯度的灰色(如 #ccc)星立。如果底部標(biāo)簽欄背景為主色的話，那么需要根據(jù)主色的明度選擇純黑或純白作為選中的顏色葬凳。界面的入口圖標(biāo)（如金剛區(qū)）可以選擇與業(yè)務(wù)相關(guān)的輔助色绰垂，其他與業(yè)務(wù)無關(guān)的功能性圖標(biāo)可以使用灰色。如果圖標(biāo)有選中狀態(tài)的話可以使用輔色把圖標(biāo)從界面凸顯出來火焰。
組件用色
高頻操作的懸浮按鈕劲装，可以使用輔色以形成界面的視覺焦點(diǎn)，引導(dǎo)用戶點(diǎn)擊使用昌简。除此之外開關(guān)占业、滑塊、進(jìn)度條和單復(fù)選框也可以嘗試使用輔色江场；主要頁面按鈕纺酸、文字按鈕、文本輸入框等使用主色址否；界面的背景餐蔬、面板背景、分割線等使用低階的灰色佑附，避免形成強(qiáng)烈的對比樊诺。
色彩使用原則
一致性，保持界面中顏色使用在相同的場景下是一致的音同；有意義词爬，能夠變現(xiàn)出元素之間的關(guān)系和界面的信息層級；清晰可讀性权均，元素與背景之間的明度對比足夠明顯顿膨，避免形成識別可讀性上的障礙锅锨。
設(shè)計(jì)理性化
設(shè)計(jì)理性化的標(biāo)準(zhǔn)是推導(dǎo)過程清晰、具體恋沃，思路方法可描述必搞、可復(fù)用。傳統(tǒng)的美學(xué)教育給我們傳達(dá)了配色需要靠感覺的這樣一種認(rèn)知囊咏；在這種認(rèn)知長期影響之下恕洲，可能會忽略去尋找和總結(jié)其中的規(guī)律。而從經(jīng)驗(yàn)感覺到方法論的運(yùn)用梅割，從混沌中尋找規(guī)則霜第。才能從量變過度到質(zhì)變，從線性積累蛻變?yōu)橹笖?shù)增長户辞。
這邊文章是在閱讀《支付寶視覺》顏色部分后的學(xué)習(xí)筆記泌类，希望能總結(jié)出一些界面設(shè)計(jì)中關(guān)于配色的通用思路和一般規(guī)律，給其他設(shè)計(jì)師特別是初學(xué)者提供參考咆课。
其他關(guān)于界面配色的內(nèi)容末誓，也參考了谷歌的Material Design 顏色的部分扯俱。還有一本關(guān)于色彩的書籍《貝蒂的色彩》推薦給大家书蚪。配色就像烹飪，因豐富而美味迅栅，希望大家能通過配色給用戶帶來愉悅的視覺體驗(yàn)殊校。
