前情：
#配色# 1. 色彩理論一網(wǎng)打盡
#配色# 2. 色輪基礎(chǔ)原理及應(yīng)用
色彩功能劃分：底色树灶，主色督笆，輔助色強(qiáng)調(diào)色闽坡。
配色原則
現(xiàn)如今至少80%的APP使用以下配色方式育叁，可以快速完成UI绕辖。
日本設(shè)計(jì)師まりっぺ提出70%，25%擂红，5%的配色比例原則，畫面中70%為底色，面積最大的 一塊昵骤，往往畫面的色調(diào)是由底色決定的树碱。25%面積的為主色，畫面的核心區(qū)域多使用主色區(qū)变秦。5%為強(qiáng)調(diào)色成榜，強(qiáng)調(diào)色在畫面中起到化龍點(diǎn)睛的作用，強(qiáng)調(diào)色多使用 與主色對(duì)比度較大的顏色蹦玫，也可以嘗試?yán)蒙实幕パa(bǔ)關(guān)系來突出赎婚。
當(dāng)然，在實(shí)際工作中樱溉，很多時(shí)候畫面不會(huì)只有3中顏色挣输。遇到這種情況時(shí)，まりっぺ 主張?jiān)诂F(xiàn)有的配色方案中進(jìn)行切割福贞，從而不影響配色比例撩嚼。
配色步驟
1. 確定底色
為了突出內(nèi)容，90%的應(yīng)用底色為白色或淺灰色挖帘，文字采用深灰或黑色完丽，這點(diǎn)建議遵循主流。
2. 確定主色
主色決定設(shè)計(jì)的風(fēng)格拇舀，是溫馨的逻族，甜美的，還是專業(yè)的骄崩，高冷的聘鳞？
通常將品牌LOGO的顏色定為主色彩，且在不同的界面中主色出現(xiàn)的面積也會(huì)隨之變化刁赖。APP中常用配色方式：首頁搁痛，一級(jí)頁面中使用的主色彩面積較大，導(dǎo)航條全部填充了主色宇弛。在二級(jí)頁面中則使用的面積較少鸡典，將主色點(diǎn)綴到界面中.
在用戶使用產(chǎn)品時(shí)，希望用戶記憶產(chǎn)品,而在用戶進(jìn)入了信息頁面時(shí)則更注重易用性枪芒，希望用戶能找到自己需要的東西松逊。所以主色在首頁，一級(jí)頁面使用的面積較多括儒，而二級(jí)頁面使用在關(guān)鍵的操作點(diǎn)上选侨。
3. 從對(duì)比色中找輔助色：通常用作點(diǎn)綴，補(bǔ)充抽碌，提醒悍赢，或者警示信息的表示
色相對(duì)比--互補(bǔ)色。互補(bǔ)色對(duì)比強(qiáng)烈左权，容易傳播皮胡，但過度使用容易造成視覺疲勞。需控制使用的位置和信息的面積赏迟，通常用于小區(qū)域核心處屡贺，或用于重點(diǎn)提示。
主要的三對(duì)互補(bǔ)色：紅綠锌杀、藍(lán)橙甩栈、黃紫
很多APP的icon為了吸引用戶的注意就用到了強(qiáng)烈對(duì)比的互補(bǔ)色。例子-番茄快點(diǎn)糕再、QQ空間量没、相機(jī)360。
冷暖對(duì)比-- 冷暖對(duì)比色是自然平衡的規(guī)律亿鲜，可以在設(shè)計(jì)中大量使用允蜈，這樣的配色會(huì)使作品非常的出彩，不顯單調(diào)蒿柳。
4. 思考頁面元素功能層級(jí)層次
從產(chǎn)品角度出發(fā)饶套，我們?cè)谑褂妙伾臅r(shí)候要考慮頁面的內(nèi)容關(guān)系，理解界面的層次與功能性質(zhì)垒探，哪些內(nèi)容是需要突出的妓蛮，哪些內(nèi)容是需要弱化的，哪些是一般化功能圾叼。
以淘寶為例蛤克，商品詳情頁，突出價(jià)格與優(yōu)惠夷蚊，【加入購物車】【立即購買】作為主操作鈕突出顯示构挤，收藏等則弱化；
訂單頁則以亮眼顏色突出主操作按鈕【確認(rèn)收貨】惕鼓，【延長收貨】【查看物流】相對(duì)弱化筋现。
5. 原則：色不過三，不超過三種顏色
這里的三種顏色主要是指色相箱歧，實(shí)在有較多的色彩需求矾飞，可以用同一色相，調(diào)整飽和度呀邢，明度調(diào)出新的顏色洒沦。
6. 中性色--灰色，白色价淌，黑色的使用
飽和度太高申眼，明度太高的顏色太過頻繁大面積的使用瞒津，容易視覺疲勞。
灰色豺型，白色仲智，黑色是較為中性的顏色，作為背景色姻氨，過渡色，文字色剪验，次級(jí)內(nèi)容顏色等肴焊，重點(diǎn)突出內(nèi)容。
常見的使用方式是灰色作為最底層背景色功戚，分隔線顏色娶眷，再以白色塊狀區(qū)域給內(nèi)容分區(qū)，黑色則作為文字色啸臀。
關(guān)鍵功能區(qū)域届宠，再使用我們的主色，輔助色來突出乘粒，保證層級(jí)清晰豌注，主次分明。
7. 配色規(guī)則標(biāo)注
7.1. 給不同使用區(qū)域模塊顏色進(jìn)行分類（文字灯萍，色塊轧铁，圖標(biāo)，線條旦棉，按鈕等）齿风。
規(guī)范好每個(gè)分類的名稱,針對(duì)每個(gè)分類下的顏色差異使用1、2绑洛、3…的序號(hào)進(jìn)行命名,例如正文色T1救斑、輔助文字T2、高亮文字顏色T3…
7.2. 取出配色代碼
讓設(shè)計(jì)和開發(fā)迅速傳遞信息真屯。確定好配色的代碼脸候，并按分類定義色值。每一套主題的色值可能會(huì)不一樣讨跟，但是編號(hào)肯定是一致的纪他，例如文字T1T10、按鈕B1B5…
7.3. 產(chǎn)出配色配置檔
給出一個(gè)TXT文檔晾匠，標(biāo)注所有配套顏色色值茶袒，開發(fā)直接解析配色文檔即可，不需調(diào)整代碼
