對(duì)于UI設(shè)計(jì)而言繁涂，色彩是非常有趣且有非常多知識(shí)點(diǎn)的一部分。本文中二驰，筆者主要分享一些CMYK的配色法的分析與思考扔罪。

界面配色

時(shí)光飛逝，2016年玩追波的時(shí)候桶雀，有幸和PP矿酵、Dea_n、UISTAR矗积、俊哥全肮、冰箱龍、Penny在一個(gè)叫FreedomUnion團(tuán)隊(duì)漠魏，當(dāng)時(shí)團(tuán)隊(duì)小D（Dea_n）的界面漸變風(fēng)當(dāng)時(shí)很受歡迎倔矾，他使用的顏色干凈妄均、舒服柱锹、有感染力。很快形成了自己特有的設(shè)計(jì)風(fēng)格丰包。

當(dāng)時(shí)被他的配色深深吸引了禁熏，我就特別想研究研究他的配色，就嘗試把他的作品在PS中打開邑彪，嘗試吸吸色瞧毙，找找他經(jīng)常使用的配色范圍，還有看看為什么他配出來(lái)的顏色就很吸引人寄症，長(zhǎng)時(shí)間看眼睛也不會(huì)太累宙彪？下面先欣賞一下小D（Dea_n）的設(shè)計(jì)作品吧！Ｓ星伞释漆！

作品已經(jīng)過(guò)了三年了，按照正常的配色作品應(yīng)該看上去會(huì)有些過(guò)時(shí)篮迎，但是小D（Dea_n）的作品看上去并沒(méi)有男图，還是有不少作品的配色現(xiàn)在看上去也是很前衛(wèi)的示姿。一起來(lái)看看我對(duì)小D（Dea_n）的大部分作品的吸色情況吧。哇逊笆，不吸不知道栈戳，一吸嚇一跳。

小D（Dea_n）的用色著實(shí)很大膽难裆，很多都是貼邊用色子檀，我上大學(xué)的時(shí)候，老師曾經(jīng)說(shuō)過(guò)使用顏色盡量少用貼邊的設(shè)計(jì)差牛，包括灰色也可以使用帶有顏色傾向的高級(jí)灰命锄。這下終于明白了為什么小D（Dea_n）的配色這么亮眼。

當(dāng)然我也有自己的小發(fā)現(xiàn)偏化，我發(fā)現(xiàn)每個(gè)的作品主配色的CMYK值總會(huì)有兩種色值為0%（比如C：0%脐恩、M：91%、Y：95%侦讨、K：0%）

當(dāng)時(shí)就很好奇驶冒，難道只是偶然。當(dāng)時(shí)我也請(qǐng)教過(guò)小D（Dea_n）是否有刻意韵卤，得到的答案是并沒(méi)有骗污。然后小D（Dea_n）靠自己的卓越的配色能力進(jìn)入小米R(shí)IGO設(shè)計(jì)團(tuán)隊(duì)。

當(dāng)小米miui9系統(tǒng)官網(wǎng)海報(bào)出來(lái)的時(shí)候沈条，我把作品拿到PS吸色需忿，結(jié)果告訴我小D一定參與了這個(gè)作品的配色設(shè)計(jì)。

為什么只有黃色的CMYK的色值是有3種顏色混合而成的蜡歹？

帶著上面的疑問(wèn)屋厘，我看到好的作品還是喜歡到PS里面吸吸色，看看好的作品的顏色的CMYK值月而『谷鳎總想搞明白為啥CMYK值總會(huì)有兩種色值為0%這件事？

如果真的僅這一點(diǎn)點(diǎn)的配色技法就可以肯定CMYK配色方法的存在父款？

CMYK配色方法是不是只存在UI界面設(shè)計(jì)中溢谤？

CMYK配色方法可不可以增加它的擴(kuò)展性？

CMYK配色方法可以作為一種配色方法幫助設(shè)計(jì)師完成色彩搭配的工作憨攒？

帶著這些疑問(wèn)會(huì)繼續(xù)學(xué)習(xí)研究配色世杀。

圖標(biāo)配色

