UI界面設計色彩基礎以及運用技巧

Sponsor

前言：色彩能影響一個作品的氣氛，能影響觀看者的心情，而且色彩是有重量的，你信嗎？如果你連這些都不知道，那如何做好界面的配色呢？這都是色彩的基礎知識，設計師門都應該要去了解，今天文章將分享色彩基礎知識和案例分析，希望對大家有所幫助。

文章目錄：

1. 色彩的基礎知識
2. UI界面設計色彩的運用技巧
3. 近兩年的流行色的設計欣賞
4. 阿里ANT DESIGN的配色

一、色彩的基礎知識

配色、排版、字體是視覺設計中重要的三大因素。三個因素都可以影響到視覺設計的呈現。

在設計中，色彩是整個畫面中最能影響用戶體驗情感的元素之一，一起來體驗色彩的世界。

1 色彩的基本知識

在設計與繪畫藝術中，將冷暖色分為三種色調：

1 暖色調：紅色、橙色、黃色。

2 冷色調：青色、藍色。

3 中性色調：紫色和綠色相對中性色調。

冷暖色在設計中的應注意其比例、輕重、色環的位置，最后的視覺呈現要符合人們視覺上和心理上的舒適感。

冷色會讓人想到大海、冰雪等，讓人產生廣闊、平靜、冷的感覺；暖色則會讓人聯想到太陽、篝火等，讓人產生了溫暖、熱情的感覺。

三原色

傳統美術色彩的三原色是：紅，黃，藍。簡稱 RGB，R（紅Red）、G（綠Green）、B（藍Blue）。原色的色彩純度最高、最純凈，也最鮮艷，可以調配出絕大多數色彩，是一種加色模型。而其他顏色則不能調配出三原色。

間色是兩種原色配合成的顏色。如紅和黃配合成的橙色，黃和藍配合成的綠色，紅和藍配合成的紫色。

橙、綠、紫三種顏色又叫“三間色”。

復色是用原色與間色相調或用間色與間色相調而成的”三次色”。復色是最豐富的色彩家族。復色包括了除原色和間色以外的所有顏色。因含有三原色,所以含有黑色成分,純度低,復色種類繁多,千變萬化。比如：紅色和紫色混合而成紫紅色，黃色和橙色混合而成得到橙黃色。

互補色/同類色/對比色

1.互補色是色相環中呈180度角的兩種顏色，如紅色與綠色、藍色與橙色、黃色與紫色等。

互補色能補充色彩情感表達的缺失感，調節互補色的明度和飽和度能改變情感的走向。

2. 同類色是同一色相中不同傾向的系列顏色，如黃色系里的橘黃色、中黃、淡黃色等顏色。色相環內是15°以內。

3. 對比色是色相環中呈120度至150度的任意兩種顏色，如紅色與藍色等。

互補色、同類色與對比色，如下圖所示。

冷色/暖色/無彩色

冷暖色(Cool/Cold & Warm colour) 指色彩心理上的冷熱感覺。

色彩的冷暖感覺又被稱為冷暖屬性。色彩的冷暖感覺是相對的，色彩的冷暖感覺都是相對存在的。比如說紫色和黃色，紫色中的紅紫色較暖，而藍紫色則較冷。

無彩色（achromatic color）指除了彩色以外的其它顏色，常見的有黑、白、灰。明度從0變化到100，而飽和度很小接近于0。

無彩色是指金、銀、黑、白、灰。試將純黑逐漸加白，使其由黑、深灰、中灰、淺灰直到純白，分為11個階梯，成為明度漸變，做成一個明度色標（也可用于有彩色系），凡明度在0°～3°的色彩稱為低調色，4°～6°的色彩稱為中調色，7°～10°的色彩稱為高調色。

暖色和冷色的視覺感受，如下圖所示。

色彩三要素：色相/純度/明度

色相是指不同的顏色的相貌，與亮度、飽和度無關。在通常的使用中，色相由顏色的名稱標識，如紅色、橙色或綠色等色相。

純度通常是指色彩的鮮艷的飽和程度。色彩含有色成分的比例越大，則純度越高。含有色成分的比例越小，純度越低。當一種顏色摻入白色時，純度就會降低。

明度是指色彩的明暗程度。

同一顏色在強光照射下顯得較明亮，而在弱光照射下顯得較灰暗、模糊。針對同一種顏色，深入不同的黑色或白色后，會產生不同的明暗層次感。

黃色明度最高，藍紫色明度最低，紅色和綠色的明度中等。同時，一般純度發生改變時，明度也會隨之改變。

