研究背景

本文基于目前兩大設計體系：安卓端的谷歌設計規范和iOS人機交互指南對顏色的定義和規范，參考了部分 Ant Design 的色板生成原理，為大家帶來「米莊APP」設計系統顏色規范的建立過程。

色彩理論

1. 起源

對于現代色彩的理解，我們要歸功于一個人：牛頓。牛頓闡明了動量和角動量守恒的原理，提出牛頓運動定律，給世界帶來了秩序的同時，也通過對三棱鏡將白光發散成可見光譜的觀察，發展出了顏色理論。

牛頓注意到，當你通過棱鏡發出白光時，光會被分裂成彩色漸變。不僅如此，你還可以將顏色重新組合起來再回到白色，這在當時是一個非常全新的事物。要知道在這個實驗之前，混合顏色是一種普遍的禁忌和對自然的冒犯。

△ 牛頓的光學圖之一

牛頓的彩虹是一個完美的漸變，他把它進行了排序。并且把它分成了七種顏色：紅色，橙色，黃色，綠色，藍色，青色，紫色。

△ boute的色圈

2. 發展

同時，牛頓也發明了色輪，完整揭示了隱藏在自然中的秩序，就像音樂中的音節一樣，且由偉大的藝術家歌德完善了色彩理論。對，就是那個寫了《少年維特之煩惱》的歌德。

眾所周知，歌德是一個偉大的詩人、小說家、戲劇家和杰出的思想家。但是卻很少有人知道，他還是一個科學研究者，而且涉獵的學科很多。他從事研究的有動植物形態學、解剖學、顏色學、光學、礦物學、地質學等，并在個別領域里取得了令人稱道的成就。歌德同時也是一個著名的畫家。他系統地將顏色描述為「暖色」或者「冷色」，這種冷暖概念組成了現代色彩的一部分。早期的人們可能認為藍色是一種暖色，也許因為它是火焰中最熱的那個部分。

后來我們有了蒙塞爾的球體，包豪斯的學者也詳細闡述了色輪，并且形成色調，色相，對比度等各種色彩的屬性。然后出現了現代數字顯示器的發明，這種技術讓色彩產生了無數種可能性，更多現代科技的色彩模型，可以讓我們更細致地感知色彩。

色彩概念

1. HSL

HSL色彩模式是工業界的一種顏色標準，是通過對色相（Hue）、飽和度（Saturation）、明度（Lightness）三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色，這個標準幾乎包括了人類視力所能感知的所有顏色，是迄今運用最廣的顏色系統之一。

2. HSV

HSV又稱HSB，是基于人眼的，設計軟件中常見的色彩模式。

在HSB模式中，H（hues）表示色相，在0~360°的標準色環上，按照角度值標識。比如紅是0°、橙色是30°等；S（saturation）表示飽和度，是指顏色的強度或純度。飽和度表示色相中彩色成分所占的比例，用從0%（灰色）~100%（完全飽和）的百分比來度量。B（brightness）表示亮度，通常是從0（黑）~100%（白）的百分比來度量的，在色立面中從上至下逐漸遞減，上邊線為100%，下邊線為0% 。

HSV模型通常用于計算機圖形應用中，色相表示為圓環；可以使用一個獨立的三角形來表示飽和度和明度，三角形的垂直軸指示飽和度，而水平軸表示明度。在這種方式下，選擇顏色可以首先在圓環中選擇色相，再從三角形中選擇想要的飽和度和明度。

△ HSL和HSV都是圓柱形幾何形狀

如果我們繪制色調，亮度，而不是飽和度，那么分別得出的是雙錐體和錐體，而不是圓筒。

HSL 和 HSV 都是一種將 RGB色彩模型中的點在圓柱體中的表示法，以便更接近與人類視覺感知顏色制作屬性的方式對齊。在這些模型中，每個色調的顏色排列在徑向切片中，圍繞中性色的中心軸，其范圍從底部的黑色到頂部的白色。這兩種表示法試圖做到比 RGB 基于的幾何結構更加直觀。

△ RGB基礎原理模型

