非常干貨系列之支付寶的配色

一、色彩 DNA 文檔

• 安全 – 中飽和度、中明度、偏冷的藍(lán)色
• 便捷 – 明亮的天空藍(lán)、平靜色綠色
• 專業(yè) – 深色系、低飽和度
• 信賴 – 低明度、低飽和度，藍(lán)色偏正藍(lán)色
• 想象力 – 神秘且有空間感的漸變

在選取輔助色時(shí)，色彩的選取需穩(wěn)重，顏色屬性明確，色彩的明度和純度不宜過(guò)高。在品牌色穩(wěn)定的情況下，應(yīng)選取豐富的輔助色，來(lái)支持業(yè)務(wù)的拓展；也可用輔助色區(qū)分功能產(chǎn)品，提升產(chǎn)品體驗(yàn)的流暢度和認(rèn)知，減少用戶搜索時(shí)間；選取顏色的時(shí)候，需在用戶的認(rèn)知范圍內(nèi)。

通過(guò)關(guān)鍵詞的色彩研究，我們重新定義了品牌色、輔助色以及一些延伸色彩的取色規(guī)則和使用規(guī)則。

 

二、品牌色

品牌色是表現(xiàn)公司文化、產(chǎn)品特性最直觀的視覺(jué)元素之一。前期，我們對(duì)自己的產(chǎn)品關(guān)鍵詞進(jìn)行了拆分，并對(duì)每一個(gè)關(guān)鍵詞和對(duì)應(yīng)的色彩性格進(jìn)行了剖析，得到了品牌色與其輔助色色系的定位。

藍(lán)色，是最冷的色彩，使人聯(lián)想到天空和大海，表現(xiàn)出冷靜、理智、沉著穩(wěn)重的氣質(zhì)，也能充分體現(xiàn)支付寶的安全、專業(yè)、信賴這三個(gè)關(guān)鍵詞，其多變的天藍(lán)、孔雀藍(lán)、藍(lán)紫等，分別給人安靜放松、神秘且富有想象力的感覺(jué)。

目前品牌色的色值的 H S B = 205 93 91，為方便后面輔助色的取色范圍，將品牌色的色相加減15，可得到如圖「 品牌色 – 色彩配圖1」的一條色帶。

△ 品牌色 – 色彩配圖1

根據(jù)品牌色的色相，每加減15得到一個(gè)同色系色相（24色的360°色環(huán)上，每一個(gè)色相的角度為15°），最終得到圖上24色。
 

1. 支付寶配色所遵循的主要原則

同色系配色為主導(dǎo)，多色搭配為輔。

同色系為統(tǒng)一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時(shí)可以讓界面保持色彩上的一致性。由于業(yè)務(wù)的多樣化，我們需要多色搭配為輔。多色的輔助顏色，也可稱之為功能色，可設(shè)定不同的任務(wù)屬性和情感表達(dá)，再搭配中性色黑白灰，賦予更多的變化和層次。

兩種配色通過(guò)主次、使用比例，可靈活運(yùn)用在業(yè)務(wù)的各個(gè)場(chǎng)景中，具有非常好的延展性。

我們不僅需要通過(guò)品牌色來(lái)傳達(dá)企業(yè)的愿景和表現(xiàn)產(chǎn)品的特點(diǎn)，還需要通過(guò)輔助色來(lái)幫助我們?cè)谡麄€(gè)巨大的產(chǎn)品體系中，更能清晰傳達(dá)出帶有情感化色彩的一些理念。我們既要通過(guò)常規(guī)功能制定一些通用性的輔助色彩，也要根據(jù)目前產(chǎn)品業(yè)務(wù)的使用場(chǎng)景，增加多色相的輔助配色
 

2. 輔助色

輔助色起到平衡主色的沖擊效果，減輕品牌色對(duì)用戶產(chǎn)生的視覺(jué)疲勞，能一定量的分散視覺(jué)。

在我們整個(gè)客戶端的色彩使用中，有多類相近明度、相近純度，但是不同色相的顏色來(lái)代表我們不同產(chǎn)品的性格，于是我們選取了類似色、互補(bǔ)色、中性色三種輔助色系，來(lái)制定這一類輔助色。

類似色做輔助色

類似色為色環(huán)上相差30°以內(nèi)的顏色，與品牌色的冷暖性質(zhì)一致，色調(diào)統(tǒng)一和諧，情感特性一致，色相過(guò)渡柔和、自然。

品牌色的色相為 H = 205 ，鄰近色的色相應(yīng)為 175(H-30) 235(H+30)。

色相235的色值與品牌色色彩傾向太類似，所以我們最后選擇色相175的色值，與品牌色的冷暖性質(zhì)一致，又有關(guān)鍵詞便捷和想象力之意。如圖「鄰近色輔助色 – 色彩配圖2」

△ 鄰近色輔助色 – 色彩配圖2

