超實(shí)用的產(chǎn)品配色指南三部曲:了解選色邏輯
首先說明一下標(biāo)題為什么用了"選色邏輯"而非"配色邏輯",在筆者理念中產(chǎn)品配色的重點(diǎn)不在于"配",而在于"選"。"配"是指在作品中如何組織、編排顏色,是為了畫面更好看,而"選"是指經(jīng)過理性思考、嚴(yán)謹(jǐn)推導(dǎo)得出的解決方案,是為了色彩更適用。那如何選出更適用的色彩呢?這便是本章探討的內(nèi)容——色彩的選擇邏輯。
產(chǎn)品設(shè)計(jì)中會(huì)將色彩依次分為:主色、輔助色、功能色及中性色,不同色彩選擇邏輯是不一樣的,我們會(huì)逐一進(jìn)行介紹。由于功能色業(yè)內(nèi)已形成固定認(rèn)知,綠色代表成功、紅色代表錯(cuò)誤,事實(shí)上已經(jīng)不用再去選色,所以本章暫且不表。
一、主色
主色在產(chǎn)品用色中占據(jù)主要場(chǎng)景,關(guān)乎品牌調(diào)性與產(chǎn)品印象,選色時(shí)可以從產(chǎn)品情緒、行業(yè)屬性、目標(biāo)用戶三個(gè)層面去思考。
1. 產(chǎn)品情緒
顏色本身并無過多內(nèi)涵,只是人眼對(duì)于可見光的視覺感知。但隨著人類與自然共處,逐漸將一些對(duì)自然事物的心理感知投射到顏色上,此時(shí)顏色便產(chǎn)生了不同含義。例如火可以帶給人類溫暖,使用不當(dāng)也可以招至災(zāi)禍,所以火焰的紅色便有了熱情、警示的含義。再如燒不盡,春又生的野草,讓人們對(duì)綠色有了成長(zhǎng)與希望的感受。色彩的不同內(nèi)涵也催生了一門學(xué)科叫做"色彩的情緒價(jià)值",最早研究色彩情緒價(jià)值的學(xué)者是日本照明大師大庭三郎,他在《色彩的世界》一書中提出了基于東方人群的色彩情緒價(jià)值表,解析了不同色彩對(duì)人類的物化映射和心理映射。所以在產(chǎn)品設(shè)計(jì)之前會(huì)建立情緒版,確定產(chǎn)品情緒為色彩選擇提供依據(jù)。
2. 行業(yè)屬性
不同行業(yè)在色彩選擇上會(huì)有不同偏好,如科技行業(yè)更喜歡藍(lán)色,能源、食品行業(yè)更喜歡綠色。這背后也催生了兩種選色邏輯:一、符合行業(yè)偏好,二、異于行業(yè)偏好。選擇一可以使你的產(chǎn)品處于相對(duì)安全的境地,它的色彩不會(huì)引起用戶反感和不適,但缺乏個(gè)性。選擇二會(huì)使你的產(chǎn)品迅速從同行中跳脫出來,同時(shí)也表達(dá)了個(gè)性。具體使用哪種邏輯需要你對(duì)產(chǎn)品策略做好充足規(guī)劃。下面是一份來自 skilled 公司的調(diào)查報(bào)告,他們從行業(yè)角度出發(fā),調(diào)查并研究了色彩在不同行業(yè)的流行程度,最終規(guī)劃出了三個(gè)級(jí)別:流行行業(yè)、不流行行業(yè)、可能并不適合使用該顏色的行業(yè)。此報(bào)告不作為絕對(duì)權(quán)威,僅作為選色參考。
3. 目標(biāo)用戶
作為產(chǎn)品最終使用者,用戶喜好也作為選色必要參考。首先不同文化對(duì)用戶喜好產(chǎn)生影響,雖然人類群體對(duì)色彩的心理反應(yīng)都很類似,但研究表明不同文化下人們對(duì)于同種顏色會(huì)有不同反應(yīng)。例如股票交易,國際市場(chǎng)通常是綠漲紅跌,而在中國卻是紅漲綠跌。這是由于紅色在西方國家代表財(cái)政赤字,綠色代表財(cái)富;而中國正好相反,紅色對(duì)于中國人民有著非同一般的情感,紅色常常意味著喜事正在發(fā)生。
其次不同年齡段用戶,色彩喜好也不盡相同。Faber Birren 在他的《色彩心理學(xué)》一書中有提到關(guān)于年齡和色彩的實(shí)驗(yàn),結(jié)果顯示年輕人傾向于鮮艷、明亮、高飽和的色彩,而嬰幼兒、老年人更喜歡柔和、低飽和的色彩。
最后用戶性別也影響著色彩喜好,男性更喜歡藍(lán)色、綠色,而女性除了藍(lán)色更喜歡紫色、粉色。
二、輔助色
輔助色常與主色搭配使用,在產(chǎn)品配色中起著非常重要的作用。選色時(shí)可從搭配效果和作用方式進(jìn)行考慮。
1. 搭配效果
不同色彩搭配可以產(chǎn)生豐富的視覺效果,如何確保"效果"好看是我們需要思考的。工作中常有設(shè)計(jì)師根據(jù)以往經(jīng)驗(yàn)進(jìn)行選色,這是一種感性的選擇方式,往往會(huì)忽略經(jīng)驗(yàn)以外的搭配,而經(jīng)驗(yàn)以外可能存在著更好的效果。所以我們需要進(jìn)行理性選擇,何為理性選擇?即通過輔助色的定義,匹配到所有的輔助色,然后進(jìn)行刪減,直到選出最好看的顏色。
不同輔助色的定義:
同類色:色相相差在 15 度左右的顏色。
類似色:色相相差在 30 度左右的顏色,屬于較弱對(duì)比色。
鄰近色:色相相差在 60 度左右的顏色。
中差色:色相相差 90 度左右的顏色,屬于中等對(duì)比色。
對(duì)比色:色相相差 120 度左右的顏色,屬于強(qiáng)對(duì)比色。
互補(bǔ)色:色相相差 180 度左右的顏色,屬于高強(qiáng)度對(duì)比色。
以上得到的色彩未必是最好看的,他們和主色并不處于同一色彩層級(jí)。為了獲取更好的搭配效果,需要進(jìn)行飽和度、明度調(diào)整,此過程也稱為色彩的視覺感官校準(zhǔn)。
2. 作用方式
輔助色的作用方式可以是強(qiáng)化信息,也可以是區(qū)分業(yè)務(wù)。強(qiáng)化信息是指通過不同顏色對(duì)信息進(jìn)行視覺分類,方便用戶接收主要信息。對(duì)于強(qiáng)調(diào)的信息可以使用對(duì)比度高、色相較暖的色彩,暖色具有前進(jìn)性可以使你的信息更突出。例如京東拍拍商品列表中的促銷信息使用了橘色,餓了么的商品列表使用了橘色和紅色。
區(qū)分業(yè)務(wù)針對(duì)整個(gè)產(chǎn)品,不同業(yè)務(wù)使用不同色彩,方便用戶形成固定認(rèn)知,快速定位業(yè)務(wù)。使用什么色彩需全局考慮,如色彩與業(yè)務(wù)的相關(guān)性、產(chǎn)品的整體調(diào)性等。此處列舉兩個(gè)例子,京東 APP 的京東超市使用了綠色區(qū)分此項(xiàng)業(yè)務(wù),京東超市主要售賣生鮮食品,綠色可以給到用戶"新鮮""安全"的暗示,運(yùn)用到此處再適合不過。Twitter 在 22 年初新增了 Twitter Space 功能,用戶可以輕松創(chuàng)建或加入純音頻聊天室,Twitter 在設(shè)計(jì)這項(xiàng)功能時(shí)使用了紫色,紫色和 Twitter 的藍(lán)色同屬冷色,這樣可以使整個(gè)產(chǎn)品的調(diào)性更加統(tǒng)一。
三、中性色
中性色是由黑色、白色及黑白調(diào)和的各種深淺不同的灰組成,是產(chǎn)品中看到的最多的顏色,主要用于文本顯示和頁面背景。有人覺得中性色的推導(dǎo)不需要經(jīng)過太多思考,且行業(yè)內(nèi)給到一些具體色值可直接使用,如 333、666、999 這類的中性色。使用這類顏色沒有太大問題,但會(huì)使你的配色略顯普通,其實(shí)關(guān)于中性色的選擇還有很多地方值得探索。
1. 色階調(diào)整
中性色的色階可以通過兩種方式調(diào)整,改變明度或透明度。相信大家都有這樣的體會(huì),如果將灰色文本放置到其他色彩之上,文本會(huì)開始變得難以閱讀,其原因是色彩對(duì)比度不夠造成視覺區(qū)分困難。如果此時(shí)文本的灰色是通過調(diào)整透明度得到的,那么文本的灰色會(huì)疊加到其他色彩之上,從而解決這個(gè)問題。如果你的產(chǎn)品也會(huì)遇到類似的使用場(chǎng)景,不妨使用調(diào)整透明度的方式得到你的中性色。
2. 色彩傾向
上文提到類似 333、666、999 這樣的中性色會(huì)使你的配色略顯普通,原因是此類色彩屬于純灰沒有色彩傾向。我們?cè)谶x擇中性色時(shí)可以適當(dāng)混入藍(lán)色,藍(lán)色被普遍認(rèn)為是安全、舒適的色彩,在視覺上可以緩解焦慮和壓力,具有藍(lán)色傾向的中性色可以使文本更具可讀性。除此之外也可以在中性色中疊加品牌色,使你的中性色更具內(nèi)在邏輯和品牌傾向。
3. 無障礙設(shè)計(jì)
無障礙設(shè)計(jì)中對(duì)文字顏色的對(duì)比度有明確建議,對(duì)于 AA 級(jí)別正文文字的顏色對(duì)比度至少為 4.5:1,標(biāo)題或加粗的文字顏色對(duì)比度至少為 3:1。我們?yōu)槲淖诌x擇中性色時(shí)通常會(huì)定義四個(gè)級(jí)別:主要文字、次要文字、提示文字、禁用文字,提示文字對(duì)應(yīng)級(jí)別三,需要滿足顏色對(duì)比度至少為 3:1 的要求,禁用文字屬于不可用狀態(tài)可以低于對(duì)比度至少為 3:1 的要求。
通過以上介紹可以發(fā)現(xiàn)產(chǎn)品配色不僅僅是一項(xiàng)視覺工作,背后更是蘊(yùn)含了大量的調(diào)研與思考,對(duì)于配色只有完美回答出"為什么要這樣選色"時(shí),我想才會(huì)得到最優(yōu)秀的方案。
作者:穌穌穌穌
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問:網(wǎng)站技術(shù)