在視覺設計的世界里，色彩不僅僅是一種裝飾，它是傳達情感、影響情緒和吸引用戶的關鍵。本文深入探討了色彩在界面設計中的重要性，揭示了如何通過色彩的定義、屬性、模型以及在不同場景下的應用來增強設計的吸引力。
色彩在我們日常設計中起著定生死的作用，它是設計的靈魂，舒適的色彩搭配可以讓設計師一遍定稿，感覺在自己的設計生涯中，大部分都是在與色彩的博弈中度過的，雖然客戶可能不懂色彩原理，可是客戶天生都是色彩的感受家，什么樣的色彩搭配美，通常他們瞄一眼就會有定論，不用你去辯解太多，不好的搭配，縱使有千萬種理由，也說服不了客戶，所以好好研究色彩以及每一種色彩傳遞的情感對我們做好設計至關重要。
目錄
一、 色彩的定義
二、 色彩的三屬性
三、 色彩的三種常見模型
四、 色彩的語意及它的應用
五、 不同場景下的色彩應用
六、 色彩在B端設計中的作用
七、 B端色彩設計使用的原則
一、色彩的定義？
1、物理學角度
色彩是光的屬性，當光波通過物體時，物體會吸收某些波長的光，而反射或透射其他波長的光，這些被反射或透射的光波長度決定了我們看到的顏色。
2、心理學角度
色彩是人腦對光波長的視覺感知，不同的波長刺激視網膜上不同類型的感光細胞，進而產生不同的色彩感覺。
3、 藝術學角度
色彩是藝術創作的重要元素，它不僅關乎視覺感受，還與情感、文化、象征意義相關聯。
4、 設計學角度
在設計領域，色彩是傳達信息、影響情緒和創造美感的關鍵工具。
5、 計算機科學角度
在數字圖像處理中，色彩通常通過顏色模型（如RGB、CMYK等）來定義，這些模型通過不同比例的原色或色料混合來表示各種顏色。
二、色彩的三屬性
1、色相
色相是指不同顏色之間的差別，即不同顏色的表象和名稱，每個顏色都有自己的專屬ID,如紅、橙、黃、綠、青、藍、紫等。不同的色別都可用光譜中的波長來表示，人的眼睛可分辨出的色別有180種左右。
2、明度
明度是指色彩的明暗程度。一般在反光率相同的情況下，不同色別的明暗程度不同。如黃色光比紅色光更明亮，而紅色光則比青色光要明亮。
同時，同一色相在受光強弱或者物體對光的吸收、反射性能不同的情況下，會呈現不同的明暗變化和差異。
3、飽和度（純度）
飽和度（純度）是指同一色別的純凈度和鮮明度的變化。從色光的角度而言，光的波長單一程度越高，飽和度就會越高；不同色別所達到的飽和度不同，一般情況下，紅色的純度可達到最高，綠色的則相對較低；同一色相深淺不同的顏色有不同的飽和度；黑白色光的滲入會導致飽和度和明度發生變化；通常，照明光線的性質、物體表面結構對光線吸收與反射的性能等因素影響飽和度。
三、色彩三種常見模型
1、HSB模型
HSB模型也叫HSV模型，其中H代表色相，即顏色的種類；S代表飽和度，即顏色的純度；B(V)代表亮度，即顏色的明亮程度。
這種色彩模型是我日常在的設計工作中用的最多的一種色彩模型，如果在同色系中如果只想讓他們有細微的變化，我通常會通過調節S和B的百分比數值來達到自己想要的目的。
以上就是我在設計項目中，運用該色彩模型做的一個實戰，項目中用到了一個圖形，需要用同色系來表達，我保持了H色值的不變，讓S值和B值都發生著微妙的不同，于是就產生了四五種同色系的綠色，該色彩模型特別的好使，也鼓勵大家多在實戰中運用這樣的色彩模型，簡單實用。
- H色相: Hue，以角度(0°-360°)表示
- S飽和度: Saturation，以百分比值(0%-100%)表示
- B/V 亮度: Brightness 或 Value，以百分比值(0%-100%)表示
2、RGB模型
RGB是從顏色發光的原理來設計定的，通俗點說它的顏色混合方式就好像有紅、綠、藍三盞燈，當它們的光相互疊合的時候，色彩相混，而亮度卻等于三者亮度之總和，越混合亮度越高，即加法混合。
紅、綠、藍三個顏色通道每種色各分為256階亮度，在0時“燈”最弱——是關掉的，而在255時“燈”最亮。當三色灰度數值相同時，產生不同灰度值的灰色調，即三色灰度都為0時，是最暗的黑色調；三色灰度都為255時，是最亮的白色調。
- R紅：Red，以數值(0-255)表示
- G綠：Green，以數值(0-255)表示
- B藍：Blue，以數值(0-255)表示
3、CMYK模型
雖然RGB模型色彩更加的豐富，但是很多顏色不能完全打印出來，于是CMYK模型就成了打印、印刷的不二選擇。C是青、M是品紅、Y是黃、K是黑，通過顏料反射和吸收光線來顯色。
記得之前自己從事平面工作的時候，就經常要用到CMYK模式，因為印出來的效果偏差是最小的，是最靠近設計效果圖的。
通過對比，我們發現RGB色彩模型顏色顯示上確實更加的絢麗豐富些，而CMYK的色彩模型顏色顯示上就黯淡了不少，但是要印刷的話，就必須轉化為成CMYK的色彩模式。
- R青：Cyan，以百分比值(0%-100%)表示
- M品紅：Magenta，以百分比值(0%-100%)表示
- Y黃：Yellow，以百分比值(0%-100%)表示
- B黑：Black，以百分比值(0%-100%)表示
四、色彩的語意及應用
1、紅色的語意及應用
紅色代表熱情、活力、強烈的情感和愛。它可以象征著激情、勇氣和行動力，也常與興奮、熱烈的情緒相關。
著名的快餐品牌肯德基，在自己的網頁及店鋪裝修中都運用了紅色，因為紅色是所有顏色中最容易引起人們注意的顏色，也是很容易刺激人們食欲和購買的顏色。
2、橙色的語意及應用
橙色傳達溫暖、歡快和積極向上的情感；它常與樂觀、友好、創造力聯系在一起，給人以活力充沛和充滿希望的感覺。
百度網盤的這個登錄界面就運用了橙色，給人陽光、向上、熱情的感覺，通過色彩的運用一下讓界面有了溫度。
3、黃色的語意及應用
黃色象征快樂、開朗和樂觀；它能帶來明亮、愉悅的情緒，代表著陽光、溫暖和智慧。
叫叫閱讀是一款非常著名的兒童閱讀軟件，整個色調采用的是非常有活力的黃色，這與兒童處于好奇與活力的階段相符合，這種高亮的黃色，飽和度和明度都非常的高，特別容易抓住兒童的目光，同時它是一種快樂的顏色，也是一種能激發孩子創造力和想象力的顏色，特別符合兒童成長的需求。
4、綠色的語意及應用
綠色代表平靜、和諧與生機。綠色常與大自然相關，給人帶來安寧、放松的感覺，也象征著成長、希望和新生。
青椒云的目標用戶是吸引年輕用戶和創意工作者，綠色這種富有活力和創意的顏色更容易吸引他們的關注，同時綠色也代表著健康、可持續發展的企業形象。
5、青色的語意及應用
青色寓意清新、寧靜和沉穩，它給人一種冷靜、理智的印象，同時也帶有一絲清新的活力。
青色是一種帶有藍色和綠色的顏色，因此青色既有藍色的專業感、信任感，也有綠色的生機感、希望感。
以下是日本某牙醫品牌的官網首頁，病人希望在這里帶來健康與復蘇，也希望獲得專業、可靠的治療，而青色就成了很好傳遞這種情感的品牌色。
6、藍色的語意及應用
藍色代表冷靜、忠誠和信任；它常與沉穩、深邃的情感相關，能帶來寧靜、平和的心境，也象征著智慧和理性。
123云盤使用了藍色，藍色符合社會的普遍審美認知，接受度比較高；其次，藍色給人安全的感覺，也符合云盤的初衷，給用戶安全的存儲服務。
7、紫色的語意及應用
紫色象征神秘、高貴和浪漫；它常給人一種優雅、奢華的感覺，同時也帶有神秘莫測的氛圍，與夢幻、創造力等情感相關。
美柚的主要用戶是女性，紫色在色彩心理學中常被認為具有優雅、神秘、浪漫的特質，這些特質與女性的審美和情感需求相契合，能夠吸引女性的關注。
8、白色的語意及應用
白色代表著純潔、神圣、信任、安靜、樸素和雅致，是一種充滿純潔的顏色，它可以跟任何顏色和諧的共生。
以下是熊掌ID的登錄界面，顏色用了大量的白與灰，簡潔又不失大氣，傳遞出了一種質樸、雅致的感覺。
五、不同場景下的色彩應用
1、商場色彩多彩的原因？
? 吸引顧客注意力
在眾多商業場所中脫穎而出，色彩鮮艷的商場外觀和內部裝飾更容易在人們的視線中凸顯出來，吸引過往行人的目光，激發他們的好奇心和探索欲。
確實多彩的顏色更加容易引起我的關注，這不看到商場的美圖，都忍不住拍照留念了，成功的吸引了我的目光。
? 增強可見性
即使在較遠的距離或在繁忙的街道上，多彩熱烈的配色也能讓商場更容易被發現，提高商場的知名度和曝光度。
多彩的配色，讓我很遠就被商場美輪美奐的插畫吸引，大大增加了商場的可見性。
? 營造愉悅氛圍
色彩可以激發積極情緒，明亮、鮮艷的色彩往往與快樂、活力和興奮等積極情緒相關聯。當顧客進入一個色彩豐富的商場時，會感受到一種愉悅和輕松的氛圍，從而更愿意在商場中停留和購物。
星沙永旺城的美陳設計很好，墻面采用極具誘惑力的顏色與美食，把小小實物十倍放大，增加了視覺看點，讓人忍不住過去拍照曬一下，大大增加了愉悅性。
? 緩解壓力
在現代生活中，人們常常面臨各種壓力。走進一個多彩熱烈的商場，可以暫時擺脫日常的煩惱和壓力，享受購物的樂趣。
特別可愛夸張的插圖設計，引發了絲絲童趣和歡樂，讓人短暫忘記壓力，遠離煩惱。
? 引導消費行為
商場通常會使用不同的顏色來區分不同的區域，如購物區、餐飲區、娛樂區等。這樣可以幫助顧客更快速地找到自己感興趣的區域，提高購物效率。
突出重點商品，對于一些重點推薦的商品或促銷活動，商場可以使用鮮艷的色彩來突出展示，吸引顧客的注意力，引導他們進行購買。
? 塑造品牌形象
6.1 傳達個性和風格
不同的商場可能有不同的品牌定位和目標客戶群體。通過選擇特定的色彩組合，商場可以傳達出自己的個性和風格，吸引與之相符的顧客。
6.2 增強品牌記憶度
獨特而鮮明的色彩搭配可以讓商場在顧客的心中留下深刻的印象，提高品牌的記憶度和辨識度。
芙蓉區的龍湖天街主要面向中等收入新興家庭，是一個區域型的購物中心，集購物、餐飲、休閑、娛樂等多業態于一體，為消費者提供一站式商業綜合體，它在餐飲區采用了大量的吃喝玩樂的插畫來引導用戶消費。
2、為什么藍色在B端設計中廣泛應用？
? 視覺特性方面
1.1 穩定性
藍色給人一種沉穩、可靠的感覺。在B端產品中，用戶往往需要處理重要的業務數據和進行復雜的操作，藍色的穩定性可以讓用戶感到安心，增強對產品的信任感。
1.2 專業性
藍色通常與科技、專業領域相關聯。B端產品通常面向企業用戶，需要傳達出專業、高效的形象，藍色正好符合這一需求。
? 心理影響方面
2.1 減少焦慮
相比鮮艷、刺激的顏色，藍色較為柔和，不容易引起用戶焦慮和緊張的情緒；在B端使用場景中，用戶可能需要長時間使用產品，藍色的舒緩效果有助于提高用戶的使用體驗。
2.2 提高專注度
藍色具有一定的沉靜作用，能夠幫助用戶集中注意力，專注于工作任務。對于B端用戶來說，高效完成工作是首要目標，藍色的這一特性有助于提高工作效率。
B端產品在心理上追求的是類似如下圖的這種寧靜式的體驗，跟教育有著異曲同工之處，就像這個易貝樂少兒英語一樣，用大面積的藍色，希望孩子在這里能很快的安靜下來學習、專注自己的事情。
? 行業習慣方面
3.1 科技行業引領
許多知名的科技企業和軟件產品在 B 端市場中廣泛使用藍色，逐漸形成了一種行業習慣。其他企業在設計B端產品時，也會傾向于選擇藍色以符合用戶的認知和期望。
3.2 傳統與延續
在過去的設計中，藍色在 B 端領域的成功應用使得它成為了一種傳統選擇。設計師們在延續這一傳統的同時，也不斷優化和創新藍色的運用方式，使其更符合現代設計趨勢和用戶需求。
嘉為科技是一個有著20多年技術沉淀的科技公司，它的官網和產品風格一直是沿用著科技藍的風格，應該也是基于傳統的沉淀吧。
?藍色可以提高產品的復用率
很多用戶都能接受藍色的B端界面，當面對有差不多需求客戶時，同一套UI，可以多次復用，可以減少開發成本和設計成本，這也是自己通過長期實戰觀察發現的。
一個UI風格，用在了兩個項目中，不同的用戶，趨向同樣的風格，說明藍色在大家心目中的接受度是非常的高，用藍色可以促進設計的多次復用。
在日常的項目中，我看到的B端UI界面是千篇一律的穩重，不追求過于刺激的顏色搭配，通常都比較的干凈簡潔，不像商場里面的美陳背景設計，色彩對比非常的強烈，比較的吸引人眼球。
有一次我厭煩了常規的穩重風，探索一種大膽的色彩風格時，雖然風格比較新穎，可是發出去客戶的接受度不高，覺得太不穩重了，然后重新按照以往習慣進行設計時，就很好，客戶一致認同。
可見每個領域都有自己的色彩運用習慣，商場需要吸引人眼球、刺激消費，越大膽越好，可是B端設計需要提供一個讓人平靜去處理工作事項的環境，它需要安靜，不需要過于刺激的顏色搭配。
六、色彩在B端設計中的作用？
1、通過色彩向用戶反饋操作結果及當前狀況
比方在日常設計當中，紅色代表流程失敗，綠色代表流程成功，橙色代表信息有告警，藍色代表著鏈接，同時不同的按鈕顏色也可以很好的區分按鈕狀態，在反饋結果和狀況方面，色彩起著非常重要的作用。
下面這個IDC運營的監測平臺，它就是通過顏色來區分不同的告警級別的，可見顏色在B端產品中的重要性。（備注：圖中數據都不是真實數據，僅做展示）
2、可以助力品牌傳達
B端設計中大面積使用品牌色，可以強化品牌形象，使用與品牌標志風格相近的色彩，可以幫助用戶快速識別和記住品牌，在不同的B端產品界面中使用統一的色彩方案，有助于建立品牌的連貫性和一致性，增強用戶對品牌的信任。
例如我給湖南高速設計的一套B端界面設計，用戶強烈要求改變傳統的藍色風格，要求整套界面設計要用湖南高速品牌色-綠色，說明在追求大流和品牌色之間，客戶更加傾向品牌的傳達。（備注：圖中數據都不是真實數據，僅做展示）
3、顏色可以很好的進行信息區分
在B端界面設計中，顏色在幫助信息區分起著非常重要的作用，通常可以通過不同的色彩來區分功能區域，可以讓用戶更清晰地了解界面的結構和布局，例如，導航欄使用一種特定的顏色，而內容區域則使用另一種顏色。
我設計的天翼寫作，就是這樣的設計思路，導航欄和內容區的顏色完全不一樣，這里顏色起到了很好的區分作用。
4、舒適的色彩搭配可以提升用戶體驗
選擇合適的色彩對比度可以增強文本的可讀性，減少用戶的視覺疲勞。例如，黑色文字在白色背景上通常比較容易閱讀。
選擇適當的色彩可以營造出專業、高效、舒適的工作氛圍，從而影響用戶的情緒和感受，提高用戶的使用體驗。
我參與的這個后臺界面，就是通過合理的色彩搭配來引導用戶使用的，當用戶已經完成的環節都是用綠色表示，沒有走完的流程就會是灰色的，寓意指示非常的鮮明，很好的解決了用戶不知道清晰進程的卡點，提升了用戶體驗。
5、色彩可以傳遞性格
人的性格有活潑的、文靜的、沉穩的、深邃的，其實色彩也是有性格的，不同的色彩也有不同的性格，當我們對色彩的性格有足夠多的了解，在面對不同的客戶時，我們對色彩的拿捏以及設計需求的把握時，會更加的游刃有余。
我們平常確實是在做設計，但是我們更多的是在與人打交道，我們更好的聆聽，會幫助我們更快的抓取到客戶的喜好，快速做出滿足客戶需求的設計，少受加班之苦。
比方說我之前給云門戶設計的一套UI，客戶的決策層是男性，且年齡偏大，他們就偏愛深沉的UI風格；而我負責的天翼云電腦專家，客戶的決策層是女性，且年齡偏年輕，她每次就喜歡輕盈、明快的UI色調,不同的決策層客戶，就會帶來不同的設計結果。
七、B端色彩設計使用的原則
1、B端設計中，色彩設計應遵循6：3：1原則
在這個登錄頁面中，我就是運用的6：3：1原則，60%的主色，30%的次要色，10%的點綴色；使用了大面積的藍色和藍灰色，最后使用一點點的橙色，這樣的配色會顯得高級。
2、文字、卡片背景色和邊框都使用無彩色
為了保證畫面風格的統一、干凈整潔，文字顏色、邊框顏色、以及邊框背景色都需要用到無彩色，通常通過顏色的深淺來區分信息的層級關系。
比方說我參與的星辰大模型AI文檔生成能力的應用，里面無論文字顏色還是底色都是運用的無彩色，只是通過了色彩深淺變化來做了層級區分，因為無彩色可以起到很好的降噪作用，既傳達了信息，又不會顯得界面凌亂復雜。
3、需要凸顯的內容，用明度和純度比較高的色彩
比方說，日常我們設計的卡片都是用的白色，而底色我們用的是灰色，因為卡片里面的內容都是比較重要的信息，需要用一個亮度比較高的顏色，讓內容往前走，而灰色的背景通常就往后走的感覺，這樣能跟卡片形成一個一前一后的對比，更好的幫助內容進行傳播。
比方說我設計的這個IT運維監控平臺的首頁，物理主機、網絡及安全設備、工單、在途工單這幾個指標是非常關鍵的，所以他們的圖片底色用了純度比較高的有彩色來標識。
4、設計前一定要有定色調的意識
作為設計師，我們的設計工作其實就是在設計一種感覺，一種情緒，設計前定調的意識真的太重要了，感覺對了，什么都就對了。
比方說我前段時間接到了一個B端的大屏可視化需求設計，客戶說之前的大屏設計不喜歡，希望重新出一個新的設計，然后公司的需求對接人員在給我下達需求時，真的就只是給我下達了這幾個字，讓我重新出一個設計試試。
以我的職業直覺，感覺這個需求是不夠細化的，于是我就多問了幾句，我問客戶是想要常規的藍色調的還是別的？果然一問，客戶說不希望再用常規的藍色的，希望新的設計要用他們的品牌色綠色，剛聽到這幾個字的時候，我以為這次我把握住需求了，在收集參考圖的時候，我發現常見的綠色大屏有深色的和淺色的，根據自己以往的作圖習慣，我覺得深色會更加的受歡迎一些，我自以為是的朝著深色的方向去出圖，出到了一半的時候，我內心有些許的忐忑，我于是找了一深一淺的參考圖，讓同事跟客戶確認一下，客戶是想要深色的感覺，還是要淺色的感覺，這次溝通又給了我深深的一擊，客戶不按常理出牌，說希望按淺色的風格來出圖。
在出稿之前，通過自己反復的溝通確認，發現設計前的定調意識真的太重要了，要不是有出圖前一波三折的反復確認以及需求的細化，就不會有后來的一遍過稿。
5.設計的灰色盡量使用帶有色彩偏向的灰
不管我們設計什么色系的界面，都避不開用到灰色，在設計中用跟主視覺相符的灰，會使得界面更加的高級、協調與美觀，注意好了這個小細節，會給我們的設計加分不少。
下面是我日常體驗到的兩個界面，上面綜合管理平臺里面的灰色就沒有跟主色調藍色相呼應，灰色沒有向藍色傾斜，界面看起來就沒那么美觀；下面通義千問的灰色設計就非常的注重細節，灰色偏紫，整個界面看起來渾然天成，毫無違和，美感、檔次瞬間提升好幾個等級。
一個微小細節的在意，在無形中拉高了設計的高度，十個細節乃至更多細節的在意，就會帶來更多意想不到的結果。
總結：
以上就是我最近對色彩的一些頓悟、感受和學習收獲，在不斷的復盤總結中，我們總會收獲一些新的認知，通過這次色彩的復盤之旅，發現色彩對設計師真的太重要了，希望我的分享對大家有啟發，不足之處也歡迎大家留言交流。
本文由 @姝斐suphie 原創發布于人人都是產品經理。未經作者許可，禁止轉載
題圖來自 Unsplash，基于CC0協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.devb.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