今天，幾乎每種計算器，顏色選擇器，以及 Web應用程序都使用 HSL 或者 HSV，至少作為一種選擇。并且大多數的 Web前端框架都存在預打包的開源顏色選擇器。在CSS 3規范中允許網頁制作者為他們的網頁直接與 HSL坐標制定顏色。

使用HSV（HSB）的應用：

• Apple Mac OS X系統顏色選擇器（有一個H/S顏色碟和一個V滑塊）
• Adobe圖形應用程序（Illustrator，Photoshop等等）

使用HSL的應用：

• CSS3規定
• Microsoft Windows系統顏色選擇器（包括Microsoft Paint）

設計系統色彩

1. Material Design Colors

一致且有意義：顏色有助于表達層次結構，建立品牌形象，賦予意義，并指示元素狀態。對每個組件的顏色應用都有做參考。整個UI用色的精髓，可在 material 工具中體現的淋漓盡致。

顏色用法

谷歌規范中顏色的使用主要對兩個部分進行了定義，一個是主色，一個是輔助色。配色靈感來自大膽的色調與柔和的環境、深度的陰影、明亮的高光并存。我們可以在大量頁面中清晰地感知到此顏色的使用手法。

主色：強調色。應用程序的屏幕和顯示組件最頻繁的顏色。要在元素之間創造對比度，可以使用較淺或較深色調的主色。較淺和較深的色調之間的對比度有助于區分不同的表面，例如區分狀態欄和工具欄。

輔助色：則是用來強調UI中關鍵部分的顏色。輔助色可以是和主色互補的，也可以是和主色類似的，但它不應該只是簡單的對主色進行加深或變淺。輔助色應該和它周圍的元素形成對比，并作為強調，且應謹慎使用。

△ 主要和輔助調色板示例

使用原則：

• 層次清晰：最重要的元素最突出。顏色可表示哪些元素是交互式的，它們與其他元素的關系以及它們的突出程度。
• 清晰易讀：文本和重要元素（如圖標）出現在彩色背景上時，應符合所有屏幕和設備類型的易讀性標準。
• 張力表現：通過在令人難忘的時刻展示品牌色彩來強化您的品牌風格，從而強化產品的品牌。

△ 一些案例

調色板生成器

這些調色板最初由 Material Design 于2014年創建，由可以和諧協作的顏色組成，可用于開發您的品牌調色板。

調色工具

選擇配色方案：你可以自定義應用的調色板，以適配你的品牌顏色。或者，你可以使用 Material Design 的調色板創建一個全新的配色方案。

使用顏色工具創建調色板，并在應用中使用。確保應用的顏色滿足無障礙標準，且元素之間有充分的對比度，

Material Theme Editor UI編輯器

在2018年5月份的 Google I/O 大會上，Google 設計團隊一款叫做 Material Theme Editor 工具，可以幫助設計師輕松且快速創建符合自身品牌又符合 Material Design 風格的應用。

使用教程：《谷歌新出的這款 Material Theme Editor 神器，讓你做設計又快又好！》

創建色彩：

• 通過選擇主要、次要、背景、文本和圖標色調，自動將顏色應用于所有組件
• 檢查顏色對比度以滿足可訪問性要求
• 從「材質」調色板中選擇顏色
• 使用單一顏色自動生成10個顏色值的色調調色板
• 使用全局顏色更改自動填充符號

安裝插件后，在 Plugins — Material — Open Theme Editor 中打開。Material 組件庫：

2. iOS Colors

顏色定義

iOS人機規范顏色定義如下，為了便于對比，我將RGB格式的色塊都轉化為HSB，可以清楚地觀察到它的特點：

使用原則

使用顏色來進行明智有效地溝通，對于重要信息的表現，顏色有非常重要的作用。比如說用戶警示的紅色。

在 app 中使用互補色。app中使用的顏色需要協調一致，不會互相沖突和干擾。選擇合適的顏色。

選擇一種顏色來表示功能的可交互性，并且區分可點擊和不可點擊不同狀態的顏色使用。