2018年8月，老羅推出社交應(yīng)用“子彈短信”肝集，子彈短信推出以后瞻坝，還有一個(gè)討論，是說(shuō)子彈短信即將挑戰(zhàn)微信的地位“現(xiàn)在看來(lái)大家都懂得湿镀。我們來(lái)看一下“子彈短信”的應(yīng)用圖標(biāo)炕吸，它的用色基本符合之前說(shuō)的CMYK配色方法，當(dāng)然是不包含子彈上的深色調(diào)勉痴。漸漸的發(fā)現(xiàn)CMYK配色方法的路子越來(lái)越寬了赫模。

Asher是追波繪畫寫實(shí)圖標(biāo)的大神，他的寫實(shí)作品配色飽和度高蒸矛，光影通透到位瀑罗，需要很強(qiáng)的手繪功底。在他的設(shè)計(jì)作品中除去暗色調(diào)和深色調(diào)的部分雏掠，其他配色基本都使用了CMYK配色的技巧斩祭。

大廠系統(tǒng)規(guī)范

我們知道在移動(dòng)端主流兩大系統(tǒng)是蘋果的iOS系統(tǒng)和谷歌的Android系統(tǒng)，在他們各自的系統(tǒng)規(guī)范中對(duì)配色也有相應(yīng)的系統(tǒng)規(guī)范乡话。iOS是開發(fā)者中心系統(tǒng)的配色規(guī)范摧玫，谷歌的是Material Design對(duì)配色也有相應(yīng)規(guī)范。我們提取兩大系統(tǒng)規(guī)范中的配色進(jìn)行吸色分析绑青。

一頓猛吸之后神奇的一幕出現(xiàn)了诬像，發(fā)現(xiàn)大廠系統(tǒng)規(guī)范的用色也基本符合CMYK配色方法的標(biāo)準(zhǔn)。為什么iOS中的黃色色值是三種顏色混合而成的闸婴。文章的后面會(huì)很仔細(xì)的講到坏挠。大多配色都使用了兩種配色。

前段時(shí)間IBM重新定義了他們的設(shè)計(jì)語(yǔ)言邪乍，在產(chǎn)品配色中Blye 60降狠、Alert60、Alert40庇楞、Alert20榜配、Alert50等主要配色都符合CMYK配色的方法。

整體的色彩都是高亮色姐刁，由于我們?cè)谙到y(tǒng)界面設(shè)計(jì)中能使用的元素大體分為字體芥牌、圖標(biāo)烦味、圖片聂使、顏色等，所以在系統(tǒng)排版過(guò)程中整個(gè)界面多為有彩色與無(wú)彩色的范疇谬俄，即文字配色多位黑白色柏靶，可交互可點(diǎn)擊的配色或圖標(biāo)多為系統(tǒng)的高亮色，在整個(gè)界面設(shè)計(jì)中會(huì)更突出溃论，起到強(qiáng)調(diào)吸引用戶的目的屎蜓。

配色中的主色或品牌色

近期很多互聯(lián)網(wǎng)公司進(jìn)行了品牌改版。深亮色調(diào)到淺亮色調(diào)慢慢成為一種趨勢(shì)钥勋。

2019年4月30日炬转，F(xiàn)acebook F8開發(fā)者大會(huì)在加州圣荷西會(huì)議中心舉辦辆苔。會(huì)上，創(chuàng)始人兼首席執(zhí)行官馬克·扎克伯格（Mark Elliot Zuckerberg）宣布Facebook 全面改版扼劈，新版LOGO從深藍(lán)色變?yōu)榱了{(lán)色驻啤，字體則繼續(xù)保持原樣。其中CMY值進(jìn)行適當(dāng)減少荐吵。此外骑冗，變化最大的為Facebook的圖標(biāo)部分。原來(lái)的圓角正方形變?yōu)閳A形先煎，圖標(biāo)中的“f”從偏右的位置移到圓形的中間位置贼涩。

全球旅行者喜愛的民宿預(yù)訂平臺(tái)愛彼迎(Airbnb)的品牌logo主色也符合CMYK配色的方法。和2019潘通流行色 – 珊瑚橘很接近薯蝎。

