參與多個項目後，我總結了這份可能是網上最全的小程序設計規範
一、色彩 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 背景用色
icon用色場景示例3 – 色彩配色15
文字用色
黑色文字顏色使用場景 – 色彩配圖16
白色文字使用場景示例 – 色彩配圖17
連結色使用場景示例 – 色彩配圖18
連結色僅用於可操作執行，圖中的陌生人、置頂均是提示標籤，使用不當。
三、可使用顏色合集
免責申明：文章來源於公開網絡，僅供設計師學習，版權歸原創者所有!無對涉及版權問題負責，如有原作者認侵，聯繫必刪
為答謝客官閱讀完此文支持，特準備設計新人整套課程（字體設計，海報，logo，ps工具）贈送領取
下方是領取方式
1，右上角關注小編哥哥頭條號~
2，評論文章，不限字數，一個字都行
3，私信小編：免費課程