在 Note 中，可交互的元素是黃色的。在 Calendar 中，可交互的元素是紅色的。如果你定義了一種關鍵色用于傳遞可交互性，那么你要保證其它顏色不會與之沖突。比如在 app 中我們也通常用藍色來代表可跳轉。

考慮無障礙設計：關注色弱或者色盲用戶的顏色體驗，并且同時也要注意色彩之間的對比度。

在多種光線條件下測試你的 App 顏色：在不同的環境之下，app中呈現的顏色會受到外界光線的影響，所以要考慮你的 app 的多種使用場景，選擇舒適的，不會產生閱讀干擾的顏色來使用。

使用足夠的顏色對比度：在 App 中，過低的對比度會讓內容難以閱讀。比如，圖標和文本可能會和背景相融合。網上有顏色對比度計算器能夠幫助你精確的分析 App 中的顏色對比度，以確保它符合最佳標準。請確保你的 App 對比度至少達到4.5 : 1 ，但是7 : 1更好，因為它更符合嚴格的功能標準。

3. Ant Design Colors

1.0 Ant Design 色板

有意義的色彩 ：對顏色部分進行了簡要的說明。

色彩在界面設計中的使用應同時具備品牌識別性以及界面設計功能性。色彩是相當感性的東西，設計中對色彩的運用首要應考慮到品牌層面的表達，另外很重要的一點是色彩的運用應達到信息傳遞，動作指引，交互反饋，或是強化和凸現某一個元素的目的。任何顏色的選取和使用應該是有意義的。

Ant Design Colors：提供了一套調色板，并介紹了每種顏色的含義，色板由9種基本色彩組成，每種基本色又衍生出九宮格色板，在此基礎上還可以通過黑白疊加的方式實現色彩明暗的效果。

色彩與交互：提供了色彩在交互時的使用指南。顏色選擇上運用了 tint and black 系統，通過顏色的不同階級來表現不同狀態。

△ tint/shade 色彩系統算法

選取一個主色作為5號色，將主色與純白色（#fff）混合，主色與純白色之間分成100份，20/40/60/80的位置分別分割，得到4/3/2/1號色。

將主色與純黑色（#000）混合，主色與純黑色之間分成100份，20/40/60/80的位置分別分割，得到6/7/8/9號色。

通過以上方式得到一條完整漸變色板。

色彩換算工具：

2.0 Ant Design 色板

使用原則：實用

不僅應考慮品牌的識別性，還需達到信息傳遞、操作指引、交互反饋，或是強化和凸顯某一個元素的目的。基于操作系統更注重高效、清晰等特點，Ant Design 的用色上更偏向實用便捷。在選擇色彩時有以下三個注意點：

意義明確：色彩應與產品定位相匹配，且符合用戶心理認知；定義了品牌色，中性色以及功能色。

層次分明：為重要行動點或關鍵信息定義一個主色，并建立視覺連續性。

足夠對比度：遵守 WCAG 2.0 的標準，保證足夠的對比度，讓色彩更容易被視障（色盲）用戶識別。在由淺至深的色板里， 6格色彩單元格普遍滿足 WCAG 2.0的 4.5 : 1 最小對比度（AA 級），我們將其定義為色板的默認品牌色。

色彩對比值校驗工具

算法升級

1.0的算法有個弊端，大自然中并沒有純白或者純黑的物體，所以顏色過渡不自然。基于此基礎，并且和谷歌規范保持一致，選擇一個主色，在保持1.0的算法基礎上，再加入貝塞爾曲線。結合了色彩加白、加黑、加深，貝塞爾曲線，以及針對冷暖色的不同旋轉角度，得出2.0色板生成算法。使用者指定主色（和谷歌規范操作一致），便可導出一條完整的漸變色板。

3.0 Ant Design 色板

基于2.0版本的算法，過于復雜，且迭代算法也比較難更新，所以3.0的色板重新從輕量明確簡單的角度出發，重新調整算法。相對于第二版，增加了幾種主色，整個色板的飽和度更高，不再使用貝塞爾曲線。也更容易和開發團隊溝通。