微信7.0版本使用了經(jīng)過(guò)調(diào)整的全新圖標(biāo)遥倦。圖標(biāo)除了原來(lái)綠色漸變的背板變淺外，兩個(gè)標(biāo)志性的對(duì)話氣泡與背景板的比例也做了相應(yīng)的調(diào)整占锯。色彩的CY值進(jìn)行了減少谊迄。

調(diào)整后的新版圖標(biāo)除了空間感和符號(hào)感也更強(qiáng)外，整體變的“更輕”了烟央。目前這個(gè)全新的配色方案已經(jīng)在微信下面的各個(gè)子品牌圖標(biāo)中開始應(yīng)用统诺，比如微信支付、部分PC頁(yè)面等疑俭。

在6.0版本中粮呢，網(wǎng)易云音樂(lè)對(duì)品牌LOGO再次進(jìn)行了調(diào)整。新版網(wǎng)易云音樂(lè)圖標(biāo)最明顯的變化為紅色的主色調(diào)钞艇，其次為“留聲機(jī)”和“音符”組合而成的圖形部分啄寡。

紅色較之前變的更加明亮，同時(shí)圖標(biāo)紅色背景由之前的純色改為輕微的紅色漸變填充哩照。新的紅色著重考慮了用戶長(zhǎng)時(shí)間使用屏幕造成的視覺(jué)疲勞挺物，采用比較“輕”的色彩可有效降低這種問(wèn)題。其中顏色CMY三種色值都有減少飘弧。圖形部分识藤，新版圖形縮小了中間交叉部分的面積，頂部向右彎曲的弧形變大次伶。整體效果較之前更加清晰痴昧，特別是在更小的應(yīng)用尺寸中，其展示的效果明顯要比之前的好冠王。

不同顏色CMYK的色域范圍

看到文章上面描述的是不是特別想看看當(dāng)CMYK中的兩個(gè)色值同時(shí)為0時(shí)不同顏色的色域范圍赶撰？帶著這樣的想法，把紅橙黃綠青藍(lán)紫中每類選一種顏色進(jìn)行區(qū)域研究。打開PS在拾色器中截圖不同顏色的色域范圍如下：

上圖白色區(qū)域就是在紅色C值為0豪娜、K值為0時(shí)的色域范圍餐胀，范圍還是很小的。

黃色的CMYK色域很奇怪瘤载，在色相38-58度的黃色純度最高時(shí)CMY都有色值骂澄，就是PS里面最純的黃色也是有CMY復(fù)色調(diào)和而成的。這也是為什么之前的黃色使用中都是CMYK色值是由三種顏色混合而成的惕虑。

上圖白色區(qū)域就是在綠色M值為0坟冲、K值為0時(shí)的色域范圍，范圍開始慢慢變大溃蔫，意味著綠色高飽和度的可使用顏色越來(lái)越多健提。

上圖白色區(qū)域就是在綠色M值為0、K值為0時(shí)的色域范圍伟叛，范圍也開始慢慢變大私痹，大體范圍和綠色相當(dāng)。

上圖白色區(qū)域就是在藍(lán)色Y值為0统刮、K值為0時(shí)的色域范圍紊遵，范圍應(yīng)該很大了。

上圖白色區(qū)域就是在紫色Y值為0侥蒙、K值為0時(shí)的色域范圍暗膜，范圍和藍(lán)色的色域范圍相當(dāng)。

上圖白色區(qū)域就是在洋紅色Y值為0鞭衩、K值為0時(shí)的色域范圍学搜，范圍和藍(lán)色、紫色的色域范圍相當(dāng)论衍。

CIE

從理論上講瑞佩，可見光分布的色彩域就是CIE所表示的色域。在顏色感知的研究中坯台，CIE 1931 XYZ色彩空間（也叫做CIE 1931色彩空間）是其中一個(gè)最先采用數(shù)學(xué)方式來(lái)定義的色彩空間炬丸。從CIE圖中能看出冷色的區(qū)域遠(yuǎn)遠(yuǎn)大于暖色的區(qū)域。當(dāng)中黃色和紅色的色域范圍相對(duì)較少蜒蕾，完全符合PS拾色器里面的色域范圍稠炬。

RGB