色相、純度和明度。如下圖所示。

色彩在界面設計中的作用

彩色文字會告訴用戶可以點擊的文字鏈接，而灰色的按鈕則會讓用戶認為此按鈕不可點擊。

整體思考色彩在設計中的構成元素

圖形化用戶界面，用戶在看到一個界面時，是一個由背景色、矩形按鈕及圖標ICON 設計、卡片等設計元素構成的。在設計界面時，借助色彩可以直觀的展示背景色、導航欄、狀態欄和操作按鈕等構成的設計元素，并讓產品設計的界面的邏輯架構和信息層級得到很好的展現。

如圖所示，明確的模塊內容和色彩，可以讓用戶更好的閱讀內容，同時信息層級明確、排版都會很不錯。

明確視覺層級關系

產品界面設計中，不同的內容應該呈現出不同的層級關系。例如，任務與背包間的同級關系，螞蟻森林與內容間的叢屬關系等。

利用同色系、色彩之間的色相差異可非常直觀的區分內容的層級關系，同時還可以通過色彩間的強對比突出關鍵內容。如圖所示，螞蟻森林通過色彩的強弱區分視覺層級，綠色在視覺上層級最高，重要按鈕與文字使用綠色，可以讓畫面內容的層級關系更清晰明確。

突出產品風格

色彩的搭配可以直接反映出這種產品的風格和產品屬性。例如，金融類 App 界面中常用的藍色，工具類App 界面中常用的藍色等。如圖所示。左邊金融 App 界面中的藍色與右邊美團買菜App界面中的多色圖標的設計，都是通過色彩來營造產品氛圍的，提升用戶體驗設計感，展示產品設計中的功能。

色彩的對比

在界面設計中，色彩的對比形式豐富多彩。

色相對比

（1）同類色對比

使用同類色對比的優點是，可以營造出和諧統一的界面效果；

在界面設計中，一些品牌格調比較鮮明的產品一般都使用同類色對比。

如下圖所示，產品設計的界面效果，整個界面基本貫穿使用了綠色這一種色相，并且僅通過調整綠色的明度和純度來適應不同的場景需求，產品格調令人記憶深刻。

（2）互補色對比

使用互補色對比的優點是，可以讓畫面更具張力，營造出視覺上的反差，吸引用戶關注。常見的互補色有紅色與綠色、黃色與紫色、以及橙色與藍色等。因此，在使用互補色對比時，設計師通常需要遵循大調和，小對比的原則，即將一種顏色大面積使用，然后將其對比色局部使用。同時，將明度相同、彩度很高的等量互補色搭配在一起，可以使界面看起來鮮明，如紅色配綠色等。黃色與紫色由于明度差距較大，不會產生刺眼的效果，因此黃色與紫色的對比搭配方式也經常被用到。

如圖所示，App的界面設計的效果，在主色為紫色的情況下，將一些按鈕設置為黃色，可以提升按鈕的視覺層級，增強用戶的點擊欲望。

純度對比

使用純度對比的優點是，讓頁面分清主次。若將比較重要的元素設置為純度較高的顏色，則可以被人優先注意到。

如圖所示為，不同純度下 “小米金融” App設計，品類區的圖標設計效果的對比。圖標的顏色純度都較高，界面信息層級都很明確。

在純色搭配中，純度對比越弱，畫面沖擊力也越弱，畫面效果較溫和，適合長時間和近距離觀看；純度對比越強，畫面越明朗富有生氣，畫面表達越直觀。

如圖所示為：純度強對比在插畫中的應用效果。通過純度的強對比表現，可以強化畫面視覺的前后關系和主次關系，平衡畫面的視覺感受，突出主體物的表達。

明度對比

明度對比是指色彩的明暗程度的對比，也指色彩的黑白灰的對比。在心理學中，明度對比也稱明暗對比或亮度對比。物體受不同明度背景的影響，可以產生不同的視覺感受?；疑ㄔ诎咨尘跋赂杏X變暗。在黑色背景下，感覺變亮了。

在明度對比中，黑色和白色是最強的對比組合，而黑色與深灰色、白色與淺灰色是較弱的對比組合。在同一色相、同一純度的顏色中混入的黑色越多，明度就越低；在同一色相、同一純度的顏色中混入的白色越多，明度就越高。利用明度對比，可展現出色彩的前后空間感、畫面的層次感、體積感等。

明度對比越強，光感越強，界面的表達越明確主題。如下圖所示。