互補(bǔ)色做輔助色

互補(bǔ)色為色環(huán)上相差180°的顏色，品牌色的對(duì)比色為橙色，與品牌色對(duì)比強(qiáng)烈。為了和品牌色、品牌鄰近色兩個(gè)冷色調(diào)作為呼應(yīng)，我們需要取互補(bǔ)色兩個(gè)類似色來(lái)作為我們最終的輔助色。

品牌色的色相為 H = 205 ，互補(bǔ)色色相應(yīng)為為 25 (H-180)，而該互補(bǔ)色的兩個(gè)類似色色值分別為 40（25+15）、10（25-15），見(jiàn)圖「對(duì)比色輔助色 – 色彩配圖3」。

△ 對(duì)比色輔助色 – 色彩配圖3

校正輔助色

校正的原則一：色相差值不能超過(guò)15。

色相差值在15以內(nèi)，能保證校正后的顏色還是為同種色或鄰近色，冷暖色調(diào)幾乎一致，色相也可根據(jù)現(xiàn)在的使用場(chǎng)景微整。

校正的原則二：盡量保持感官明度一致。

我們知道，每一種顏色都有自己的「感官明度」，也就是發(fā)光度。根據(jù)現(xiàn)有的使用場(chǎng)景，類似色和互補(bǔ)色大都用在同層級(jí)的信息展示上，而當(dāng)我們將最終得到的輔助色擺放在一起之后發(fā)現(xiàn)，品牌色以及三個(gè)輔助色的發(fā)光度不一致，導(dǎo)致視覺(jué)上會(huì)有明顯的明暗差別。因?yàn)槲覀冃枰ㄟ^(guò)發(fā)光度來(lái)進(jìn)行最終的顏色校正。

在 Hue 模式下，如圖「校驗(yàn)輔助色 – 色彩配圖5」，淺灰色為高發(fā)光度，深灰色為低發(fā)光度。在保持品牌色不變的情況下，我們對(duì)其他三個(gè)輔助色進(jìn)行了微調(diào)，但由于黃色本身感官明度最高，所以對(duì)黃色并未做校正，最后得到校正后的三個(gè)輔助色。

△ 校驗(yàn)輔助色 – 色彩配圖5

中性色做輔助色

中性色中最常用的是黑白灰色，它本身不帶有感情色彩，主要用于調(diào)和色彩搭配。

在色相和純度都為0，明度也為0時(shí)，即為純黑色，一般設(shè)計(jì)中應(yīng)避免純黑色，純黑色在和其他顏色搭配時(shí)，對(duì)比過(guò)于明顯，且會(huì)壓倒其他顏色，所以我們將純黑色的明度做微調(diào)，讓黑色看起來(lái)更舒適。如圖「中性色輔助色 – 色彩配圖6 」

△ 中性色輔助色 – 色彩配圖6

品牌色色相、純度、明度值確定之后，可以將同色系的明度、純度進(jìn)行有規(guī)律的變化，得到同色系的明度和純度變化后的輔助色。

同色系的明度、純度取值

同色系明度、純度的對(duì)比，可以通過(guò)顏色的深淺、明暗，來(lái)承載不同類型的內(nèi)容信息，分割頁(yè)面的層次和模塊。既能體現(xiàn)我們的品牌形象，也能保持頁(yè)面的統(tǒng)一性。

保持色相值不變，純度變化時(shí)，S值以S/5遞減、B值以 (100-B)/5依次做遞增；明度變化時(shí)，S值以(100-S)/5 遞增、B值以B/5做遞減，得到如圖 「 品牌輔助色 – 色彩配圖7 」11色。

圖上可以看出，前三個(gè)色明度值小，且接近于黑色，所以我們?nèi)サ暨@三個(gè)深色。

△ 品牌輔助色 – 色彩配圖7

同色系中，色相不發(fā)生改變，明度和純度的做有規(guī)律的變化。

品牌色與輔助色明度、純度輔助的輸出

根據(jù)上面同色系的明度、純度對(duì)比規(guī)則，對(duì)所有定義的輔助色進(jìn)行明度和純度的輔助色彩輸出，最終得到輔助色色板，如圖「色板 – 色彩配圖8 」。

△ 色板 – 色彩配圖8
 

3. 漸變色

漸變角度

根據(jù)一般的視覺(jué)習(xí)慣，左上角優(yōu)先，從左到右、至上而下，所以我們?cè)跐u變的過(guò)程中，將品牌色始終放在左上角的位置上。

漸變樣式：線性漸變。

漸變角度：對(duì)角線漸變，左上為品牌色，右下為輔助色。

△ 漸變角度 – 色彩配圖9

純度漸變

純度漸變，由上面定義的純度色值，進(jìn)行依次的漸變羅列，得到以下漸變：

純度漸變輕快簡(jiǎn)潔、活潑明亮，給用戶便捷的感覺(jué)。