使用了HSV模型：此版本沒有繼續使用與某個淺色/深色值進行混合的形式獲取漸變色板，而是直接用HSV模型的值進行遞減/遞增得到完整漸變色板。

色彩體系：系統級色彩體系同樣源于「自然」的設計價值觀。設計師通過對自然場景的抽象捕捉，結合螞蟻的技術基因，形成了特有的12色。進一步又通過大量的觀察，捕捉不同色彩在自然光下的變化規律，借助美術中素描的思路，對12個顏色進行了衍生。在中性色板的定義上，則是平衡了可讀性、美感以及可用性得出的。

產品級色彩體系：同樣在品牌色，功能色和中性色進行拓展和定義。

基礎色板：共計120個顏色，包含12個主色以及衍生色。

最后將 Ant Design 3個色板迭代的顏色整合在了一起，對比一下還是非常明顯的。很直觀的看出來算法之下顏色的變化之美。

4. kitchen 工具

一款為設計者提升工作效率的 Sketch 工具集。提供了各大官方精選色板庫，并且可輕松管理屬于你的色板庫。

介紹和下載地址：http://www.hx168888.com/sketch-plugin-kitchen

MIZ Colors

根據米莊多年來的品牌定位，以及目前米莊的擴展業務需求，我們對米莊產品使用中的顏色進行重新定義。基于我們產品的關鍵詞：金融科技，安全可靠，專業智能，結合色彩工程學，賦予和諧的美感色彩。

1. 主色

顏色是有意義的。色彩的表達，需要符合用戶心理認知。它包含兩個層面，第一個是品牌識別性，傳遞米莊品牌價值。最直觀的展示公司文化，以及 app 的特性。品牌色是體現產品特性和傳播理念最直觀的視覺元素之一。前期我們對關鍵詞進行拆分，并且對每一個關鍵詞配對適合的顏色進行性格心理解析，產出品牌色以及對應的輔助色系。顏色規范中使用HSB（HSV）——通過色相/飽和度/亮度三要素來表達顏色。

目前的主色，也是我們米莊的品牌色。

HSB = 20 100 100

2. 輔助色

我們不僅需要品牌色來傳遞品牌價值，我們還需要輔助色來組成我們產品體系的顏色搭配，實現不同功能點的視覺呈現。輔助色還起到中和品牌色的作用，根據不同的業務需求，結合不同的場景來呈現最佳視覺效果，減少用戶對于主色的視覺疲勞。對于輔助色的選擇，我們選取了類似色、互補色、中性色三種輔助色系。

同類色

同類色搭配原則：色環上相差15度之內的色彩，非常舒適，色彩過渡自然，溫和，給予用戶安心，信任的心理預期。

并且于品牌色的色相冷暖性質一致，和諧統一。

對比色和互補色

24色相環上相距120度到180度之間的兩種顏色。品牌色為暖色系，暖色系會產生熱情、明亮、活潑溫暖等感覺，而互補色是冷色系，冷色系會中和過度的暖色情緒，從而令人心情從洋溢回歸至平靜。漸而平穩，安詳，天空之境之靜謐。所以我們也將紅色的對比色，以及黃色的互補色，來形成冷色調互補。輔助色紅色色相為H = 5，取對比色綠色，相應色相H為（H+120）；以及輔助色黃色的對比色藍色，H為215（H+180）。獲得以下兩個冷色調的輔助色：

校正輔助色

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

近似色的選取，保證色相不超過15，保持統一的視覺體驗。

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

可以從上圖看出，盡管保持了相同的飽和度和明度，色相不一致會導致在視覺上有不一樣的感官體驗。綠色的發光度比較亮，以及藍色就稍微偏暗一些。所以需要調整明度和飽和度，保持視覺感官一致性和相似的舒適程度。

中性色做輔助色

中性色作為輔助色，也是調和顏色視覺的一種。它本身不帶情感色彩，可中和其他任何顏色，自然界中沒有純黑或者純白的顏色，所以將純黑色降了純度，使之符合感覺舒適程度。中性色也常用于字體的使用，并且以不透明度的形式落地。

