大家好，今天給大家帶來的是配色干貨系列之第三期??！超級干貨！！
前兩期地址傳送門：
前面兩期，主要分享審美的培養與提升、配色的技巧與習慣。本篇更為實在，主要分析有哪些經典的萬金油配色組合，滿足日常工作使用。
看完這篇文章，相信你對色彩的掌握，能更深一步~~干貨建議提前收藏！喜歡記得給咱們公眾號添加星標喔~~
1）經典搭配-黃配黑
色板 顏色組合
Yellow & Black
黃配黑的色系非常經典耐看，普適度也很廣。我在公眾號里寫的一些文章，也經常采用這套配色。
這套黃與黑的組合很適合一些生活、社區、人文、情感等場景進行使用，情緒溫和。如果你的設計，會被頻繁的在這些場景里進行使用，那么不妨使用一下這套黃黑配色試試看。
比如以下這些案例：
這里也給出我經常使用的兩組黃黑色板，一組更為活潑鮮艷，更具娛樂化。一組更為內斂，充滿文化氣息。
推薦組合色板①：
推薦組合色板②：
2）科技搭配-藍黑白
色板 顏色組合
Blue & Black
這套色彩就不多說了，藍色可以說是我非常喜歡的顏色之一了。從咱們公眾號的logo，還有日常發文的封面，相信大家就能感受到。
藍黑白搭配，可以說顏色是百看不膩，并且藍色色相偏冷，沒那么多情緒傾向，所以更能夠讓人心平氣和的閱讀信息，提升效率。因此也經常被用到科技、數據、社交、工具等應用場景。
比如以下幾組案例：
關于藍黑白，我也給大家推薦兩組我很喜歡的色號組合。一組更為明亮，顯得年輕活潑些，而另外一組則更加深沉商務，更為內斂。
推薦組合色板③：
推薦組合色板④：
3）CP組合-紅藍配
色板 顏色組合
Red & Blue
這套顏色組合，在近幾年可以說是非常流行了。顏色比較淺的，有經典的馬卡龍色組合，被廣泛運用到年輕社交等工具場景。而顏色重點的，直播娛樂等秀場平臺，也都大量可見其身影。
紅藍搭配，顏色的相撞導致色彩充滿了熱情與朝氣，社交娛樂化產品的場景，非常適合這套色彩組合。
比如下面這些案例：
這里也給大家分享兩套紅藍搭配的色板，一套略顯溫柔，另外一套則熱情如火。
推薦組合色板⑤：
推薦組合色板⑥：
4）經典國潮-赤金組合
色板 顏色組合
Yellow & Black
這幾年國潮風格也越來越受到大眾所喜愛，而在國潮色彩的搭配中，赤色與金色的搭配。一方面紅色中國味特色濃厚，而搭配上高檔的金色，瞬間濃厚的精致國民畫風，就出來了。
比如每年的集五福，就是非常經典的赤金組合，精致的同時，還非常接地氣兒。
關于赤金，我也從潘通色里挑選出了一組很經典高檔的色彩組合，色板色號也分享給大家。
推薦組合色板⑦：
推薦組合色板⑧：
5）尊顯高貴-黑金色
色板 顏色組合
Yellow & Black
黑金組合相比其它顏色更顯高貴，在很多知名的APP里面，也都是能看得到，比如淘寶的88vip，京東金融的小金庫。這套色彩組合往往代表著商務、尊貴，高級，既內斂又隱蔽，通常被用到各類會員、金融等尊貴體系中。
比如以下這些案例
關于黑金里面的金色，也分為兩種，一種顏色更為純金，還有種偏向于玫瑰金，玫瑰金的色彩相對要更溫和一些，沒那么冰冷。這兩套色板，我都分享給大家啦~~
推薦組合色板⑨：
推薦組合色板⑩：
6）其它色彩組合
色板 顏色組合資源下載
Yellow & Black
除了我上面分享的這五套經典配色，還有很多其它的色彩組合，也都非常優秀好看，比如上次分享的這些：
這段時間的積累收集，又更新了下面這些新色板。
還有很多，就不一一展示了。方便大家收藏，我把這些色彩組合的圖片+色板文件，都進行了打包，方便大家直接借鑒這些色彩。
文章來源：UI中國 作者：UX小學
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
色彩是影響用戶最簡單和最重要的一個因素。研究表明，人們只需 90 秒就能對一種產品做出下意識的判斷，而其中高達 60%以上的判斷僅基于顏色。因此，選擇合適的顏色對于改進產品的轉換率和提高產品的可用性是非常有用的。在沒有文字的場景中，顏色的搭配非常重要。如何配色可以使設計感更強，如何配色更好看，哪些配色不好看，解決這些問題就需要學習色彩理論。
我們身處在一個多彩的世界中，物體的不同顏色，會讓我們產生不同的情緒。色彩，即光從物體反射到人的眼睛所引起的一種視覺心理感受，按字面含義上理解可分為色和彩。「色」是指人對進入眼睛的光傳至大腦時所產生的感覺，「彩」則指多色的意思，是人對光變化的理解。色彩的基本理論雖然老生常談，但在 UI 設計中具體怎么運用，還有關于色彩的性格和含義，都是我們需要了解的。因此在學習 UI 配色之前我們先來了解色彩的基礎知識。
原色
所有的色彩都源自“紅黃藍”三種原色，很多人誤以為三原色是“紅綠藍”，其實不是。紅綠藍是顯示上的三原色，計算機屏幕的顯示是色光三原色（紅 red，綠 green，藍 blue）即 RGB 組成的，每一個像素的顏色都用三原色值來顯示，與美術上的三原色不一樣。原色是其他顏色調配不出來的。把原色相互混合，可以調和出其他種顏色。
雖然 RGB 在顯示設備上表現良好，但并不夠人性化。因為人們判斷顏色，往往是通過：這是什么顏色？是不是太艷了？是太亮了還是太暗了？這樣的感官維度，而很難通過紅綠藍的亮度層級去判斷。所以人們后來基于 RGB 衍生出了 HSB 模式和 HSL 模式。
印刷三原色為青（Cyan)、品紅（Magenta)、黃（Yellow)。是減色模式，混合為深灰色，并不能產生黑，所以在印刷時加上黑色油墨，才能產生純正的黑，就是 CMYK 顏色模式。
間色
又叫“二次色”。它是由三原色兩兩混合調配出來的顏色。紅與黃調配出橙色；黃與藍調配出綠色；紅與藍調配出紫色，橙、綠、紫三種顏色又叫“三間色”。在調配時，由于原色在份量多少上有所不同，所以能產生豐富的間色變化。
復色
也叫“復合色”。復色是用原色與間色相調或用間色與間色相調而成的“三次色”復色是最豐富的色彩家族，千變萬化，豐富異常，復色包括了除原色和間色以外的所有顏色。例如，黃色與橙色混合得到橙黃，紅色與紫色混合得到紫紅。
冷暖色
最后由三種原色、三種間色和六種復色組成的系統就稱為十二色環，從紫色至黃綠為冷色，黃色至紫色為暖色。冷色令人聯想到天空、海洋、冰雪等，產生寒冷、理智、寧靜等感覺；暖色則令人聯想到太陽、火焰、熱血等，產生溫暖、熱烈、危險等感覺。
雖然可以用「冷」、「暖」色系來劃分色彩，但配色的變化卻有千種萬種。借著色彩的組合方式，從「非常冷」到「涼爽」到「暖和」再到「炎熱」都可以用不同的配色組來表現色彩的印象。
不同的色輪由不同的人發明，他們對于色彩的見解不一樣，因此創建出來的色輪用途也不一樣。比如：伊頓色輪又被稱之為美術三原色，是由顏料的三原色混合疊加而成；RGB 色輪主要運用于電腦、手機、平板等一系列科技產品，RGB 的三原色是光的三原色；CMYK 色輪主要用于印刷領域。
豐富多樣的顏色可以分成兩大類，即有彩色系和無彩色系。彩色系的顏色具有三個基本特征：色相、明度和飽和度，在色彩學上被稱為色彩三大要素或色彩三屬性。
色相（Hue）
色相是自然狀態下的色彩，是色彩的相貌。簡言之，色環上沒有改變明暗的色彩。色相是色彩的首要特征，是區別各種不同色彩的標準。例如紅、橙、黃、綠、青、藍、紫就是其中不同的基本色相。黑色是沒有色相的中性色。不同的色相在人眼中的差異是色相本身對應光的波長不同而造成的。紅色波長最長，紫色的波長最短。
飽和度（Saturation）
飽和度是色彩的純度，他表示顏色中所含有色成分的比例。增加飽和度，色彩會變得更強烈、鮮艷生動；降低飽和度，顏色中灰色成分越大，色彩會變得暗淡乏味。當一種顏色摻入黑、白或其他色彩時，純度就產生了變化，當摻入的顏色達到很大的比例時，人的眼睛就無法感知出來了。
飽和度為 0 的顏色為無彩色，就是黑、白、灰。數值越大，顏色中的灰色越少，顏色越鮮艷。飽和度高的地方給人感覺靠近，而飽和度低的地方則給人的感覺很遙遠。高飽和度和低飽和度的色彩都給人堅硬的感覺。
明度（Brightness）
明度，指色彩的明暗度，反應的是色彩的深淺變化。以自然界為例，一些物體在早晨和晚上的色彩不同。如樹木和山脈，早晨色調淺；傍晚因為光線減少了，色調變得偏暗。距光源越近的物體，明度越高，反之，則明度越暗。
明度在 UI 設計中扮演重要的角色，明度運用得好，可以實現好的對比效果。明度達到 100%時，色彩就會變成白色（黑白模式下）；明度是 0%時，就會變成黑色。色彩的明度變化往往會影響到純度，例如藍色加入黑色以后明度降低了，同時純度也降低了；如果藍色加入白色則明度提高了，純度卻降低了。
完整的 UI 配色應包含主色、輔助色和中灰色。主色通常與品牌色一致，輔助色一般選擇與主色色調一致且能拉開層次的顏色，強調色選擇與主色相對立的互補色。下面我們來學習幾種常見的配色方案。
單色
單色是指某個色彩的明度變化，即在色彩上疊加 10%-90%白色或黑色得到的一組顏色。單色搭配由于彼此之間色彩相同，因此能和諧共處，但因較為樸素也就不容易引人注目，而且會給人一種單調的感覺。單色配色在色彩變化上也適合長時間閱讀，顏色波動較少，比較適合沉浸式交互的界面設計。
蝦米音樂就是單色搭配的最好例子，它將主色橙色用在主要功能入口、標簽欄圖標等所有界面的關鍵元素上，給人非常精致和統一的視覺體驗。
如若想要在色彩變化上融入一點微妙的變化，可以嘗試在色環中選用兩側相近的顏色，這樣色彩層次豐富了而統一感也不會變，稱之為“鄰近色配色”。
鄰近色
是指在色相環中相鄰的兩種顏色，在色相環上相距 60°，或者相隔五六個數位的兩色。它可以在同一個色調中建立起豐富的質感和層次，優點是陽光、活潑、穩定、和諧但不單調，理所當然稱為最安全的配色法則。鄰近色色相相近，冷暖性質相近，傳遞的情感也較為相似。例如，紅色，黃色和橙色就是一組鄰近色。鄰近色表現的情感多為溫和穩定，沒有太大的視覺沖擊。
美顏相機的主色是粉色，將淺粉色和淺紫色作為輔助色，既能信息區分又和諧統一。
互補色
互補色是指在色相環上對立（180°）的兩個顏色，色相環上夾角呈現一條直線，例如黃色和紫色、橙色和藍色、紅色和綠色等?；パa色有著非常強烈的對比度，在顏色飽和度很高時，可以產生許多十分強烈的視覺效果，就會使這兩種顏色都顯得更加鮮明，也將視覺沖擊力強度提升至峰值。這類配色形式優缺點和對比色很相似。常給人一種潮流、刺激、興奮的感覺，把互補色放在一起，會給人強烈的排斥感，搭配不好會很山寨。
Airbnb 的主色為紅色，界面設計中使用主色的互補色「墨綠」作為主色調，給人清晰、簡潔的感覺。
分裂互補色
分裂互補色是指尋找三種顏色，其中兩種互為鄰近色，另一種與它們形成互補色，例如黃色和藍色、洋紅。這種搭配既能保持互補色強烈的對比及視覺上的趣味性，又能讓顏色變得柔和。
36Kr 將藍色作為主色，互補色黃色作為輔助色用在圖標、標簽上，再選擇黃色的鄰近色紅色作為另一輔助色，用在不同的信息上，有助于用戶區分產品信息。
對比色
指在色環上相距 120°～180°之間的兩種顏色，也是兩種可以明顯區分的色彩，包括顏色三要素的對比、冷暖對比，彩色和消色的對比等。對比色能使色彩效果表現更明顯，形式多樣，極富表現力。需要注意的是，互補色一定是對比色，但是對比色不一定是互補色。因為對比色的范圍更大，包括的要素更多，如冷暖對比、明度對比、純度對比等。這類配色形式優點是視覺沖擊力強烈、富有跳躍性、突出、點綴能力強，比如常用作畫面中的點綴色，或與主體固有色成對比關系的背景色，用于突出主體。缺點是大面積使用比較難把控。
馬蜂窩的主色是黃色，對比色藍色作為輔色用在標簽、小圖標上，紅色作為強調色用在價格等信息上。
對比色也不單純是兩個顏色之間的對比，而是色調之間的對比！對比色還包括：補色對比、色相對比、明度對比、飽和度對比、冷暖對比，飽和度越高對比越強烈，明度反差越大對比越強烈。
四元色搭配
四元色搭配在色環上形成了一個矩形，使用不是一對而是兩對互補色。將其中的一個顏色作為主色，其余顏色作為輔色進行搭配可以得出不錯的效果。
四元色是比較難以平衡的顏色，不過搭配好了會非常出彩。不信可以自己用用感受一下，尤其是使用其中一個顏色作為主色，其他的三個顏色作為輔助色的時候。
了解了色彩的基本知識，下面說說色彩和光源的關系。如果想描繪好對象的色彩，那么就必須了解對象的固有色、光源色、環境色及它們之間的關系和變化。
固有色
即物體本身的顏色。是指在光源條件下物體占主導地位的色彩，如紅色的罐子、綠色的植物等。物體的固有色并不存在，在繪畫過程中為了觀察方便經常引入“固有色”這一概念。從實際方面來看，即使日光也是在不停地變化中，何況任何物體的色彩不僅受到投照光的影響，還會受到周圍環境中各種反射光的影響。所以物體色并不是固定不變的。
光源色
物體只有在光源的照亮下才能觀察到它們的色彩。光源有自然光（太陽、天光）和人造光（燈），這些光源都各自具有不同的顏色。太陽光是偏黃色暖色光，月光是偏青的冷色光，陰天則更多的是藍灰色的天光，普通燈光是偏黃色的暖色光。光源的顏色對物體的顏色影響很大，想象一下一個置于紅色光源照射下的藍色物體會是什么顏色。
環境色
物體周圍環境的顏色就是環境色。環境色對物體的影響非常大，如在紅色背景下的白色物體，由于光源打到紅色背景上的背景反射光也會“染”到白色物體上，因此白色物體的部分表面會蒙上一層淡紅色的色彩。所以，設計師在用電腦作圖時也需要考慮并想象環境色的影響。
Lab
Lab 的全稱是 CIELAB，有時候也寫成 CIE L*a*b*。最突出的特點是它的生理特性，一是它包括人眼所看到的所有顏色，是目前為止色域最寬的色彩空間，二是跟人眼一樣，首先看到的是明暗，其次是色彩，可以用數字化的方式描述人的視覺感應，在計算機視覺中廣泛應用。
LAB 顏色空間中，L 表示亮度，取值[0-100]對應[純黑—純白]；A顏色表示從綠色到紅色的范圍，取值[-128—+127]對應[綠—洋紅]；B表示從藍色到黃色的范圍，取值[-128—+127]對應[藍-黃]，正是暖色，負是冷色。Lab顏色空間中亮度和顏色是分開的， L通道沒有顏色，a通道和b通道只有顏色。不像在RGB顏色空間中，R通道、G通道、B通道每一個既包含有明度又包含有顏色。
在表達色彩范圍上，最全的是 Lab 模式（其次是 RGB 模式，最窄的是 CMYK 模式），它彌補了 RGB 色彩模型和 CMYK 色彩模式色彩分布不均的不足。也就是說 Lab 模式所定義的色彩最多，且與光線及設備無關，并且處理速度與 RGB 模式同樣快，比 CMYK 模式快數倍。
Hsb
HSB 和 HSV 是同一個東西，只是名稱不同。在 Photoshop 拾色器上可以看到每個顏色都有一組 HSB 值，H 表示色相、S 表示純度、B 表示明度。色相值為 0～360 度，即圓；純度和明度值為 0～100%，因此，了解 HSB 模式的原理，就能了解色彩的本質。
當我們需要調配同色系色彩，保持色相不變，只需要改變純度和明度即可。如下圖所示的 3 種同色系綠色，他們的色相（H152）都一致，僅在純度和明度上有所變化。
當色相和純度都為 0 時，色彩稱為中性色，也稱為灰度色，即黑白灰。其中，灰不是單指某一種顏色，而是一系列從黑到白的過渡色。
灰度色多用于文字，通常一個應用中的文字不應超過 3 種灰度色。深黑用于標題、正文等主要文字；淺黑或深灰用于輔助、提示性文字；淺灰用于禁用、失效等狀態文字；純白用于深色按鈕文字。
此外，灰度色由于沒有任何色相，始終沉著冷靜，減少對內容的視覺干擾，因此常用于界面背景色，例如 MOO 音樂的界面設計。
Hsl
HSL 色彩模式是工業界的另一種顏色標準，是通過對色相(H)、飽和度(S)、亮度(L)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的。在原理和表現上，HSL 和 HSB 中的 H（色相） 完全一致，但二者的 S（飽和度）不一樣，L 和 B （明度 ）也不一樣。
取一個顏色試試看，先選一個顏色 #0688F9，放入 “HSL Color Picker”，顯示 HSL 數值為：H(208), S(95), L(50)，但是我們放在 Sketch 里面看一下，顯示的 HSB 數值為，H(208), S(98), B(98) 。
HSL 的 H 代表的是人眼所能感知的顏色范圍，這些顏色分布在一個平面的色相環上，取值范圍是 0°到 360°的圓心角，每個角度可以代表一種顏色。色相值的意義在于，我們可以在不改變光感的情況下，通過旋轉色相環來改變顏色。在實際應用中，我們需要記住色相環上的六大主色，用作基本參照：360°/0°紅、60°黃、120°綠、180°青、240°藍、300°洋紅，它們在色相環上按照 60°圓心角的間隔排列。
HSL 相比 RGB 的優勢
我們來做一個基于 HSL 的調色實踐。你可不可以快速說出“海棠紅”所對應的 RGB 色值？如果再加一點橙色進去，把亮度提高一點，色值又是多少？想想那應該是一個介于洋紅和紅色之間的，性感嬌艷的顏色。我們可以假定它在色相環 H 上的角度是 330°左右，飽和度較高，亮度適中，看看那是什么顏色？
em…我們想要的顏色應該再接近紅色一點，讓我們把色相（H）+20°到 350°，現在好多了。
通過改變色相值 H，我們實現了色相從洋紅向海棠紅的偏移。 大感覺接近了，但還是略微有點灰暗，我們可以通過增加飽和度（S）+15%，讓這個顏色變得更鮮活，看起來更亮麗。
感覺還是差點，海棠紅是屬于少女的顏色，應當再嫩一點、通透一點，不會這么強烈。那可以通過增加亮度 L，+10%試試看，嗯，這才是我們想要的顏色。
同理，如果想加點橙色進去， 再亮一點，我們通過心算就大致可以確定色相環的相位和亮度值。在這里，我們需要讓 H 增加 20°，L 增加 5%。
在使用 HSL 調色的過程中，不需要了解復雜的色光混合原理，這是一個自然的、感性的、易于理解的過程。相比之下，RGB 調色方式顯得非常笨拙復雜、難以理解，而 HSL 是多么的友好。
需要提醒一下的是，CSS 代碼里支持的是 HSL，而不是 HSB。如果和前端對接時，UI 給到的是 HSB 的色值，那么最終落地的顏色效果會與設計稿有出入。Photoshop 中的 Hex 和 RGB 顏色可以直接在 CSS 文件中使用，但是 Photoshop 中的 HSB 模式顏色和 HSL 是不同的。
Yuv
YUV，是一種顏色編碼方法。常使用在各個影像處理組件中。YUV 在對照片或影片編碼時，考慮到人類的感知能力，允許降低色度的帶寬。Y 表示明亮度（Luminance 或 Luma），也就是灰度值；U(Cb)表示色度（Chrominance）；V(Cr)表示濃度（Chroma）；通常 UV 一起描述影像色彩和飽和度，用于指定像素的顏色。
采用 YUV 色彩空間的重要性是它的亮度信號 Y 和色度信號 U、V 是分離的。如果只有 Y 信號分量而沒有 U、V 信號分量，那么這樣表示的圖像就是黑白灰度圖像（回想一下小時候看的黑白電視）。彩色電視采用 YUV 空間正是為了用亮度信號 Y 解決彩色電視機與黑白電視機的兼容問題，使黑白電視機也能接收彩色電視信號。
色彩心理學是美術知識學習中非常重要的一部分。他所研究的是色彩通過對人視覺上的刺激，而引發人情感和感官上的變化，通過日常生活中人們對應用色彩的經驗積累而歸納總結出人類對色彩心理上的預期感受。在生活中，色彩心理學對人們對顏色的認知有很大的影響。為什么交通信號燈用紅色表示停止通行而不是綠色呢？為什么大多快餐店用紅色或黃色作為品牌的主色？這都是色彩心理學的相關知識。
雖然紅、藍是受到最普遍喜愛的顏色（通過對 App Store 應用流行顏色分類統計得知）。但并不意味著這一準則可以套用在所有產品上。產品的屬性是什么，用戶定位是什么，要傳達的產品氣質是什么等等，這些都是選擇應用圖標的顏色時需要考慮的問題。世界上第一間 Airbnb 房間是在一條叫 Rausch street 的街上誕生的，因此 Airbnb 的主色被命名為「Rausch」的溫暖顏色。在挑選主色調的時候，4 名設計師前往世界 13 個城市，只為了更好地理解 Airbnb 的理念：熱情、能量和自信，這正是 Rausch 要傳遞的信息。除了 Rausch 以外，Airbnb 還有其它九種顏色，包括 Kazan、Beach、Tirol、Foggy 等等，它們也都是以 Airbnb 的社區街道命名的。
下面來講解每一種顏色都各自帶有什么樣的性格，只有理解了顏色的性格才能正確的使用它們。
黑色
黑色代表著品質、高端、時尚、低調、權威、嚴肅、穩重，是一種充滿質感的顏色。它是所有色彩中最有力量的，能很快吸引用戶的注意力。作為一種無彩色，能讓它和其他色彩百搭，黑色+金黃色，給人一種奢華精致的感覺；黑色+銀灰色，則給人一種成熟穩重的感覺；黑色+紅色，給人一種時尚潮流的感覺。因此黑色是一種永遠流行的主要色彩。
白色
白色代表著純潔、簡單、純真、樸素、信任、開放、雅致，白色常常被認為是“無色”，即不是色彩。單一使用白色通常不會引起任何情感，但是當白色與其他顏色配合使用時，白色能很好的襯托，大量的留白讓其他元素脫穎而出。在界面設計中，作為無彩色的白色，常用于背景色，緩和各種顏色的沖突，以襯托其他色彩，提高畫面明度，提高文字可讀性。
灰色
灰色是代表著睿智、老實、執著、嚴肅、壓抑、沉穩。介于黑色和白色之間，也屬于無彩色，沒有色相也沒有純度，只有明度的變化。它和任何顏色都能很好的搭配，也常常用于背景色或用于突出其他彩色?；疑幌窈谏敲磮杂泊萄郏袕椥?，它比黑色更有深層次的力量。因此在畫面中，很少出現純黑，基本都是用深灰色來代替黑色，也可以用淺灰色來代替白色。
紅色
紅色代表著喜慶、熱情、歡樂、斗志、奔放、自信，是一種充滿能量的顏色。這是最醒目和強勢的顏色，一登場即獲得全場的關注，甚至能引起一些生理反應，例如心跳呼吸加快等。紅色最能烘托氣氛，在中國傳統節日里都使用熱鬧的紅色來裝飾，因此也就不難理解每逢佳節各大電商應用活動頁一片紅，為的就是發沖動，引人消費。同時紅色也代表了警示、告誡。所以在界面設計中常用紅色的文字和按鈕來警示用戶慎重操作。
橙色
橙色代表著溫暖、歡樂、輝煌、健康、陽光、年輕、華麗，是一種充滿朝氣的顏色。橙色并不像紅色那樣咄咄逼人，而且它烘托出的活躍氣氛沒有危險的感覺，反而是一種友好。因此越來越多的應用避開常見的紅色和藍色，而選擇橙色的原因。
黃色
黃色代表著信心、青春、聰明、尊貴、輝煌、時尚，是一種充滿活力的顏色。黃色是明度極高的顏色，其鮮亮的色調使它在眾多圖標陣列中顯得尤為突出。盡管在警示效果上沒有紅色那么明顯和強烈，但是還是能給人很醒目和危險的感覺（例如道路警示牌）。同時因為過于明亮，也是一種非常難以運用的顏色，性格不穩定常有偏差，和別的顏色配合使用易失去本來的性格。不過黃+黑的搭配很流行，例如站酷和美團外賣。
綠色
綠色代表著健康、生命、青春、寧靜、自然、和平、安全、舒適，是一種充滿希望的顏色。綠色給人無限的安全感，當情緒低落與消極時看一些綠色，能緩解我們焦躁的情緒。綠色在生活中被廣泛運用，如安全出口的顏色就是綠色，但綠色的飽和度要適當控制，如高飽和度的綠色也會令人興奮，引起注意。
青色
青色代表著堅強、古樸、活潑、清爽、柔和、優雅、希望，是一種充滿靈動的顏色。青色是一種介于綠色與藍色之間的顏色，如果無法界定一種顏色是藍色還是綠色時，這個顏色就可以被稱為青色。豆瓣的主色調是青色，很符合豆瓣小清新的氣質，帶給用戶恬靜的感受。
藍色
藍色代表著冷靜、科技、靈性、自由、放松、未來、理智、純凈、商務，是一種充滿理性的顏色。藍色是天空的顏色，是大海的顏色。在色彩心理學的測試中發現，幾乎沒有人對藍色反感。純凈的藍色通常讓人聯想到海洋和天空，可以撫平內心的傷口，讓人的內心感到平和，有助于人的頭腦變得冷靜。例如 twitter 的主色調是藍色，在社交應用里藍色是一種很安全的顏色，高純度的顏色傳遞了信賴、年輕和溝通的氛圍。
紫色
紫色代表著高貴、浪漫、優雅、性感、幸運、夢幻、時尚、創造性，是一種充滿神秘的顏色。是小孩子和有創造力的人十分喜歡的顏色。紫色的光波最短，在自然界中較少見到，所以被引申為象征高貴的色彩。紫色的明度在所有有彩色的顏色中是的。與不同的顏色結合會展現出不同的風格特色。紫+粉常用于女性化的產品調性，黃色是紫色的對比色。
當我們討論色彩的時候，聊的更多的是色彩的搭配。雖然有些設計師認為有些色彩是一些純粹的美學上的選擇，但是實際上，色彩對于用戶的心理和行為的影響相對更深，最終會反映在用戶體驗和行為反饋上。
當然，色彩理論是一個相對復雜的主題。從用戶體驗的角度上來說，色彩所涉及到的遠不是配色方案這一個維度。通常，我們聊得最多的是不同色彩所產生的心理效應，以及多色彩搭配時，相互之間的影響和可訪問性上的問題。設計師可以將色彩更好地運用到設計中，而無需重新考慮整個過程。一旦設計師掌握了基礎知識，色彩理論中最有意義的部分之一就是學習將更多意想不到的色彩融入他們的設計中。
界面顏色的情感影響不容忽視。盡管有些顏色在 Ui 設計中是“通用的”（例如，黑色，白色和灰色，實際上幾乎所有好的設計中都使用了其中的至少一種），但它們結合使用的顏色可能會對體驗設計產生巨大影響。當然，顏色的使用方式也會對顏色的感知產生巨大影響。以藍色為例，在簡約的布局當中，大面積使用藍色作為主色調，和在大面積白底上使用很小的一抹藍色用來強調 CTA 按鈕，所帶來體驗是截然不同的。
尊重文化差異
人類對于色彩都有著共通的認知，但不同國家對于色彩賦予了不同的含義。紅色在中國象征著喜慶、財富和愛情，而在西方國家被賦予了流血、犧牲、暴力和激進的文化意義，貶義的味道更重一些。而白色與紅色相反，白色在中國代表了死亡、反動和投降，以白色為主的設計常常會被視之為過于「素」，認為不夠吉利。而西方國家卻認為白色高雅、純潔和幸運，因此要根據不同的文化背景，使用不同的色彩，才能更好地降低被誤解的風險。
另外一方面，隨著現代主義運動的普及，白色也擁有了更加現代的特征。在日本，白色甚至和當地文化結合，延伸出更加細膩獨特的精神特質，隨著日本戰后設計領域的發展和崛起，白色在這一地區的含義則更加豐厚。原研哉在《白》一書當中，針對白色的含義和特征進行了非常深入的探討，之后的《Subtle》一書當中，雖是圍繞紙來探討微妙的體驗，但是也沒少提及白色本身的特征。
例如股票交易市場，在國際股票市場通常是綠漲紅跌，這是因為紅色在西方國家代表著財政赤字，綠色代表著財富；而在中國正好相反是紅漲綠跌，這是因為在中國紅色象征著財富。
設計師必須根據產品的目標受眾來審視其調色板的文化含義，這一點很重要。如果產品要面向全球受眾，請確保在使用的顏色和圖像之間取得平衡，以防止負面的文化內涵。如果產品主要只針對特定文化，則設計師可以不用太關心所選調色板在其他文化中可能產生的影響。
歷史對配色的影響
時間變化對于配色所帶來的影響不僅僅如此。比如中日兩國在色彩使用上，還存在一個非常典型的差異，歷史上日本在一個很長的周期內是作為中國的屬國所存在的，這也使得中國自古以來崇尚飽和度較高的正色，而日本則大多使用飽和度偏低的間色，這一特征可以從兩國的傳統色上體現出來：
△ 中國傳統色：https://color.uisdc.com/
△ 日本傳統色：https://color.uisdc.com/jp.html
性別誤區
或許天生如此，女性不喜歡灰色、棕色和橙色。她們鐘愛藍色、紫色和綠色。而男性不喜歡紫色、棕色和橙色。男性喜歡藍色、綠色和黑色。只要記住，當你的產品目標用戶群是男性時，選擇能傳達男性氣概的色彩，想象下你把運動類應用的界面使用女性色彩，結果可想而知。
△ 男女最喜歡的顏色
△ 男女最不喜歡的顏色
你有沒有想過你的 APP 使用人群中會有視力障礙者？
當人們談論色盲時，他們通常指的是不能感知某些色彩。 大約 8％的男性和 0.5％的女性患有不同程度的色盲——他們在識別部分或者全部顏色時有困難。面對如此龐大的特殊受眾，設計師理應關注他們的需求。
△ 正常人和紅綠色盲看到的相同色彩
因為色盲有多重表現形式，例如紅綠色盲，藍黃色盲和單色色盲。所以運用多樣的視覺線索來連接你 APP 的重要狀態是很重要的。絕不要僅僅依靠色彩來表示系統狀態。 相反，應使用元素（如筆畫，指示符，圖案，紋理或文本）來描述操作和內容。需要注意的就是不要簡單認為色盲就是簡單的分不清紅綠，色盲用戶對色彩的感受差異不僅僅是單獨某種的問題，是某些范圍色光的敏感程度問題。
有趣的事實：Facebook 的標志和不怎么討喜的藍色配色是特意挑選的。因為 FB 創始人馬克·扎克伯格是紅綠色盲，他對藍色的識別是最好的。他曾說過，“藍色是我生命中最豐富的顏色，我幾乎可以看見這世上所有的藍色?！?
△ facebook
Photoshop 有非常實用的工具來幫助模擬色盲，在「視圖」的「校樣設置」菜單內選中就可以使用了。這個功能讓設計師可以看到在色盲用戶的眼中你的界面是什么樣子的。
△ pinterest登陸頁紅綠色盲視圖
下面以點狀圖信息圖形為例，來說明如何為色盲用戶優化信息圖：
優化采用了這樣一些手段：1.調整配色，將色盲人士容易混淆的紅、綠、橙色換為紅、藍、黃色。2.調整明度，使圖中幾個顏色在明度上差異更明顯。3.為不同元素賦予不同形狀。所有使用點元素的信息圖，都可以參考這種解決方式。
在實際設計過程中，我們需要在美觀和友好之間進行權衡。我們也可以采用一些交互手段，避免同一界面中元素太多太過雜亂的問題。
這是更長維度上的變化，在短時間以內，流行色的趨勢變化，對于用色也同樣存在影響。這種影響在時尚行業有著非常直接的體現，而在網頁和 UI 設計行業，同樣存在。比如 2020 年的潘通年度流行色是「經典藍」（Classic Blue），也就明白了為什么 iphone12 今年的主打色是藍色了。
所以，當你在設計的時候，如果你的目標用戶群體有著清晰的地域或者性別偏向，你可以有目的地利用這些知識來規避設計陷阱，更好地發揮色彩本身的功能和優勢。如果受眾廣泛，則可以盡量使用通用性更強的色彩來進行設計。
你知道世界上的顏色是什么嗎？
是否存在一種色彩，是不分性別文化，大家都會喜歡的呢？確實有人通過大規模的調研和探索找到了一種世界上的色彩：馬爾斯綠（Marrs Green）。來自全世界 100 多個國家 3 萬多人響應號召完成了這項投票，并且最終選取出來的一款綠色。
人腦對于色彩的記憶度要高于形態，即一個 App 給用戶留下深刻印象的往往是界面的色彩。例如說到支付寶，我們可能想不起它的首頁長什么樣子，標簽欄圖標是那些，但能馬上記起它的界面主色是藍色。因此運用好色彩對 UI 設計十分重要，它能直觀的呈現產品的氣質和性格，能有效的幫助用戶組織和閱讀信息，與界面設計產生聯系和記憶。好的配色往往依靠設計師審美、感覺搭配出來，但合理的顏色搭配必定存在合理的配色規律和配色方法論的支撐，下面結合相關案例為大家講解色彩運用的幾個技巧。
不得觸碰的禁區
分析研究了很多優秀設計作品，發現他們在用色的時候有一部分區域是不會使用的，也就是我們常說的“配色禁區”。當然，這里的“禁區”是帶雙引號帶的，并沒有什么絕對的禁區，只是說這些顏色不易控制，在連基礎色都沒有駕馭好之前，盡量少碰。
配色禁區大概分為這三種：三角形禁區、矩形禁區、扇形禁區（紅色為禁區），如下圖：
綜合看來，不管是那種禁區，右下角區域的顏色是很少用的。畢竟他們又臟又深，當然什么顏色都能駕馭的大師請略過。
在界面設計中，一般主色和輔助色都集中在右上角，次要的和不可點的顏色都集中在中上方，而文字信息和背景色則集中在左側，右下角禁區是我們要重點避開的對象。
色調一致
在 App 設計之前應先確定界面的主色調，主色將占據界面中很大的比例，通常是品牌色，而輔助色、點綴色、背景色等都應以主色調為基準來搭配，這樣才能保證 App 整體色調的一致。色調一致的界面，能帶給用戶始終如一的視覺體驗。例如馬蜂窩將黃色（品牌色）作為主色，以及從主色搭配出的藍色（對比色）貫穿 App 始終。
60-30-10 原則
60% 30% 10%的原則，是達到色彩平衡的最佳比例。在 60%的空間使用主色，可以運用到導航欄、按鈕、圖標等關鍵的元素中，使之成為整個 App 的視覺焦點和色彩關系；30%的空間使用輔助色，可以平衡過多的主色而造成的視覺疲勞；最后剩下 10%的空間為點綴色，可以用在一些不太重要的元素又需要區分的時候。6:3:1 原則構建了一種豐富的色彩層次，讓界面看上去和諧、平衡和不雜亂。
嗶哩嗶哩將粉色運用到頁簽、標簽欄、按鈕、入口圖標等上，藍色的輔助色用在角標、圖標上，還有黃色、紅色用在一些小圖標、小標簽上，主次非常清晰明了。
色不過三
經常很多大神在網上說配色不要超過三種色，其實就是「色不過三」原則，即在一個頁面中不要使用超過 3 種顏色搭配，這也和上面說的“60-30-10 原則”類似，即一個主色、一個輔助色和一個點綴色。但在實際 UI 設計中，迫于產品的需要可能會使用更多數量的色彩，但切記不可超過 7 種色相（注意不是 7 種色值），每個色相還可以運用其飽和度、明度的變化分解出豐富的色彩搭配。
美團外賣的首頁 20 個功能入口大圖標的背景用了 9 種不同的色彩，每種色彩又包含一種低飽和度色彩進行彩色漸變，但并沒有顯得雜亂，而是呈現一種年輕時尚的律動感。這是因為這里雖然使用了 9 種不同的色彩，但仔細觀察發現只使用了 3 種色彩，其他 6 種則是從前者鄰近色中提取出來的搭配，再將它們錯落放置，呈現出豐富多彩的色彩搭配，整體和諧統一。
遠離純黑色和純灰色
黑色就像沒有生命力的深淵，使用戶陷入冷冷的負面情緒中。遠離純黑色和純灰色，是因為它們不存在于現實世界里。嘗試在純黑和純灰中加入一些色調，會讓界面看上去更柔和自然。另外，純黑色還會與白色產生強烈的對比度，看久了會使人疲勞，讓用戶產生焦慮的情緒。MONO 的導航欄并不是深黑色，而是加入了藍色的低飽和度藍黑色，它的界面背景也是加入了藍色的的淺色，這樣就不會讓界面看上去死氣沉沉的。
遵循色彩心理學
前文我們已經了解過各種色彩的心理學知識，就是為了我們在進行 App 設計時提供依據。這些色彩都是源于人類對大自然最原始的感受，藍色的天空、綠色的草地、黃色的沙漠等等，自然的色彩，對于我們來說是司空見慣的，但其中卻蘊含著豐富的美感，并達到了和諧統一。網易云音樂使用紅色作為主色，這種熱情奔放的顏色傳遞出一種充滿能量、自信的氣質。
良好的可讀性
良好的可讀性在界面設計中能為用戶提供主次分明、層次清晰的閱讀體驗，而一個可讀性差的界面則會成為用戶瀏覽的障礙。那如何確保界面具有良好的可讀性呢？這就需要在界面設計中注意色彩搭配的對比，如在淺色背景上使用深色文字，在深色背景上使用淺色文字，使用高對比的度的亮色展示重要的元素，用低對比度的淺色來體現需要弱化和次要的內容。例如蘋果 Music 的主要功能入口，標簽欄圖標、按鈕等都是用了高純度的紅色，與其他元素形成鮮明對比，就連深灰色的輔助文字都有著清晰的可讀性。
從大自然中獲得靈感
配色中盡量使用大眾熟悉的色彩，如自然界中人們常見的色彩等。從大自然中獲取的配色靈感可以使你的設計更加切合用戶的審美，非常自然。而藝術是對自然的直接反映，是非常寶貴的資源，值得好好利用。我們可以搜集各種與自然風光相關的圖片，從中提取色彩運用到設計中，這些幾近完美的搭配呈現出來的和諧美感能瞬間打動人心。天氣應用 Marline 就是一個很好的例子，它的界面背景漸變就參考大自然的變化，隨著不同時間段呈現出清晨、日出、正午、日落、深夜、雨天等漸變色，打開應用即喚起了用戶的快樂情緒。
將 UX 顏色與品牌相匹配
品牌價值在創建調色板中發揮關鍵作用，但是它們不是唯一重要的因素，行業規范也是關鍵。使用與品牌主要競爭產品幾乎相同的配色方案不失一種好方法。配色在品牌視覺中所發揮的作用是不言而喻的，但是，色彩本身的內涵和情緒特質并不是全部。比如一個行業當中，很多產品都使用了藍色，那么你的產品繼續使用藍色，可以讓用戶更快「識別出」你所屬的領域，但是本身也存在讓人混淆的風險。如果你想要在視覺上脫穎而出，可以試著使用不同的色彩。
△中國區或美國區，紅色和藍色都是最流行的顏色。
在進行品牌設計的時候，選擇配色的第一步，始終是了解各種顏色或者色相的氣質和情感屬性。然后，在具體設計的時候，再進一步根據品牌的氣質和需求，再在色相的基礎上調整明暗和飽和度。也可以打破常規創造出與眾不同的配色方案。
從強調色入手
想要讓配色方案更加突出，在設計中添加強調色可能是最容易入手的地方。舉個例子，一個律師咨詢的 App 可能會使用傳統的藍色作為基礎配色，但是，如果能夠加入檸檬綠作為強調色，會顯得獨特很多。
冷暖色對比搭配
冷暖對比色是自然平衡的規律，可以在設計中大量使用，這樣的配色會使作品非常的出彩，同時不顯單調，讓用戶感覺舒服平和。而且這種搭配方法基本沒有啥缺點，使用在設計中，技巧性比較多，對設計的細膩感受要求比較高，需要多練習。
黑白色搭配不過時
黑色是所有中性色中最強的，而白色是最常用的背景顏色。黑色是一個很好的選擇，有種高端和永恒的感覺，而白色可以帶給用戶自由，寬敞和透氣的感覺。如上所述，黑色和白色也是最大的對比色，如果合理的使用黑色配合白色，會營造出一種優雅的氛圍。
強交互色彩
交互色彩在執行過程中必須清晰且在界面中保持一致。號召性用語必須相對于背景具有足夠的對比度，并且相對于其他組件必須具有足夠的視覺權重，以便用戶可以輕松識別它們。Nike 健身應用中，「開始」按鈕以高飽和度的檸檬綠作為主色，從背景中脫引而出。
但是，交互色彩并不總是以最具飽和度或最亮為特征，而是通過色調、形狀、大小或對比度，從屏幕上脫穎而出。因此，交互色彩的有效性將基于用戶識別交互區域和執行任務的速度來衡量。同時，次要功能權重要更輕，并在視覺上更接近信息元素。如上圖 Nike Training 界面中，“設置”和“聲音”按鈕只用簡單的白色，減輕對主按鈕的干擾，也避免了頁面中出現多個強交互按鈕。
保證良好的可讀性
可讀性是任何設計中的重要因素。你的顏色應該清晰易讀，尤其是在處理文字時。因此對比度對視覺效果的影響就非常關鍵，對比度過小，就會使得界面出現灰蒙蒙的效果。清晰的對比度，一般會采用色彩的兩極，黑紙白字或白紙黑字。而在彩色背景上要讓內容清晰可見，就需要搭配純白或高明度的文字，避免灰色文字。也要注意避免彩色背景上搭配互補色和明度接近的文字，因為這兩種搭配會產生一種“震顫效應”，發出光暈的視覺效果。
UI 中的陰影
沒有完全純黑的陰影，陰影的顏色是會受到物體本身固有色的影響，一定要避免使用純黑色（#000000），使用不太深的灰色，效果會更好。對于有顏色的元素，好的做法是為陰影設定與元素相同的顏色，并使其更暗一些。
如果是有顏色的元素，并且它處在黑暗的背景下，一般情況下，是不建議使用陰影的。但是如果你一定要用，把陰影透明度調到小于 10%及以下，并且顏色跟隨主色調來。比如按鈕為綠色，則可以為按鈕設定一個更深的綠色陰影，并加上小于 10%的透明度數值。如下圖，左側的按鈕陰影很自然，右側的則有一層模糊發光的效果，顯得不夠漂亮。
為什么「超鏈接文字」要用藍色？
簡單說，因為在最早期的網站頁面中，藍色能呈現最高的對比度。
Tim Berners-Lee——web 的主要開創者，被認為是最早用藍色鏈接的人。
一個很早期的 web 瀏覽器 Mosaic，用的是深灰色背景和黑色文字。那時候，能用的非黑色、最深的文字顏色，就是藍色。所以，讓超鏈接文字突出顯示，同時保證可讀性，就選定了藍色。此后超鏈接文字都用藍色的傳統沿用至今。
App 的色彩搭配能直觀、快速的反饋到用戶的大腦中形成記憶思維。好的色彩搭配可以加深用戶對產品的印象；明確界面的視覺層次，讓用戶分清主次信息；同時還能給用戶賞心悅目的視覺享受。那么，在 UI 設計時該如何進行色彩搭配呢？我們可以從 App 中都包含了那些色彩開始，通常一個 App 中包含了主色、輔助色、點綴色、背景色這 4 類，下面就以微信讀書為例進行詳細的講解（個人角度）。
主色
主色是指在配色中處于主導地位的色彩，給用戶的第一眼印象，通常是產品的品牌色。在 App 設計中，主色一般占有色相色彩的 60%的比例。這里指的是 60%的界面都使用到的主色比例，而不是使用面積（因為通常一個界面中使用面積最大的是背景色）。還有就是背景色多為淺灰色或白色，它們都屬于無色相色彩，因此不涉及到配色過程中。我們看到微信讀書的第一印象，就可以判斷它的主色為藍色，這也是它的品牌色。在標簽欄、按鈕、圖標、注冊登陸全都使用了這種純凈的主色，使界面看上去非常和諧一致。
輔助色
輔助色與主色相輔相成，輔助色的功能是幫助主色建立更完整的形象，使界面豐富精彩起來，避免畫面過于單一。通常，主色的鄰近色、互補色、分散互補色和三角對立色都可以成為優秀的輔助色，但注意輔助色不宜過多，否則就會使界面看上去花哨分散了主題。根據 6:3:1 原則，輔助色可以占有色相色彩的 30%或更少為宜。
在微信讀書中，綠色、橙色、梅紅、藍紫色是除了主色以外使用最多的顏色，它們都是輔助色，主要用于功能圖標和欄目分類上。雖然輔助色看起來有點多，但其實都是從主色的鄰近色和對比色（及其鄰近色）中提取出來的搭配，而且只用在頁面中很少的地方，這種搭配技巧既可以豐富色彩的搭配，傳遞出年輕活躍的產品氣質，又保證了整體搭配的和諧統一。
點綴色
點綴色是除了主色和輔助色以外的另一種色彩，通常體現在細節上。其作用是，當頁面中主色和輔助色不能滿足關鍵信息的提示時，就需要點綴色來吸引用戶眼球，還有就是利用點綴色來平衡畫面的冷暖色調。點綴色通常都是分散的，使用面積小，顏色非常顯眼，能與主色形成強烈的對比。一般點綴色是主色的互補色。在微信讀書中，使用了香檳金、梅紅和紅色作為點綴色。香檳金用在文章分享按鈕上，梅紅色用在點贊圖標上，強調其特殊性，紅色用在通知及退出登錄提醒上，用于警示。
來康康這三種點綴色與主色之間存在什么樣的關系，在色相（H）上，3 種點綴色為鄰近色，與主色為互補色；在明度（B）上，3 種點綴色均為高明度色彩，起到強提醒的作用。這種強對比的互補色的點綴色可以快速引起用戶注意力。
背景色
背景色就比較好理解了，通常為了襯托內容，大多數 App 都是用淺灰色作為背景色，以白色作為背景色的對比色，來區分視覺層次。建議是可以根據前景色來提取背景色，將其調亮或變暗，這樣可以讓界面色調更加統一。在微信讀書中背景色是偏藍色調的淺灰色，而不是純灰色，背景對比色是在白色里加入了藍色色相，而不是純白色，整體對比較柔和，給人清爽通透的感覺。
支付寶 Alipay Design 團隊提出過一個配色原則：
以同色系配色為主導，多色搭配為輔。
同色系為統一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時可以讓界面保持色彩上的一致性；由于業務的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設定不同的任務屬性和情感表達；再搭配中性色黑白灰，賦予更多的變化和層次。兩種配色通過主次、使用比例，可靈活運用在業務的各個場景中，具有非常好的延展性。
不同于單一色彩，漸變色不屬于任何色彩，它營造出千變萬化的視覺效果，卻又不會增加視覺負擔。相較于單一的色彩，漸變色的復合性質讓它在界面設計中具有更強的視覺沖擊力，有助于快速搶占視線。如今，這種的色彩正逐漸成為一種潮流，究其原因是目前大量的扁平風格造成 UI 設計的嚴重同質化，人們需要追求更加個性的視覺語言來滿足日益增長的設計需求。下面我們來了解幾種常見的漸變的使用技巧。
色相、飽和度、明度的漸變
色相（H）漸變是指由一種色彩向另一種色彩的過渡，這種漸變因跨度大產生的視覺效果非常明顯；飽和度（S）漸變是指同一種色彩不同純度的過度，其產生的視覺效果比較和諧單調；明度（B）漸變是同一種色彩不同明暗的過度，這種漸變的視覺效果給人一種沉靜的氛圍。
漸變的表現形式
在界面設計中經常看多各種各樣的漸變表現方式，使用最多的有以下幾種：
這個很好理解，是指角度為 0 的線性漸變，是最流行的漸變形式。界面設計中多用在導航欄、進度條、按鈕等元素上，能讓畫面變得精致而通透。例如京東使用橙紅漸變的設計語言貫穿整個 App，從應用圖標到導航欄、按鈕、標簽，全部都運用了這種由紅色到橙色的過渡。仔細觀察發現在很多小標簽上都使用了水平漸變設計手法，使產品看起來更年輕化。
在水平漸變中，通常把輕（亮）的色彩放在左邊，重（暗）的色彩放在右邊，這樣由左向右的方向感剛好與人的瀏覽習慣保持一致。而反過來就會與人的瀏覽視線相悖，應避免。
垂直漸變
即角度為 90°的線性漸變，它通常被用在正方形或豎條形的元素上，如注冊登陸頁，個人中心頭部等。垂直漸變中上下兩種色彩的深淺變化會產生截然不同的視覺效果，上淺下深會讓給人一種凸起的立體感，而上深下淺會給人一種凹陷下去的空間感。例如「紀念碑谷」的背景是采用了單色相和多色相的垂直漸變作為游戲背景，在讓整個畫面豐富的同時又不會太搶奪主體的色彩，使畫面顯得清新透氣而不沉悶。
角度漸變
角度漸變通常有對角漸變和多角度漸變。有角度的漸變相比水平和垂直漸變，它的使用場景更廣，如圖標背板、啟動頁、注冊登錄頁、標簽等。想讓界面更加絢麗、動感和迷人，這時候我們可以考慮多組漸變搭配使用。
色塊漸變
漸變的顏色不只可以運用在一個色塊上，還可以運用在一組色塊上。設計師運用一組近似性色彩，將每個菜單項清晰區分開，讓界面平衡在一個頻率上，這樣的畫面更有節奏感和舒適性。不同于平滑的漸變，色塊漸變不再是單純的背景裝飾，在某些地方還具有一定的功能性，比如使用不同的色塊來分割的列表樣式。Clear Todos 是一款日常任務清單的 APP，它拋棄了傳統的列表樣式，使用了一系列色塊來作為列表的分割，非常漂亮和精致。
徑向漸變
是指色彩以圓心向四周擴散的漸變，是一種模擬光源照射的視覺效果，因此光源是整個畫面的視覺焦點，將關鍵元素放在光源中心就會成為主角。通常被運用到大背景上，如啟動頁、引導頁等。Solar 天氣應用的背景就是徑向漸變，光源擴散的效果營造出一種夢幻般的美感。
和諧的漸變色
漸變色是由一個色彩走向另一個色彩的過程，有著迷人的視覺效果。如果你仔細觀察兩種色彩的過渡關系，就會發現不是每次都會得到滿意的效果，例如紅綠漸變就很糟糕，因為它們兩者是互為對立的色彩，但是如果加入黃色的過渡色就會好很多。原因是當兩種色彩之間超過 90 度就會導致其漸變色看上去不太和諧自然，只有控制在 90 度之內才會產生美妙的變化。如何改善超過 90 度的兩種色相的漸變呢？這時候可以在兩色之間加入過渡色進行調和。例如當從黃色到藍色漸變時，就可以加入紫色作為過渡才能呈現完美的視覺效果。
在搭配漸變色時，盡量只改變其色相（H）、飽和度（S）、明度（B）中的一項，這樣才能創造出和諧的漸變色方案。
調色板幫助我們在設計項目中建立色彩規范、提高工作效率。通過上文對色彩基礎知識的學習，接下來為大家介紹幾種簡單易用的創建調色板的小技巧，以及 Materia design 配色方法和配色網站推薦。
打開 dribbble，每一幅作品預覽頁左下角都有一份自動生成的配色板，很多同學可能不知道這個配色文件是可以下載的。將調色板保存到本地，為自己在創作時提供靈感。在 ps 里的操作步驟是：點擊“窗口—色板”，然后在色板的屬性面板右上角打開“導入色板”，載入剛下載的色彩文件即可。
它也有顏色搜索工具，輸入或選擇顏色值即可搜索相關配色的設計作品。
這種方法也很常用，不需要任何插件，丟一張圖片到 Ps，然后將圖片「馬賽克」處理下就可得到一組配色。例如，我們需要一組同色系的綠色，在網上（建議 unsplash 或 500px 等專業圖片網站）找一張樹葉的圖片，接著將圖片在 Ps 中打開，進入“濾鏡—像素化—馬賽克”，在打開的窗口里調節單元格大小即可。
同時，建議平時多去收集好看的攝影圖片和優秀的配色方案，看的多了就知道什么是好的什么是 Low 的配色，對提升審美也有很大幫助。
△ pinterest畫板
該方法稍微復雜一點，示例步驟如下：第一步繪制一個正方形做底板，填充一個顏色#5354F0；第二步分別在正方形的上和下 1/3 處疊加 20%的白色和黑色；第三步分別在正方形中和右 1/3 處疊加 40%、80%的紫紅色#DF56FA；最后改變紫紅色圖層的混合模式為疊加即可得到一組藍紫色色調的調色板。
Materia design 調色板
Materia design 從生活場景中提煉出 19 個充滿活力的色彩，旨在和諧地協同工作，可用于開發品牌調色板。Materia design 提供了一整套調色板，從原色開始，延伸出其他許多色彩，這些色彩和諧相處，可用于產品設計的品牌色?；A色的飽和度是 500，Google 建議以此作為產品應用的主色調，可以再選擇一種輔助色，并在主色的基礎上進行飽和度，明度變化，構成一套配色方案。
如果上面的色板不能滿足你的需求，你可以選擇一個主色，Materia design 調色板生成工具會為你生成完整的色板。
主色和強調色
在色彩選取時，需要先明確品牌色在界面中的使用場景及范圍。在基礎色板中選擇主色，建議選擇飽和度為 500 的基礎色作為主色，根據設計需要在主色的基礎上增加 1～3 種不同飽和度、明度的色彩建立層次感，再選擇一種強調色突出重要內容或操作，例如 FAB 的背景色。
深/淺背景上的文字
Materia design 通過文本的不透明度建立在不同背景上的深淺對比，對于淺色背景上黑色文字，主文字不透明度 87%，次要文字不透明度 60%，禁用文字不透明度 38%；而黑色背景上的白色文字正好相反；彩色背景上的白色文字不透明度 100%，分割線不透明度 12%。Ant Design 也定義了一套用于界面文字、背景、分割線的中性色，在落地的時候同樣也是按照透明度的方式實現的。
背景
為了提高應用之間的一致性和閱讀的可讀性，背景色根據設計需要選擇純白色或飽和度依次為 50、100、300 的灰色。
顏色是一個很難掌握的概念-因為有無限多種可能的顏色組合，對于很多設計師來說還是一件蠻困難的事，為了讓設計配色變得容易些，下面推薦幾個常用的配色網站，希望能幫助大家在日常工作中節省更多的時間。
Adobe Color
Adobe Color 是一個基于網絡的應用程序和創意社區，提供免費的色彩主題，并且在 Adobe 相應的軟件中也提供了擴展程序，比如我們常用的 Photoshop 和 Illustrator。
Adobe Color 通過拖拽色輪或輸入自定義色值，可以創造出基于相似、互補、三原色、正方形等不同色彩規則的配色方案。除此之外，還支持 CMYK、RGB、HSV 多種色彩模式的配色調整。用法很簡單，點擊顏色塊上的小三角確定基礎色，就會自動生成 5 個基于你所選色彩規則的配色方案，拖動下方的顏色條時相應的也會改變配色方案。如果沒有靈感可以通過頂部導航進入“探索”頁，這里為我們提供了很多提取好的顏色和圖片，有的是攝影作品，有的是設計作品，上方的輪播圖提供的一些其他內容，比如潘通流行色、Adobe 社區和手機端的 APP 等等，非常的實用。
Eva Design System
Eva Design System 是一個基于深度學習算法的配色網站。適用于給我們的產品或品牌生成一個系統的配色方案。右上角可以切換淺色模式和深色模式的對比。
Colorhunt
Color Hunt 是由設計師 Gal Shir 創建的開放調色板集合，每天更新豐富的配色方案。顏色卡片下方可以看到更新的時間和喜歡人數。鼠標懸浮在任一色塊上顯示顏色值，點擊顏色卡進入詳情頁可下載和分享，驚喜的是還可以添加到 chrome 瀏覽器，方便隨時隨地使用。
Grabient
Grabient 是一個非常漂亮且實用的漸變配色網站，支持 CSS 樣式代碼復制、360 度漸變旋轉、自由增加或刪除漸變顏色等功能。設計師可以在色塊下方自由添加和調整漸變的色系、以及線性漸變方向。
當然，以上這些配色工具只是為我們提供方便的，而不是主導我們的，所以在使用配色工具的時候最好是要有一定的理論基礎作為支撐，讓你的配色有理有據，切忌生搬硬套。
對于新手設計師來說，顏色越少越容易把控畫面。色彩層級越精簡，就越容易達到整體色彩平衡，掌握好色彩的功能劃分必然會讓你的配色過程保持思路清晰從而提率。
同時，不管是 2C 還是 2B，很多大公司都構建了自己的設計系統。如果你想學習別人是如何進行配色布局的，最快的方式就是研究他們的設計源文件。
建議設計軟件使用 sRGB 作為色彩空間的默認配置，而不要采用未管理（ Sketch 中默認是未管理），若團隊協作請提前保持色彩空間配置的統一性。如果有需要針對廣色域色彩空間做項目，可以單獨設置該項目文檔的色彩空間為 Display P3 或者 Adobe RGB。
Mac 系統色彩空間配置
建議所有 macOS 用戶都在系統偏好設定的顯示器顏色設定當中換用 sRGB IEC61966-2.1 這個校色方案，可以極大改善系統顯示效能。如果有外接顯示器，也建議使用外接的默認選項，默認選項一般可以發揮出該顯示器的最大色彩性能。
Sketch 色彩空間配置
Sketch 默認顏色配置是 Unmanaged「非托管」， 我們可以在「偏好設置」中為 Sketch 指定默認的色彩空間配置，如此一來每次新建設計文檔將會默認采用我們的設置作為默認的色彩空間，不用每次新建文檔都單獨設置一次。
設置方法：Sketch → 偏好設置(Preferences) → 通用(General) → 顏色描述文件(Color Profile)，修改下拉框選擇器的內容為 sRGB IEC61996-2.1。（其他設計軟件設置方法類似）
如果要更改已有的文檔為 sRGB 色彩配置，可以通過文件——更改顏色配置，在彈出的對話窗里對文件進行色彩空間的更改即可。
其實無論是色彩理論還是配色方法，最本質的東西就那些，更多的還是需要設計師在日后的工作中不斷的摸索和積累。這篇文章全部寫下來耗費了不少時間（小聲 BB：其實每篇都是），抱歉內容確實有點多，但其實已經是收著點寫了。就像大樹一樣，有很多分枝不斷生長，需要了解很多細分出來的深度知識。這也是寫這類文章的樂趣，通過不斷的查閱資料，把過去很多模糊的概念摸清楚了。果然學透一個知識點的最好方式就是把它講出來才能真正為自己所有。關于色彩的知識先分享到這里，希望對大家有所幫助，文中有不嚴謹或錯誤的地方，歡迎大家指正，一起學習成長。
色彩基礎知識
1. 色彩常識
2. 色彩三屬性
3. 色彩的搭配
4. 色彩和光源關系
5. 色彩空間
色彩心理學
色彩對用戶體驗的影響
1. 色彩心理學和用戶體驗緊密關聯
3. 針對色盲用戶群體的設計
4. 流行趨勢對色彩的影響
色彩在UI設計中的應用
1. 色彩的應用
2. App 設計中的色彩搭配
3. 迷人的漸變色
創建調色板及配色工具
1. 從設計作品收集色彩
2. 從圖片取色
3. 自定義色塊疊加
4. 色彩系統
5. 配色工具推薦
6. 關于色彩空間配置(附加內容)
寫在最后
文章來源：優設網 作者：印跡
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天給大家帶來的是如何建立設計師個人的插畫組件庫，因內容過長并知識點過多，請泡杯枸杞觀看。
一、關于個人插畫組件庫的3大疑問點：
1、為什么要建立個人插畫組件庫？
其實最主要目的是為了給自己的插畫提供一個設計軸心，我們可以圍繞著這個軸心創作出更具有效率規范的插畫內容，演變更多的插畫風格，讓我們使用插畫時變得游刃有余，提升率的設計輸出，衍生更多的組件化運營設計與品牌插畫組件庫。（注：按照以下步驟設計，插畫手殘黨也能輕松學會哦！）
2、品牌（產品、項目）插畫組件庫與個人插畫組件庫的區別？
01-規范區別：
品牌插畫組件庫：組件品牌插畫庫前會做很多細致的規范，如：顏色規范/情景規范/光線規范/關節細節處理/景別元素處理等等；
個人插畫組件庫：為了讓我們的插畫更具有靈活性，所以在做個人插畫組件庫時不會做太多的規范，反而為了插畫的衍生要更注重人物構造、比例、小組件等等，目的就是為了成立個人插畫軸心。（注：個人插畫軸心是針對于第一個插畫系統的原型，我們后面的插畫風格衍生都會參照第一個插畫系統的原型，后面會給大家詳細講解）
02-使用效率：
品牌插畫組件庫：使用更加，拖入即可更換組件使用；
個人插畫組件庫：因為我們采用的是不斷迭代式做法，所以在剛建立個人插畫組件庫時，我們的組件替換效率是比較低的，但是在逐漸迭代中，我們的使用效率會逐步提升。
03-拓展力：
品牌插畫組件庫：因為有很多規范的約束，所以拓展力偏弱，不過針對于自己的品牌已經足夠了，它本身就是為了自己的品牌服務的；
個人插畫組件庫：因為從我們插畫組件庫的層級分區來看本來就是為了衍生拓展，所以拓展力非常強，不僅可以衍生出相同類型的插畫風格，還可以衍生出不同類型的插畫形勢，甚至可以以個人插畫組件庫為基礎創建單獨的運營設計組件庫，或者升級為品牌插畫組件庫。
3、個人插畫組件庫哪些人最應該去建立？
我認為UI設計師是最應該去建立的，在我們線上接觸的banner、功能頁、啟動頁、海報等等，很多都可以用到插畫去設計，不管是針對于在公司還是針對于自己私下接私活都是一大利器，可以讓你的完成甲方的任務，更大程度保證設計的統一性以及輸出的質量。（相信大家都遇到過到處找插畫素材拼湊banner的時候吧，有了個人插畫組件庫就不用愁了）
當然除了UI設計師還有插畫設計師、平面設計師、美工也都可以去建立插畫組件庫，不過具體還是要看每個人所接觸的不同設計內容，有些設計師的設計內容很少接觸到插畫部分，或者很少接觸到可以組件化的插畫（比如材質復雜、偏手繪插畫），所以就沒有必要去建立插畫組件庫。
二、如何建立個人插畫組件庫？
想要建立個人插畫組件庫就要從它的本質特點出發去考慮，個人插畫系統歸納下來一共有三大特點：可復用、適應力強、效率高。那么接下來我會圍繞著這三點來闡述該如何制作UI設計師個人的插畫系統。
1、可復用性方向出發設計
可復用性是做插畫系統的一個基礎，如果不能解決可復用問題，那么做個人插畫系統根本沒有任何意義。
如果想要達到插畫可復用性，我們就要把插畫內容進行不同的拆分，在它可替換的部分都作為一個復用樣式，讓它可以更換不同的組件，那么我的解決方案有五步：
第一步：
設定基礎人物組件（肢體細節、型體比例），規范組件內容。如果你是第一次做人物組件，可以多在網上找一些可參考內容：
下圖是我做的一個基礎人物組件案例：
從人物組件上面來看我一共把它們分為了9個小件，它們分別為：頭部、上身、上臂、前臂、手掌、臀部、大腿、小腿、腳掌。
從人物比例來看，男性比例為10a，男性略高，上身寬大，整體壯碩；而女性比例為9a，稍矮于男性，纖細苗條。不管是男性還是女性整個身體構造簡單常規，符合真實人物比例，有利于后期的組件改造。（第一個插畫組件最好使用常規比例，后面會提到為什么要這樣做）
在人物組件上的劃分并不是固化的，你可以把它細化分為9個部分，也可以分為7個部分，如果分為7個部分就把上臂與前臂統一融為手臂，大腿與小腿統一融合為腿部，到底要怎么去進行組件化，還是要取決于自己設計的插畫人物特性。
除了男性、女性外也可以建造更多的人物進來，例如老人、小孩、嬰兒...人物越多，后續的延展空間也越大，前期為了更快的制作插畫組件庫，可以先建立1到2個人物，后續可以逐步完善迭代。
第二步：
為了后期人物的動態延展，我們可以用人物組件制定一些高頻的人物基礎動態，例如標準站姿、坐姿、跑動等，以便于我們插畫的延展，圖示如下：
做人物基礎動態可以讓我們在后面的插畫設計上少花很多時間，例如工作中要用到跑步動態時，那么就可以直接用人物基礎動態里面的跑步動作進行添加人物細節，會節省很多工作時間，提升工作效率。
第三步：
有了人物組件的基礎，我們就可以開始設計插畫的風格。
在設計前我們可以多參考一下別人的插畫風格，這里所說的風格主要是指插畫的處理方式，比如：顏色的選擇、表情的處理、衣服材質的處理、曲線直線的選擇等。
我們需要注意的是建立第一個插畫系統時可以先做一個風格簡單的，不僅容易調節組件也有利于后期的風格衍生，以下是我為人物添加的簡單基礎風格（ 特點：純色/完全按人物組件貼合設計/無漸變）：
第四步：
設計人物組件（可以讓你的插畫在不同的場景應用不同的動作/服裝/表情/膚色等）
1/發型：
在發型上面我們可以進行一些人物的區分，可以適用于不同的場景，例如：男性第一個適用于公司場景，第二個適用于學生，第三個適用于軍人...
2/膚色：
做膚色的變化最主要原因是讓插畫適應于國際化，在不同的場景中可以加入不同膚色的人物。
3/表情：
表情是為了更好的體現出人物在環境中的狀態，如：領取紅包插畫，人物的表情就應該是開心或者大笑。
4/角度：
在插畫的角度上，我們采用了最常用：正面、半側、正側，讓它在插畫中的適應力變得更強。
5/紋理：
我們目前設計了6個基本紋理，基本紋理不僅可以設定于服裝中，還可以設定于輔助元素以及背景中。
6/服裝：
在整個人物組件中，分為3大塊可替換服裝組件，分為別：上身、下身、鞋子。例如上身可以替換為短袖、長袖、衛衣、背心等，同時在它的下一個層級還可以替換服裝紋理、服裝動作、服裝顏色。
結合以上的人物組件我們就可以組合出各種不同的動作，如下：
第五步：
設計通用組件庫：
通用組件庫中的元素最開始要用黑白灰來表達，因為在不同的場景中元素的運用也有很大差異，例如花盆作為近景元素會多許多細節，作為遠景元素可能只是作為線條來點綴，這些表達方式我們可以在日后使用過程中添加到它的子級庫即可，這樣可以讓我們在使用組件庫時更加靈活，也有利于我們迭代組件庫，后面會逐一的講解。
這5個步驟下來我們的可復用性插畫就做好了，那么接下來看看運用效果：
我們可以看到以下4個場景，運用到了不同的景別處理方式，例如：第一組為背景漸變；第二組背景則采用了大面積的純色；第三組背景用線性表達；第四組則用淺色面表達。
這也是與品牌插畫組件庫的很大區分點，雖然都是可復用性插畫，但是品牌插畫組件庫大部分是使用現有的、具有規范的，而我們所做的個人插畫組件庫可以用同一個輔助元素增添不同的插畫表達形式，不斷迭代子級，迭代的子級越多它的內容選取性就越高，后續就可以直接拖入使用，比如圖4中的植物就有2種狀態，第一種是顯示部分顏色，第二種則直接為灰色。（注：后面會詳細講解）
以下活動頁中，背景元素也可以運用同樣的方法，在我們的背景組件庫中調取想要的單個插畫元素，把它們組合放入活動頁背景中，進行再次調色得到不同的背景組合，以下三種背景組合都可以相互替換使用。
2、讓你的插畫具有極強的適應力
適應力強是指我們的插畫系統可以匹配大多數的產品，因為個人插畫組件庫是以設計師身份做的，我們會面臨各類產品，而各類產品風格都會有不同的變化，要解決這一點我們可以使用以下三個方法：
方法一：改變人物結構
例如：你想為產品A做一些插畫類的功能頁或banner時，發現你現有的第一套插畫組件庫并不符合產品特性，產品A想表達更多夸張的成分，而我們所做的插畫系統顯示更多的是柔和與大眾，這樣就完全不匹配，那么我們就要去改變一個基礎點，那就是人物結構，通過人物結構的重組我們可以得到想要的夸張效果，那么我就男女各舉一例結構重組對比圖，如下：
我們為了在身體結構中達到人物夸張的效果，在原有10a比例不動的情況下對原本的身體結構做了重大調整，男性：上身的縮短，下身的延長以及手部腳部的突出；女性：整體更加硬朗，手腳放大，腿加長。
如果把他們用相同的插畫風格表現出來，就會出現如下效果：
當你在做人物結構調整時，你會發現有一個常規的人體結構作為基點去設計是多么重要，也就是之前所提的為什么第一版插畫組件讓你做常規的，因為如果不是常規人體結構，調整起來會非常麻煩，就很難有參考意義。
方法二：改變插畫風格
除了人物結構外我們還可以更多的考慮插畫風格，通過不同的插畫風格去適應不同的產品，例如：線面/漸變/雜色/極簡...同樣我就男女各舉一例，如下：
上圖改變風格后，男性的風格則更偏向于線條的表達與高亮色調；女性的風格則簡單直接，更注重凸顯配色的碰撞。
方法三：改變人物結構+插畫風格
在上面兩種方法中除了已有的基礎人物結構A與插畫風格A，我們還得到了人物結構B、C與插畫風格B、C，如果我們用人物結構B（或C）與插畫風格B（或C）結合又可以形成新的插畫狀態。
按照這樣的方式下來我們就可以逐步添加自己的插畫系統，假如當你的插畫系統人物結構有5組、插畫風格有5組時，你就可以組合出25組不同的插畫，這樣你的插畫系統適應能力就極強了，甚至你要為產品做插畫系統時，也可以大幅度參考你的個人插畫系統，當然這一切都是需要自己去慢慢迭代添加的。
3、用軟件規范插畫組件庫（層級詳解），提升應用效率
為了更好的替換組件，提升輸出的工作效率，我們可以從一開始就使用軟件對插畫進行管理。市面上可以提供復用樣式的軟件也蠻多的，這里我就使用應用率最高的Sketch來進行講解。
首先我給大家講一下我的插畫組件庫的構成，我的插畫組件庫一共分為了5大塊，分別為：人物組件庫、非常規人物組件庫、動物組件庫、輔助元素組件庫、輔助背景組件庫，而這5大塊中也細分出了很多小層級，我就一一為大家分析下我所用的層級。
我們可以從以上圖中看出從風格分類開始直至最小的組件，我用到最多的層數是5層。
如果大家看的有點懵，我們就拿一塊從層級1到層級5舉例說明：
風格分類（A）-角度分類（正側）-四大組件（下身）-動作（B）-顏色（B）
這里所用的是sketch復用樣式中的“套中套”，“套中套”的組件方式看似復雜，其實挺簡單的，并且在軟件中換取都在大組件內，因為不是軟件講解所以就不帶入過多的軟件知識。
在制作時我們不要想著一次性就做出很多小組件，比如你想做表情時，一來就想做10多20個全部包含完，其實沒有必要，我個人是比較建議最開始小組件做個3-5種常用的就可以了，因為組件庫是要不斷添加優化的，所以可以在后續工作應用中再不斷的添加。
有了層級的劃分，我們可以用sketch的復用樣式簡單、的規范插畫組件庫，想要覆蓋替換組件內容也是十分方面，如下：
2/非常規人物組件庫
除了常規的人物組件庫外，我還單獨羅列了非常規人物組件庫，這一類組件庫主要是作用于人物特殊的動作形態，比如下面3個透視類的插畫動作形態，這些動態與常規的插畫組件庫的內容很多是不互通的，比如臉的角度、鞋子的角度、身體的透視尺寸，所以我們就單獨給他羅列一個非常規人物組件庫。
都是同為組件庫，當然也有可替換內容，非常規人物組件庫與常規的人物組件庫的層級邏輯有所不同，常規的人物組件庫是用小組件替換人物動作，但是非常規人物組件庫是先替換整體的動作然后才可以替換小組件，這也是對他的特殊化管理。（注：不想舍棄它，又不想為他做出更大的調整，所以就單獨讓它成立出來。）
根據非常規組件庫的設定給大家做個小案例：
以上可以看出我在這個透視化的插畫人物中可以替換表情、發型、紋理、上身、下身。
3/動物組件庫
我這里做的動物組件庫是用來輔助人物以及調和場景的，所以在層級劃分上并不會做的非常細，滿足我的日常插畫需求即可，當然如果你想把動作組件庫做的非常細，那么可以參照人物組件庫的層級來劃分層級。
根據我使用的動物組件庫層級，給大家舉一個正確小案例與錯誤小案例，先看下錯誤小案例：
可以看到下圖（狗子）是一個非常粗糙的動物組件庫，里面只能替換動作以及動物的動作，當選在狗子的狀態下，狗子除了換動作沒有其他的組件選項，雖然我想讓動物組件庫簡化，但是也不至于什么都不能替換。
接下來看看正確的案例：
我們可以看到在貓咪的狀態下就有很多組件可以選擇，不僅可以替換貓咪的動作，還可以替換展示形式（展示形式我是按照景別來做差異化，當然也可以用其他方法）、貓咪表情以及貓咪的顏色，這樣的動物組件庫已經完全能夠滿足我的設計需求。
4/輔助元素組件庫
輔助元素組件庫層級最好要添加景別，因為我們經常會遇到同一個元素在不同產品中體現出不同的景別，如果不區分，在選取組件時就非常的傷腦經，經驗之談、強烈要求。
為了大家更好的理解，我給大家舉一個小案例：
我們可以看到我不僅可以切換元素，還可以切換景別以及顏色，至于其他的小組件我并不需要，因為這些已經足以滿足我的日常運營設計需求，這個層級劃分簡單實用非常推薦。
5/背景元素組件庫
背景元素組件庫一共分為兩種類型，分別為：組合場景背景與紋理背景。
組合場景背景：
組合場景背景是用輔助元素組件庫拼湊而來，它是一個可以直接用的完整場景，想要替換的組件如果在輔助元素組件庫能夠替換，那么在背景組件庫也是可以的。（注：這里牽涉到組件庫的重組調動，在后續出的文章中會詳細提到）
上面的插畫由白天變為黑夜只需要用組件庫就能輕松完成，而這些組件庫也不是現做的，全部是輔助元素組件庫里提取過來的，也就是我所說的組合場景背景是用輔助元素組件庫拼湊而來。
大家可以發現插畫中山上的小房子只用一個組件就可以全部替換顏色，而左右兩邊的樹卻要做6次不同的替換，樹木需要多次替換的原因這就是沒有做重組，如果想要相同元素做相同的替換，那么建議在調換過程中重組組件，優化層級。
紋理背景：
紋理背景相對于來說就是最簡單的，它里面只存在紋理的不同樣式，并且只可更換顏色。
三、人物插畫組件庫如何結合到運營設計中？
1、創建常見運營設計規范
在做設計前，我們先要做好運營設計的規范，以便于組件庫的插入應用。
那么我就用卡片彈窗來舉例：做設計前我們先確定卡片內容，當內容確定后，根據內容進行卡片的運營設計規范：
我們需要注意的是初步規范里并不需要涉及到用什么字體，也不需要羅列出插畫的尺寸規范，我們可以在后面的設計中一步步去實現。
2、結合運營設計的兩大方法：
當規范做好時，我們就可以利用規范去制作相應的組件庫，利用組件庫來結合運營設計，按照不同的情況可以分為以下兩種方法：
1/重組組件庫（無人物動態組件的情況下）
在一些運營設計中，如果我們要用到的人物動作之前并沒有做過，那么就需要我們重新設計人物動作，設計完后再把可以重組的人物組件拖到我們現在的組件中進行重組，分以下幾步進行：
第一步，根據卡片的規范做出卡片的設計內容，如下：
第二步，把設計好的內容分板塊，以便于組件庫的層級劃分。在這里我把他們一共分為了4個大塊，分別為：文字組件、人物組件、輔助裝飾組件、背景元素組件。
第三步，在大的板塊下劃分小組件，結合小組件就可以得到我們組件庫的層級，可看下圖：
在小組件里，很多都是個人組件庫里原本有的內容，這時我們就可以把它們拖進來進行重組。
假如你替換的元素不夠用，那么就需要你自己手動設計了，這樣也能反過來擴充你總的人物組件庫內容，其實組件庫的內容就是這么一點點迭代添加的，當你的組件庫內容越來越多時，你的設計成本就會越來越低。
三步下來我們就把組件庫融入到了運營設計中了，有了新的子級運營設計組件庫。
2/直接替換（有人物動態組件的情況下）
如果你做的運營內容組件庫里都有，那么就可以按著規范直接拖入即可，也沒有必要去進行重組。
總結：
總的來說組件庫的建立是一個龐大的工程，在你有了基礎架構的時，你就要慢慢往里面塞更多的內容進行填充，當你的內容足夠多時它就可以反向為你提供更多的便利，它是你的寶貴的設計資源庫。
因為這期的內容實在太多，所以插畫組件庫的應用、運營設計常用模塊組件案例、重組技巧以及品牌插畫組件庫的建立我會另外抽時間給大家總結。（做案例太費時間希望大家諒解）
參考資料提取：
我為大家提供了一些組件庫的可參考性文件，里面包含成套組件庫（sketch）、成套的插畫圖片、宣傳動畫、一些參考性的圖片（構圖、表情、發型等等）。
文章來源：tob.design 作者：黑獅力
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
元旦過后，新的一波工作又要開始了，我在開始準備新一輪匯報材料的時候突然想到了一個問題，不知道鐵子們在往年參加設計評審的時候，有沒有總被老板 diss 設計稿里“太空了” “不夠飽滿” 這些個問題呢？
我猜測應該99%的鐵子經歷過，我也不例外，從校招進到第一家公司就開始被植入頁面需要利用好每一像素的理念，搞得像北京房價一樣寸土寸金，生怕被浪費了；思前想后為了大家不重蹈我的覆轍，所以新年的第一篇，咱一起來聊聊排版的問題：
如果你看過我過往的文章，也許會對我的排版多少有點印象，夸張的大字，極強的對比，還有一些微妙的層級關系；坦誠的講，我的風格揉雜了 2 種設計體系 —— 瑞士風格 / 擬物風格；
整潔、嚴謹、工整、理性化、實用的特征是瑞士平面設計的精神所在；這種一絲不茍，傳達準確的風格，即所謂瑞士國際主義風格。簡單的說，由于 Swiss Design 這種風格簡單明確，傳達功能準確，因而很快得到世界范圍內的普遍認可，成為戰后影響最大的一種平面設計風格，也是國際最流行的風格，因此，又被稱為國際主義平面設計風格；
簡單的說，瑞士的這種設計風格典型的代表就是我們看到的雜志，其中有 3 個特點：講究網格 / 非常理智的克制顏色的使用 / 層級關系；有趣的是，審美和潮流是循環的，隨著時代的發展，越來越多的app開始重新挖掘出來瑞士風格并加以使用，比如我們iOS系統自帶的應用們，Spotify：
年少的時候，我經?？粗@些個app會不禁的問，為什么在沒有一張圖片的情況下還能如此好看？這些年終于明白了前人良苦用心：文字是內容，同樣也是構成；是信息，同樣也是裝飾；簡單可以理解為，不管在平面還是網頁亦或者是UI界面，在沒有可用的裝飾下，信息本身要承擔起裝飾和傳達的雙重功能，這就是瑞士風格的核心本質。
iOS是擬物的典型代表，網上對于這塊的講解已經過于飽和了，我也沒必要贅述；那么這一趴，來聊聊對我產生深遠影響的錘子科技吧。我第一次接觸到 smartisan OS 并沒有覺著多么驚艷，潛意識里只不過是覺著把 iOS 的圖標畫的更漂亮了一點而已…
但當我打開下圖這個頁面的時候，我意識到我對擬物的理解還是淺薄了，第一次被光影的層次震撼到：
通過光影塑造了一個三維空間，讓整個畫面豐富飽滿，也打破了我幼稚的設計觀，PS.不管錘子科技現在如何，我依然敬佩 Paco / 方遲 / 羅子雄的設計團隊為這個行業做出的貢獻，respect！
毫無保留的說，我的設計就是二者的融合，以 層次對比 作為核心理念。
啰嗦了半天，趕緊進入正題；如果你是一名產品體驗設計師，一定聽說過 “奧卡姆剃刀” ，這個定律通常用在交互鏈路的設計上（意思就是在用戶路徑中沒必要的步驟，省了就完事了），“如無必要，勿增實體” 即簡單有效原理；
通常來講，如果想要不平，把二維空間轉化成三維空間是必要的一步，需要在Z軸上下功夫；如果你恰巧也是一名攝影愛好者，可以想象下照相機的焦距和景深，工作原理是相同的，需要 前景 / 主體和背景 三個層次；當然，虛實的對比對信息的呈現和層次的拉開是極其重要的，這里需要通過景深來控制效果，你可以通過 photoshop 濾鏡-模糊畫廊的“場景模糊”來做到：
另外，空間的感覺想要被突顯，那么“光影和空氣”的價值就可以無限放大了，按照如上所說的結構，把內容和自然物質擺進去就好了，甚至可以做到舉一反三（比如不同顏色的氛圍，我就不展開了）：
整個case下來，你會發現用光來聚焦在信息上，自然而然就形成了我們說所得 “信息優先級”；有點時候空氣和光影的飽滿程度超乎你的想象，這種自然存在的物質可以很好的幫助畫面分層，以達到填充的效果，并不是一定要依賴于實體化的裝飾。
本來不打算再開一個章節說這個，但還是覺著很有必要再說下（我好糾結），作為PPT來講，ta的主要用途分為兩種：其一是給人看的，其二是給人講的；不管是哪種，盡可能的簡化文字，是對輸入者關愛；
以上圖為例（實名diss自己的作品），坦誠的講左邊的部分大多數觀者是不會有心思來看的，按照視覺系統的處理，這部分就會被當成一個“面”而被忽略掉，這種情況下右邊顯得有力很多，也能幫助觀者聚焦信息，所以還是那句話，能不寫的就別寫，能少些的別多寫，保持信息的密度也是設計師必要的職責之一。
想問一個問題，鐵子們覺著UI的本質或者作用是什么？從我個人的角度來講，UI設計的本質就是對信息的整理歸類和編排，沒有什么比信息更重要，如果貿然為了飽滿加入一些裝飾元素，很有可能是本末倒置，得不償失。這就像喝酒一樣，喝醉很容易，但微醺的感覺才是最棒的，今天是元旦后的第二個工作日，希望你能有個好心情迎接美好的一年～
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
當今是色彩的世界，物體顏色的不同，帶給我們的情緒也截然不同。想要掌握顏色，首先就要研究顏色的本質。
顏色分為光學三原色和顏料三原色。
1. 光學三原色
光學三原色由：紅、綠、藍組成。
色值分別是：
2. 顏料三原色
顏料三原色由：品紅、黃、青組成。
色值分別是：
理論上，原色可以調制出絕大部分的其他色，而其他色都調不出原色。
那么，這兩種有什么區別呢？
3. 區別
光學三原色和顏料三原色最主要的區別就是他們的混合原理不同，分為相加混色和相減混色。
光學三原色為相加混色（可以理解為光的疊加），混合后顏色的明度提高，三色混合即為白色。
相反，顏料三原色采用相減混色（可以理解為光的吸收），混合后顏色的明度和純度都會下降，三個混合即為黑色。
在設計中我們可以區分為 RGB（光學三原色）和 CMYK（顏料三原色）。
RGB 模式本質上與 CMYK 模式沒有區別，只是產生顏色的方式不同。顯示器采用RGB模式，就是因為顯示器是電子光束轟擊熒光屏上的熒光材料發出亮光從而產生顏色，當沒有光的時候為黑色，光線加到最大時為白色。而打印機呢？它的油墨不會自己發出光線。因而只有采用吸收特定光波而反射其它光的顏色，所以需要用減色法來解決。
運用場景：
冷暖色由三種原色、三種間色和六種復色組成的系統就稱為十二色環，從紫色至黃綠為冷色，黃色至紫色為暖色。
冷色可以讓人聯想到海洋、天空、雨雪等，讓人產生理智、寒冷、沉寂的感覺。
暖色可以讓人聯想到火焰、太陽等，讓人產生溫暖、熱情、開放的感覺。
實際案例中，冷暖色調的搭配，直接決定了觀賞者的第一感官。觀賞者第一眼的情緒感觸，就由此而來。
顏色的三個屬性分別為：色相（Hue）、明度（Brightness）、飽和度（Saturation）。
1. 色相
色相指的是這些不同波長的色的情況。波長最長的是紅色，最短的是紫色。
色彩是由于物體上的物理性的光反射到人眼視神經上所產生的感覺。色的不同是由光的波長的長短差別所決定的。把紅、橙、黃、綠、藍、紫和處在它們各自之間的紅橙、黃橙、黃綠、藍綠、藍紫、紅紫這 6 種中間色——共計 12 種色作為色相環。在色相環上排列的色是純度高的色，被稱為純色。
2. 明度
明度是表示色所具有的亮度和暗度。計算明度的基準是灰度測試卡。黑色為 0，白色為 10，在 0~10 之間等間隔的排列為 9 個階段。
色彩可以分為有彩色和無彩色，但后者仍然存在著明度。作為有彩色，每種色各自的亮度、暗度在灰度測試卡上都具有相應的位置值。彩度高的色對明度有很大的影響，不太容易辨別。在明亮的地方鑒別色的明度比較容易的，在暗的地方就難以鑒別。
3. 飽和度
飽和度是用數值表示色的鮮艷或鮮明的程度。
飽和度為 0 時，就是黑白灰。有彩色的各種色都具有彩度值，無彩色的色的彩度值為0，對于有彩色的色的彩度（純度）的高低，區別方法是根據這種色中含灰色的程度來計算的。
1. 單色
單色指的是某個顏色純度的變化，就是在原有色上疊加 10%~90% 的白色/黑色得到的一個顏色。
這種方法運用到產品中，會給人一種樸素、低調干凈的感覺；同時，也會給人一種單調的感覺。單色的顏色搭配適合沉浸式的產品中使用，不會因為色彩而打亂用戶的體驗。
產品案例：MUJI
2. 互補色
互補色是指在色相環上對立（180°）的兩個顏色。
色彩中的互補色有紅色與綠色互補，藍色與橙色互補，紫色與黃色互補。
補色并列時，會引起強烈對比的色覺，會感到紅的更紅、綠的更綠。
互補色是很難把控的一種色彩搭配。由于色彩沖擊力極強，用好了可以達到視覺峰值，反之則會很“村氣”
3. 鄰近色
鄰近色是指在色環上相鄰的兩三個顏色，在色相環上相距 60°
它們色相彼此相近，冷暖性質一致、色調統一和諧、感情特性一致。鄰近色是選擇相近色彩時很不錯的方法，可以在同一個色調中制造豐富的質感和層次。一些效果不錯的色彩組合有藍綠色、藍色和藍紫色，還有黃綠色、黃色和橘黃色等。
4. 對比色
對比色是人的視覺感官所產生的一種生理現象，是視網膜對色彩的平衡作用。指在相環上相距 120° 到 180° 之間的兩種顏色。
對比色能使色彩效果表現更明顯，形式多樣，極富表現力。需要注意的是，互補色一定是對比色，但是對比色不一定是互補色。
1. 光源色
物體只有在光的照射下我們才能看到他們的顏色。
發光體發出的光，形成了不同的色彩，我們將這些色光稱之為光源色。
2. 固有色
固有色就是我們平時看到物體的顏色。
比如在正常光照下我們看到一個物體是紅色，那他的固有色就是紅色。
3. 環境色
環境色是物體周圍環境的顏色。
環境色對我們看到物體顏色的影響非常大。大家平時肯定也遇到過一個物體在不同的光照下，呈現出來的物體顏色也不盡相同。比如，一個在藍色天空下的蘋果會呈現部分淡藍色，就是環境色的影響。
1. RGB
RGB 色彩模式是工業界的一種顏色標準，是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB 即是代表紅、綠、藍三個通道的顏色，這個標準幾乎包括了人類視力所能感知的所有顏色，是目前運用最廣的顏色系統之一。
2. HSB
在 HSB 模式中，H(hues)表示色相，S(saturation)表示飽和度，B（brightness）表示明度。
3. HSL
在 HSL 模式中，H(hues)表示色相，S(saturation)表示飽和度，L（Lightness）表示明度。
4. HSB 和 HSL 的區別
HSB 和 HSL 都是表示色相、飽和度和明度，不同的點在于應用開發中，不同開發語言下可調節的明度值名詞不同，所以這兩個格式不用過于糾結哪個用的更多，具體使用中就是需要哪個用哪個。
1. 黑色
黑色代表著品質、權威、嚴肅、穩重、高級。它是所有顏色中最有力量的，黑色+金色凸顯高貴感，黑色+紅色凸顯時尚感。
黑色是永不過時的顏色。
2. 白色
白色代表純潔、信任、樸素、簡單。黑色和白色經常會被用作無色，這兩個顏色沒有色彩傾向，屬于中性色，所以常常被忽略掉。在界面設計中，白色常常被用作背景色，提高畫面明度，凸顯其他內容，提高文字的易讀性。
3. 紅色
紅色代表喜慶、熱情、奔放、自由、歡樂。它是很強勢的顏色，一出現就會使人熱血沸騰，常常出現在電商活動中，讓人有購物的沖動。同時，紅色也有一種警告的含義。一些產品高危操作的 Button，都是用紅色來提醒用戶。
4. 藍色
藍色代表冷靜、商務、未來、科技、安全，它是一種比較理智的顏色，在色彩心理學的測試中發現，幾乎沒有人對藍色反感。主色調用藍色的太多了：知乎、Twitter、Behance、釘釘等，藍色的運用給用戶一直安全、放心的感覺。
5. 黃色
黃色代表輝煌、高貴、信心。它的明度極高，雖然沒有紅色給人那么強烈的感官，但是黃色給人一種警示的意思。黃色經常會以高貴的含義被用到：網站的 VIP。
6. 綠色
綠色代表健康、活力、生命、安全、和平、寧靜。綠色可以治愈心靈，當你不開心的時候，看一下綠色的東西，會讓你的愉悅值增加。它在生活中用到最多的含義是安全：綠色通道、綠燈等。
7. 紫色
紫色代表浪漫、時尚、性感、夢幻、創造力。紫色+粉色經常在女性化妝品被用到，紫色在自然生活中很少看到，所以也有一種稀有、高貴的感覺。
1. 數量
一個頁面中盡量不要超過 3 種顏色（黑白除外），顏色過多會讓用戶的興奮值上升，不易長期查看。
2. 統一性
每一個產品都有自己的主色調，所有的頁面的色彩搭配都要和主色調呼應，主色調的合理運用直接關系到用戶對產品的信任值。同一組件、場景中，顏色使用要保持一致，切忌“自由發揮”，毫無規范可言。
3. 60-30-10原則
60%、30%、10% 的原則，是達到色彩平衡的最佳比例。在 60% 的空間使用主色，可以運用到導航欄、按鈕、圖標等關鍵的元素中，使之成為整個 App 的視覺焦點和色彩關系；30% 的空間使用輔助色，可以平衡過多的主色而造成的視覺疲勞；最后剩下 10% 的空間為點綴色，可以用在一些不太重要的元素又需要區分的時候。6:3:1 原則構建了一種豐富的色彩層次，讓界面看上去和諧、平衡和不雜亂。
4. 顏色禁忌
禁用純黑、純灰，純黑和純灰會使用戶陷入負面情緒中，可以在黑色和灰色中加入一些色調，讓顏色看上去更柔和，另外純黑色看時間久了會使人疲憊，在實際產品中，也很少有用純黑的。
5. 文字中的使用
超鏈接顏色用藍色，為什么呢？
最早期電腦中用的是深灰色背景+黑色字，那時候能用非黑色最深的顏色就是藍色，所以這個習慣一直延續至今。這種用戶習慣非常一致的情況下，盡量不要去改顏色，因為改成別的顏色就會顛覆用戶認知，學習成本就會增加。
6. 卡片陰影
一定不要用純黑色陰影，陰影的顏色會受到環境色和固有色的影響，對于有顏色卡片的背景，盡量使用比卡片更深的同色系顏色來調陰影，會使得陰影更干凈、整潔。
1. Wbgradients
網站鏈接：https://webgradients.com/
Wbgradients 是一個在線調整漸變色的網站 ，可以根據你想要的調整效果，同時支持復制 CSS 代碼，可以更好的與開發對接。
網站鏈接：https://www.grabient.com/
Grabient 是一個非常漂亮且實用的漸變配色網站，支持 CSS 樣式代碼復制、360度漸變旋轉、自由增加或刪除漸變顏色等功能。設計師可以在色塊下方自由添加和調整漸變的色系、以及線性漸變方向。
3. Color Grid
網站鏈接：https://www.0to255.com/740941
該網站隨意選色值，它自動換算出已選色值的 32 種明度色值，簡單易用。
4. Eva Design System
網站鏈接：https://colors.eva.design/
Eva Design System 是一個基于深度學習算法的配色網站。適用于給我們的產品或品牌生成一個系統的配色方案。右上角可以切換淺色模式和深色模式的對比。
5. Color Hunt
Color Hunt 是開放的調色板集合，可以添加到 chrome 瀏覽器，方便隨時隨地使用。
文章來源：優設網 作者：友設青年
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前文的原子設計中我曾經講過，原子是構成所有元素的最小單元，沒有辦法再被細分。它通常對應著產品設計中的通用樣式及構成組件的最小顆粒。而顏色，作為整個設計系統中極為重要的原子之一，在心智模型中占據了關鍵的地位。
我們看到紅色能夠感受到熱情、興奮和危險，看到綠色時往往就感受到安全、自然和平靜?？梢哉f，顏色調動我們的情緒只需要一瞬間，而且它在我們的記憶中可以停留更久。
接下來，我結合公司目前的業務CROV Dropshipping（以下簡稱DS），來進行色彩體系的探索，以輸出一整套的色彩方案。但愿這次探索能夠給予各位一點啟發。
大綱走起：
CROV DS是針對美國市場的線上一件代發平臺（類似阿里巴巴的一件代發業務），屬于跨境電商B2C行業。平臺幫助用戶無需任何初始成本、無需囤貨即可順利開展電商之路，時間靈活可控，讓用戶專注于銷售本身。
目前CROV DS業務日益繁雜，但是除了品牌色之外，輔助色的定義過于隨意。而且隨著業務場景的擴展，臨時增加的顏色很容易被遺漏在某個不知名角落的畫板中，導致一次性用色的風險。（tips：一次性即前一篇我所講到的用完即扔、未被復用的設計）
而且用色本身的隨意也導致研發還原結果的不統一，一處地方色彩各異的現象比比皆是。
因此，我們需要基于我們自身的業務特征來產出一套足夠完善的色彩體系，讓業務從用色上達成基本的一致統一。
我們設計師在定義顏色時，更多的是直接在色板上進行取色，但這樣的取色方法存在諸多弊端。
增加決策
可能很多設計師選色時會有這種情況，一會覺得這個顏色臟了，一會又覺得那個顏色太刺眼了，有時候完美主義作祟，為了得到一個滿意的顏色甚至花上大半天。這種情況尤其在多色搭配時更為嚴重。
其實這和不用網格系統來布局是一個道理。（注：網格系統是一種能夠極大提升布局效率的方法，后面會講～）
色板中取色的范圍趨近于無窮。如果將HSB模式下的單個H、S和B作為一個最小單元格，那么我們可以選擇的格子高達數百萬個。顆粒度過細的情況（其實根本就沒有顆粒度）導致我們在取色時往往會被迫進行反復的微調和嘗試。
缺乏秩序和邏輯性
直接在色板中取色主要依賴的是”直覺“這種相對感性的存在。
比如一個按鈕的狀態可以包括normal、hover、pressed、disable等多個狀態，如果我們僅僅靠自己的直覺自由調整明度和飽和度，最后的配色方案其實缺乏內在的邏輯性和秩序性。
難以復用
對于B端這些偏后臺工具、場景復雜的業務，顏色運用得往往也比較廣泛，如果我們沒有一套完善的色彩體系，那每次一遇到新的項目及業務場景需要用到新的顏色時，之前定義的顏色難以復用，導致我們需要重新定義顏色。而且這種相對主觀的方法也缺乏說服力，難以體現專業度。
而如果設計師提前定義好一套色彩體系，一方面只需要在對應的色板中選擇即可，大大減少了設計決策。另一方面色彩體系所提供的不同色彩梯度也便于各個需求、業務場景的復用。而且色彩體系富有邏輯和秩序，因此從中挑選的顏色也同樣是這樣，顯著降低設計師依賴”直覺“所帶來的主觀和不可控。
Alipay Design團隊提過：
以同色系配色為主導，多色搭配為輔。
同色系為統一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時可以讓界面保持色彩上的一致性；由于業務的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設定不同的任務屬性和情感表達；再搭配中性色黑白灰，賦予更多的變化和層次。兩種配色通過主次、使用比例，可靈活運用在業務的各個場景中，具有非常好的延展性。
接下來我以DS項目為例進行色彩體系探索——
首先，所有的色彩模型統一采用HSB模型進行，正如Ant Design設計團隊說的那樣，這個模型利于調整色彩時對顏色有明確的心理預期，同時便于團隊溝通。
這里再簡單普及下HSB模型。H指的是色相（Hue），S指飽和度（Saturation），B指明度（Brightness）。S控制顏色混入白色的量，S值越高，意味著混入白色的量越少，顏色也就越“純”。B控制顏色混入黑色的量，B值越高，意味著混入黑色的量越少，顏色也就越“亮”。（通俗點說，它們分別代表了明色區域和暗色區域）
Crov Dropshipping基于其時間自由靈活、可兼職副業、成本風險低的業務特征，使得對應的用戶群越來越多的集中在年輕一代的e-tailer（線上零售商）當中。他們不同于我們常規認知里那類傳統的retailer（線下實體零售商），大部分的DSer擁有自己的事業和工作，為了賺取外快，將其當做自己的副業。因此，年輕化是這類用戶群的主要標簽。
所以，我們采用了高飽和度、偏向藍色色相的紫色，來作為crov dropshipping的品牌色。它的HSB值是 （250，80，100）。
為了覆蓋掉Crov DS本身復雜的前后臺業務場景，需要額外搭配各類型的輔助色。我們想要提取24類色相，所以直接通過360/24得出了色環中每類色相的基本角度15°。
因此，這里以品牌色色相為基礎，在HSB 360°色環中，對色相（H）正向和反向各自±15°，飽和度（S）和明度（B）保持不變，得到24色的色環彩帶。
后續我們的顏色體系就在彩帶上的24個顏色上面進行提取。
品牌色同色系是指，根據品牌色不同的飽和度和明度變化，生成不同深淺、不同明暗的一組顏色。同色系配色不僅傳達了品牌性，多個梯度的變化也能夠適應及通用盡可能多的業務場景，也便于多信息的層級劃分。
而同色系配色的輸出則遵循了antDesign發明的tint/shade 色彩系統算法，說人話，就是在顏色中分別加入一定比例的黑色或者白色來更科學地生成色階。
sketch中可以直接將這套算法可視化處理，便于設計師直接生成所有顏色的色階。需要注意的是明色區（就是上方橫向的那塊取色區域，白色至純色時S由0過渡至100）和暗色區（右側縱向的取色區域，純色至黑色時B由100過渡至0）遵循了兩種不同的規則，具體規則見下：
當S飽和度變化時（明色區域），S值以S/5的結果值為一個增量進行遞減，B值以(100-B)/5的結果值為一個增量進行遞增。我們品牌色的S和B分別是80和100，所以這里的兩個增量分別是16和0。
品牌色在明色區的下兩個色階對應的HSB參數就是（250，64，100），（250，48，100），以此類推。
而當B明度產生變化時（暗色區域），S值以(100-S)/5的結果值為一個增量進行遞增，而B值以B/5的結果值為一個增量進行遞減。得出的兩個增量分別為4和20。
品牌色在暗色區的下兩個顏色對應的HSB參數即（250，84，80）、（250，88，60），剩下的所有顏色以此類推。
根據這兩個定義規則推導出全部不同梯度的色階，我們就可以將其作為品牌色同色系配色。
我們使用品牌色來傳達品牌價值，還需要輔助色來滿足多樣化業務場景的需要，對用戶進行不同的情緒引導，同時也可以緩解用戶對單一主色產生的視覺疲勞。
輔助色的定義就可以直接用到我們之前基于品牌色所衍生出的24色“彩帶”了。我們通過色環形式，來迅速得出品牌色的同類色、類似色、鄰近色、中差色、對比色和互補色。
結果見下：
首先，由于相差15°的同類色與品牌色差距過小，色相對比感微弱，傳遞的調性過于相似，所以這里直接pass。而鄰近色生成的粉色和青色在界面中基本不會作為功能色使用，這里同樣直接舍棄。
類似色
類似色即色相差在30度左右的顏色，屬于較弱對比色。我們基于品牌色的色相各自±30得出類似色。由于H280的類似色調性與品牌色類似，并且色彩體系中需要一個典型的冷色來覆蓋一些場景，所以這里使用了H220的顏色作為冷系的輔助色。
中差色
中差色即色相相差90度左右的顏色，屬于中等對比色。H340偏粉，與常規紅色相差過多，所以這里借鑒了alipay的輔助色校正原則“色相差值不能超過15”，對H340進行了色相校正，調整至H355。
對比色
對比色即色相相差120度左右的顏色，屬于強對比色。最后得出的H130調性與中差色的H160過于類似，直接舍棄。H10與H340調性類似，但是可以向橙色系發展，所以微調到同類色進行色相校正。
互補色
互補色即色相相差180度左右的顏色，屬于高強度對比色。最后得出的H70偏綠，這里同樣進行了色相校正，將其調整為H55。
最后，得出了共計5種輔助色。不過這些輔助色并不能直接使用，還需要進行感官明度的校正。
感官明度校正方法來自支付寶設計團隊，這是是確認輔助色的最后關鍵一環。每種顏色都有屬于自己的“感官明度”，即發光度。品牌色即輔助色的發光度不一致，就會導致視覺上會有明顯的明暗差別。所以，我們需要通過發光度來進行最終的顏色校正。
明度較高的灰色意味著高發光度，明度較低則意味著低發光度。保持品牌色發光度不變，我們對其他輔助色進行微調。
我們只需要將那些視覺明暗差距明顯的顏色進行調整。注意，并非所有的顏色都要調整到品牌色的感官明度，這些值僅僅是一個參考。最終的校正依然取決于我們的視覺！比如黃色感官明度本身很高，但是視覺緩和、不像綠色那么刺激，所以基本無需校正。
最后得到校正后的如下輔助色。藍色、綠色、黃色以及紅色在界面中可以作為功能色使用，可以分別代表常規、成功、警告和報錯狀態。而橙色則可以用作突出類的提示信息，它比bold字重要高出一個層級。
與品牌色一樣，使用tint/shade規則推導出全部輔助色不同梯度的色階。具體過程不再贅述～
CROV DS的文本色并非純粹的中性色，我們通過加入一點點品牌色來讓文本呈現色彩傾向，以此提升頁面的活力及年輕感，同時也可以讓界面更加耐看，減緩B端產品長期使用時的視覺疲勞。
具體方法就是，分別在#222、#555、#888、#b3b3b3的一、二、三級中性文本色代表的色塊上，覆蓋一層10%透明度的品牌色。最后得出了四個層次的文本色。當然，中性文本色你也可以參考antDesign中通過透明度進行定義的方法，不一定需要按照某個具體色值來。
我們必須要承認的現實是，設計師所定義出的色彩在mac上看上去是很出彩，但是這并不能代表所有用戶。也許在用戶中依然有一部分人群，他們的顯示器配置低和老舊。而且我們無法判斷用戶們的使用環境，有可能是在刺眼的陽光下、有可能是在昏暗的環境中。如果色彩不去做可用性測試，在很多的情況下存在體驗降低的風險。
而WCAG（Web Content Accessibility Guideline，Web內容無障礙指南）解決的正是這些障礙問題。WCAG中的POUR無障礙原則包括了：易于感知的（Perceivable）、便于操作的（Operable）、穩定理解的（Understandable）、穩定耐用的（Robust）。
而顏色則正是對應了易于感知的這一無障礙原則。網站中的文字和圖像應該具備足夠高的色彩對比度，使之更易被用戶感知識別。
WCAG顏色對比度無障礙的兩個標準分別為：「1.4.3條例：最小對比度標準」和「1.4.6條例：加強對比度標準」，分別對應著AA級和AAA級。
AA級的定義為：普通文本的視覺呈現與背景至少要有4.5：1的對比度，大文本與背景至少有3：1的對比度
AAA級的定義為：普通文本的視覺呈現與背景至少要有7：1的對比度，大文本與背景至少有4.5：1的對比度
（這里的大文本即≥18pt常規字重的文本或者≥14pt加粗字重的文本）
這兩個條例被大廠們廣泛運用到了產品的顏色標準當中。
比如MD規范中的文本移動性規范標準中的數據就是來自WCAG的1.4.3條例標準。
同樣，阿里巴巴在前不久發布的B-Design中的無障礙色acs指標和WCAG本質上也是一樣。
1. 顏色對比度驗證
那該如何驗證我們的顏色符合這倆標準呢？
easy。這里直接上個網址，https://contrast-ratio.com/#%23373247-on-%23fff
我們分別在背景及文本錄入色值，即可得到最終的對比度數據。比如我錄入了白色和一級文本色數值，最后的12.28即兩者的對比度，嗯，達到了AAA級標準。
一樣的步驟，分別測試了其他文本色的對比度（產品無暗色模式，所以此處僅驗證白色背景下的顏色對比度），分別達到了7.59、4.71和2.38?？梢钥闯龀?.38外，其他文本色的對比度均符合可見度標準。
不過WCAG中指出，一些特殊情況下的文本無對比度的限制，其中就包含了表單字段的占位符（placeholder）。而2.38對比度對應的文本色主要用于暗提示，因此這種情況就可以無視掉了~
色彩體系的初步探索到此結束了，不過篇幅原因并沒有面面俱到，比如漸變色、實際落地效果等等。另外，一些地方我自己也在摸索階段，因此很多分析也可能存在不足，文章僅作參考。
文章來源：優設網 作者：轉行人的設計筆記
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在經歷了一個不太理想的新十年開局后，年輕人們迫切需要重塑品牌。幸運的是，以下2021年的標志設計趨勢完全可以勝任這項任務。
觀察來自世界各地的logo設計作品，他們的預測代表了設計環境的變化。雖然去年的趨勢集中在通過新技術進行革新，但2021年標志趨勢中的一個共同主題似乎是限制條件下的創新。過去的一年可能在很多方面限制了世界，但是2021年的標志設計師們還都在繼續努力著。
彩色玻璃
透視圖
簡單幾何
發散字母
真實寫真
原始對稱
古怪的人物
現代象征主義
靜態運動
類似配色方案
標志設計作為一項相對現代的發明，往往在過去的技術和局限中尋求靈感。在2021年，許多標志設計師在過去時代的彩色玻璃窗中找到了啟發。
當應用到現代設計中時，將圖像分割成純色碎片，給普通概念增添了一點抽象感。彩色玻璃也與神圣聯系在一起，因為它起源于中世紀教堂。這可能不是巧合，這種標志趨勢經常與美麗的自然景觀結合使用。在一年的大部分時間被困在室內之后，我們可以期待我們脆弱的生態系統將在2021年的彩色玻璃標志設計中得到尊重。
正如標志設計師林登·萊德（Lindon Leader）曾經說過的那樣，偉大的設計源自簡潔和清晰。這兩個優點使標志設計能夠有效地向觀眾傳達品牌的復雜身份。這就是為什么許多過去的標志潮流都集中在極簡主義和平面設計上。
雖然2021年的logo設計師們決不會放棄這種方法，但他們正尋找在過度簡化中失去的一些魔力。一個流行的標志設計趨勢是融入微妙的視角。使用基本的繪畫技巧，如線性透視，曲率或縮短，設計師能夠創造深度的錯覺，而不會使設計復雜化。
其效果是，標志給人的感覺很突出，品牌從頁面上一躍而下，而半平面的設計技術，一直以來都是為設計師服務的，但至今仍然完好無損。
形狀是構成意象的基石。但是，盡管三角形、正方形和圓形等原始形狀一旦打下基礎，往往就會被淘汰，但它們純粹的簡單卻有力量。
2021年的設計師們正利用這種力量，用簡單的線條和形狀制作出標志。這種對形狀極簡主義的嚴格遵守給了這些標志一種刻意克制的氣氛，允許他們在其他地方自由發揮，比如在豐富的顏色飽和度上。
這種方法的另一個特點是，簡單的分層可以產生一種結構和深度的錯覺，這符合我們前面提到的透視圖趨勢。通過純粹的造型語言，設計師能夠創造出易于解析、令人難忘、色彩鮮艷的logo。
基于字體的文字標記標識有著直截了當的名聲，無論好壞。雖然他們使品牌名稱成為整個標志的焦點，因此更令人難忘，但他們沒有留下太多的空間，為創意鋪路。但是2021年的標志設計師們正在一個字母一個字母地改變這種印象。
具體來說，我們看到越來越多的單詞標記中的一個字母被夸大了。這可以是一個顏色突出的小寫的“i”，或作為一個突出的筷子形成一個大寫的“H”。這個不同的字母不僅創造了一個吸引眼球的興趣點，它給予品牌最好的選擇：一個傳統的，基于類型的標志，也不怕打破規則。
人們憑直覺尋找其他面孔，這是一個有據可查的事實，這就是為什么肖像畫有助于在設計中建立情感聯系。這些面孔越真實，越容易辨認，聯系就越深。
因此，2021年更多的標志設計師開始轉向反映不同種族、文化、性別、年齡段等的肖像畫。與媒體過于擁擠的同質表現不同，這種方式創造了真實的印象，有助于人們在瞬間與品牌建立聯系。這些標志可以從簡單的，平面的人物肖像到詳細的說明性技術。
歸根結底，設計師們厭倦了那些讓人感覺不親切的形象。歸根結底，無論一個標志是在講述品牌背后的人還是品牌服務的人的故事，人都是關鍵。
平衡是標志設計的基本原則之一，而對稱也許是其最極端的表現。對稱的標志從中間分開時，兩邊是相同的。
雖然相同性和可預測性似乎是冗余的同義詞，但對稱設計完全是關于強度的。它們讓我們想起了建筑，無論多么高大復雜，它們的設計都是為了站穩腳跟，它們通過完美的對稱平衡來實現這一點。
這種原始的對稱性允許標志包含線條藝術，感覺既不可能復雜又完美有序。但即使對稱在幾何設計中很常見，我們也看到這種趨勢在手繪徽標中找到了歸宿。無論是設計師追求的完美還是實力，有一點是肯定的：2021年的標志建筑是為了經得起時間的考驗而建造的。
雖然logo設計師在真實人物的表現上處于領先地位，但2021年的其他許多人則通過漫畫和夸張的幽默來對比這一點。我們正在看到越來越多的以插圖為主要內容的logo呈現出詼諧，甚至古怪的概念，從玩老鼠的醫生到華麗的甜甜圈花花公子。
從事舒適或娛樂的企業希望能讓他們的觀眾放松，而設計師們則用散發著博愛氣息的logo來回應。最終，這些異想天開的設計讓顧客覺得他們找到了朋友而不是品牌。
邏各斯的根源一直是古老的象征，從升起的鳳凰到不朽的女神，再到無所不能的眼睛。就像古代的象形文字一樣，它也是一個標志的目的，通過簡化的圖形來傳達信息。
通常，logo尋求創造他們自己獨特的符號語言，但在2021年，設計師們正在疏導古代符號的力量。其效果是將人們普遍理解的、經典的美德與奮斗品牌的愿景聯系起來。開始一個新的企業是一個信仰的飛躍，這些象征性的標志承載著一個啟示的承諾。
這意味著運動跟蹤器、流體形狀、飛濺粒子和動作線的增加。對于那些希望創新的企業，比如科技品牌，這是一個標志潮流，肯定會引起轟動。它提醒顧客品牌不僅僅是一種產品或服務：它是一種活的東西。
隨著每年的標志設計潮流，我們常常期望找到令人眼花繚亂、革命性和顛覆性的技術。另一方面，相似的配色方案是學生設計師在第一年的色彩理論學習的內容。這基本上意味著在色輪上對彼此相鄰的顏色進行配對，其結果是創造和諧的科學方法（代替對立顏色的對比）。
雖然類似的配色方案并不一定是新的，但它們在標志設計中日益流行可能表明了對對比度的排斥。色彩是設計師用來影響觀眾情緒的最重要的工具之一。
2021年的標志設計趨勢是重塑這個新的十年的一個機會。從透視技法到簡單造型再到對稱性，從極簡主義到古典主義的復興，我們未來的理性似乎在追求一種純粹。
轉自：站酷
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
軟件熟練度屬于“器”的范疇，對主要靠作品集吃飯的設計師來說很難對外體現。但是我們不能說它不重要，軟件的熟練度依然是設計是否能夠產出的重要因素之一?。?/span>
今天結合我自己之前的經驗，來談談AI中的一些相對比較冷門的小干貨（很多是我最近才get到的- -），但愿這些快捷操作能幫助你進行產出～～
大綱：
AI中存在很多參數需要我們自己去調節。比如一個形狀的寬高圓角，對形狀進行變換的旋轉、扭曲等參數等等?？赡芎芏嗯笥迅乙粯樱匆粋€個手動輸入要么通過拖動滑塊進行調節。
這么做造成的問題有兩個，一個是交互的繁瑣，一個是參數調節顆粒度過細，在進行往返調試時需要耗費大量的重復工作量。對于我們時間寶貴的設計師來說這種方法簡直太弱了好嘛??！
不過這些完全可以通過一個方法來解決——快捷鍵調節即可！結合shift、cmd（即win系統的ctrl）以及上下方向鍵完完全全地提升效率。具體的方法如下：
比如對形狀的變換，我們就可以使用上下方向鍵1px微調，結合shift以10px數調。鍵入位置通過tab切換。
再比如變換效果的參數，同樣可以使用這種方法快速地調試，全程只需要快捷鍵操作即可。而且這種一邊敲擊鍵盤一邊實時預覽的趕腳也讓人心情莫名得順暢！
這種方法也可以迅速地讓水平和垂直數值保持一致，比我以前的滑塊拖動、數值輸入的操作好太多了。
順帶一提，sketch參數數值調節也支持這種快捷操作哦。
我們在調節形狀的圓角時，一般情況有兩種方法，要么在菜單欄or變換工具中數值調整，要么直接在角落的圓角點上拖動。
但是對于平行四邊形這種四個頂角度數不一樣的形狀，即使四個圓角大小是一致的，由于銳角和鈍角的存在導致圓角看起來并不一樣。
這時候，外觀效果就派上用場了。
我們在效果-風格化中找到圓角選項，為平行四邊形添加一個圓角外觀效果。
風格中找到圓角選項就可以自己設置。這里給一個和剛剛一樣的圓角10px。
最后（右圖）得出的四個圓角看上去明顯比之前的方案更加一致。
另外，這種外觀的好處就是，后期隨時可以在外觀中編輯！
我們更多時候縮放是滾輪縮放，但是這樣的縮放的顆粒度太大，尤其在小屏電腦上想要定在某個合適的窗口大小比較麻煩。
這時候我們可以利用快捷鍵Z激活縮放功能，然后通過左、右拖曳的手勢進行快速而平滑的縮放操作。我們可以輕易定格在我們想要的窗口大小。一開始可能很多朋友和我一樣習慣上下縮放，但是ai里的縮放并不是上下，而是左右。
一般我們畫波浪線是通過扭曲與變換中的波紋效果來變換。
但是我們也可以使用鋼筆來直接畫。
向一個方向拖拽生成手柄（不知道有沒有朋友和我一樣用鋼筆工具都有點一下去繪制形狀的毛?。?，然后在合適的位置再拖拽一次即可繪制出波浪線。在對精準度要求不高的情況下完全可以采用這種辦法，方便快速。
在以往，我在進行路徑消除操作（比如繪制一些斷線icon時），通過這樣的步驟，添加錨點工具在路徑上添加兩個錨點，然后直接選擇工具選中錨點間的路徑刪除。拜托，都2120年了，別用這么古老的方式了好嘛?。。ê孟氤藭r光機回去拯救年少迷茫的自己）
但其實壓根不需要這么麻煩，一個工具就可以迅速解決，而且可以連續消除！
這個工具就是路徑橡皮擦工具，說實話知道這個工具后我再也回不去了。
只需要激活它，你就可以在任意的路徑中像使用橡皮擦那樣，迅速地消除你想消除的地方。另外，我提前給這個工具設置了E這個快捷鍵，以便我能迅速調用它進行路徑消除工作。
路徑橡皮擦用在填充的色塊中同樣只能消除路徑，但我們想要消除色塊時，則可以用到另外一個工具——橡皮擦工具。
shift+E直接調用到它，按住shift即可直接在填充色塊中進行切割。而且最后被切割出的圖形都是互相獨立的閉合形狀。
當我們按住alt后，就可以隨意地繪制出不同寬度的矩形進行切割，相比形狀生成器或布爾運算更加方便點。
一點點平時積累的ai小干貨，但愿能幫到你??！
文章來源：優設網 作者：轉行人的設計筆記
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
LOGO 是品牌設計當中最為重要的一環，LOGO 本身的設計不僅昭示了品牌的身份，甚至可以表現品牌的價值觀和特點。你可能想開拓新的領域，或者重塑舊有的業務，又或者是基于 2020 或者2021 年的新趨勢，將原本的 LOGO 升級，這些都是促使 LOGO 革新變化的契機。
和視覺設計不同，LOGO 的設計常規類型其實是相對固定的，通常不會有某種類型的 LOGO 占據主流，但是不同類型的 LOGO 呈現出不同的變化和趨勢傾向，下面就是 LOGO 設計在 2021 年呈現出的 11 個趨勢：
2021 年將會是 3D 在設計領域中徹底崛起的一年。而相應的，在 LOGO 設計領域，光影細節也成為了很多企業和品牌體現品牌價值和特質的一種設計策略。如果你正在尋找一種流行的風格，或者打算將已有的 LOGO 翻新升級，試試立體的 3D 設計，這可能是當下的一種設計風格。
這是最近2年又重新流行開來的一種設計風格，復雜的輪廓和陰影，筆觸細節豐富，繁雜但是令人愉悅，手寫和手繪都融入其中，從手寫風格的文本到近乎手繪的圖形圖像，你能在這樣的 LOGO 設計中感受到強烈的品質感，感知到精致的元素和獨特的個性，整體其實是給人耳目一新的感覺。
文字 LOGO 一直是 LOGO 設計中的一個比較大的門類，只需要使用特別風格化的字體來呈現品牌的名稱，就能夠很大程度上傳遞品牌的主要信息和氣質，它足夠簡明，不費吹灰之力就可以確保信息的傳達，視覺的美觀，氣質獨特，并且獲得某種程度的認可。下面的 LOGO 都是2020年新設計的文字 LOGO 中，比較有特點和代表性的作品。
有很多品牌本身，和自然元素是有關聯的。在今年這個大環境之下，大家對于自然的青睞是無與倫比的。這也是的很多和自然元素相關的品牌，會盡可能多地在設計的時候從自然汲取靈感，盡量創造富有識別度，有著平靜協調氣質，并且能夠讓人想到「自然」的設計，下面的案例就是典型：
黑白是永恒的經典。通常，黑白 LOGO 會更加考驗設計師對于形體和構成的認知。優秀的黑白 LOGO 通常輪廓分明，優雅又頗具識別度。
有意思的地方在于，2021年的黑白 LOGO 并非和往常一樣毫無新意，很多設計師會將 3D 效果、動畫和黑白 LOGO 結合到一起來進行設計。
生動的色調，明亮的色彩，只有扎眼的設計才能夠在第一時刻抓住用戶的注意力。在 2021 年，反常規、大膽的用色會是 LOGO 設計當中相當合理且出彩的一種策略。用戶會下意識地被品牌色吸引，這也能夠讓LOGO 和品牌最快發揮效用。
角色總是能夠更容易引起共情，因為一個具體的角色總能夠更加具象和立體地呈現特征、傳達情感甚至在某些方面引起互動。
值得一提的是，在品牌設計方面，設計師將想象力和品牌特征加諸角色，也可以幫用戶和觀看者構建出想象空間。
使用角色或者吉祥物構建的 LOGO 可以更加輕松地應用到海報、標牌、廣告、動畫、社交媒體等地方。這類 LOGO 設計的重難點，是如何通過簡單的角色傳遞出獨特的氣質和情緒。
在抖音風靡全世界之前，很少會有人在 LOGO 中玩故障效果。一方面是故障風并沒有那么主流，雖然很贊很賽博朋克，另一方面是和故障風在氣質上契合的品牌其實并沒有那么多。
不過在這個注意力資源稀缺的時代，前有大廠帶路，后有市場壓力，很多品牌開始在條件允許的情況下，盡可能地采用更為大膽的故障效果，瘋狂地、富有創造性地嘗試這一效果。
總而言之，如果你正在尋找一些特殊的 LOGO 效果，來試試故障效果吧。
動效，或者我們稱之為微動效，是在2020年之前就存在的東西，不過在 LOGO 設計領域的大范圍流行，應該在 2021 年。在數字硬件性能過剩的今天，讓 LOGO 動起來并不是什么大事，只要它能夠吸引用戶的注意力。
唯一的問題是在于，怎么動才會讓它恰到好處？很簡單，看看別人都是怎么做的：
和 3D 設計一樣，漸變色也一直身處設計領域的話題中心。漸變本身會賦予 LOGO 以更強的體積感和立體感，讓色彩更加有趣，即使 LOGO 不動的時候，依然具有足夠的「動感」，這大概是漸變色最富有價值的地方。
值得注意的是，隨著「擬物化」的「文藝復興」，大幅度漸變色重新成為了設計師們的寵兒，雖然這是大趨勢，但是在設計 LOGO 的時候，依然要注意堅守品牌色，同時控制好變化幅度，避免過猶不及的情況發生。
回歸簡約和基礎可能也是 2021 年 LOGO 設計的一個重要的主題。很少有東西能像基礎的幾何圖形那樣具有啟發性和趣味性。
將基礎的幾何圖形進行重新的排列組合，可以創作出各式各樣的圖形，傳達隱喻，還富有藝術性。在2021年，你可以嘗試一下這種 LOGO 設計，它巧妙且有趣。這種設計還可以結合動畫和色彩變換，創造出引人入勝的動畫效果。
相比于其他的設計門類，LOGO 設計更加考驗設計師的基本功和打磨的耐心，而與此同時還能擁抱變化的設計師，能夠在接下來的 2021年，創作出更優秀的作品。
文章來源：優設 作者：Iveta Pavlova
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
每年的雙11在設計師們的眼里，都不僅僅是購物狂歡節還是一場視覺盛宴。這不，今年的雙11重頭戲來了。
天貓聯合各品牌發布了超級符合“貓頭海報”，一共55家下面讓我們一次看個夠。
1. 泡泡瑪特，很有意思的創意
2. The North Face場景感十足
3. 好奇很溫馨的設計
4. 外星人，一直都想買的電腦
5. VANS，我喜歡他家的黑格子鞋
6. Levi’s，我服了
7. 麥當勞，煙霧的創意很契合產品
8. 惠氏鉑臻3，一團線織出來的創意
9. 拉面說，來碗面
10. 宜家家居，仔細看，是購物袋
11. 巴黎歐萊雅，萬能的C4D
12. 朗仕，細節很多
13. 華為，冷暖對比很有沖擊力
14. 樂高，積木的海洋
15. Marshall，燥起來
16. Jordan，喬丹
17. 肯德基，WOW好吃！
18. 林氏木業，俯視的構圖角度，空間感很強
19. 元氣森林，故事性很強
20. 強生，滿是愛
21. fresh，高端的護膚品牌
22. 萬代，為“酷”而生
23. 始祖鳥，化石來了
24. 三生花，旗袍肯定很漂亮
25. HOLLISTER，一起沖浪
26. 施華洛世奇，每個女孩都值得擁有
27. PINKO，亂的有創意
28. MINI，我有個進MINI車友群的夢
29. 孩之寶變形金剛，汽車人變形
30. Onisuka Tiger，日本的運動產品品牌
31. 優衣庫，線下實體店的貨架創意
32. 三頓半
33. OLAY
34. Dyson，很親切的表達方式
35. 迪士尼商店，可愛、好玩
36. NIKE
37. 法國嬌蘭，看起來很貴氣
38. 榮耀
39. LINE FRIENDS
40. M.A.C
41. 紅星美凱龍，空間感很強
42. NET-A-PORTER，泡泡龍的感覺
43. 稀奇，太喜感了
44. 百威，喲喲切克鬧
45. 芭比
46. 李子柒，依然還是熟悉的味道
47. 愛他美3，陽光帥氣
48. 花西子，雕刻工藝品
49. 伊利谷粒多，太美了
50. Apple，表情包集合
51. 滴露，傳統國風的感覺
52. Moleskine
53. 大疆，很喜歡無人機，有一起拼單的嗎？
54. 繪兒樂，這個創意現實中我玩過
55. 樂事，好吃
每個品牌對于貓頭的創意表達都不一樣，很多都是生活中隨處能見到的，但在設計師的眼中，就是創意靈感來源。
下面還有視頻版，大家一起看看：
以下視頻來源于
看完今年的貓頭海報，讓我更加期待接下來各品牌雙11活動的玩法和創意。接下來讓我拭目以待吧。
藍藍設計的小編 http://www.syprn.cn