界面配色

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

我被他的配色深深吸引了，特別想研究他的配色，就嘗試把他的作品在 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í)我也請(qǐng)教過(guò)小D（Dea_n）是否是刻意的，得到的答案是并沒(méi)有。然后小D（Dea_n）靠自己卓越的配色能力進(jìn)入小米 RIGO 設(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 種顏色混合而成的。

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

圖標(biāo)配色

我們來(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ī)范

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

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

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

配色中的主色或品牌色

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

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

全球旅行者喜愛(ài)的民宿預(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 值減少了。調(diào)整后的新版圖標(biāo)除了空間感和符號(hào)感也更強(qiáng)外，整體變得「更輕」了。

在網(wǎng)易云音樂(lè) 6.0 版本中，對(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)和而成的。這也是為什么之前黃色使用時(shí)，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)。

1. CIE

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

2. RGB

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

3. 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)到右上角改變色相值的 0-360度 的范圍。色相在 38-58 度的黃色區(qū)域?qū)υ捒蛏喜粫?huì)顯示帶感嘆號(hào)的三角形警告標(biāo)志，表示黃色區(qū)域的 CMYK 色域值是超過(guò) RGB 的色域值。這就是為什么 iOS 系統(tǒng)規(guī)范中的黃色色值必須是三種顏色混合而成的。這時(shí)候特殊的顏色就需要特殊處理。

CMYK配色法使用技巧

CMYK 配色法就是兩種顏色的色值為 0%，但是黃色因?yàn)樯騿?wèn)題是由三色組成的（c值盡量小于10）。

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

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

總結(jié)

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

文章來(lái)源：優(yōu)設(shè)網(wǎng)     作者：水手哥

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