聲明：文章中所有的色彩規范都只針對可視化大屏設計，后臺可視化以及 B 端可視化的規范可能會有差異；此處只是個人看法，如有錯誤歡迎指正；部分內容有參考百度以及相關資料；文中部分配圖內容來自網絡；
讀者朋友們大家好呀！又鴿了！非常抱歉！距離上次《字體篇》已經 5 個多月了，由于工作原因擱置了很久，終于給大家更新啦！本期給大家帶來的就是《可視化十要素-色彩篇》。
往期回顧：
色彩篇主要分為：色彩三要素、配色方法、可視化中的顏色擴展、色彩選用原則、行業配色。
主要想通過色彩的原理，配色的多種方法，以及如何拓展可視化界面中的元素顏色（文字，裝飾，背景，彈框等），最后總結了顏色的記憶屬性（行業配色）。
1. 色相
色相是色彩的首要特征，是區別各種不同色彩的最準確的標準。比如紅色、黃色、藍色等。色相可以具體到各個行業所代表的不同顏色，比如公安為藍色，黨建為紅色，金融為橘色等。
色相只是顏色的另一種說法。
2. 明度
明度可以簡單理解為顏色的亮度，不同的顏色具有不同的明度，例如天藍色就比紅色的明度高，如綠色中由淺到深有粉綠、淡綠、翠綠等明度變化。
明度定義了顏色的明亮程度，從黑色到白色。
3. 飽和度
飽和度也叫純度，通常是指色彩的鮮艷度。
色彩的純度強弱，是指色相感覺明確或含糊、鮮艷或混濁的程度。色彩的純度變化，可以產生豐富的強弱不同的色相，而且使色彩產生韻味與美感。
1. 圖片配色法
圖片配色法可以運用 PS 工具，選擇你鐘意的一張圖，拖進 PS 里，執行：濾鏡-像素化-馬賽克，就可以得到基于圖片的馬賽克像素點，然后吸取顏色即可。
2. 插件配色法
插件配色法可以通過 Eagle、美葉等軟件直接獲取圖片色，非常之方便，此種方法相比較于圖片配色法，更具科學性和準確性。
3. 色環配色法
利用色環配色大家可能都知道，但是我們需要做到的是如何靈活的配色以及進行適量的處理。
鄰近色配色法
三種顏色組成，觀感更加舒適，色系搭配更舒服。
補色配色法
補色是指色環中兩個對稱的色塊，他們是色環中相隔最遠的兩個顏色，因此兩種顏色的對比也是最大的。
補色分割配色法
補色分割與補色配色相似。首先選定一個顏色，然后使用它一個鄰近色，最后找出它的補色。（也叫等腰三角形配色）
三角配色法
三角色由三種顏色組成，是色環上平均分布的三種顏色，共同在色環上連接成三角形。這種方法更適合色彩鮮艷。
四角配色法
這種方法由兩對補色組成，共 4 種顏色，其中只有一個是主色，另外三個顏色是輔助色。
通過對主色的疊加不同透明的黑色與白色（擴展白度和擴展黑度），可以擴展出背景、彈框、裝飾、文字等顏色。
1. 擴展白度
擴展白度就是為所有顏色創建出更多較淺的顏色（增加白色透明）。比如我們通過大幅提升主色的白度，可以作為項目的文本色，那么我們該如何增加白度呢？
2. 擴展黑度
擴展黑度就是為所有顏色創建出更多較深的顏色（增加黑色透明）。比如我們通過大幅提升主色的黑度，可以作為項目的背景色和卡片底色，那么我們該如何增加黑度呢？
3. 擴展背景
我們通過將主色增加黑度的方式，去定義背景色。具體數值：主色增加 90%-95%黑色，作為背景色。
4. 擴展彈框
我們通過將主色增加黑度的方式，去定義彈框色以及模塊背景色。具體數值：主色增加 75%-85%黑色，作為彈框色和模塊背景色。
5. 擴展裝飾線
我們通過將主色增加黑度的方式，去定義裝飾線色。具體數值：主色增加 50%-70%黑色，作為裝飾線的顏色。
6. 擴展裝飾點
我們通過將主色增加黑度的方式，去定義裝飾點色。具體數值：主色增加 30%-50%黑色，作為裝飾點的顏色。
7. 擴展文字
我們通過將主色增加白度的方式，去定義正文文字色。具體數值：主色增加 90%-95%白色，作為正文的顏色（輔助文字可以減少一半透明度）。
8. 擴展輔助色
餅圖中可以會用到很多的顏色去配置，那我們應該如何去配置呢？
遵守“631”“三不”“兩多”這幾個原則，可以讓你在可視化中的色彩搭配能力更加自如。
1. “631”原則
運用配色 631 法則，將配色定義為主色 60%，輔助色 30%，對比色 10%去貫穿整套界面。文字的顏色通過重要，普通，次要去分配，帶有色彩傾向豐富頁面視覺。
2. “三不”原則
不選用同一色系
同色系會使畫面看起來對比度非常弱，色彩指代感弱，色彩之間不好拉開層級。
不選用顏色接近
鄰近色會使畫面感覺偏弱，沒有強對比，畫面層次感不足。
不選用同色透明
同色透明會讓畫面非常的灰，是可視化中的大忌，切勿使用。
3. “兩多”原則
多選用對比色
強對比可以拉開視覺層級，突出畫面，視覺至上。
多選用黑白灰
黑白灰可以使畫面變的非常高級，并且畫面細節度拉滿。
色彩具有很強的記憶屬性，因此用戶會將他們感受到的內容與色彩聯系起來。可以從大量資源池中去尋找靈感，比如金融行業，我們可以從已知的金融元素都是紅黃搭配的，因此我們在配色時肯定需要注意這一特征的。
1. 交通行業
交通一般以藍色為主調，配合紅黃綠（紅綠燈顏色）三種代表著道路擁擠程度，藍色是大多數人最喜歡的顏色。由于藍色自帶的親和力，它是數字產品設計中最常用的顏色（除了黑色和白色）。
含義： 平靜、和平、安全、寧靜、信任。
適用： 交通，公安，監控，政府機關。
缺點： 由于其流行性與適用性，作為品牌主色很難脫穎而出。
2. 文旅行業
文化旅游代表著健康，和諧，自然，戶外，綠色是大自然的顏色，人們對綠色的喜愛程度僅次于藍色，綠色具有絕佳的親和力。
含義： 健康、自然、平靜、放松、成長。
適用： 醫療康復、生態、旅游。
缺點： 當綠色作為主色時，你可能需要再找一個顏色表示成功消息了。
3. 公安行業
藍色是大多數人最喜歡的顏色。由于藍色自帶的親和力，它是數字產品設計中最常用的顏色（除了黑色和白色）。
含義： 平靜、和平、安全、寧靜、信任。
適用： 公安，監控，交通，政府機關。
缺點： 由于其流行性與適用性，作為品牌主色很難脫穎而出。
4. 電力行業
電力行業一般以國家電網的綠色系為主，給人一種安全可靠，綠色環保的電力行業。
含義： 安全、可靠、綠色、環保。
適用： 電力，電網，網絡安全。
缺點： 當綠色作為主色時，你可能需要再找一個顏色表示成功消息了。
5. 生態行業
生態代表著健康，和諧，自然，綠色是大自然的顏色，人們對綠色的喜愛程度僅次于藍色，綠色具有絕佳的親和力。
含義： 健康、自然、平靜、放松、成長。
適用： 醫療康復、生態、旅游。
缺點： 當綠色作為主色時，你可能需要再找一個顏色表示成功消息了。
6. 金融行業
金融行業非常注重屬性搭配，暖色系可以增加購買欲望，使人有溫暖的感覺。橙色被認為是一種非常有活力和熱情的顏色， 它促進活動和創造性思維。
含義： 創意、能量、熱情、活躍、煩躁。
適用： 金融，證券，貨幣，黨建。
缺點： 當橙色作為主色時，你可能需要另一種顏色作為警告色。
- 加強對色彩三要素：色相、明度、飽和度的認知；
- 掌握三種配色方法：圖片配色法、插件配色法、色環配色法，以及了解配色的原理；
- 可視化界面中如何擴展顏色（白度，黑度，背景，彈框，裝飾，文字，輔助色等）；
- 配色 631 原則，主色、輔助色、對比色應用原則；
- “三不”原則：不選用同一色系、不選用顏色接近、不選用同色透明；
- “兩多”原則：多選用對比色、多選用黑白灰；
- 不同行業配色注意事項，通過元素搜集以及情緒版，配置不同行業可視化配色；
- 顏色的含義以及適用的地點；
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
熱評 白阿白