3. 調色板

確定好主色和輔助色后，我們需要建立調色板來拓展不同場景下的顏色運用。既符合品牌傳遞，也需要通過不同顏色層級，來展示界面設計的功能性，進行信息傳遞，動作指引，交互反饋，或是強化和突顯界面元素。同時，也通過顏色層級的變化，對產品交互層面做出改變。

同色系的明度、純度取值

既能體現我們的品牌形象，也能保持頁面的統一性。我們通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調色板。在色彩系統里，這種操作方式也叫做 Tints and shades 系統。tints 是指加入白色，減淡的意思；而 shade 是指加入黑色，加深的意思。

Tints and shades系統

為此，我們在 sketch 里根據 tint 和 shade 系統的算法，將算法可視化，在 sketch 中建立了這個系統，方便每個顏色都在統一的規則里形成衍生色。從而形成不同顏色的調色條。

依照上圖，我們可以發現：

• 品牌色值點以左的線段，飽和度S以S0/5遞減，明度B以 （100-B0）/5遞增；
• 品牌色值點以右的線段，飽和度S以（100-S0）/5遞增，明度B以B0/5遞減。

帶入我們的品牌色值HSB（20,100,100），可以得出我們想要的orange01（20,100,90），orange03（20,40,100），orange04（20,10,100）。

最后，結合 Ant Design2.0 中的計算工具校對，此 sketch 色板生成模版有效。

最終我們形成完整的調色板：

4. 色彩應用

在色彩使用上，依據不同場景，我們也從以下三個方面，定義了米莊基礎用色。

品牌色

品牌色是體現產品特性和傳播理念最直觀的視覺元素之一。

功能色

主要應用于消息通知、反饋提醒、表單校驗這類場景中的成功、出錯、失敗、提醒、鏈接等狀態。

中性色

關鍵內容的襯托和功能的引導，主要體現在導航框架、背景底色、描邊，或次級操作等。

sketch色板

5. 使用規范

色彩識別

遵守 WCAG 2.0 的標準，保證足夠的對比度，讓色彩更容易被視障（色盲）用戶識別。

層次結構

層次結構是指根據重要性級別來組織內容。顏色可以表達出一些內容相對與其他內容的重要性。

（參考校對工具：https://contrast-ratio.com/#%23454545-on-%23fff）

意義清晰

顏色可以用來表達屏幕中不同元素的含義。需注意使用中符合用戶認知心理預期，減少歧義的產生。

上線復盤

1. 命名

如何正確命名顏色？使用顏色屬性和數字組合來表示，方便修改和更換。

2. 替換

讓開發將線上的所有顏色都發一遍，然后畫出色塊，再對照目前調色板的顏色進行調整和修改。整體 app 更加輕量化以及溝通更順暢。

如何使用

作為一名現代社會中的設計師，我們的工作很多時候就是說服你的老板，你選擇的顏色是正確的。你可以準備一個40頁的 ppt 來準確的闡述計算邏輯。在這個陌生的數字化環境中，智能和科技讓一切都變得有可能，可預測，可驗證。

但是同時，也請大家保持對色彩的警惕。不要被工具所愚弄。我們能描述1700多萬種色彩，但這并不能代表什么。色彩的本質是什么？目前還有很多群落在沒有色彩定義環境中生存著。色彩之所以有意義，是因為我們賦予了它意義。

當下次，在眼睛離開電腦手機的時候，請花點時間留意你身邊的綠植，留意遠處云朵的色彩，留意旅途中海洋的顏色，留意清晨的露珠和晚霞落日。然后問問自己，你看到了什么？

△ 圖片來源：https://dribbble.com/google

附件資源

總結回顧大綱：

調色板下載

PS/AI：

• 下載鏈接：https://pan.baidu.com/s/1hqv4D_DDwDTln1OjO4Wuvw
• 提取碼：ce98

Material Theme Editor UI編輯器：https://material.io/tools/theme-editor/

色彩對比網站：https://contrast-ratio.com/