如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

界面配色

2016 年玩追波的時候，有幸加入了 FreedomUnion 團隊，當時團隊內(nèi)的小D（Dea_n）的界面漸變風(fēng)很受歡迎，他使用的顏色干凈、舒服、有感染力，很快形成了自己特有的設(shè)計風(fēng)格。

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

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

小D（Dea_n）的用色著實很大膽，很多都是貼邊用色。我上大學(xué)的時候，老師曾經(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 種顏色混合而成的。

難道僅靠著一點吸色就可以肯定 CMYK 配色方法的存在？CMYK 配色方法是不是只存在 UI 界面設(shè)計中？CMYK 配色方法可不可以增加它的擴展性？CMYK 配色方法可以作為一種配色方法幫助設(shè)計師完成色彩搭配的工作嗎？帶著這些疑問我繼續(xù)研究配色。

圖標配色

我們來看一下「子彈短信」的應(yīng)用圖標，它的用色基本符合之前說的 CMYK 配色方法，當然是不包含子彈上的深色調(diào)。漸漸地我發(fā)現(xiàn) CMYK 配色方法的路子越來越寬了。

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

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

我們都知道 iOS 系統(tǒng)和 Android 系統(tǒng)，在他們各自的系統(tǒng)規(guī)范中對配色也有相應(yīng)的規(guī)范。我們提取兩大系統(tǒng)規(guī)范中的配色進行吸色分析。

一頓猛吸之后，發(fā)現(xiàn)大廠系統(tǒng)規(guī)范的用色也基本符合 CMYK 配色方法的標準。

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

配色中的主色或品牌色

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

新版的 Facebook LOGO 從深藍色變?yōu)榱了{色，字體則繼續(xù)保持原樣。其中 CMY 值進行適當減少。除此之外，圖標部分也由原來的圓角正方形變?yōu)閳A形，圖標中的「f」從偏右的位置移到圓形的中間位置。

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

微信 7.0 版本使用了經(jīng)過調(diào)整的全新圖標。圖標除了原來綠色漸變的背板變淺外，兩個標志性的對話氣泡與背景板的比例也做了相應(yīng)的調(diào)整。色彩的 CY 值減少了。調(diào)整后的新版圖標除了空間感和符號感也更強外，整體變得「更輕」了。

在網(wǎng)易云音樂 6.0 版本中，對品牌 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 時的色域范圍，范圍和藍色、紫色的色域范圍相當。

1. CIE

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

2. RGB

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

3. CMYK

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

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

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

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

CMYK配色法使用技巧

CMYK 配色法就是兩種顏色的色值為 0%，但是黃色因為色域問題是由三色組成的（c值盡量小于10）。

色域集中在純色系的范圍，濁（灰）色系和暗色系除外。

界面的主色（純色系為主）、圖標設(shè)計、品牌色（純色系為主）都可以使用 CMYK 配色法。

總結(jié)

CMYK 配色法目前多適用于互聯(lián)網(wǎng)產(chǎn)品，雖說在創(chuàng)意上要敢于創(chuàng)新，但在實際的工作中還是需要理性地根據(jù)公司品牌和產(chǎn)品定位，合理地進行色彩搭配。目前此方法沒有更多的理論依據(jù)支撐，如有疑問希望多多交流。

藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。