對于UI設(shè)計而言，色彩是非常有趣且有非常多知識點的一部分。本文中，筆者主要分享一些CMYK的配色法的分析與思考。

今年特別想嘗試寫寫系列文章，趕上公司設(shè)計UED分興趣小組，我最終選擇了色彩興趣小組，其實色彩要學的，能寫的還是很多很多的。

其實早在三年前我就開始慢慢研究配色的相關(guān)技巧和知識理論。所以在選擇興趣小組的時候，果斷的選擇了色彩。

界面配色

時光飛逝，2016年玩追波的時候，有幸和PP、Dea_n、UISTAR、俊哥、冰箱龍、Penny在一個叫FreedomUnion團隊，當時團隊小D（Dea_n）的界面漸變風當時很受歡迎，他使用的顏色干凈、舒服、有感染力。很快形成了自己特有的設(shè)計風格。

當時被他的配色深深吸引了，我就特別想研究研究他的配色，就嘗試把他的作品在PS中打開，嘗試吸吸色，找找他經(jīng)常使用的配色范圍，還有看看為什么他配出來的顏色就很吸引人，長時間看眼睛也不會太累？下面先欣賞一下小D（Dea_n）的設(shè)計作品吧?。?！

作品已經(jīng)過了三年了，按照正常的配色作品應(yīng)該看上去會有些過時，但是小D（Dea_n）的作品看上去并沒有，還是有不少作品的配色現(xiàn)在看上去也是很前衛(wèi)的。一起來看看我對小D（Dea_n）的大部分作品的吸色情況吧。哇，不吸不知道，一吸嚇一跳。

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

當然我也有自己的小發(fā)現(xiàn)，我發(fā)現(xiàn)每個的作品主配色的CMYK值總會有兩種色值為0%（比如C：0%、M：91%、Y：95%、K：0%）

當時就很好奇，難道只是偶然。當時我也請教過小D（Dea_n）是否有刻意，得到的答案是并沒有。然后小D（Dea_n）靠自己的卓越的配色能力進入小米RIGO設(shè)計團隊。

當小米miui9系統(tǒng)官網(wǎng)海報出來的時候，我把作品拿到PS吸色，結(jié)果告訴我小D一定參與了這個作品的配色設(shè)計。

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

帶著上面的疑問，我看到好的作品還是喜歡到PS里面吸吸色，看看好的作品的顏色的CMYK值?？傁敫忝靼诪樯禖MYK值總會有兩種色值為0%這件事？

• 如果真的僅這一點點的配色技法就可以肯定CMYK配色方法的存在？
• CMYK配色方法是不是只存在UI界面設(shè)計中？
• CMYK配色方法可不可以增加它的擴展性？
• CMYK配色方法可以作為一種配色方法幫助設(shè)計師完成色彩搭配的工作？

帶著這些疑問會繼續(xù)學習研究配色。

圖標配色

2018年8月，老羅推出社交應(yīng)用“子彈短信”，子彈短信推出以后，還有一個討論，是說子彈短信即將挑戰(zhàn)微信的地位?，F(xiàn)在看來大家都懂得。我們來看一下“子彈短信”的應(yīng)用圖標，它的用色基本符合之前說的CMYK配色方法，當然是不包含子彈上的深色調(diào)。漸漸的發(fā)現(xiàn)CMYK配色方法的路子越來越寬了。

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

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

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

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

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

整體的色彩都是高亮色，由于我們在系統(tǒng)界面設(shè)計中能使用的元素大體分為字體、圖標、圖片、顏色等，所以在系統(tǒng)排版過程中整個界面多為有彩色與無彩色的范疇，即文字配色多位黑白色，可交互可點擊的配色或圖標多為系統(tǒng)的高亮色，在整個界面設(shè)計中會更突出，起到強調(diào)吸引用戶的目的。

配色中的主色或品牌色

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

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

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

微信7.0版本使用了經(jīng)過調(diào)整的全新圖標。圖標除了原來綠色漸變的背板變淺外，兩個標志性的對話氣泡與背景板的比例也做了相應(yīng)的調(diào)整。色彩的CY值進行了減少。

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

在6.0版本中，網(wǎng)易云音樂對品牌LOGO再次進行了調(diào)整。新版網(wǎng)易云音樂圖標最明顯的變化為紅色的主色調(diào)，其次為“留聲機”和“音符”組合而成的圖形部分。

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

不同顏色CMYK的色域范圍

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

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

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

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

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

上圖白色區(qū)域就是在藍色Y值為0、K值為0時的色域范圍，范圍應(yīng)該很大了。

上圖白色區(qū)域就是在紫色Y值為0、K值為0時的色域范圍，范圍和藍色的色域范圍相當。

上圖白色區(qū)域就是在洋紅色Y值為0、K值為0時的色域范圍，范圍和藍色、紫色的色域范圍相當。

CIE

從理論上講，可見光分布的色彩域就是CIE所表示的色域。在顏色感知的研究中，CIE 1931 XYZ色彩空間（也叫做CIE 1931色彩空間）是其中一個最先采用數(shù)學方式來定義的色彩空間。從CIE圖中能看出冷色的區(qū)域遠遠大于暖色的區(qū)域。當中黃色和紅色的色域范圍相對較少，完全符合PS拾色器里面的色域范圍。

RGB

RGB是計算機熒光屏顯示顏色的色彩方式，它們是由R、G、B3種發(fā)光質(zhì)通過加光混合產(chǎn)生的。RGB色彩模式是一種加色模式，將紅光、綠光和藍光以不同的比例相加可以合成各種各樣的色光。R、G、B3種顏色各能產(chǎn)生2的8次冪即256級不同等級亮度的顏色。256*256*256即16777216種顏色。RGB色彩模式主要用在電腦顯示器和電視上。RGB色彩模式是繪圖軟件最常用的一種顏色模式。

CMYK

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

這種模式屬于相減混色模式，廣泛運用于繪畫和印刷領(lǐng)域。CMYK的色域范圍比RGB的色域范圍要小，某些色彩無法用CMYK油墨印刷出來。當這些不能印刷出來的顏色出現(xiàn)時，在PS的【拾色器】對話框上會顯示一個帶感嘆號的三角形警告標志，表示這些顏色超出CMYK的色域，即使設(shè)計了比較鮮艷的顏色，如果超出了CMYK印刷顏色的色域，計算機就會用一個接近它的較灰暗的顏色去頂替它?？梢姶蟛糠諧MYK印刷顏色的色域小于RGB屏幕顏色的色域。

我們來仔細研究下CIE色域范圍，CMYK當中的黃色色域值有一小段超過了RGM的色域值。這就說明黃色更飽和的CMYK的原色和間色可能在RGB的范圍之外。

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

CMYK配色法使用技巧

1. CMYK配色法就是兩種顏色的色值為0%，但是黃色(c值盡量小于10)。因為色域問題其飽和度最高的黃色色值也是有三色組成的。色域集中在純色系的范圍，濁（灰）色系和暗色系除外。
2. 界面的主色（純色系為主）可以使用CMYK配色法。
3. 圖標設(shè)計可以使用CMYK配色法。
4. 品牌色（純色系為主）也可以使用CMYK配色法，因為大廠的品牌色應(yīng)用現(xiàn)在慢慢會成為一種趨勢。

總結(jié)

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

作者：水手哥，公眾號：水手哥學設(shè)計

本文由 @水手哥 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議