明度對比合理，可以讓信息層級展現更清晰和直觀，提升用戶的閱讀效率和愉悅感。

視覺設計心理學，明度越低的物體越往后，明度越高的物體越靠前。在進行界面設計時，一般不能將深色卡片懸浮在淺色背景上，不符合用戶的視覺體驗設計習慣。

如圖所示，將白色卡片放在灰色背景上時，會感覺到灰色背景上的白色卡片，界面層次感很明確；微信讀書的白色卡片的內容在界面上屬于最高層級，而灰色背景給人以后退的感覺。

面積對比

藍色和黃色 1:1 的搭配，視覺感官不舒服。但是大面積的藍色搭配一點黃色，就會有不錯的視覺效果。

色彩搭配時，調整出合理的色彩面積比。色彩上的層次感，增加了節奏感，給用戶帶來畫面的視覺沖擊感。

如圖所示，左邊界面背景顏色中，藍色面積占比比較大，主色調明顯，黃色為輔助色，界面視覺較和諧舒適感。

界面設計中的用色，運用簡約設計的風格，文字運用無彩色，重點的按鈕等運用有彩色設計。

配色時，只需要著重考慮-不同色相的面積對比就可以了。例如：導航欄的面積較大，會用到品牌主題色。

色彩的性格

冷色與暖色的運用

在界面設計中，冷色會讓用戶產生平靜、安全、高科技的感受，因此在人工智能和社交類產品的界面設計中較常用。暖色會讓用戶產生積極、喜慶、美食的感受，因此在美食類、母嬰類等產品界面設計中常用。電商類 App界面 中使用的暖橙色給界面營造出一種積極、活潑和歡樂的視覺氛圍。工具類 App 界面中使用的藍色給界面營造出一種冷靜的視覺氛圍感，是一種配色的設計規律。

不同色彩賦予產品的不同性格

（1） 白色的運用

白色代表著純潔、神圣、信任和安靜、樸素、雅致，是一種充滿純凈的顏色。白色被稱為無彩色，它與任何色彩進行和諧的搭配。大多數的背景使用的是純粹的白色，如下圖所示。

（2）藍色的運用

藍色代表著廣闊的天空、冷靜、誠實、希望與科技、視覺上很舒服的色彩。藍色給人自由和平靜的感覺。在科技資訊、職場等類別的產品界面設計中使用較多，如：36Kr、釘釘 等工具類產品，如下圖所示。

（3）紅色的運用

紅色象征著熱情、喜慶、自信、斗志、能量，是一種充滿能量的顏色，在電商類、新聞資訊類等需要營造活躍氛圍的產品界面較常使用，如圖所示。

（4）橙色的運用

橙色給人感覺很親切、很有活力。橙色有增加食欲和激發消費欲望的作用，橙色代表著溫暖、陽光、健康、歡樂，因此在社會服務類、電商類的產品界面設計中較常使用，如淘寶產品、平安、滴滴出行、大眾點評等產品。如圖所示。

（5）黃色的運用

黃色代表著希望、溫暖、青春、活力和樂觀，明度高，是一種活力顏色。在旅游類或目標用戶為年輕人的產品界面設計中較常使用，如馬蜂窩、OFO 共享單車圖標、好好學習 等產品設計，如圖所示。

（6）綠色的運用

綠色代表著健康、安全、生命力、青春，給人一種充滿希望的溫和色彩。因此綠色強調安全感。如 拉勾 圖標、種子習慣、醫鹿等產品，如圖所示。

（7）紫色的運用

“紫色，象征高貴的顏色。略帶種憂郁而富有魅力的色彩，代表聲望、深刻和高雅。中國傳統中紫色代表圣人，帝王之氣。如北京故宮又稱為“紫禁城”。這都是源于古代對北極星的崇拜。在西方，紫色亦代表尊貴，常成為貴族所愛用的顏色。這源于古羅馬帝國蒂爾人，常用的紫色染料僅供貴族穿著?！?/p>

界面設計中，紫色由溫暖的紅色和冷靜的藍色混合而成的顏色，是極佳的刺激色。網頁運用紫色為主色調，魅力十足，非常符合這個網頁設計的定位。

3 色彩的重量

色彩的重量：一般由明度決定，明度較高的顏色的給人較輕的感覺，明度較低的顏色給人以重的感覺。

美國心理學家 戴爾.卡耐基 教授，經過多種復雜的實驗后得出結論；各種顏色在人的大腦里代表一定的重量，并且由重到輕可排列成黑、紅、紫、綠、黃、白。

