• <nav id="i44m4"></nav>
  • <kbd id="i44m4"></kbd>
    經典案例推廣高端H5電商設計公司聯系報價
    QQ聯系
    微信聯系
    手機聯系
    QQ聯系
    微信聯系
    手機聯系

    網站設計配色篇---支付寶設計的配色規范

    發布時間:2018-04-09
    發布者:eidea
    瀏覽次數:11663

    一、色彩 DNA 文檔

    概述

    根據品牌多年來的設計沉淀以及目前業務的各個使用場景,我們對品牌色彩的DNA進行了重新的探索和定義。根據我們的五個關鍵詞安全、便捷、專業、信賴、想象力,我們進行了其對應的色彩感知傾向。

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

    在選取輔助色時,色彩的選取需穩重,顏色屬性明確,色彩的明度和純度不宜過高。在品牌色穩定的情況下,應選取豐富的輔助色,來支持業務的拓展;也可用輔助色區分功能產品,提升產品體驗的流暢度和認知,減少用戶搜索時間;選取顏色的時候,需在用戶的認知范圍內。

    通過關鍵詞的色彩研究,我們重新定義了品牌色、輔助色以及一些延伸色彩的取色規則和使用規則。

    二、品牌色

    品牌色是表現公司文化、產品特性最直觀的視覺元素之一。前期,我們對自己的產品關鍵詞進行了拆分,并對每一個關鍵詞和對應的色彩性格進行了剖析,得到了品牌色與其輔助色色系的定位。

    藍色,是最冷的色彩,使人聯想到天空和大海,表現出冷靜、理智、沉著穩重的氣質,也能充分體現支付寶的安全、專業、信賴這三個關鍵詞,其多變的天藍、孔雀藍、藍紫等,分別給人安靜放松、神秘且富有想象力的感覺。

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

    △ 品牌色 – 色彩配圖1

    根據品牌色的色相,每加減15得到一個同色系色相(24色的360°色環上,每一個色相的角度為15°),最終得到圖上24色。

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

    同色系配色為主導,多色搭配為輔。

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

    兩種配色通過主次、使用比例,可靈活運用在業務的各個場景中,具有非常好的延展性。

    我們不僅需要通過品牌色來傳達企業的愿景和表現產品的特點,還需要通過輔助色來幫助我們在整個巨大的產品體系中,更能清晰傳達出帶有情感化色彩的一些理念。我們既要通過常規功能制定一些通用性的輔助色彩,也要根據目前產品業務的使用場景,增加多色相的輔助配色。

    2. 輔助色

    輔助色起到平衡主色的沖擊效果,減輕品牌色對用戶產生的視覺疲勞,能一定量的分散視覺。

    在我們整個客戶端的色彩使用中,有多類相近明度、相近純度,但是不同色相的顏色來代表我們不同產品的性格,于是我們選取了類似色、互補色、中性色三種輔助色系,來制定這一類輔助色。

    類似色做輔助色

    類似色為色環上相差30°以內的顏色,與品牌色的冷暖性質一致,色調統一和諧,情感特性一致,色相過渡柔和、自然。

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

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

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

    互補色做輔助色

    互補色為色環上相差180°的顏色,品牌色的對比色為橙色,與品牌色對比強烈。為了和品牌色、品牌鄰近色兩個冷色調作為呼應,我們需要取互補色兩個類似色來作為我們最終的輔助色。

    品牌色的色相為 H = 205 ,互補色色相應為為 25 (H-180),而該互補色的兩個類似色色值分別為 40(25+15)、10(25-15),見圖「對比色輔助色 – 色彩配圖3」。

    △ 對比色輔助色 – 色彩配圖3

    校正輔助色

    校正的原則一:色相差值不能超過15。

    色相差值在15以內,能保證校正后的顏色還是為同種色或鄰近色,冷暖色調幾乎一致,色相也可根據現在的使用場景微整。

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

    我們知道,每一種顏色都有自己的「感官明度」,也就是發光度。根據現有的使用場景,類似色和互補色大都用在同層級的信息展示上,而當我們將最終得到的輔助色擺放在一起之后發現,品牌色以及三個輔助色的發光度不一致,導致視覺上會有明顯的明暗差別。因為我們需要通過發光度來進行最終的顏色校正。

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

    △ 校驗輔助色 – 色彩配圖5

    中性色做輔助色

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

    在色相和純度都為0,明度也為0時,即為純黑色,一般設計中應避免純黑色,純黑色在和其他顏色搭配時,對比過于明顯,且會壓倒其他顏色,所以我們將純黑色的明度做微調,讓黑色看起來更舒適。如圖「中性色輔助色 – 色彩配圖6 」

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

    品牌色色相、純度、明度值確定之后,可以將同色系的明度、純度進行有規律的變化,得到同色系的明度和純度變化后的輔助色。

    同色系的明度、純度取值

    同色系明度、純度的對比,可以通過顏色的深淺、明暗,來承載不同類型的內容信息,分割頁面的層次和模塊。既能體現我們的品牌形象,也能保持頁面的統一性。

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

    圖上可以看出,前三個色明度值小,且接近于黑色,所以我們去掉這三個深色。

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

    同色系中,色相不發生改變,明度和純度的做有規律的變化。

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

    根據上面同色系的明度、純度對比規則,對所有定義的輔助色進行明度和純度的輔助色彩輸出,最終得到輔助色色板,如圖「色板 – 色彩配圖8 」。

    △ 色板 – 色彩配圖8

    2. 漸變色

    漸變角度

    根據一般的視覺習慣,左上角優先,從左到右、至上而下,所以我們在漸變的過程中,將品牌色始終放在左上角的位置上。

    漸變樣式:線性漸變。

    漸變角度:對角線漸變,左上為品牌色,右下為輔助色。

    △ 漸變角度 – 色彩配圖9

    純度漸變

    純度漸變,由上面定義的純度色值,進行依次的漸變羅列,得到以下漸變:

    純度漸變輕快簡潔、活潑明亮,給用戶便捷的感覺。

    緊挨品牌色右側的第一個輔助色與品牌色漸變,漸變的效果并不明顯,而最后兩個輔助色的漸變效果明顯,過渡略顯生硬,所以最終我們選擇 HSB= 205 55 95 ,即品牌色后側的第二個輔助色值進行純度的漸變。根據上面純度的輔助色取色規則,可得到以下換算公式:

    △ 純度漸變 – 色彩配圖10

    鄰近色漸變

    鄰近色為色環15°的顏色,鄰近色的漸變取色,漸變過渡自然和諧,冷暖一致,如圖「鄰近色漸變 – 色彩配圖11 」。

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

    3. 色彩使用建議

    背景

    品牌色、輔助色做背景

    四個 tab 的頁頭和 titlebar,可以使用漸變,僅可使用鄰近色漸變,如圖 「品牌色背景漸變場景示例1 – 色彩配色12 」。

    業務頁面使用時,背景色用于整張背景或者頁頭,可使用漸變,需要遵循漸變的色值和角度,如圖 「品牌色背景漸變場景示例2 – 色彩配色13 」 。

    當背景色用于入口的背景裝飾時,建議使用純色,如圖「輔助色背景場景示例3 – 色彩配色14 」。但在使用 [H-30 S B] 的漸變時,該業務需要有其漸變色的色彩傾向。

    △ 品牌色背景漸變場景示例1 – 色彩配色12

    △ 品牌色背景漸變場景示例2 – 色彩配色13

    △ 輔助色背景場景示例3 – 色彩配色14

    中性色做背景

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

    icon

    icon用色

    • 一個頁面上,icon 色相建議不超過4種,
    • 四個 tab 的 icon 建議使用單色,或者中性色進行搭配使用,不建議使用漸變,
    • 業務頁面內,可以使用漸變色、單色、或者搭配中性色使用,
    • 根據色彩性格來定義 icon 的用色:紅色:希望、溫暖;黃色:溫和、高貴; 藍色:嚴謹、穩定;綠色:健康、便捷。(如果相關的產品有自己的色彩傾向,選擇與輔助色最接近的輔助色)

    icon 背景用色

    • 一個頁面上,四個 tab 的 icon 需要使用背景色時,顏色建議不要超過四種。
    • 和其他圖片圖形一起搭配時,背景色建議不要超過兩種。
    • 業務頁面內,icon 的背景可以使用漸變色,icon 本身直接反白,如圖 「icon用色場景示例3 – 色彩配色15 」。
    • 四個 tab 頁,因為頭部使用了漸變色,所以 icon 建議使用純色;業務類基本不做限制。

    △ icon用色場景示例3 – 色彩配色15

    文字用色

    • 常規文字用色:根據不同的字號大小,對應出兩種灰黑色。在使用場景中,文字黑色用純黑透明度顯示,如圖「黑色文字顏色使用場景 – 色彩配圖16 」 ;白色的文字顏色一般在品牌色的背景下使用,通過透明度調整文字顏色,如圖 「白色文字使用場景示例 – 色彩配圖17 」,
    • 文字鏈接狀、可操作的指示:品牌色#108ee9;(不可點擊的標簽不能使用該顏色),如圖 「鏈接色使用場景示例 – 色彩配圖18 」。
    • 重點突出、公告提醒:橙色(僅用于提醒,不能用于帶情感色彩的錯誤提示)。
    • 錯誤、警示、失敗、小紅點:紅色。

    △ 黑色文字顏色使用場景 – 色彩配圖16

    △ 白色文字使用場景示例 – 色彩配圖17

    △ 鏈接色使用場景示例 – 色彩配圖18

    鏈接色僅用于可操作執行,圖中的陌生人、置頂均是提示標簽,使用不當。

    三、可使用顏色合集

    網站案例欣賞

    森晨科技

    智能健康家電行業響應式網站設計

    才通國際

    企業英文官網

    匯金國際城

    FLASH項目官網

    老板把我摁倒在办公桌啪啪_人禽杂交在线播放网站_我原来是富二代_女人和男人啪视频在线观看_又黄又刺激超爽动态图_色偷偷2019免费视频观看