2021-1-14 周周
色彩是影響用戶最簡(jiǎn)單和最重要的一個(gè)因素。研究表明，人們只需 90 秒就能對(duì)一種產(chǎn)品做出下意識(shí)的判斷，而其中高達(dá) 60%以上的判斷僅基于顏色。因此，選擇合適的顏色對(duì)于改進(jìn)產(chǎn)品的轉(zhuǎn)換率和提高產(chǎn)品的可用性是非常有用的。在沒有文字的場(chǎng)景中，顏色的搭配非常重要。如何配色可以使設(shè)計(jì)感更強(qiáng)，如何配色更好看，哪些配色不好看，解決這些問題就需要學(xué)習(xí)色彩理論。
我們身處在一個(gè)多彩的世界中，物體的不同顏色，會(huì)讓我們產(chǎn)生不同的情緒。色彩，即光從物體反射到人的眼睛所引起的一種視覺心理感受，按字面含義上理解可分為色和彩?！干故侵溉藢?duì)進(jìn)入眼睛的光傳至大腦時(shí)所產(chǎn)生的感覺，「彩」則指多色的意思，是人對(duì)光變化的理解。色彩的基本理論雖然老生常談，但在 UI 設(shè)計(jì)中具體怎么運(yùn)用，還有關(guān)于色彩的性格和含義，都是我們需要了解的。因此在學(xué)習(xí) UI 配色之前我們先來了解色彩的基礎(chǔ)知識(shí)。
原色
所有的色彩都源自“紅黃藍(lán)”三種原色，很多人誤以為三原色是“紅綠藍(lán)”，其實(shí)不是。紅綠藍(lán)是顯示上的三原色，計(jì)算機(jī)屏幕的顯示是色光三原色（紅 red，綠 green，藍(lán) blue）即 RGB 組成的，每一個(gè)像素的顏色都用三原色值來顯示，與美術(shù)上的三原色不一樣。原色是其他顏色調(diào)配不出來的。把原色相互混合，可以調(diào)和出其他種顏色。
雖然 RGB 在顯示設(shè)備上表現(xiàn)良好，但并不夠人性化。因?yàn)槿藗兣袛囝伾?，往往是通過：這是什么顏色？是不是太艷了？是太亮了還是太暗了？這樣的感官維度，而很難通過紅綠藍(lán)的亮度層級(jí)去判斷。所以人們后來基于 RGB 衍生出了 HSB 模式和 HSL 模式。
印刷三原色為青（Cyan)、品紅（Magenta)、黃（Yellow)。是減色模式，混合為深灰色，并不能產(chǎn)生黑，所以在印刷時(shí)加上黑色油墨，才能產(chǎn)生純正的黑，就是 CMYK 顏色模式。
間色
又叫“二次色”。它是由三原色兩兩混合調(diào)配出來的顏色。紅與黃調(diào)配出橙色；黃與藍(lán)調(diào)配出綠色；紅與藍(lán)調(diào)配出紫色，橙、綠、紫三種顏色又叫“三間色”。在調(diào)配時(shí)，由于原色在份量多少上有所不同，所以能產(chǎn)生豐富的間色變化。
復(fù)色
也叫“復(fù)合色”。復(fù)色是用原色與間色相調(diào)或用間色與間色相調(diào)而成的“三次色”復(fù)色是最豐富的色彩家族，千變?nèi)f化，豐富異常，復(fù)色包括了除原色和間色以外的所有顏色。例如，黃色與橙色混合得到橙黃，紅色與紫色混合得到紫紅。
冷暖色
最后由三種原色、三種間色和六種復(fù)色組成的系統(tǒng)就稱為十二色環(huán)，從紫色至黃綠為冷色，黃色至紫色為暖色。冷色令人聯(lián)想到天空、海洋、冰雪等，產(chǎn)生寒冷、理智、寧?kù)o等感覺；暖色則令人聯(lián)想到太陽(yáng)、火焰、熱血等，產(chǎn)生溫暖、熱烈、危險(xiǎn)等感覺。
雖然可以用「冷」、「暖」色系來劃分色彩，但配色的變化卻有千種萬(wàn)種。借著色彩的組合方式，從「非常冷」到「涼爽」到「暖和」再到「炎熱」都可以用不同的配色組來表現(xiàn)色彩的印象。
不同的色輪由不同的人發(fā)明，他們對(duì)于色彩的見解不一樣，因此創(chuàng)建出來的色輪用途也不一樣。比如：伊頓色輪又被稱之為美術(shù)三原色，是由顏料的三原色混合疊加而成；RGB 色輪主要運(yùn)用于電腦、手機(jī)、平板等一系列科技產(chǎn)品，RGB 的三原色是光的三原色；CMYK 色輪主要用于印刷領(lǐng)域。
豐富多樣的顏色可以分成兩大類，即有彩色系和無彩色系。彩色系的顏色具有三個(gè)基本特征：色相、明度和飽和度，在色彩學(xué)上被稱為色彩三大要素或色彩三屬性。
色相（Hue）
色相是自然狀態(tài)下的色彩，是色彩的相貌。簡(jiǎn)言之，色環(huán)上沒有改變明暗的色彩。色相是色彩的首要特征，是區(qū)別各種不同色彩的標(biāo)準(zhǔn)。例如紅、橙、黃、綠、青、藍(lán)、紫就是其中不同的基本色相。黑色是沒有色相的中性色。不同的色相在人眼中的差異是色相本身對(duì)應(yīng)光的波長(zhǎng)不同而造成的。紅色波長(zhǎng)最長(zhǎng)，紫色的波長(zhǎng)最短。
飽和度（Saturation）
飽和度是色彩的純度，他表示顏色中所含有色成分的比例。增加飽和度，色彩會(huì)變得更強(qiáng)烈、鮮艷生動(dòng)；降低飽和度，顏色中灰色成分越大，色彩會(huì)變得暗淡乏味。當(dāng)一種顏色摻入黑、白或其他色彩時(shí)，純度就產(chǎn)生了變化，當(dāng)摻入的顏色達(dá)到很大的比例時(shí)，人的眼睛就無法感知出來了。
飽和度為 0 的顏色為無彩色，就是黑、白、灰。數(shù)值越大，顏色中的灰色越少，顏色越鮮艷。飽和度高的地方給人感覺靠近，而飽和度低的地方則給人的感覺很遙遠(yuǎn)。高飽和度和低飽和度的色彩都給人堅(jiān)硬的感覺。
明度（Brightness）
明度，指色彩的明暗度，反應(yīng)的是色彩的深淺變化。以自然界為例，一些物體在早晨和晚上的色彩不同。如樹木和山脈，早晨色調(diào)淺；傍晚因?yàn)楣饩€減少了，色調(diào)變得偏暗。距光源越近的物體，明度越高，反之，則明度越暗。
明度在 UI 設(shè)計(jì)中扮演重要的角色，明度運(yùn)用得好，可以實(shí)現(xiàn)好的對(duì)比效果。明度達(dá)到 100%時(shí)，色彩就會(huì)變成白色（黑白模式下）；明度是 0%時(shí)，就會(huì)變成黑色。色彩的明度變化往往會(huì)影響到純度，例如藍(lán)色加入黑色以后明度降低了，同時(shí)純度也降低了；如果藍(lán)色加入白色則明度提高了，純度卻降低了。
完整的 UI 配色應(yīng)包含主色、輔助色和中灰色。主色通常與品牌色一致，輔助色一般選擇與主色色調(diào)一致且能拉開層次的顏色，強(qiáng)調(diào)色選擇與主色相對(duì)立的互補(bǔ)色。下面我們來學(xué)習(xí)幾種常見的配色方案。
單色
單色是指某個(gè)色彩的明度變化，即在色彩上疊加 10%-90%白色或黑色得到的一組顏色。單色搭配由于彼此之間色彩相同，因此能和諧共處，但因較為樸素也就不容易引人注目，而且會(huì)給人一種單調(diào)的感覺。單色配色在色彩變化上也適合長(zhǎng)時(shí)間閱讀，顏色波動(dòng)較少，比較適合沉浸式交互的界面設(shè)計(jì)。
蝦米音樂就是單色搭配的最好例子，它將主色橙色用在主要功能入口、標(biāo)簽欄圖標(biāo)等所有界面的關(guān)鍵元素上，給人非常精致和統(tǒng)一的視覺體驗(yàn)。
如若想要在色彩變化上融入一點(diǎn)微妙的變化，可以嘗試在色環(huán)中選用兩側(cè)相近的顏色，這樣色彩層次豐富了而統(tǒng)一感也不會(huì)變，稱之為“鄰近色配色”。
鄰近色
是指在色相環(huán)中相鄰的兩種顏色，在色相環(huán)上相距 60°，或者相隔五六個(gè)數(shù)位的兩色。它可以在同一個(gè)色調(diào)中建立起豐富的質(zhì)感和層次，優(yōu)點(diǎn)是陽(yáng)光、活潑、穩(wěn)定、和諧但不單調(diào)，理所當(dāng)然稱為最安全的配色法則。鄰近色色相相近，冷暖性質(zhì)相近，傳遞的情感也較為相似。例如，紅色，黃色和橙色就是一組鄰近色。鄰近色表現(xiàn)的情感多為溫和穩(wěn)定，沒有太大的視覺沖擊。
美顏相機(jī)的主色是粉色，將淺粉色和淺紫色作為輔助色，既能信息區(qū)分又和諧統(tǒng)一。
互補(bǔ)色
互補(bǔ)色是指在色相環(huán)上對(duì)立（180°）的兩個(gè)顏色，色相環(huán)上夾角呈現(xiàn)一條直線，例如黃色和紫色、橙色和藍(lán)色、紅色和綠色等。互補(bǔ)色有著非常強(qiáng)烈的對(duì)比度，在顏色飽和度很高時(shí)，可以產(chǎn)生許多十分強(qiáng)烈的視覺效果，就會(huì)使這兩種顏色都顯得更加鮮明，也將視覺沖擊力強(qiáng)度提升至峰值。這類配色形式優(yōu)缺點(diǎn)和對(duì)比色很相似。常給人一種潮流、刺激、興奮的感覺，把互補(bǔ)色放在一起，會(huì)給人強(qiáng)烈的排斥感，搭配不好會(huì)很山寨。
Airbnb 的主色為紅色，界面設(shè)計(jì)中使用主色的互補(bǔ)色「墨綠」作為主色調(diào)，給人清晰、簡(jiǎn)潔的感覺。
分裂互補(bǔ)色
分裂互補(bǔ)色是指尋找三種顏色，其中兩種互為鄰近色，另一種與它們形成互補(bǔ)色，例如黃色和藍(lán)色、洋紅。這種搭配既能保持互補(bǔ)色強(qiáng)烈的對(duì)比及視覺上的趣味性，又能讓顏色變得柔和。
36Kr 將藍(lán)色作為主色，互補(bǔ)色黃色作為輔助色用在圖標(biāo)、標(biāo)簽上，再選擇黃色的鄰近色紅色作為另一輔助色，用在不同的信息上，有助于用戶區(qū)分產(chǎn)品信息。
對(duì)比色
指在色環(huán)上相距 120°～180°之間的兩種顏色，也是兩種可以明顯區(qū)分的色彩，包括顏色三要素的對(duì)比、冷暖對(duì)比，彩色和消色的對(duì)比等。對(duì)比色能使色彩效果表現(xiàn)更明顯，形式多樣，極富表現(xiàn)力。需要注意的是，互補(bǔ)色一定是對(duì)比色，但是對(duì)比色不一定是互補(bǔ)色。因?yàn)閷?duì)比色的范圍更大，包括的要素更多，如冷暖對(duì)比、明度對(duì)比、純度對(duì)比等。這類配色形式優(yōu)點(diǎn)是視覺沖擊力強(qiáng)烈、富有跳躍性、突出、點(diǎn)綴能力強(qiáng)，比如常用作畫面中的點(diǎn)綴色，或與主體固有色成對(duì)比關(guān)系的背景色，用于突出主體。缺點(diǎn)是大面積使用比較難把控。
馬蜂窩的主色是黃色，對(duì)比色藍(lán)色作為輔色用在標(biāo)簽、小圖標(biāo)上，紅色作為強(qiáng)調(diào)色用在價(jià)格等信息上。
對(duì)比色也不單純是兩個(gè)顏色之間的對(duì)比，而是色調(diào)之間的對(duì)比！對(duì)比色還包括：補(bǔ)色對(duì)比、色相對(duì)比、明度對(duì)比、飽和度對(duì)比、冷暖對(duì)比，飽和度越高對(duì)比越強(qiáng)烈，明度反差越大對(duì)比越強(qiáng)烈。
四元色搭配
四元色搭配在色環(huán)上形成了一個(gè)矩形，使用不是一對(duì)而是兩對(duì)互補(bǔ)色。將其中的一個(gè)顏色作為主色，其余顏色作為輔色進(jìn)行搭配可以得出不錯(cuò)的效果。
四元色是比較難以平衡的顏色，不過搭配好了會(huì)非常出彩。不信可以自己用用感受一下，尤其是使用其中一個(gè)顏色作為主色，其他的三個(gè)顏色作為輔助色的時(shí)候。
了解了色彩的基本知識(shí)，下面說說色彩和光源的關(guān)系。如果想描繪好對(duì)象的色彩，那么就必須了解對(duì)象的固有色、光源色、環(huán)境色及它們之間的關(guān)系和變化。
固有色
即物體本身的顏色。是指在光源條件下物體占主導(dǎo)地位的色彩，如紅色的罐子、綠色的植物等。物體的固有色并不存在，在繪畫過程中為了觀察方便經(jīng)常引入“固有色”這一概念。從實(shí)際方面來看，即使日光也是在不停地變化中，何況任何物體的色彩不僅受到投照光的影響，還會(huì)受到周圍環(huán)境中各種反射光的影響。所以物體色并不是固定不變的。
光源色
物體只有在光源的照亮下才能觀察到它們的色彩。光源有自然光（太陽(yáng)、天光）和人造光（燈），這些光源都各自具有不同的顏色。太陽(yáng)光是偏黃色暖色光，月光是偏青的冷色光，陰天則更多的是藍(lán)灰色的天光，普通燈光是偏黃色的暖色光。光源的顏色對(duì)物體的顏色影響很大，想象一下一個(gè)置于紅色光源照射下的藍(lán)色物體會(huì)是什么顏色。
環(huán)境色
物體周圍環(huán)境的顏色就是環(huán)境色。環(huán)境色對(duì)物體的影響非常大，如在紅色背景下的白色物體，由于光源打到紅色背景上的背景反射光也會(huì)“染”到白色物體上，因此白色物體的部分表面會(huì)蒙上一層淡紅色的色彩。所以，設(shè)計(jì)師在用電腦作圖時(shí)也需要考慮并想象環(huán)境色的影響。
Lab
Lab 的全稱是 CIELAB，有時(shí)候也寫成 CIE L*a*b*。最突出的特點(diǎn)是它的生理特性，一是它包括人眼所看到的所有顏色，是目前為止色域最寬的色彩空間，二是跟人眼一樣，首先看到的是明暗，其次是色彩，可以用數(shù)字化的方式描述人的視覺感應(yīng)，在計(jì)算機(jī)視覺中廣泛應(yīng)用。
LAB 顏色空間中，L 表示亮度，取值[0-100]對(duì)應(yīng)[純黑—純白]；A顏色表示從綠色到紅色的范圍，取值[-128—+127]對(duì)應(yīng)[綠—洋紅]；B表示從藍(lán)色到黃色的范圍，取值[-128—+127]對(duì)應(yīng)[藍(lán)-黃]，正是暖色，負(fù)是冷色。Lab顏色空間中亮度和顏色是分開的， L通道沒有顏色，a通道和b通道只有顏色。不像在RGB顏色空間中，R通道、G通道、B通道每一個(gè)既包含有明度又包含有顏色。
在表達(dá)色彩范圍上，最全的是 Lab 模式（其次是 RGB 模式，最窄的是 CMYK 模式），它彌補(bǔ)了 RGB 色彩模型和 CMYK 色彩模式色彩分布不均的不足。也就是說 Lab 模式所定義的色彩最多，且與光線及設(shè)備無關(guān)，并且處理速度與 RGB 模式同樣快，比 CMYK 模式快數(shù)倍。
Hsb
HSB 和 HSV 是同一個(gè)東西，只是名稱不同。在 Photoshop 拾色器上可以看到每個(gè)顏色都有一組 HSB 值，H 表示色相、S 表示純度、B 表示明度。色相值為 0～360 度，即圓；純度和明度值為 0～100%，因此，了解 HSB 模式的原理，就能了解色彩的本質(zhì)。
當(dāng)我們需要調(diào)配同色系色彩，保持色相不變，只需要改變純度和明度即可。如下圖所示的 3 種同色系綠色，他們的色相（H152）都一致，僅在純度和明度上有所變化。
當(dāng)色相和純度都為 0 時(shí)，色彩稱為中性色，也稱為灰度色，即黑白灰。其中，灰不是單指某一種顏色，而是一系列從黑到白的過渡色。
灰度色多用于文字，通常一個(gè)應(yīng)用中的文字不應(yīng)超過 3 種灰度色。深黑用于標(biāo)題、正文等主要文字；淺黑或深灰用于輔助、提示性文字；淺灰用于禁用、失效等狀態(tài)文字；純白用于深色按鈕文字。
此外，灰度色由于沒有任何色相，始終沉著冷靜，減少對(duì)內(nèi)容的視覺干擾，因此常用于界面背景色，例如 MOO 音樂的界面設(shè)計(jì)。
Hsl
HSL 色彩模式是工業(yè)界的另一種顏色標(biāo)準(zhǔn)，是通過對(duì)色相(H)、飽和度(S)、亮度(L)三個(gè)顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的。在原理和表現(xiàn)上，HSL 和 HSB 中的 H（色相） 完全一致，但二者的 S（飽和度）不一樣，L 和 B （明度 ）也不一樣。
取一個(gè)顏色試試看，先選一個(gè)顏色 #0688F9，放入 “HSL Color Picker”，顯示 HSL 數(shù)值為：H(208), S(95), L(50)，但是我們放在 Sketch 里面看一下，顯示的 HSB 數(shù)值為，H(208), S(98), B(98) 。
HSL 的 H 代表的是人眼所能感知的顏色范圍，這些顏色分布在一個(gè)平面的色相環(huán)上，取值范圍是 0°到 360°的圓心角，每個(gè)角度可以代表一種顏色。色相值的意義在于，我們可以在不改變光感的情況下，通過旋轉(zhuǎn)色相環(huán)來改變顏色。在實(shí)際應(yīng)用中，我們需要記住色相環(huán)上的六大主色，用作基本參照：360°/0°紅、60°黃、120°綠、180°青、240°藍(lán)、300°洋紅，它們?cè)谏喹h(huán)上按照 60°圓心角的間隔排列。
HSL 相比 RGB 的優(yōu)勢(shì)
我們來做一個(gè)基于 HSL 的調(diào)色實(shí)踐。你可不可以快速說出“海棠紅”所對(duì)應(yīng)的 RGB 色值？如果再加一點(diǎn)橙色進(jìn)去，把亮度提高一點(diǎn)，色值又是多少？想想那應(yīng)該是一個(gè)介于洋紅和紅色之間的，性感嬌艷的顏色。我們可以假定它在色相環(huán) H 上的角度是 330°左右，飽和度較高，亮度適中，看看那是什么顏色？
em…我們想要的顏色應(yīng)該再接近紅色一點(diǎn)，讓我們把色相（H）+20°到 350°，現(xiàn)在好多了。
通過改變色相值 H，我們實(shí)現(xiàn)了色相從洋紅向海棠紅的偏移。 大感覺接近了，但還是略微有點(diǎn)灰暗，我們可以通過增加飽和度（S）+15%，讓這個(gè)顏色變得更鮮活，看起來更亮麗。
感覺還是差點(diǎn)，海棠紅是屬于少女的顏色，應(yīng)當(dāng)再嫩一點(diǎn)、通透一點(diǎn)，不會(huì)這么強(qiáng)烈。那可以通過增加亮度 L，+10%試試看，嗯，這才是我們想要的顏色。
同理，如果想加點(diǎn)橙色進(jìn)去， 再亮一點(diǎn)，我們通過心算就大致可以確定色相環(huán)的相位和亮度值。在這里，我們需要讓 H 增加 20°，L 增加 5%。
在使用 HSL 調(diào)色的過程中，不需要了解復(fù)雜的色光混合原理，這是一個(gè)自然的、感性的、易于理解的過程。相比之下，RGB 調(diào)色方式顯得非常笨拙復(fù)雜、難以理解，而 HSL 是多么的友好。
需要提醒一下的是，CSS 代碼里支持的是 HSL，而不是 HSB。如果和前端對(duì)接時(shí)，UI 給到的是 HSB 的色值，那么最終落地的顏色效果會(huì)與設(shè)計(jì)稿有出入。Photoshop 中的 Hex 和 RGB 顏色可以直接在 CSS 文件中使用，但是 Photoshop 中的 HSB 模式顏色和 HSL 是不同的。
Yuv
YUV，是一種顏色編碼方法。常使用在各個(gè)影像處理組件中。YUV 在對(duì)照片或影片編碼時(shí)，考慮到人類的感知能力，允許降低色度的帶寬。Y 表示明亮度（Luminance 或 Luma），也就是灰度值；U(Cb)表示色度（Chrominance）；V(Cr)表示濃度（Chroma）；通常 UV 一起描述影像色彩和飽和度，用于指定像素的顏色。
采用 YUV 色彩空間的重要性是它的亮度信號(hào) Y 和色度信號(hào) U、V 是分離的。如果只有 Y 信號(hào)分量而沒有 U、V 信號(hào)分量，那么這樣表示的圖像就是黑白灰度圖像（回想一下小時(shí)候看的黑白電視）。彩色電視采用 YUV 空間正是為了用亮度信號(hào) Y 解決彩色電視機(jī)與黑白電視機(jī)的兼容問題，使黑白電視機(jī)也能接收彩色電視信號(hào)。
色彩心理學(xué)是美術(shù)知識(shí)學(xué)習(xí)中非常重要的一部分。他所研究的是色彩通過對(duì)人視覺上的刺激，而引發(fā)人情感和感官上的變化，通過日常生活中人們對(duì)應(yīng)用色彩的經(jīng)驗(yàn)積累而歸納總結(jié)出人類對(duì)色彩心理上的預(yù)期感受。在生活中，色彩心理學(xué)對(duì)人們對(duì)顏色的認(rèn)知有很大的影響。為什么交通信號(hào)燈用紅色表示停止通行而不是綠色呢？為什么大多快餐店用紅色或黃色作為品牌的主色？這都是色彩心理學(xué)的相關(guān)知識(shí)。
雖然紅、藍(lán)是受到最普遍喜愛的顏色（通過對(duì) App Store 應(yīng)用流行顏色分類統(tǒng)計(jì)得知）。但并不意味著這一準(zhǔn)則可以套用在所有產(chǎn)品上。產(chǎn)品的屬性是什么，用戶定位是什么，要傳達(dá)的產(chǎn)品氣質(zhì)是什么等等，這些都是選擇應(yīng)用圖標(biāo)的顏色時(shí)需要考慮的問題。世界上第一間 Airbnb 房間是在一條叫 Rausch street 的街上誕生的，因此 Airbnb 的主色被命名為「Rausch」的溫暖顏色。在挑選主色調(diào)的時(shí)候，4 名設(shè)計(jì)師前往世界 13 個(gè)城市，只為了更好地理解 Airbnb 的理念：熱情、能量和自信，這正是 Rausch 要傳遞的信息。除了 Rausch 以外，Airbnb 還有其它九種顏色，包括 Kazan、Beach、Tirol、Foggy 等等，它們也都是以 Airbnb 的社區(qū)街道命名的。
下面來講解每一種顏色都各自帶有什么樣的性格，只有理解了顏色的性格才能正確的使用它們。
黑色
黑色代表著品質(zhì)、高端、時(shí)尚、低調(diào)、權(quán)威、嚴(yán)肅、穩(wěn)重，是一種充滿質(zhì)感的顏色。它是所有色彩中最有力量的，能很快吸引用戶的注意力。作為一種無彩色，能讓它和其他色彩百搭，黑色+金黃色，給人一種奢華精致的感覺；黑色+銀灰色，則給人一種成熟穩(wěn)重的感覺；黑色+紅色，給人一種時(shí)尚潮流的感覺。因此黑色是一種永遠(yuǎn)流行的主要色彩。
白色
白色代表著純潔、簡(jiǎn)單、純真、樸素、信任、開放、雅致，白色常常被認(rèn)為是“無色”，即不是色彩。單一使用白色通常不會(huì)引起任何情感，但是當(dāng)白色與其他顏色配合使用時(shí)，白色能很好的襯托，大量的留白讓其他元素脫穎而出。在界面設(shè)計(jì)中，作為無彩色的白色，常用于背景色，緩和各種顏色的沖突，以襯托其他色彩，提高畫面明度，提高文字可讀性。
灰色
灰色是代表著睿智、老實(shí)、執(zhí)著、嚴(yán)肅、壓抑、沉穩(wěn)。介于黑色和白色之間，也屬于無彩色，沒有色相也沒有純度，只有明度的變化。它和任何顏色都能很好的搭配，也常常用于背景色或用于突出其他彩色?；疑幌窈谏敲磮?jiān)硬刺眼，他更有彈性，它比黑色更有深層次的力量。因此在畫面中，很少出現(xiàn)純黑，基本都是用深灰色來代替黑色，也可以用淺灰色來代替白色。
紅色
紅色代表著喜慶、熱情、歡樂、斗志、奔放、自信，是一種充滿能量的顏色。這是最醒目和強(qiáng)勢(shì)的顏色，一登場(chǎng)即獲得全場(chǎng)的關(guān)注，甚至能引起一些生理反應(yīng)，例如心跳呼吸加快等。紅色最能烘托氣氛，在中國(guó)傳統(tǒng)節(jié)日里都使用熱鬧的紅色來裝飾，因此也就不難理解每逢佳節(jié)各大電商應(yīng)用活動(dòng)頁(yè)一片紅，為的就是發(fā)沖動(dòng)，引人消費(fèi)。同時(shí)紅色也代表了警示、告誡。所以在界面設(shè)計(jì)中常用紅色的文字和按鈕來警示用戶慎重操作。
橙色
橙色代表著溫暖、歡樂、輝煌、健康、陽(yáng)光、年輕、華麗，是一種充滿朝氣的顏色。橙色并不像紅色那樣咄咄逼人，而且它烘托出的活躍氣氛沒有危險(xiǎn)的感覺，反而是一種友好。因此越來越多的應(yīng)用避開常見的紅色和藍(lán)色，而選擇橙色的原因。
黃色
黃色代表著信心、青春、聰明、尊貴、輝煌、時(shí)尚，是一種充滿活力的顏色。黃色是明度極高的顏色，其鮮亮的色調(diào)使它在眾多圖標(biāo)陣列中顯得尤為突出。盡管在警示效果上沒有紅色那么明顯和強(qiáng)烈，但是還是能給人很醒目和危險(xiǎn)的感覺（例如道路警示牌）。同時(shí)因?yàn)檫^于明亮，也是一種非常難以運(yùn)用的顏色，性格不穩(wěn)定常有偏差，和別的顏色配合使用易失去本來的性格。不過黃+黑的搭配很流行，例如站酷和美團(tuán)外賣。
綠色
綠色代表著健康、生命、青春、寧?kù)o、自然、和平、安全、舒適，是一種充滿希望的顏色。綠色給人無限的安全感，當(dāng)情緒低落與消極時(shí)看一些綠色，能緩解我們焦躁的情緒。綠色在生活中被廣泛運(yùn)用，如安全出口的顏色就是綠色，但綠色的飽和度要適當(dāng)控制，如高飽和度的綠色也會(huì)令人興奮，引起注意。
青色
青色代表著堅(jiān)強(qiáng)、古樸、活潑、清爽、柔和、優(yōu)雅、希望，是一種充滿靈動(dòng)的顏色。青色是一種介于綠色與藍(lán)色之間的顏色，如果無法界定一種顏色是藍(lán)色還是綠色時(shí)，這個(gè)顏色就可以被稱為青色。豆瓣的主色調(diào)是青色，很符合豆瓣小清新的氣質(zhì)，帶給用戶恬靜的感受。
藍(lán)色
藍(lán)色代表著冷靜、科技、靈性、自由、放松、未來、理智、純凈、商務(wù)，是一種充滿理性的顏色。藍(lán)色是天空的顏色，是大海的顏色。在色彩心理學(xué)的測(cè)試中發(fā)現(xiàn)，幾乎沒有人對(duì)藍(lán)色反感。純凈的藍(lán)色通常讓人聯(lián)想到海洋和天空，可以撫平內(nèi)心的傷口，讓人的內(nèi)心感到平和，有助于人的頭腦變得冷靜。例如 twitter 的主色調(diào)是藍(lán)色，在社交應(yīng)用里藍(lán)色是一種很安全的顏色，高純度的顏色傳遞了信賴、年輕和溝通的氛圍。
紫色
紫色代表著高貴、浪漫、優(yōu)雅、性感、幸運(yùn)、夢(mèng)幻、時(shí)尚、創(chuàng)造性，是一種充滿神秘的顏色。是小孩子和有創(chuàng)造力的人十分喜歡的顏色。紫色的光波最短，在自然界中較少見到，所以被引申為象征高貴的色彩。紫色的明度在所有有彩色的顏色中是的。與不同的顏色結(jié)合會(huì)展現(xiàn)出不同的風(fēng)格特色。紫+粉常用于女性化的產(chǎn)品調(diào)性，黃色是紫色的對(duì)比色。
當(dāng)我們討論色彩的時(shí)候，聊的更多的是色彩的搭配。雖然有些設(shè)計(jì)師認(rèn)為有些色彩是一些純粹的美學(xué)上的選擇，但是實(shí)際上，色彩對(duì)于用戶的心理和行為的影響相對(duì)更深，最終會(huì)反映在用戶體驗(yàn)和行為反饋上。
當(dāng)然，色彩理論是一個(gè)相對(duì)復(fù)雜的主題。從用戶體驗(yàn)的角度上來說，色彩所涉及到的遠(yuǎn)不是配色方案這一個(gè)維度。通常，我們聊得最多的是不同色彩所產(chǎn)生的心理效應(yīng)，以及多色彩搭配時(shí)，相互之間的影響和可訪問性上的問題。設(shè)計(jì)師可以將色彩更好地運(yùn)用到設(shè)計(jì)中，而無需重新考慮整個(gè)過程。一旦設(shè)計(jì)師掌握了基礎(chǔ)知識(shí)，色彩理論中最有意義的部分之一就是學(xué)習(xí)將更多意想不到的色彩融入他們的設(shè)計(jì)中。
界面顏色的情感影響不容忽視。盡管有些顏色在 Ui 設(shè)計(jì)中是“通用的”（例如，黑色，白色和灰色，實(shí)際上幾乎所有好的設(shè)計(jì)中都使用了其中的至少一種），但它們結(jié)合使用的顏色可能會(huì)對(duì)體驗(yàn)設(shè)計(jì)產(chǎn)生巨大影響。當(dāng)然，顏色的使用方式也會(huì)對(duì)顏色的感知產(chǎn)生巨大影響。以藍(lán)色為例，在簡(jiǎn)約的布局當(dāng)中，大面積使用藍(lán)色作為主色調(diào)，和在大面積白底上使用很小的一抹藍(lán)色用來強(qiáng)調(diào) CTA 按鈕，所帶來體驗(yàn)是截然不同的。
尊重文化差異
人類對(duì)于色彩都有著共通的認(rèn)知，但不同國(guó)家對(duì)于色彩賦予了不同的含義。紅色在中國(guó)象征著喜慶、財(cái)富和愛情，而在西方國(guó)家被賦予了流血、犧牲、暴力和激進(jìn)的文化意義，貶義的味道更重一些。而白色與紅色相反，白色在中國(guó)代表了死亡、反動(dòng)和投降，以白色為主的設(shè)計(jì)常常會(huì)被視之為過于「素」，認(rèn)為不夠吉利。而西方國(guó)家卻認(rèn)為白色高雅、純潔和幸運(yùn)，因此要根據(jù)不同的文化背景，使用不同的色彩，才能更好地降低被誤解的風(fēng)險(xiǎn)。
另外一方面，隨著現(xiàn)代主義運(yùn)動(dòng)的普及，白色也擁有了更加現(xiàn)代的特征。在日本，白色甚至和當(dāng)?shù)匚幕Y(jié)合，延伸出更加細(xì)膩獨(dú)特的精神特質(zhì)，隨著日本戰(zhàn)后設(shè)計(jì)領(lǐng)域的發(fā)展和崛起，白色在這一地區(qū)的含義則更加豐厚。原研哉在《白》一書當(dāng)中，針對(duì)白色的含義和特征進(jìn)行了非常深入的探討，之后的《Subtle》一書當(dāng)中，雖是圍繞紙來探討微妙的體驗(yàn)，但是也沒少提及白色本身的特征。
例如股票交易市場(chǎng)，在國(guó)際股票市場(chǎng)通常是綠漲紅跌，這是因?yàn)榧t色在西方國(guó)家代表著財(cái)政赤字，綠色代表著財(cái)富；而在中國(guó)正好相反是紅漲綠跌，這是因?yàn)樵谥袊?guó)紅色象征著財(cái)富。
設(shè)計(jì)師必須根據(jù)產(chǎn)品的目標(biāo)受眾來審視其調(diào)色板的文化含義，這一點(diǎn)很重要。如果產(chǎn)品要面向全球受眾，請(qǐng)確保在使用的顏色和圖像之間取得平衡，以防止負(fù)面的文化內(nèi)涵。如果產(chǎn)品主要只針對(duì)特定文化，則設(shè)計(jì)師可以不用太關(guān)心所選調(diào)色板在其他文化中可能產(chǎn)生的影響。
歷史對(duì)配色的影響
時(shí)間變化對(duì)于配色所帶來的影響不僅僅如此。比如中日兩國(guó)在色彩使用上，還存在一個(gè)非常典型的差異，歷史上日本在一個(gè)很長(zhǎng)的周期內(nèi)是作為中國(guó)的屬國(guó)所存在的，這也使得中國(guó)自古以來崇尚飽和度較高的正色，而日本則大多使用飽和度偏低的間色，這一特征可以從兩國(guó)的傳統(tǒng)色上體現(xiàn)出來：
△ 中國(guó)傳統(tǒng)色：https://color.uisdc.com/
△ 日本傳統(tǒng)色：https://color.uisdc.com/jp.html
性別誤區(qū)
或許天生如此，女性不喜歡灰色、棕色和橙色。她們鐘愛藍(lán)色、紫色和綠色。而男性不喜歡紫色、棕色和橙色。男性喜歡藍(lán)色、綠色和黑色。只要記住，當(dāng)你的產(chǎn)品目標(biāo)用戶群是男性時(shí)，選擇能傳達(dá)男性氣概的色彩，想象下你把運(yùn)動(dòng)類應(yīng)用的界面使用女性色彩，結(jié)果可想而知。
△ 男女最喜歡的顏色
△ 男女最不喜歡的顏色
你有沒有想過你的 APP 使用人群中會(huì)有視力障礙者？
當(dāng)人們談?wù)撋r(shí)，他們通常指的是不能感知某些色彩。 大約 8％的男性和 0.5％的女性患有不同程度的色盲——他們?cè)谧R(shí)別部分或者全部顏色時(shí)有困難。面對(duì)如此龐大的特殊受眾，設(shè)計(jì)師理應(yīng)關(guān)注他們的需求。
△ 正常人和紅綠色盲看到的相同色彩
因?yàn)樯び卸嘀乇憩F(xiàn)形式，例如紅綠色盲，藍(lán)黃色盲和單色色盲。所以運(yùn)用多樣的視覺線索來連接你 APP 的重要狀態(tài)是很重要的。絕不要僅僅依靠色彩來表示系統(tǒng)狀態(tài)。 相反，應(yīng)使用元素（如筆畫，指示符，圖案，紋理或文本）來描述操作和內(nèi)容。需要注意的就是不要簡(jiǎn)單認(rèn)為色盲就是簡(jiǎn)單的分不清紅綠，色盲用戶對(duì)色彩的感受差異不僅僅是單獨(dú)某種的問題，是某些范圍色光的敏感程度問題。
有趣的事實(shí)：Facebook 的標(biāo)志和不怎么討喜的藍(lán)色配色是特意挑選的。因?yàn)?FB 創(chuàng)始人馬克·扎克伯格是紅綠色盲，他對(duì)藍(lán)色的識(shí)別是最好的。他曾說過，“藍(lán)色是我生命中最豐富的顏色，我?guī)缀蹩梢钥匆娺@世上所有的藍(lán)色?！?
△ facebook
Photoshop 有非常實(shí)用的工具來幫助模擬色盲，在「視圖」的「校樣設(shè)置」菜單內(nèi)選中就可以使用了。這個(gè)功能讓設(shè)計(jì)師可以看到在色盲用戶的眼中你的界面是什么樣子的。
△ pinterest登陸頁(yè)紅綠色盲視圖
下面以點(diǎn)狀圖信息圖形為例，來說明如何為色盲用戶優(yōu)化信息圖：
優(yōu)化采用了這樣一些手段：1.調(diào)整配色，將色盲人士容易混淆的紅、綠、橙色換為紅、藍(lán)、黃色。2.調(diào)整明度，使圖中幾個(gè)顏色在明度上差異更明顯。3.為不同元素賦予不同形狀。所有使用點(diǎn)元素的信息圖，都可以參考這種解決方式。
在實(shí)際設(shè)計(jì)過程中，我們需要在美觀和友好之間進(jìn)行權(quán)衡。我們也可以采用一些交互手段，避免同一界面中元素太多太過雜亂的問題。
這是更長(zhǎng)維度上的變化，在短時(shí)間以內(nèi)，流行色的趨勢(shì)變化，對(duì)于用色也同樣存在影響。這種影響在時(shí)尚行業(yè)有著非常直接的體現(xiàn)，而在網(wǎng)頁(yè)和 UI 設(shè)計(jì)行業(yè)，同樣存在。比如 2020 年的潘通年度流行色是「經(jīng)典藍(lán)」（Classic Blue），也就明白了為什么 iphone12 今年的主打色是藍(lán)色了。
所以，當(dāng)你在設(shè)計(jì)的時(shí)候，如果你的目標(biāo)用戶群體有著清晰的地域或者性別偏向，你可以有目的地利用這些知識(shí)來規(guī)避設(shè)計(jì)陷阱，更好地發(fā)揮色彩本身的功能和優(yōu)勢(shì)。如果受眾廣泛，則可以盡量使用通用性更強(qiáng)的色彩來進(jìn)行設(shè)計(jì)。
你知道世界上的顏色是什么嗎？
是否存在一種色彩，是不分性別文化，大家都會(huì)喜歡的呢？確實(shí)有人通過大規(guī)模的調(diào)研和探索找到了一種世界上的色彩：馬爾斯綠（Marrs Green）。來自全世界 100 多個(gè)國(guó)家 3 萬(wàn)多人響應(yīng)號(hào)召完成了這項(xiàng)投票，并且最終選取出來的一款綠色。
人腦對(duì)于色彩的記憶度要高于形態(tài)，即一個(gè) App 給用戶留下深刻印象的往往是界面的色彩。例如說到支付寶，我們可能想不起它的首頁(yè)長(zhǎng)什么樣子，標(biāo)簽欄圖標(biāo)是那些，但能馬上記起它的界面主色是藍(lán)色。因此運(yùn)用好色彩對(duì) UI 設(shè)計(jì)十分重要，它能直觀的呈現(xiàn)產(chǎn)品的氣質(zhì)和性格，能有效的幫助用戶組織和閱讀信息，與界面設(shè)計(jì)產(chǎn)生聯(lián)系和記憶。好的配色往往依靠設(shè)計(jì)師審美、感覺搭配出來，但合理的顏色搭配必定存在合理的配色規(guī)律和配色方法論的支撐，下面結(jié)合相關(guān)案例為大家講解色彩運(yùn)用的幾個(gè)技巧。
不得觸碰的禁區(qū)
分析研究了很多優(yōu)秀設(shè)計(jì)作品，發(fā)現(xiàn)他們?cè)谟蒙臅r(shí)候有一部分區(qū)域是不會(huì)使用的，也就是我們常說的“配色禁區(qū)”。當(dāng)然，這里的“禁區(qū)”是帶雙引號(hào)帶的，并沒有什么絕對(duì)的禁區(qū)，只是說這些顏色不易控制，在連基礎(chǔ)色都沒有駕馭好之前，盡量少碰。
配色禁區(qū)大概分為這三種：三角形禁區(qū)、矩形禁區(qū)、扇形禁區(qū)（紅色為禁區(qū)），如下圖：
綜合看來，不管是那種禁區(qū)，右下角區(qū)域的顏色是很少用的。畢竟他們又臟又深，當(dāng)然什么顏色都能駕馭的大師請(qǐng)略過。
在界面設(shè)計(jì)中，一般主色和輔助色都集中在右上角，次要的和不可點(diǎn)的顏色都集中在中上方，而文字信息和背景色則集中在左側(cè)，右下角禁區(qū)是我們要重點(diǎn)避開的對(duì)象。
色調(diào)一致
在 App 設(shè)計(jì)之前應(yīng)先確定界面的主色調(diào)，主色將占據(jù)界面中很大的比例，通常是品牌色，而輔助色、點(diǎn)綴色、背景色等都應(yīng)以主色調(diào)為基準(zhǔn)來搭配，這樣才能保證 App 整體色調(diào)的一致。色調(diào)一致的界面，能帶給用戶始終如一的視覺體驗(yàn)。例如馬蜂窩將黃色（品牌色）作為主色，以及從主色搭配出的藍(lán)色（對(duì)比色）貫穿 App 始終。
60-30-10 原則
60% 30% 10%的原則，是達(dá)到色彩平衡的最佳比例。在 60%的空間使用主色，可以運(yùn)用到導(dǎo)航欄、按鈕、圖標(biāo)等關(guān)鍵的元素中，使之成為整個(gè) App 的視覺焦點(diǎn)和色彩關(guān)系；30%的空間使用輔助色，可以平衡過多的主色而造成的視覺疲勞；最后剩下 10%的空間為點(diǎn)綴色，可以用在一些不太重要的元素又需要區(qū)分的時(shí)候。6:3:1 原則構(gòu)建了一種豐富的色彩層次，讓界面看上去和諧、平衡和不雜亂。
嗶哩嗶哩將粉色運(yùn)用到頁(yè)簽、標(biāo)簽欄、按鈕、入口圖標(biāo)等上，藍(lán)色的輔助色用在角標(biāo)、圖標(biāo)上，還有黃色、紅色用在一些小圖標(biāo)、小標(biāo)簽上，主次非常清晰明了。
色不過三
經(jīng)常很多大神在網(wǎng)上說配色不要超過三種色，其實(shí)就是「色不過三」原則，即在一個(gè)頁(yè)面中不要使用超過 3 種顏色搭配，這也和上面說的“60-30-10 原則”類似，即一個(gè)主色、一個(gè)輔助色和一個(gè)點(diǎn)綴色。但在實(shí)際 UI 設(shè)計(jì)中，迫于產(chǎn)品的需要可能會(huì)使用更多數(shù)量的色彩，但切記不可超過 7 種色相（注意不是 7 種色值），每個(gè)色相還可以運(yùn)用其飽和度、明度的變化分解出豐富的色彩搭配。
美團(tuán)外賣的首頁(yè) 20 個(gè)功能入口大圖標(biāo)的背景用了 9 種不同的色彩，每種色彩又包含一種低飽和度色彩進(jìn)行彩色漸變，但并沒有顯得雜亂，而是呈現(xiàn)一種年輕時(shí)尚的律動(dòng)感。這是因?yàn)檫@里雖然使用了 9 種不同的色彩，但仔細(xì)觀察發(fā)現(xiàn)只使用了 3 種色彩，其他 6 種則是從前者鄰近色中提取出來的搭配，再將它們錯(cuò)落放置，呈現(xiàn)出豐富多彩的色彩搭配，整體和諧統(tǒng)一。
遠(yuǎn)離純黑色和純灰色
黑色就像沒有生命力的深淵，使用戶陷入冷冷的負(fù)面情緒中。遠(yuǎn)離純黑色和純灰色，是因?yàn)樗鼈儾淮嬖谟诂F(xiàn)實(shí)世界里。嘗試在純黑和純灰中加入一些色調(diào)，會(huì)讓界面看上去更柔和自然。另外，純黑色還會(huì)與白色產(chǎn)生強(qiáng)烈的對(duì)比度，看久了會(huì)使人疲勞，讓用戶產(chǎn)生焦慮的情緒。MONO 的導(dǎo)航欄并不是深黑色，而是加入了藍(lán)色的低飽和度藍(lán)黑色，它的界面背景也是加入了藍(lán)色的的淺色，這樣就不會(huì)讓界面看上去死氣沉沉的。
遵循色彩心理學(xué)
前文我們已經(jīng)了解過各種色彩的心理學(xué)知識(shí)，就是為了我們?cè)谶M(jìn)行 App 設(shè)計(jì)時(shí)提供依據(jù)。這些色彩都是源于人類對(duì)大自然最原始的感受，藍(lán)色的天空、綠色的草地、黃色的沙漠等等，自然的色彩，對(duì)于我們來說是司空見慣的，但其中卻蘊(yùn)含著豐富的美感，并達(dá)到了和諧統(tǒng)一。網(wǎng)易云音樂使用紅色作為主色，這種熱情奔放的顏色傳遞出一種充滿能量、自信的氣質(zhì)。
良好的可讀性
良好的可讀性在界面設(shè)計(jì)中能為用戶提供主次分明、層次清晰的閱讀體驗(yàn)，而一個(gè)可讀性差的界面則會(huì)成為用戶瀏覽的障礙。那如何確保界面具有良好的可讀性呢？這就需要在界面設(shè)計(jì)中注意色彩搭配的對(duì)比，如在淺色背景上使用深色文字，在深色背景上使用淺色文字，使用高對(duì)比的度的亮色展示重要的元素，用低對(duì)比度的淺色來體現(xiàn)需要弱化和次要的內(nèi)容。例如蘋果 Music 的主要功能入口，標(biāo)簽欄圖標(biāo)、按鈕等都是用了高純度的紅色，與其他元素形成鮮明對(duì)比，就連深灰色的輔助文字都有著清晰的可讀性。
從大自然中獲得靈感
配色中盡量使用大眾熟悉的色彩，如自然界中人們常見的色彩等。從大自然中獲取的配色靈感可以使你的設(shè)計(jì)更加切合用戶的審美，非常自然。而藝術(shù)是對(duì)自然的直接反映，是非常寶貴的資源，值得好好利用。我們可以搜集各種與自然風(fēng)光相關(guān)的圖片，從中提取色彩運(yùn)用到設(shè)計(jì)中，這些幾近完美的搭配呈現(xiàn)出來的和諧美感能瞬間打動(dòng)人心。天氣應(yīng)用 Marline 就是一個(gè)很好的例子，它的界面背景漸變就參考大自然的變化，隨著不同時(shí)間段呈現(xiàn)出清晨、日出、正午、日落、深夜、雨天等漸變色，打開應(yīng)用即喚起了用戶的快樂情緒。
將 UX 顏色與品牌相匹配
品牌價(jià)值在創(chuàng)建調(diào)色板中發(fā)揮關(guān)鍵作用，但是它們不是唯一重要的因素，行業(yè)規(guī)范也是關(guān)鍵。使用與品牌主要競(jìng)爭(zhēng)產(chǎn)品幾乎相同的配色方案不失一種好方法。配色在品牌視覺中所發(fā)揮的作用是不言而喻的，但是，色彩本身的內(nèi)涵和情緒特質(zhì)并不是全部。比如一個(gè)行業(yè)當(dāng)中，很多產(chǎn)品都使用了藍(lán)色，那么你的產(chǎn)品繼續(xù)使用藍(lán)色，可以讓用戶更快「識(shí)別出」你所屬的領(lǐng)域，但是本身也存在讓人混淆的風(fēng)險(xiǎn)。如果你想要在視覺上脫穎而出，可以試著使用不同的色彩。
△中國(guó)區(qū)或美國(guó)區(qū)，紅色和藍(lán)色都是最流行的顏色。
在進(jìn)行品牌設(shè)計(jì)的時(shí)候，選擇配色的第一步，始終是了解各種顏色或者色相的氣質(zhì)和情感屬性。然后，在具體設(shè)計(jì)的時(shí)候，再進(jìn)一步根據(jù)品牌的氣質(zhì)和需求，再在色相的基礎(chǔ)上調(diào)整明暗和飽和度。也可以打破常規(guī)創(chuàng)造出與眾不同的配色方案。
從強(qiáng)調(diào)色入手
想要讓配色方案更加突出，在設(shè)計(jì)中添加強(qiáng)調(diào)色可能是最容易入手的地方。舉個(gè)例子，一個(gè)律師咨詢的 App 可能會(huì)使用傳統(tǒng)的藍(lán)色作為基礎(chǔ)配色，但是，如果能夠加入檸檬綠作為強(qiáng)調(diào)色，會(huì)顯得獨(dú)特很多。
冷暖色對(duì)比搭配
冷暖對(duì)比色是自然平衡的規(guī)律，可以在設(shè)計(jì)中大量使用，這樣的配色會(huì)使作品非常的出彩，同時(shí)不顯單調(diào)，讓用戶感覺舒服平和。而且這種搭配方法基本沒有啥缺點(diǎn)，使用在設(shè)計(jì)中，技巧性比較多，對(duì)設(shè)計(jì)的細(xì)膩感受要求比較高，需要多練習(xí)。
黑白色搭配不過時(shí)
黑色是所有中性色中最強(qiáng)的，而白色是最常用的背景顏色。黑色是一個(gè)很好的選擇，有種高端和永恒的感覺，而白色可以帶給用戶自由，寬敞和透氣的感覺。如上所述，黑色和白色也是最大的對(duì)比色，如果合理的使用黑色配合白色，會(huì)營(yíng)造出一種優(yōu)雅的氛圍。
強(qiáng)交互色彩
交互色彩在執(zhí)行過程中必須清晰且在界面中保持一致。號(hào)召性用語(yǔ)必須相對(duì)于背景具有足夠的對(duì)比度，并且相對(duì)于其他組件必須具有足夠的視覺權(quán)重，以便用戶可以輕松識(shí)別它們。Nike 健身應(yīng)用中，「開始」按鈕以高飽和度的檸檬綠作為主色，從背景中脫引而出。
但是，交互色彩并不總是以最具飽和度或最亮為特征，而是通過色調(diào)、形狀、大小或?qū)Ρ榷?，從屏幕上脫穎而出。因此，交互色彩的有效性將基于用戶識(shí)別交互區(qū)域和執(zhí)行任務(wù)的速度來衡量。同時(shí)，次要功能權(quán)重要更輕，并在視覺上更接近信息元素。如上圖 Nike Training 界面中，“設(shè)置”和“聲音”按鈕只用簡(jiǎn)單的白色，減輕對(duì)主按鈕的干擾，也避免了頁(yè)面中出現(xiàn)多個(gè)強(qiáng)交互按鈕。
保證良好的可讀性
可讀性是任何設(shè)計(jì)中的重要因素。你的顏色應(yīng)該清晰易讀，尤其是在處理文字時(shí)。因此對(duì)比度對(duì)視覺效果的影響就非常關(guān)鍵，對(duì)比度過小，就會(huì)使得界面出現(xiàn)灰蒙蒙的效果。清晰的對(duì)比度，一般會(huì)采用色彩的兩極，黑紙白字或白紙黑字。而在彩色背景上要讓內(nèi)容清晰可見，就需要搭配純白或高明度的文字，避免灰色文字。也要注意避免彩色背景上搭配互補(bǔ)色和明度接近的文字，因?yàn)檫@兩種搭配會(huì)產(chǎn)生一種“震顫效應(yīng)”，發(fā)出光暈的視覺效果。
UI 中的陰影
沒有完全純黑的陰影，陰影的顏色是會(huì)受到物體本身固有色的影響，一定要避免使用純黑色（#000000），使用不太深的灰色，效果會(huì)更好。對(duì)于有顏色的元素，好的做法是為陰影設(shè)定與元素相同的顏色，并使其更暗一些。
如果是有顏色的元素，并且它處在黑暗的背景下，一般情況下，是不建議使用陰影的。但是如果你一定要用，把陰影透明度調(diào)到小于 10%及以下，并且顏色跟隨主色調(diào)來。比如按鈕為綠色，則可以為按鈕設(shè)定一個(gè)更深的綠色陰影，并加上小于 10%的透明度數(shù)值。如下圖，左側(cè)的按鈕陰影很自然，右側(cè)的則有一層模糊發(fā)光的效果，顯得不夠漂亮。
為什么「超鏈接文字」要用藍(lán)色？
簡(jiǎn)單說，因?yàn)樵谧钤缙诘木W(wǎng)站頁(yè)面中，藍(lán)色能呈現(xiàn)最高的對(duì)比度。
Tim Berners-Lee——web 的主要開創(chuàng)者，被認(rèn)為是最早用藍(lán)色鏈接的人。
一個(gè)很早期的 web 瀏覽器 Mosaic，用的是深灰色背景和黑色文字。那時(shí)候，能用的非黑色、最深的文字顏色，就是藍(lán)色。所以，讓超鏈接文字突出顯示，同時(shí)保證可讀性，就選定了藍(lán)色。此后超鏈接文字都用藍(lán)色的傳統(tǒng)沿用至今。
App 的色彩搭配能直觀、快速的反饋到用戶的大腦中形成記憶思維。好的色彩搭配可以加深用戶對(duì)產(chǎn)品的印象；明確界面的視覺層次，讓用戶分清主次信息；同時(shí)還能給用戶賞心悅目的視覺享受。那么，在 UI 設(shè)計(jì)時(shí)該如何進(jìn)行色彩搭配呢？我們可以從 App 中都包含了那些色彩開始，通常一個(gè) App 中包含了主色、輔助色、點(diǎn)綴色、背景色這 4 類，下面就以微信讀書為例進(jìn)行詳細(xì)的講解（個(gè)人角度）。
主色
主色是指在配色中處于主導(dǎo)地位的色彩，給用戶的第一眼印象，通常是產(chǎn)品的品牌色。在 App 設(shè)計(jì)中，主色一般占有色相色彩的 60%的比例。這里指的是 60%的界面都使用到的主色比例，而不是使用面積（因?yàn)橥ǔＲ粋€(gè)界面中使用面積最大的是背景色）。還有就是背景色多為淺灰色或白色，它們都屬于無色相色彩，因此不涉及到配色過程中。我們看到微信讀書的第一印象，就可以判斷它的主色為藍(lán)色，這也是它的品牌色。在標(biāo)簽欄、按鈕、圖標(biāo)、注冊(cè)登陸全都使用了這種純凈的主色，使界面看上去非常和諧一致。
輔助色
輔助色與主色相輔相成，輔助色的功能是幫助主色建立更完整的形象，使界面豐富精彩起來，避免畫面過于單一。通常，主色的鄰近色、互補(bǔ)色、分散互補(bǔ)色和三角對(duì)立色都可以成為優(yōu)秀的輔助色，但注意輔助色不宜過多，否則就會(huì)使界面看上去花哨分散了主題。根據(jù) 6:3:1 原則，輔助色可以占有色相色彩的 30%或更少為宜。
在微信讀書中，綠色、橙色、梅紅、藍(lán)紫色是除了主色以外使用最多的顏色，它們都是輔助色，主要用于功能圖標(biāo)和欄目分類上。雖然輔助色看起來有點(diǎn)多，但其實(shí)都是從主色的鄰近色和對(duì)比色（及其鄰近色）中提取出來的搭配，而且只用在頁(yè)面中很少的地方，這種搭配技巧既可以豐富色彩的搭配，傳遞出年輕活躍的產(chǎn)品氣質(zhì)，又保證了整體搭配的和諧統(tǒng)一。
點(diǎn)綴色
點(diǎn)綴色是除了主色和輔助色以外的另一種色彩，通常體現(xiàn)在細(xì)節(jié)上。其作用是，當(dāng)頁(yè)面中主色和輔助色不能滿足關(guān)鍵信息的提示時(shí)，就需要點(diǎn)綴色來吸引用戶眼球，還有就是利用點(diǎn)綴色來平衡畫面的冷暖色調(diào)。點(diǎn)綴色通常都是分散的，使用面積小，顏色非常顯眼，能與主色形成強(qiáng)烈的對(duì)比。一般點(diǎn)綴色是主色的互補(bǔ)色。在微信讀書中，使用了香檳金、梅紅和紅色作為點(diǎn)綴色。香檳金用在文章分享按鈕上，梅紅色用在點(diǎn)贊圖標(biāo)上，強(qiáng)調(diào)其特殊性，紅色用在通知及退出登錄提醒上，用于警示。
來康康這三種點(diǎn)綴色與主色之間存在什么樣的關(guān)系，在色相（H）上，3 種點(diǎn)綴色為鄰近色，與主色為互補(bǔ)色；在明度（B）上，3 種點(diǎn)綴色均為高明度色彩，起到強(qiáng)提醒的作用。這種強(qiáng)對(duì)比的互補(bǔ)色的點(diǎn)綴色可以快速引起用戶注意力。
背景色
背景色就比較好理解了，通常為了襯托內(nèi)容，大多數(shù) App 都是用淺灰色作為背景色，以白色作為背景色的對(duì)比色，來區(qū)分視覺層次。建議是可以根據(jù)前景色來提取背景色，將其調(diào)亮或變暗，這樣可以讓界面色調(diào)更加統(tǒng)一。在微信讀書中背景色是偏藍(lán)色調(diào)的淺灰色，而不是純灰色，背景對(duì)比色是在白色里加入了藍(lán)色色相，而不是純白色，整體對(duì)比較柔和，給人清爽通透的感覺。
支付寶 Alipay Design 團(tuán)隊(duì)提出過一個(gè)配色原則：
以同色系配色為主導(dǎo)，多色搭配為輔。
同色系為統(tǒng)一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時(shí)可以讓界面保持色彩上的一致性；由于業(yè)務(wù)的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設(shè)定不同的任務(wù)屬性和情感表達(dá)；再搭配中性色黑白灰，賦予更多的變化和層次。兩種配色通過主次、使用比例，可靈活運(yùn)用在業(yè)務(wù)的各個(gè)場(chǎng)景中，具有非常好的延展性。
不同于單一色彩，漸變色不屬于任何色彩，它營(yíng)造出千變?nèi)f化的視覺效果，卻又不會(huì)增加視覺負(fù)擔(dān)。相較于單一的色彩，漸變色的復(fù)合性質(zhì)讓它在界面設(shè)計(jì)中具有更強(qiáng)的視覺沖擊力，有助于快速搶占視線。如今，這種的色彩正逐漸成為一種潮流，究其原因是目前大量的扁平風(fēng)格造成 UI 設(shè)計(jì)的嚴(yán)重同質(zhì)化，人們需要追求更加個(gè)性的視覺語(yǔ)言來滿足日益增長(zhǎng)的設(shè)計(jì)需求。下面我們來了解幾種常見的漸變的使用技巧。
色相、飽和度、明度的漸變
色相（H）漸變是指由一種色彩向另一種色彩的過渡，這種漸變因跨度大產(chǎn)生的視覺效果非常明顯；飽和度（S）漸變是指同一種色彩不同純度的過度，其產(chǎn)生的視覺效果比較和諧單調(diào)；明度（B）漸變是同一種色彩不同明暗的過度，這種漸變的視覺效果給人一種沉靜的氛圍。
漸變的表現(xiàn)形式
在界面設(shè)計(jì)中經(jīng)?？炊喔鞣N各樣的漸變表現(xiàn)方式，使用最多的有以下幾種：
這個(gè)很好理解，是指角度為 0 的線性漸變，是最流行的漸變形式。界面設(shè)計(jì)中多用在導(dǎo)航欄、進(jìn)度條、按鈕等元素上，能讓畫面變得精致而通透。例如京東使用橙紅漸變的設(shè)計(jì)語(yǔ)言貫穿整個(gè) App，從應(yīng)用圖標(biāo)到導(dǎo)航欄、按鈕、標(biāo)簽，全部都運(yùn)用了這種由紅色到橙色的過渡。仔細(xì)觀察發(fā)現(xiàn)在很多小標(biāo)簽上都使用了水平漸變?cè)O(shè)計(jì)手法，使產(chǎn)品看起來更年輕化。
在水平漸變中，通常把輕（亮）的色彩放在左邊，重（暗）的色彩放在右邊，這樣由左向右的方向感剛好與人的瀏覽習(xí)慣保持一致。而反過來就會(huì)與人的瀏覽視線相悖，應(yīng)避免。
垂直漸變
即角度為 90°的線性漸變，它通常被用在正方形或豎條形的元素上，如注冊(cè)登陸頁(yè)，個(gè)人中心頭部等。垂直漸變中上下兩種色彩的深淺變化會(huì)產(chǎn)生截然不同的視覺效果，上淺下深會(huì)讓給人一種凸起的立體感，而上深下淺會(huì)給人一種凹陷下去的空間感。例如「紀(jì)念碑谷」的背景是采用了單色相和多色相的垂直漸變作為游戲背景，在讓整個(gè)畫面豐富的同時(shí)又不會(huì)太搶奪主體的色彩，使畫面顯得清新透氣而不沉悶。
角度漸變
角度漸變通常有對(duì)角漸變和多角度漸變。有角度的漸變相比水平和垂直漸變，它的使用場(chǎng)景更廣，如圖標(biāo)背板、啟動(dòng)頁(yè)、注冊(cè)登錄頁(yè)、標(biāo)簽等。想讓界面更加絢麗、動(dòng)感和迷人，這時(shí)候我們可以考慮多組漸變搭配使用。
色塊漸變
漸變的顏色不只可以運(yùn)用在一個(gè)色塊上，還可以運(yùn)用在一組色塊上。設(shè)計(jì)師運(yùn)用一組近似性色彩，將每個(gè)菜單項(xiàng)清晰區(qū)分開，讓界面平衡在一個(gè)頻率上，這樣的畫面更有節(jié)奏感和舒適性。不同于平滑的漸變，色塊漸變不再是單純的背景裝飾，在某些地方還具有一定的功能性，比如使用不同的色塊來分割的列表樣式。Clear Todos 是一款日常任務(wù)清單的 APP，它拋棄了傳統(tǒng)的列表樣式，使用了一系列色塊來作為列表的分割，非常漂亮和精致。
徑向漸變
是指色彩以圓心向四周擴(kuò)散的漸變，是一種模擬光源照射的視覺效果，因此光源是整個(gè)畫面的視覺焦點(diǎn)，將關(guān)鍵元素放在光源中心就會(huì)成為主角。通常被運(yùn)用到大背景上，如啟動(dòng)頁(yè)、引導(dǎo)頁(yè)等。Solar 天氣應(yīng)用的背景就是徑向漸變，光源擴(kuò)散的效果營(yíng)造出一種夢(mèng)幻般的美感。
和諧的漸變色
漸變色是由一個(gè)色彩走向另一個(gè)色彩的過程，有著迷人的視覺效果。如果你仔細(xì)觀察兩種色彩的過渡關(guān)系，就會(huì)發(fā)現(xiàn)不是每次都會(huì)得到滿意的效果，例如紅綠漸變就很糟糕，因?yàn)樗鼈儍烧呤腔閷?duì)立的色彩，但是如果加入黃色的過渡色就會(huì)好很多。原因是當(dāng)兩種色彩之間超過 90 度就會(huì)導(dǎo)致其漸變色看上去不太和諧自然，只有控制在 90 度之內(nèi)才會(huì)產(chǎn)生美妙的變化。如何改善超過 90 度的兩種色相的漸變呢？這時(shí)候可以在兩色之間加入過渡色進(jìn)行調(diào)和。例如當(dāng)從黃色到藍(lán)色漸變時(shí)，就可以加入紫色作為過渡才能呈現(xiàn)完美的視覺效果。
在搭配漸變色時(shí)，盡量只改變其色相（H）、飽和度（S）、明度（B）中的一項(xiàng)，這樣才能創(chuàng)造出和諧的漸變色方案。
調(diào)色板幫助我們?cè)谠O(shè)計(jì)項(xiàng)目中建立色彩規(guī)范、提高工作效率。通過上文對(duì)色彩基礎(chǔ)知識(shí)的學(xué)習(xí)，接下來為大家介紹幾種簡(jiǎn)單易用的創(chuàng)建調(diào)色板的小技巧，以及 Materia design 配色方法和配色網(wǎng)站推薦。
打開 dribbble，每一幅作品預(yù)覽頁(yè)左下角都有一份自動(dòng)生成的配色板，很多同學(xué)可能不知道這個(gè)配色文件是可以下載的。將調(diào)色板保存到本地，為自己在創(chuàng)作時(shí)提供靈感。在 ps 里的操作步驟是：點(diǎn)擊“窗口—色板”，然后在色板的屬性面板右上角打開“導(dǎo)入色板”，載入剛下載的色彩文件即可。
它也有顏色搜索工具，輸入或選擇顏色值即可搜索相關(guān)配色的設(shè)計(jì)作品。
這種方法也很常用，不需要任何插件，丟一張圖片到 Ps，然后將圖片「馬賽克」處理下就可得到一組配色。例如，我們需要一組同色系的綠色，在網(wǎng)上（建議 unsplash 或 500px 等專業(yè)圖片網(wǎng)站）找一張樹葉的圖片，接著將圖片在 Ps 中打開，進(jìn)入“濾鏡—像素化—馬賽克”，在打開的窗口里調(diào)節(jié)單元格大小即可。
同時(shí)，建議平時(shí)多去收集好看的攝影圖片和優(yōu)秀的配色方案，看的多了就知道什么是好的什么是 Low 的配色，對(duì)提升審美也有很大幫助。
△ pinterest畫板
該方法稍微復(fù)雜一點(diǎn)，示例步驟如下：第一步繪制一個(gè)正方形做底板，填充一個(gè)顏色#5354F0；第二步分別在正方形的上和下 1/3 處疊加 20%的白色和黑色；第三步分別在正方形中和右 1/3 處疊加 40%、80%的紫紅色#DF56FA；最后改變紫紅色圖層的混合模式為疊加即可得到一組藍(lán)紫色色調(diào)的調(diào)色板。
Materia design 調(diào)色板
Materia design 從生活場(chǎng)景中提煉出 19 個(gè)充滿活力的色彩，旨在和諧地協(xié)同工作，可用于開發(fā)品牌調(diào)色板。Materia design 提供了一整套調(diào)色板，從原色開始，延伸出其他許多色彩，這些色彩和諧相處，可用于產(chǎn)品設(shè)計(jì)的品牌色?；A(chǔ)色的飽和度是 500，Google 建議以此作為產(chǎn)品應(yīng)用的主色調(diào)，可以再選擇一種輔助色，并在主色的基礎(chǔ)上進(jìn)行飽和度，明度變化，構(gòu)成一套配色方案。
如果上面的色板不能滿足你的需求，你可以選擇一個(gè)主色，Materia design 調(diào)色板生成工具會(huì)為你生成完整的色板。
主色和強(qiáng)調(diào)色
在色彩選取時(shí)，需要先明確品牌色在界面中的使用場(chǎng)景及范圍。在基礎(chǔ)色板中選擇主色，建議選擇飽和度為 500 的基礎(chǔ)色作為主色，根據(jù)設(shè)計(jì)需要在主色的基礎(chǔ)上增加 1～3 種不同飽和度、明度的色彩建立層次感，再選擇一種強(qiáng)調(diào)色突出重要內(nèi)容或操作，例如 FAB 的背景色。
深/淺背景上的文字
Materia design 通過文本的不透明度建立在不同背景上的深淺對(duì)比，對(duì)于淺色背景上黑色文字，主文字不透明度 87%，次要文字不透明度 60%，禁用文字不透明度 38%；而黑色背景上的白色文字正好相反；彩色背景上的白色文字不透明度 100%，分割線不透明度 12%。Ant Design 也定義了一套用于界面文字、背景、分割線的中性色，在落地的時(shí)候同樣也是按照透明度的方式實(shí)現(xiàn)的。
背景
為了提高應(yīng)用之間的一致性和閱讀的可讀性，背景色根據(jù)設(shè)計(jì)需要選擇純白色或飽和度依次為 50、100、300 的灰色。
顏色是一個(gè)很難掌握的概念-因?yàn)橛袩o限多種可能的顏色組合，對(duì)于很多設(shè)計(jì)師來說還是一件蠻困難的事，為了讓設(shè)計(jì)配色變得容易些，下面推薦幾個(gè)常用的配色網(wǎng)站，希望能幫助大家在日常工作中節(jié)省更多的時(shí)間。
Adobe Color
Adobe Color 是一個(gè)基于網(wǎng)絡(luò)的應(yīng)用程序和創(chuàng)意社區(qū)，提供免費(fèi)的色彩主題，并且在 Adobe 相應(yīng)的軟件中也提供了擴(kuò)展程序，比如我們常用的 Photoshop 和 Illustrator。
Adobe Color 通過拖拽色輪或輸入自定義色值，可以創(chuàng)造出基于相似、互補(bǔ)、三原色、正方形等不同色彩規(guī)則的配色方案。除此之外，還支持 CMYK、RGB、HSV 多種色彩模式的配色調(diào)整。用法很簡(jiǎn)單，點(diǎn)擊顏色塊上的小三角確定基礎(chǔ)色，就會(huì)自動(dòng)生成 5 個(gè)基于你所選色彩規(guī)則的配色方案，拖動(dòng)下方的顏色條時(shí)相應(yīng)的也會(huì)改變配色方案。如果沒有靈感可以通過頂部導(dǎo)航進(jìn)入“探索”頁(yè)，這里為我們提供了很多提取好的顏色和圖片，有的是攝影作品，有的是設(shè)計(jì)作品，上方的輪播圖提供的一些其他內(nèi)容，比如潘通流行色、Adobe 社區(qū)和手機(jī)端的 APP 等等，非常的實(shí)用。
Eva Design System
Eva Design System 是一個(gè)基于深度學(xué)習(xí)算法的配色網(wǎng)站。適用于給我們的產(chǎn)品或品牌生成一個(gè)系統(tǒng)的配色方案。右上角可以切換淺色模式和深色模式的對(duì)比。
Colorhunt
Color Hunt 是由設(shè)計(jì)師 Gal Shir 創(chuàng)建的開放調(diào)色板集合，每天更新豐富的配色方案。顏色卡片下方可以看到更新的時(shí)間和喜歡人數(shù)。鼠標(biāo)懸浮在任一色塊上顯示顏色值，點(diǎn)擊顏色卡進(jìn)入詳情頁(yè)可下載和分享，驚喜的是還可以添加到 chrome 瀏覽器，方便隨時(shí)隨地使用。
Grabient
Grabient 是一個(gè)非常漂亮且實(shí)用的漸變配色網(wǎng)站，支持 CSS 樣式代碼復(fù)制、360 度漸變旋轉(zhuǎn)、自由增加或刪除漸變顏色等功能。設(shè)計(jì)師可以在色塊下方自由添加和調(diào)整漸變的色系、以及線性漸變方向。
當(dāng)然，以上這些配色工具只是為我們提供方便的，而不是主導(dǎo)我們的，所以在使用配色工具的時(shí)候最好是要有一定的理論基礎(chǔ)作為支撐，讓你的配色有理有據(jù)，切忌生搬硬套。
對(duì)于新手設(shè)計(jì)師來說，顏色越少越容易把控畫面。色彩層級(jí)越精簡(jiǎn)，就越容易達(dá)到整體色彩平衡，掌握好色彩的功能劃分必然會(huì)讓你的配色過程保持思路清晰從而提率。
同時(shí)，不管是 2C 還是 2B，很多大公司都構(gòu)建了自己的設(shè)計(jì)系統(tǒng)。如果你想學(xué)習(xí)別人是如何進(jìn)行配色布局的，最快的方式就是研究他們的設(shè)計(jì)源文件。
建議設(shè)計(jì)軟件使用 sRGB 作為色彩空間的默認(rèn)配置，而不要采用未管理（ Sketch 中默認(rèn)是未管理），若團(tuán)隊(duì)協(xié)作請(qǐng)?zhí)崆氨３稚士臻g配置的統(tǒng)一性。如果有需要針對(duì)廣色域色彩空間做項(xiàng)目，可以單獨(dú)設(shè)置該項(xiàng)目文檔的色彩空間為 Display P3 或者 Adobe RGB。
Mac 系統(tǒng)色彩空間配置
建議所有 macOS 用戶都在系統(tǒng)偏好設(shè)定的顯示器顏色設(shè)定當(dāng)中換用 sRGB IEC61966-2.1 這個(gè)校色方案，可以極大改善系統(tǒng)顯示效能。如果有外接顯示器，也建議使用外接的默認(rèn)選項(xiàng)，默認(rèn)選項(xiàng)一般可以發(fā)揮出該顯示器的最大色彩性能。
Sketch 色彩空間配置
Sketch 默認(rèn)顏色配置是 Unmanaged「非托管」， 我們可以在「偏好設(shè)置」中為 Sketch 指定默認(rèn)的色彩空間配置，如此一來每次新建設(shè)計(jì)文檔將會(huì)默認(rèn)采用我們的設(shè)置作為默認(rèn)的色彩空間，不用每次新建文檔都單獨(dú)設(shè)置一次。
設(shè)置方法：Sketch → 偏好設(shè)置(Preferences) → 通用(General) → 顏色描述文件(Color Profile)，修改下拉框選擇器的內(nèi)容為 sRGB IEC61996-2.1。（其他設(shè)計(jì)軟件設(shè)置方法類似）
如果要更改已有的文檔為 sRGB 色彩配置，可以通過文件——更改顏色配置，在彈出的對(duì)話窗里對(duì)文件進(jìn)行色彩空間的更改即可。
其實(shí)無論是色彩理論還是配色方法，最本質(zhì)的東西就那些，更多的還是需要設(shè)計(jì)師在日后的工作中不斷的摸索和積累。這篇文章全部寫下來耗費(fèi)了不少時(shí)間（小聲 BB：其實(shí)每篇都是），抱歉內(nèi)容確實(shí)有點(diǎn)多，但其實(shí)已經(jīng)是收著點(diǎn)寫了。就像大樹一樣，有很多分枝不斷生長(zhǎng)，需要了解很多細(xì)分出來的深度知識(shí)。這也是寫這類文章的樂趣，通過不斷的查閱資料，把過去很多模糊的概念摸清楚了。果然學(xué)透一個(gè)知識(shí)點(diǎn)的最好方式就是把它講出來才能真正為自己所有。關(guān)于色彩的知識(shí)先分享到這里，希望對(duì)大家有所幫助，文中有不嚴(yán)謹(jǐn)或錯(cuò)誤的地方，歡迎大家指正，一起學(xué)習(xí)成長(zhǎng)。
1. 色彩常識(shí)
2. 色彩三屬性
3. 色彩的搭配
4. 色彩和光源關(guān)系
5. 色彩空間
1. 色彩心理學(xué)和用戶體驗(yàn)緊密關(guān)聯(lián)
3. 針對(duì)色盲用戶群體的設(shè)計(jì)
4. 流行趨勢(shì)對(duì)色彩的影響
1. 色彩的應(yīng)用
2. App 設(shè)計(jì)中的色彩搭配
3. 迷人的漸變色
1. 從設(shè)計(jì)作品收集色彩
2. 從圖片取色
3. 自定義色塊疊加
4. 色彩系統(tǒng)
5. 配色工具推薦
6. 關(guān)于色彩空間配置(附加內(nèi)容)
文章來源：優(yōu)設(shè)網(wǎng) 作者：印跡
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com