在界面設計中，針對一些含有較多圖片的界面，其導航欄就可以使用淺色。

如圖所示，b站視頻 App 的界面 由于含有大量圖片，因此其他控件的顏色就會淡雅了很多。

3 不同色彩的應用場景

色彩搭配原則：6:3:1的設計原則，主色、輔助色、點綴色在界面設計中的應用。有彩色一般被應用在按鈕、圖標等提示性的元素上，而無彩色一般應用在字體上、分割線和背景色上。

主題品牌色的使用

主題品牌色是一款產品給用戶留下的第一印象的顏色。針對產品的主圖標、標題欄、底部導航按鈕，產品標簽和

標簽文字等需要色相呈現的控件上，主題色占60%左右。

如圖所示，京東金融App的設計，其主題品牌色為紅色，并且應用在按鈕、底部導航按鈕和選中狀態的文字。

輔助色的使用

當界面中需要被提示的內容不止一種時，就可以用輔助色加以區分。當界面中主題色占比過大，需要使用輔助色讓視覺達到平衡。輔助色與主題色的色相差距通常不會太大，并且在產品中用色不超過30%。

如下圖所示，作業幫 App 界面，品牌主色在滾動符等圖標、卡片上有所區分時，輔助色青綠色、黃色等可以更好的展示品類區的功能圖標等。

點綴色的使用

點綴色的出現可以滿足主題色與輔助色滿足不了的視覺要求。 點綴色可以起到平衡畫面冷暖的作用。與此同時，由于點綴色與主題色一般色相差距較大，因此點綴色通常出現的頻率較低，并且占據產品內有彩色的比例一般不會超過 10%。

補充一下，界面設計的操作順序 ：

1 內容呈現。2 應用場景與信息層級優化。3 設計的排版。4 色彩與細節的設計。

二、UI 界面設計色彩的運用技巧

色彩對于人的大腦的沖擊力大于造型。比如淘寶，我們會記憶起淘寶的主色是橙色。

色彩是影響人類視覺思維的重要因素，色彩能直觀的體現產品的性格和氣質，運用好色彩對UI設計師很重要。

色調一致

互聯網App設計，色調一般由主色、輔助色、點綴色為基準來搭配的。一致性的色調界面設計，能給用戶始終如一的視覺體驗。

60-30-10原則

空間色彩設計的搭配原則一般是3種，界面中60%是主色，可以運用到導航欄、按鈕、圖標、標題等關鍵元素中，使之成為整個App的視覺焦點和色彩聯系，30%為輔助色，可以避免界面單一的主色而單調；10%為點綴色，用在一些不太重要的元素。

色彩層次，鄰近色的應用，讓界面看上去和諧和平衡，360金融將綠色的主色運用到導航欄、圖標和插畫上，黃色的輔助色運用到按鈕上，主次關系處理的非常清晰明確。

遵循色彩心理學

色彩對于人類的情緒和行為的影響，紅色讓人聯想到生命、熱情、自信、力量。綠色讓人聯想到健康、生命、青春、自然，藍色會讓人聯想到科技、未來。了解到色彩心理學知識，有助于我們在進行App設計時提供依據。

例如： 網頁使用藍色作為主色，傳遞給一種年輕、親切、感性的色調感。

從大自然中獲得靈感

大自然擁有世界上最美麗的風景，藍色的天空、紅色的朝霞、金黃的麥穗，還有姹紫嫣紅的花朵。提取色彩運用到設計中，完美的搭配呈現出來的和諧的美感，就能瞬間打動人心。

良好的可讀性

一個有著好的可讀性的界面設計為用戶提供主次分明、層次清晰的內容瀏覽。確保界面瀏覽的可讀性，需要界面設計中色彩搭配的對比，例如在淺色背景上使用深色文字，在深色背景上使用淺色文字。

蝦米音樂的主要功能入口、標簽欄圖標、按鈕都使用了高純度的橙色，與界面中的灰色文字形成很好的對比，提升了界面中內容的易讀性。列表中，圖標和文字組合讓用戶瀏覽直觀和高效。

控制色彩數量

色彩影響著用戶的情緒和行為，講究主次之分和情緒影響用戶的想法。設計中流傳著：色不過三。即在一個界面中不要使用超過 3 種顏色搭配，可以有主色、輔助色、點綴色。色彩本身，可以調整出三種色彩的飽和度、明度的變化用來搭配更豐富的色彩。比如：ANT DESIGN，文章中第四部分會談到。