RGB是計(jì)算機(jī)熒光屏顯示顏色的色彩方式，它們是由R滥搭、G酸纲、B3種發(fā)光質(zhì)通過(guò)加光混合產(chǎn)生的捣鲸。RGB色彩模式是一種加色模式瑟匆，將紅光、綠光和藍(lán)光以不同的比例相加可以合成各種各樣的色光。R愁溜、G疾嗅、B3種顏色各能產(chǎn)生2的8次冪即256級(jí)不同等級(jí)亮度的顏色。256*256*256即16777216種顏色冕象。RGB色彩模式主要用在電腦顯示器和電視上代承。RGB色彩模式是繪圖軟件最常用的一種顏色模式。

CMYK

CMYK由C（青）渐扮、M（品紅）论悴、Y（黃）、K（黑）四色高飽和度的油墨以不同角度的網(wǎng)屏疊印形成復(fù)雜的彩色圖片墓律。CMYK色彩模式是一種顏料模式膀估，它利用色料三原色混色原理，加上黑色油墨耻讽，形成各種各樣的色彩察纯。

這種模式屬于相減混色模式，廣泛運(yùn)用于繪畫和印刷領(lǐng)域针肥。CMYK的色域范圍比RGB的色域范圍要小饼记，某些色彩無(wú)法用CMYK油墨印刷出來(lái)。當(dāng)這些不能印刷出來(lái)的顏色出現(xiàn)時(shí)慰枕，在PS的【拾色器】對(duì)話框上會(huì)顯示一個(gè)帶感嘆號(hào)的三角形警告標(biāo)志具则，表示這些顏色超出CMYK的色域，即使設(shè)計(jì)了比較鮮艷的顏色具帮，如果超出了CMYK印刷顏色的色域乡洼，計(jì)算機(jī)就會(huì)用一個(gè)接近它的較灰暗的顏色去頂替它∝芭鳎可見大部分CMYK印刷顏色的色域小于RGB屏幕顏色的色域束昵。

我們來(lái)仔細(xì)研究下CIE色域范圍，CMYK當(dāng)中的黃色色域值有一小段超過(guò)了RGM的色域值葛峻。這就說(shuō)明黃色更飽和的CMYK的原色和間色可能在RGB的范圍之外锹雏。

其他我們還有一個(gè)方法去驗(yàn)證。就是在PS里面新建顏色模式為CMYK的文件术奖，打開拾色器界面礁遵，把顏色調(diào)到右上角通過(guò)改變色相值的0-360度的范圍。色相在38-58度的黃色區(qū)域?qū)υ捒蛏喜粫?huì)顯示帶感嘆號(hào)的三角形警告標(biāo)志采记，表示黃色區(qū)域的CMYK的色域值是超過(guò)RGB的色域值佣耐。這就是為什么iOS中的黃色色值必須是三種顏色混合而成的。這時(shí)候特殊的顏色就需要特殊處理唧龄。

CMYK配色法使用技巧

CMYK配色法就是兩種顏色的色值為0%兼砖，但是黃色(c值盡量小于10)。因?yàn)樯騿?wèn)題其飽和度最高的黃色色值也是有三色組成的。色域集中在純色系的范圍讽挟，濁（灰）色系和暗色系除外懒叛。

界面的主色（純色系為主）可以使用CMYK配色法。

圖標(biāo)設(shè)計(jì)可以使用CMYK配色法耽梅。

品牌色（純色系為主）也可以使用CMYK配色法薛窥，因?yàn)榇髲S的品牌色應(yīng)用現(xiàn)在慢慢會(huì)成為一種趨勢(shì)。

總結(jié)

CMYK配色法目前多適用于互聯(lián)網(wǎng)產(chǎn)品眼姐，在色彩的創(chuàng)意上敢于創(chuàng)新诅迷，在實(shí)際的工作中還是需要理性的根據(jù)公司品牌和產(chǎn)品定位合理的進(jìn)行色彩搭配。目前此方法沒(méi)有更多的理論依據(jù)作為支撐众旗，如有疑問(wèn)希望多多交流竟贯。如果感覺(jué)此方法還不錯(cuò)可以在繼續(xù)深入研究慢慢完善自己的配色體系。