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