起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識色彩在產品設計中的應用
編輯導語：一款好的產品不止需要隨著市場背景和用戶需求進行更新迭代，符合產品定位、美觀且舒適的產品設計也尤為重要。而對產品設計的色彩把握可能便是設計的基礎之一。本篇文章里，作者就對產品設計中的色彩運用進行了詳細的介紹和梳理，相信讀完之后會對你有所幫助。
一幅優秀作品，用對顏色、顏色用好，提升品質感。
界面設計中，色彩的搭配比例，使得界面信息層級準確，方便用戶閱讀。
一、色彩的基礎知識
配色、排版、字體是視覺設計中重要的三大因素。三個因素都可以影響到視覺設計的呈現。
在設計中，色彩是整個畫面中最能影響用戶體驗情感的元素之一，一起來體驗色彩的世界。
1. 色彩的基本知識
在設計與繪畫藝術中，將冷暖色分為三種色調：
- 暖色調：紅色、橙色、黃色；
- 冷色調：青色、藍色；
- 中性色調：紫色和綠色相對中性色調。
冷暖色
在設計中的應注意其比例、輕重、色環的位置，最后的視覺呈現要符合人們視覺上和心理上的舒適感。
冷色會讓人想到大海、冰雪等，讓人產生廣闊、平靜、冷的感覺；暖色則會讓人聯想到太陽、篝火等，讓人產生了溫暖、熱情的感覺。
三原色
傳統美術色彩的三原色是：紅，黃，藍。簡稱 RGB，R（紅Red）、G（綠Green）、B（藍Blue）。原色的色彩純度最高、最純凈，也最鮮艷，可以調配出絕大多數色彩，是一種加色模型。而其他顏色則不能調配出三原色。
間色是兩種原色配合成的顏色。如紅和黃配合成的橙色，黃和藍配合成的綠色，紅和藍配合成的紫色。
橙、綠、紫三種顏色又叫“三間色”。
復色是用原色與間色相調或用間色與間色相調而成的”三次色”。
復色是最豐富的色彩家族。復色包括了除原色和間色以外的所有顏色。因含有三原色，所以含有黑色成分，純度低，復色種類繁多，千變萬化。比如：紅色和紫色混合而成紫紅色，黃色和橙色混合而成得到橙黃色。
互補色/同類色/對比色
- 互補色是色相環中呈180度角的兩種顏色，如紅色與綠色、藍色與橙色、黃色與紫色等?；パa色能補充色彩情感表達的缺失感，調節互補色的明度和飽和度能改變情感的走向。
- 同類色是同一色相中不同傾向的系列顏色，如黃色系里的橘黃色、中黃、淡黃色等顏色。色相環內是15°以內。
- 對比色是色相環中呈120度至150度的任意兩種顏色，如紅色與藍色等。
互補色、同類色與對比色，如下圖所示。
冷色/暖色/無彩色
冷暖色(Cool/Cold & Warm colour) 指色彩心理上的冷熱感覺。
色彩的冷暖感覺又被稱為冷暖屬性。色彩的冷暖感覺是相對的，色彩的冷暖感覺都是相對存在的。比如說紫色和黃色，紫色中的紅紫色較暖，而藍紫色則較冷。
無彩色（achromatic color）指除了彩色以外的其它顏色，常見的有黑、白、灰。明度從0變化到100，而飽和度很小接近于0。
無彩色是指金、銀、黑、白、灰。試將純黑逐漸加白，使其由黑、深灰、中灰、淺灰直到純白，分為11個階梯，成為明度漸變，做成一個明度色標（也可用于有彩色系），凡明度在0°～3°的色彩稱為低調色，4°～6°的色彩稱為中調色，7°～10°的色彩稱為高調色。
暖色和冷色的視覺感受，如下圖所示。
色彩三要素：色相/純度/明度
色相是指不同的顏色的相貌，與亮度、飽和度無關。在通常的使用中，色相由顏色的名稱標識，如紅色、橙色或綠色等色相。
純度通常是指色彩的鮮艷的飽和程度。色彩含有色成分的比例越大，則純度越高。含有色成分的比例越小，純度越低。當一種顏色摻入白色時，純度就會降低。
明度是指色彩的明暗程度。
同一顏色在強光照射下顯得較明亮，而在弱光照射下顯得較灰暗、模糊。針對同一種顏色，深入不同的黑色或白色后，會產生不同的明暗層次感。
黃色明度最高，藍紫色明度最低，紅色和綠色的明度中等。同時，一般純度發生改變時，明度也會隨之改變。
色相、純度和明度。如下圖所示。
2. 色彩在界面設計中的作用
彩色文字會告訴用戶可以點擊的文字鏈接，而灰色的按鈕則會讓用戶認為此按鈕不可點擊。
1）整體思考色彩在設計中的構成元素
圖形化用戶界面，用戶在看到一個界面時，是一個由背景色、矩形按鈕及圖標ICON 設計、卡片等設計元素構成的。在設計界面時，借助色彩可以直觀的展示背景色、導航欄、狀態欄和操作按鈕等構成的設計元素，并讓產品設計的界面的邏輯架構和信息層級得到很好地展現。
如圖所示，明確的模塊內容和色彩，可以讓用戶更好地閱讀內容，同時信息層級明確、排版都會很不錯。
2）明確視覺層級關系
產品界面設計中，不同的內容應該呈現出不同的層級關系。例如，任務與背包間的同級關系，螞蟻森林與內容間的叢屬關系等。
利用同色系、色彩之間的色相差異可非常直觀的區分內容的層級關系，同時還可以通過色彩間的強對比突出關鍵內容。
如圖所示，螞蟻森林通過色彩的強弱區分視覺層級，綠色在視覺上層級最高，重要按鈕與文字使用綠色，可以讓畫面內容的層級關系更清晰明確。
3）突出產品風格
色彩的搭配可以直接反映出這種產品的風格和產品屬性。
例如，金融類App 界面中常用的藍色，工具類App 界面中常用的藍色等。
如圖所示。左邊金融App界面中的藍色與右邊美團買菜App界面中的多色圖標的設計，都是通過色彩來營造產品氛圍的，提升用戶體驗設計感，展示產品設計中的功能。
3. 色彩的對比
在界面設計中，色彩的對比形式豐富多彩。
1）色相對比
同類色對比
使用同類色對比的優點是，可以營造出和諧統一的界面效果。
在界面設計中，一些品牌格調比較鮮明的產品一般都使用同類色對比。
如下圖所示，產品設計的界面效果，整個界面基本貫穿使用了綠色這一種色相，并且僅通過調整綠色的明度和純度來適應不同的場景需求，產品格調令人記憶深刻。
互補色對比
使用互補色對比的優點是，可以讓畫面更具張力，營造出視覺上的反差，吸引用戶關注。
常見的互補色有紅色與綠色、黃色與紫色、以及橙色與藍色等。
因此，在使用互補色對比時，設計師通常需要遵循大調和、小對比的原則，即將一種顏色大面積使用，然后將其對比色局部使用。
同時，將明度相同、彩度很高的等量互補色搭配在一起，可以使界面看起來鮮明，如紅色配綠色等。
黃色與紫色由于明度差距較大，不會產生刺眼的效果，因此黃色與紫色的對比搭配方式也經常被用到。
如圖所示，App的界面設計的效果，在主色為紫色的情況下，將一些按鈕設置為黃色，可以提升按鈕的視覺層級，增強用戶的點擊欲望。
2）純度對比
使用純度對比的優點是，讓頁面分清主次。若將比較重要的元素設置為純度較高的顏色，則可以被人優先注意到。
如圖所示為，不同純度下 “小米金融” App設計，品類區的圖標設計效果的對比。圖標的顏色純度都較高，界面信息層級都很明確。
在純色搭配中，純度對比越弱，畫面沖擊力也越弱，畫面效果較溫和，適合長時間和近距離觀看；純度對比越強，畫面越明朗富有生氣，畫面表達越直觀。
如圖所示為：純度強對比在插畫中的應用效果。通過純度的強對比表現，可以強化畫面視覺的前后關系和主次關系，平衡畫面的視覺感受，突出主體物的表達。
3）明度對比
明度對比是指色彩的明暗程度的對比，也指色彩的黑白灰的對比。在心理學中，明度對比也稱明暗對比或亮度對比。物體受不同明度背景的影響，可以產生不同的視覺感受?；疑ㄔ诎咨尘跋赂杏X變暗。在黑色背景下，感覺變亮了。
在明度對比中，黑色和白色是最強的對比組合，而黑色與深灰色、白色與淺灰色是較弱的對比組合。
在同一色相、同一純度的顏色中混入的黑色越多，明度就越低；在同一色相、同一純度的顏色中混入的白色越多，明度就越高。利用明度對比，可展現出色彩的前后空間感、畫面的層次感、體積感等。
明度對比越強，光感越強，界面的表達越明確主題。如下圖所示。
明度對比合理，可以讓信息層級展現更清晰和直觀，提升用戶的閱讀效率和愉悅感。
視覺設計心理學，明度越低的物體越往后，明度越高的物體越靠前。在進行界面設計時，一般不能將深色卡片懸浮在淺色背景上，不符合用戶的視覺體驗設計習慣。
如圖所示，將白色卡片放在灰色背景上時，會感覺到灰色背景上的白色卡片，界面層次感很明確；微信讀書的白色卡片的內容在界面上屬于最高層級，而灰色背景給人以后退的感覺。
4）面積對比
藍色和黃色 1:1 的搭配，視覺感官不舒服。但是大面積的藍色搭配一點黃色，就會有不錯的視覺效果。
色彩搭配時，調整出合理的色彩面積比。色彩上的層次感，增加了節奏感，給用戶帶來畫面的視覺沖擊感。
如圖所示，左邊界面背景顏色中，藍色面積占比比較大，主色調明顯，黃色為輔助色，界面視覺較和諧舒適感。
界面設計中的用色，運用簡約設計的風格，文字運用無彩色，重點的按鈕等運用有彩色設計。
配色時，只需要著重考慮不同色相的面積對比就可以了。例如：導航欄的面積較大，會用到品牌主題色。
4. 色彩的性格
1）冷色與暖色的運用
在界面設計中，冷色會讓用戶產生平靜、安全、高科技的感受，因此在人工智能和社交類產品的界面設計中較常用。暖色會讓用戶產生積極、喜慶、美食的感受，因此在美食類、母嬰類等產品界面設計中常用。
電商類App界面中使用的暖橙色給界面營造出一種積極、活潑和歡樂的視覺氛圍。
工具類App 界面中使用的藍色給界面營造出一種冷靜的視覺氛圍感，是一種配色的設計規律。
2）不同色彩賦予產品的不同性格
白色的運用
白色代表著純潔、神圣、信任和安靜、樸素、雅致，是一種充滿純凈的顏色。白色被稱為無彩色，它與任何色彩進行和諧的搭配。大多數的背景使用的是純粹的白色，如下圖所示。
藍色的運用
藍色代表著廣闊的天空、冷靜、誠實、希望與科技、視覺上很舒服的色彩。藍色給人自由和平靜的感覺。在科技資訊、職場等類別的產品界面設計中使用較多，如：36Kr、釘釘等工具類產品，如下圖所示。
紅色的運用
紅色象征著熱情、喜慶、自信、斗志、能量，是一種充滿能量的顏色，在電商類、新聞資訊類等需要營造活躍氛圍的產品界面較常使用，如圖所示。
橙色的運用
橙色給人感覺很親切、很有活力。橙色有增加食欲和激發消費欲望的作用，橙色代表著溫暖、陽光、健康、歡樂，因此在社會服務類、電商類的產品界面設計中較常使用，如淘寶產品、平安、滴滴出行、大眾點評等產品。如圖所示。
黃色的運用
黃色代表著希望、溫暖、青春、活力和樂觀，明度高，是一種活力顏色。在旅游類或目標用戶為年輕人的產品界面設計中較常使用，如馬蜂窩、OFO 共享單車圖標、好好學習等產品設計，如圖所示。
綠色的運用
綠色代表著健康、安全、生命力、青春，給人一種充滿希望的溫和色彩。因此綠色強調安全感。如拉勾圖標、種子習慣、醫鹿等產品，如圖所示。
紫色的運用
“紫色，象征高貴的顏色。略帶種憂郁而富有魅力的色彩，代表聲望、深刻和高雅。
中國傳統中紫色代表圣人，帝王之氣。如北京故宮又稱為“紫禁城”。這都是源于古代對北極星的崇拜。
在西方，紫色亦代表尊貴，常成為貴族所愛用的顏色。這源于古羅馬帝國蒂爾人，常用的紫色染料僅供貴族穿著。
界面設計中，紫色由溫暖的紅色和冷靜的藍色混合而成的顏色，是極佳的刺激色。網頁運用紫色為主色調，魅力十足，非常符合這個網頁設計的定位。
5. 色彩的重量
1）色彩的重量
一般由明度決定，明度較高的顏色的給人較輕的感覺，明度較低的顏色給人以重的感覺。
美國心理學家戴爾·卡耐基 教授，經過多種復雜的實驗后得出結論；各種顏色在人的大腦里代表一定的重量，并且由重到輕可排列成黑、紅、紫、綠、黃、白。
在界面設計中，針對一些含有較多圖片的界面，其導航欄就可以使用淺色。
如圖所示，B站視頻App的界面 由于含有大量圖片，因此其他控件的顏色就會淡雅了很多。
2）不同色彩的應用場景
色彩搭配原則：6：3：1的設計原則，主色、輔助色、點綴色在界面設計中的應用。有彩色一般被應用在按鈕、圖標等提示性的元素上，而無彩色一般應用在字體上、分割線和背景色上。
主題品牌色的使用
主題品牌色是一款產品給用戶留下的第一印象的顏色。針對產品的主圖標、標題欄、底部導航按鈕，產品標簽和標簽文字等需要色相呈現的控件上，主題色占60%左右。
如圖所示，京東金融App的設計，其主題品牌色為紅色，并且應用在按鈕、底部導航按鈕和選中狀態的文字。
輔助色的使用
當界面中需要被提示的內容不止一種時，就可以用輔助色加以區分。當界面中主題色占比過大，需要使用輔助色讓視覺達到平衡。輔助色與主題色的色相差距通常不會太大，并且在產品中用色不超過30%。
如下圖所示，作業幫App界面，品牌主色在滾動符等圖標、卡片上有所區分時，輔助色青綠色、黃色等可以更好地展示品類區的功能圖標等。
點綴色的使用
點綴色的出現可以滿足主題色與輔助色滿足不了的視覺要求。 點綴色可以起到平衡畫面冷暖的作用。與此同時，由于點綴色與主題色一般色相差距較大，因此點綴色通常出現的頻率較低，并且占據產品內有彩色的比例一般不會超過 10%。
補充一下，界面設計的操作順序：
- 內容呈現；
- 應用場景與信息層級優化；
- 設計的排版；
- 色彩與細節的設計。
二、UI 界面設計色彩的運用技巧
色彩對于人的大腦的沖擊力大于造型。比如淘寶，我們會記憶起淘寶的主色是橙色。
色彩是影響人類視覺思維的重要因素，色彩能直觀地體現產品的性格和氣質，運用好色彩對UI設計師很重要。
1）色調一致
互聯網App設計，色調一般由主色、輔助色、點綴色為基準來搭配的。一致性的色調界面設計，能給用戶始終如一的視覺體驗。
2）60-30-10原則
空間色彩設計的搭配原則一般是3種，界面中60%是主色，可以運用到導航欄、按鈕、圖標、標題等關鍵元素中，使之成為整個App的視覺焦點和色彩聯系；30%為輔助色，可以避免界面單一的主色而單調；10%為點綴色，用在一些不太重要的元素。
色彩層次、鄰近色的應用，讓界面看上去和諧和平衡。360金融將綠色的主色運用到導航欄、圖標和插畫上，黃色的輔助色運用到按鈕上，主次關系處理的非常清晰明確。
3）遵循色彩心理學
色彩對于人類的情緒和行為的影響，紅色讓人聯想到生命、熱情、自信、力量。綠色讓人聯想到健康、生命、青春、自然，藍色會讓人聯想到科技、未來。了解到色彩心理學知識，有助于我們在進行App設計時提供依據。
例如： 網頁使用藍色作為主色，傳遞給一種年輕、親切、感性的色調感。
4）從大自然中獲得靈感
大自然擁有世界上最美麗的風景，藍色的天空、紅色的朝霞、金黃的麥穗，還有姹紫嫣紅的花朵。提取色彩運用到設計中，完美的搭配呈現出來的和諧的美感，就能瞬間打動人心。
5）良好的可讀性
一個有著好的可讀性的界面設計為用戶提供主次分明、層次清晰的內容瀏覽。確保界面瀏覽的可讀性，需要界面設計中色彩搭配的對比，例如在淺色背景上使用深色文字，在深色背景上使用淺色文字。
蝦米音樂的主要功能入口、標簽欄圖標、按鈕都使用了高純度的橙色，與界面中的灰色文字形成很好的對比，提升了界面中內容的易讀性。列表中，圖標和文字組合讓用戶瀏覽直觀和高效。
6）控制色彩數量
色彩影響著用戶的情緒和行為，講究主次之分和情緒影響用戶的想法。
設計中流傳著：色不過三。即在一個界面中不要使用超過 3 種顏色搭配，可以有主色、輔助色、點綴色。
色彩本身，可以調整出三種色彩的飽和度、明度的變化用來搭配更豐富的色彩。比如：ANT DESIGN，文章中第四部分會談到。
7）色彩運用盡量不使用純黑色和純灰色
黑白強烈的對比，會讓用戶感覺很生硬。但是在白色上加上一點藍色等色調的色彩，那就感覺畫面很通透。
感受黑白無彩色之外的插畫色彩的魅力價值，插畫更好的觸動人內心的感受，滿足人性的情感需求的插畫。
和諧的色彩搭配，讓界面看上去生動、和諧。
8）柔和集中的配色
從用戶的心理學角度思考，界面可以選擇使用一些柔和的色彩，調整其色相、飽和度、明度就能搭配出和諧的色彩。比如：首頁核心功能圖標，使用了不同的色彩，呈現了產品設計的年輕感、時尚感、律動感。
多種色彩來搭配，又保證了整體色彩搭配的和諧、統一感。
9）背景色和白色卡片的色彩的對比
背景色為了襯托內容，因此藍色的背景色，白色作為背景的對比色，區分畫面的視覺層次。
整個界面呈現出一種柔和的、舒適的色彩設計感。
10）漸變色的使用等優秀配色案例設計拆解
大自然中有很多美麗的漸變色，比如晴空萬里的藍色漸變，大自然中提取美麗的漸變色彩，不要超過90度的漸變，畫面感比較和諧、有美感。
在APP設計中，常見的 UI 配色有，即單色搭配、鄰近色搭配、互補色搭配等色彩搭配。
單色搭配
單色搭配是指單一色系的搭配，它運用色彩的飽和度、明度而形成視覺的層次關系，將同一色彩貫穿App的始終，通常這個色彩來自品牌色。單色搭配的視覺風格，整體感好。因此呈現給用戶統一的感覺。
比如微信讀書的產品設計，主色應用在關鍵元素上看，帶給用戶友好的品質體驗感。
鄰近色搭配
鄰近色搭配是由主色和鄰近色的色系組成的搭配，可以在同一個色調中構建出豐富的視覺層次感和質感。
例如：京東健康選擇與綠色臨近的黃色和藍色作為輔助色，賦予不同的功能含義，信息表達明確，和諧統一感很好，視覺上的趣味性，顏色的搭配顯得很柔和。
互補色搭配
互補色是由主色和其互補色的兩個色彩的搭配，該色彩可以為鄰近色，例如：藍色和黃色、橙色的搭配。
這種搭配既能保持互補色搭配強烈的對比度，區分關鍵信息，次要信息，又能增加視覺上的趣味性，色彩看上去豐富多彩。
例如：36 Kr 將藍色作為主色，互補色黃色作為輔助色應用在圖標、標簽上，再選擇黃色的鄰近色橙色作為另外一個輔助色，應用在不同的關鍵信息上，有助于用戶更好的閱讀產品的功能和內容。
不同模式背景下的界面設計
用戶體驗中運用了夜間模式這功能，用戶喜歡深夜使用手機這種場景。比如：閱讀資訊類產品，金融產品等也會選擇夜晚進行閱讀和使用。
當需要沉浸式地專注工作內容時，建議使用暗黑模式，可以幫助使用者更關注凸顯出來的內容和操作。
比如：百度網盤的界面設計，白天和夜晚的使用場景很豐富，因此支持夜間模式很有必要，保證使用者的體驗上的舒適感。
和諧的漸變色，美麗舒服，畫面豐富，層次感好，可以應用到圖標設計上，導航背板上。
漸變色搭配的網站推薦：https://webgradients.com/?
網站的特色不僅可以提供漂亮的漸變配色，而且還有更多格式選擇，比如 PSD、Sketch、PNG 以及可直接復制成一段 CSS 漸變代碼，設計師們就可以很方便的使用這個配色方案。
扁平化設計配色網站推薦：http://flatuicolors.com/
這個網站會定期更新一些扁平化設計中很受歡迎的色彩組合，里面的配色都很棒。
可生成一套色板的網站推薦：http://www.colorfavs.com/
上傳一張你最喜歡的圖片，然后根據這張圖片自動生成一套色板，非常具有實用性。
三、近兩年來的流行色欣賞
權威趨勢預測機構WGSN發布了2020年春夏流行色。
萬物復蘇的春日，枝繁葉茂的夏季，如果要用一個顏色來形容這兩個季節，那么一定是綠色。
綠色代表著自然、清新、朝氣、蓬勃。
綠色是生命的顏色。而綠色大家族中的薄荷綠尤以小清新定位，個性獨特，辨識度極高。
追波的：Hydroponic Plant App，如下圖。
在移動端 UI 界面設計中，綠色在移動端產品設計的應用上。
近日，潘通發布了19年的流行色——樂觀和愉悅珊瑚橘。
Pantone 選出了這款極具生命力的 Living Coral——「活力珊瑚橘」 作為2019年的潘通年度流行色。
PANTONE 16-1546 活珊瑚，還代表了現代生活的融合，是自然環境中出現的一種滋養色，同時也在社交媒體中的生動呈現。
潘通色彩研究中心的執行董事 Leatrice Eiseman 在聲明當中提到：
色彩是一個平衡的鏡頭，透過它我們體驗自然與數碼的實境，活珊瑚橘色尤其如此。消費者渴望人際互動與社交關系，歡樂的活珊瑚橘呈現出人性化、振奮人心的特質，打動人們的心弦。
在移動端 UI 的界面設計中，橙色也是一種超級飽和、充滿活力的選擇，可以在任何社交媒體上流行——因為橙色是在自然界中發現的一種美麗的色彩。
四、阿里 ANT DESIGN的官網的配色學習
Ant Design 色彩體系解讀成兩個層面：系統級色彩體系和產品級色彩體系。
- 系統級色彩體系主要定義了螞蟻中臺設計中的基礎色板、中性色板和數據可視化色板。
- 產品級色彩體系則是在具體設計過程中，基于系統色彩進一步定義符合產品調性以及功能訴求的顏色。
1. 系統級色彩體系
Ant Design 系統級色彩體系同樣源于「自然」的設計價值觀。設計師通過對自然場景的抽象捕捉，結合螞蟻的技術基因，形成了特有的 12 色。
進一步又通過大量的觀察，捕捉不同色彩在自然光下的變化規律，借助美術中素描的思路，對 12 個顏色進行了衍生。
在中性色板的定義上，則是平衡了可讀性、美感以及可用性得出來的。
1）基礎色板
Ant Design 的基礎色板共計 120 個顏色，包含 12 個主色以及衍生色。這些顏色基本可以滿足中后臺設計中對于顏色的需求。
Ant Design 的色板還具備進一步拓展的能力。經過設計師和程序員的精心調制，結合了色彩自然變化的規律，我們得出了一套色彩生成工具，當有進一步色彩設計需求時，設計者只需按照一定規則，定義好主色，便可以自動獲得一系列完整的衍生色。
2）中性色板
中性色包含了黑、白、灰。在螞蟻中后臺的網頁設計中被大量使用到，合理地選擇中性色能夠令頁面信息具備良好的主次關系，助力閱讀體驗。Ant Design 的中性色板一共包含了從白到黑的 13 個顏色。
2. 產品級色彩體系
品牌色是體現產品特性和傳播理念最直觀的視覺元素之一。
在色彩選取時，需要先明確品牌色在界面中的使用場景及范圍。在基礎色板中選擇主色，我們建議選擇色板從淺至深的第六個顏色作為主色。
Ant Design 的品牌色取自基礎色板的藍色，應用場景包括：關鍵行動點、操作狀態、重要信息高亮、圖形化等場景。
功能色代表了明確的信息以及狀態，比如成功、出錯、失敗、提醒、鏈接等。
功能色的選取需要遵守用戶對色彩的基本認知。
我們建議在一套產品體系下，功能色盡量保持一致。Ant Design 的功能色板如圖：
Ant Design 的中性色主要被大量的應用在界面的文字部分，此外背景、邊框、分割線、等場景中也非常常見。產品中性色的定義需要考慮深色背景以及淺色背景的差異，同時結合 WCAG 2.0 標準。
Ant Design 的中性色在落地的時候是按照透明度的方式實現的，具體色板如圖：
3. 企業級產品設計中的色彩應用
色彩在使用時更多的是基于信息傳遞、操作引導和交互反饋等目的。理性的選擇顏色是關鍵。
企業級產品設計體系，創造高效愉悅的工作體驗。
參考文獻和網址：
《規律與邏輯》
《進階版UI設計師》
《ANT DESIGN 官網》
《百度百科》等。
作者：峻溪POINTVISION
原文鏈接：https://www.zcool.com.cn/article/ZMTE5OTU0MA==.html
本文由 @峻溪POINTVISION 授權發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