色彩運用盡量不使用純黑色和純灰色

黑白強烈的對比，會讓用戶感覺很生硬。但是在白色上加上一點藍色等色調的色彩，那就感覺畫面很通透。

感受黑白無彩色之外的插畫色彩的魅力價值，插畫更好的觸動人內心的感受，滿足人性的情感需求的插畫。

和諧的色彩搭配，讓界面看上去生動、和諧。

柔和集中的配色

從用戶的心理學角度思考，界面可以選擇使用一些柔和的色彩，調整其色相、飽和度、明度就能搭配出和諧的色彩。比如：首頁核心功能圖標，使用了不同的色彩，呈現了產品設計的年輕感、時尚感、律動感。

多種色彩來搭配，又保證了整體色彩搭配的和諧、統一感。

背景色和白色卡片的色彩的對比

背景色為了襯托內容，因此藍色的背景色，白色作為背景的對比色，區分畫面的視覺層次。

整個界面呈現出一種柔和的、舒適的色彩設計感。

漸變色的使用等優秀配色案例設計拆解：

大自然中有很多美麗的漸變色，比如晴空萬里的藍色漸變，大自然中提取美麗的漸變色彩，不要超過90度的漸變，畫面感比較和諧、有美感。

在APP設計中，常見的 UI 配色有，即單色搭配、鄰近色搭配、互補色搭配等色彩搭配。

單色搭配

單色搭配是指單一色系的搭配，它運用色彩的飽和度、明度而形成視覺的層次關系，將同一色彩貫穿App的始終，通常這個色彩來自品牌色。單色搭配的視覺風格，整體感好。因此呈現給用戶統一的感覺。

比如微信讀書的產品設計，主色應用在關鍵元素上看，帶給用戶友好的品質體驗感。

鄰近色搭配

鄰近色搭配是由主色和鄰近色的色系組成的搭配，可以在同一個色調中構建出豐富的視覺層次感和質感。例如：京東健康選擇與綠色臨近的黃色和藍色作為輔助色，賦予不同的功能含義，信息表達明確，和諧統一感很好，視覺上的趣味性，顏色的搭配顯得很柔和。

互補色搭配

互補色是由主色和其互補色的兩個色彩的搭配，該色彩可以為鄰近色，例如：藍色和黃色、橙色的搭配。這種搭配既能保持互補色搭配強烈的對比度，區分關鍵信息，次要信息，又能增加視覺上的趣味性，色彩看上去豐富多彩。例如：36 Kr 將藍色作為主色，互補色黃色作為輔助色應用在圖標、標簽上，再選擇黃色的鄰近色橙色作為另外一個輔助色，應用在不同的關鍵信息上，有助于用戶更好的閱讀產品的功能和內容。

不同模式背景下的界面設計

用戶體驗中運用了夜間模式這功能，用戶喜歡深夜使用手機這種場景。比如：閱讀資訊類產品，金融產品等也會選擇夜晚進行閱讀和使用。

當需要沉浸式的專注工作內容時，建議使用暗黑模式，可以幫助使用者更關注凸顯出來的內容和操作。

比如：百度網盤的界面設計，白天和夜晚的使用場景很豐富，因此支持夜間模式很有必要，保證使用者的體驗上的舒適感。

和諧的漸變色，美麗舒服，畫面豐富，層次感好，可以應用到圖標設計上，導航背板上。

1、 漸變色搭配的網站推薦：

https://webgradients.com/?

網站的特色不僅可以提供漂亮的漸變配色，而且還有更多格式選擇，比如 PSD, Sketch, PNG 以及可直接復制成一段 CSS 漸變代碼，設計師們就可以很方便的使用這個配色方案。

2、扁平化設計配色網站推薦：??

http://flatuicolors.com/

這個網站會定期更新一些扁平化設計中很受歡迎的色彩組合，里面的配色都很棒。

3、可生成一套色板的網站推薦：?

?http://www.colorfavs.com/

上傳一張你最喜歡的圖片，然后根據這張圖片自動生成一套色板，非常具有實用性。

配色工具導航

?http://hao.shejidaren.com/

不得不提，設計導航中有一個配色欄目，里面有很多你意想不到的配色工具，以上提到的幾個配色工具也包含在內，相當好用。打開設計導航，點選配色欄目，你就可以看到超多優秀的配色工具，去挑一款，總有一款適合自己。

三、近兩年來的流行色欣賞

權威趨勢預測機構WGSN發布了2020年春夏流行色。