緊挨品牌色右側(cè)的第一個(gè)輔助色與品牌色漸變，漸變的效果并不明顯，而最后兩個(gè)輔助色的漸變效果明顯，過(guò)渡略顯生硬，所以最終我們選擇 HSB= 205 55 95 ，即品牌色后側(cè)的第二個(gè)輔助色值進(jìn)行純度的漸變。根據(jù)上面純度的輔助色取色規(guī)則，可得到以下?lián)Q算公式：

△ 純度漸變 – 色彩配圖10

鄰近色漸變

鄰近色為色環(huán)15°的顏色，鄰近色的漸變?nèi)∩瑵u變過(guò)渡自然和諧，冷暖一致，如圖「鄰近色漸變 – 色彩配圖11 」。

△ 鄰近色漸變 – 色彩配圖11
 

4. 色彩使用建議

背景

品牌色、輔助色做背景

四個(gè) tab 的頁(yè)頭和 titlebar，可以使用漸變，僅可使用鄰近色漸變，如圖 「品牌色背景漸變場(chǎng)景示例1 – 色彩配色12 」。

業(yè)務(wù)頁(yè)面使用時(shí)，背景色用于整張背景或者頁(yè)頭，可使用漸變，需要遵循漸變的色值和角度，如圖 「品牌色背景漸變場(chǎng)景示例2 – 色彩配色13 」 。

當(dāng)背景色用于入口的背景裝飾時(shí)，建議使用純色，如圖「輔助色背景場(chǎng)景示例3 – 色彩配色14 」。但在使用 [H-30 S B] 的漸變時(shí)，該業(yè)務(wù)需要有其漸變色的色彩傾向。

△ 品牌色背景漸變場(chǎng)景示例1 – 色彩配色12

△ 品牌色背景漸變場(chǎng)景示例2 – 色彩配色13

△ 輔助色背景場(chǎng)景示例3 – 色彩配色14

中性色做背景

功能頁(yè)面使用中性色中的淺灰色#f5f5f5、白色#ffffff 做背景。

icon

icon用色

• 一個(gè)頁(yè)面上，icon 色相建議不超過(guò)4種，
• 四個(gè) tab 的 icon 建議使用單色，或者中性色進(jìn)行搭配使用，不建議使用漸變，
• 業(yè)務(wù)頁(yè)面內(nèi)，可以使用漸變色、單色、或者搭配中性色使用，
• 根據(jù)色彩性格來(lái)定義 icon 的用色：紅色：希望、溫暖；黃色：溫和、高貴； 藍(lán)色：嚴(yán)謹(jǐn)、穩(wěn)定；綠色：健康、便捷。（如果相關(guān)的產(chǎn)品有自己的色彩傾向，選擇與輔助色最接近的輔助色）

icon 背景用色

• 一個(gè)頁(yè)面上，四個(gè) tab 的 icon 需要使用背景色時(shí)，顏色建議不要超過(guò)四種。
• 和其他圖片圖形一起搭配時(shí)，背景色建議不要超過(guò)兩種。
• 業(yè)務(wù)頁(yè)面內(nèi)，icon 的背景可以使用漸變色，icon 本身直接反白，如圖 「icon用色場(chǎng)景示例3 – 色彩配色15 」。
• 四個(gè) tab 頁(yè)，因?yàn)轭^部使用了漸變色，所以 icon 建議使用純色；業(yè)務(wù)類基本不做限制。

△ icon用色場(chǎng)景示例3 – 色彩配色15

文字用色

• 常規(guī)文字用色：根據(jù)不同的字號(hào)大小，對(duì)應(yīng)出兩種灰黑色。在使用場(chǎng)景中，文字黑色用純黑透明度顯示，如圖「黑色文字顏色使用場(chǎng)景 – 色彩配圖16 」 ；白色的文字顏色一般在品牌色的背景下使用，通過(guò)透明度調(diào)整文字顏色，如圖 「白色文字使用場(chǎng)景示例 – 色彩配圖17 」，
• 文字鏈接狀、可操作的指示：品牌色#108ee9；（不可點(diǎn)擊的標(biāo)簽不能使用該顏色），如圖 「鏈接色使用場(chǎng)景示例 – 色彩配圖18 」。
• 重點(diǎn)突出、公告提醒：橙色（僅用于提醒，不能用于帶情感色彩的錯(cuò)誤提示）。
• 錯(cuò)誤、警示、失敗、小紅點(diǎn)：紅色。

△ 黑色文字顏色使用場(chǎng)景 – 色彩配圖16

△ 白色文字使用場(chǎng)景示例 – 色彩配圖17

△ 鏈接色使用場(chǎng)景示例 – 色彩配圖18

鏈接色僅用于可操作執(zhí)行，圖中的陌生人、置頂均是提示標(biāo)簽，使用不當(dāng)。

 

三、可使用顏色合集