萬物復蘇的春日，枝繁葉茂的夏季，如果要用一個顏色來形容這兩個季節，那么一定是綠色。

綠色代表著自然，清新，朝氣，蓬勃。

綠色是生命的顏色。而綠色大家族中的薄荷綠尤以小清新定位，個性獨特，辨識度極高。

追波的：Hydroponic Plant App，如下圖。

在移動端 UI 界面設計中，綠色在移動端產品設計的應用上。

近日，潘通發布了19年的流行色-樂觀和愉悅珊瑚橘

Pantone 選出了這款極具生命力的 Living Coral —— 「活力珊瑚橘」 作為2019年的潘通年度流行色。

PANTONE 16-1546 活珊瑚，還代表了現代生活的融合，是自然環境中出現的一種滋養色，同時也在社交媒體中的生動呈現。

潘通色彩研究中心的執行董事 Leatrice Eiseman 在聲明當中提到：「 色彩是一個平衡的鏡頭，透過它我們體驗自然與數碼的實境，活珊瑚橘色尤其如此。消費者渴望人際互動與社交關系，歡樂的活珊瑚橘呈現出人性化、振奮人心的特質，打動人們的心弦?！?/p>

在移動端 UI 的界面設計中，橙色也是一種超級飽和、充滿活力的選擇，可以在任何社交媒體上流行——因為橙色是在自然界中發現的一種美麗的色彩。

四、阿里 ANT DESIGN的官網的配色學習

Ant Design 色彩體系?解讀成兩個層面：系統級色彩體系和產品級色彩體系。

系統級色彩體系主要定義了螞蟻中臺設計中的基礎色板、中性色板和數據可視化色板。

產品級色彩體系則是在具體設計過程中，基于系統色彩進一步定義符合產品調性以及功能訴求的顏色。

系統級色彩體系

Ant Design 系統級色彩體系同樣源于「自然」的設計價值觀。設計師通過對自然場景的抽象捕捉，結合螞蟻的技術基因，形成了特有的 12 色。進一步又通過大量的觀察，捕捉不同色彩在自然光下的變化規律，借助美術中素描的思路，對 12 個顏色進行了衍生。在中性色板的定義上，則是平衡了可讀性、美感以及可用性得出來的。

?

基礎色板

Ant Design 的基礎色板共計 120 個顏色，包含 12 個主色以及衍生色。這些顏色基本可以滿足中后臺設計中對于顏色的需求。

Ant Design 的色板還具備進一步拓展的能力。經過設計師和程序員的精心調制，結合了色彩自然變化的規律，我們得出了一套色彩生成工具，當有進一步色彩設計需求時，設計者只需按照一定規則，定義好主色，便可以自動獲得一系列完整的衍生色。

中性色板

中性色包含了黑、白、灰。在螞蟻中后臺的網頁設計中被大量使用到，合理地選擇中性色能夠令頁面信息具備良好的主次關系，助力閱讀體驗。Ant Design 的中性色板一共包含了從白到黑的 13 個顏色。

產品級色彩體系

品牌色是體現產品特性和傳播理念最直觀的視覺元素之一。在色彩選取時，需要先明確品牌色在界面中的使用場景及范圍。在基礎色板中選擇主色，我們建議選擇色板從淺至深的第六個顏色作為主色。 Ant Design 的品牌色取自基礎色板的藍色，應用場景包括：關鍵行動點，操作狀態、重要信息高亮，圖形化等場景。

功能色代表了明確的信息以及狀態，比如成功、出錯、失敗、提醒、鏈接等。

功能色的選取需要遵守用戶對色彩的基本認知。

我們建議在一套產品體系下，功能色盡量保持一致。Ant Design 的功能色板如圖：

Ant Design 的中性色主要被大量的應用在界面的文字部分，此外背景、邊框、分割線、等場景中也非常常見。產品中性色的定義需要考慮深色背景以及淺色背景的差異，同時結合 WCAG 2.0 標準。

Ant Design 的中性色在落地的時候是按照透明度的方式實現的，具體色板如圖：

企業級產品設計中的色彩應用

色彩在使用時更多的是基于信息傳遞、操作引導和交互反饋等目的。理性的選擇顏色是關鍵。

企業級產品設計體系，創造高效愉悅的工作體驗。

參考文獻和網址：

《規律與邏輯》
《進階版UI設計師》
《ANT DESIGN 官網》
《百度百科》等。

作者 | 峻溪POINTVISION
來源 | 站酷（junxi666.zcool.com.cn）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。