2019-7-2 資深UI設計者
2016 年玩追波的時候,有幸加入了 FreedomUnion 團隊,當時團隊內的小D(Dea_n)的界面漸變風很受歡迎,他使用的顏色干凈、舒服、有感染力,很快形成了自己特有的設計風格。
我被他的配色深深吸引了,特別想研究他的配色,就嘗試把他的作品在 PS 中打開,嘗試吸色,找找他經常使用的配色范圍。為什么他配出來的顏色就很吸引人,長時間看眼睛也不會太累?下面先欣賞一下小D(Dea_n)的設計作品。
作品已經過了三年了,如果是一般的配色作品應該看上去會有些過時,但是小D(Dea_n)的作品看上去并沒有,還是有不少作品的配色現在看上去也是很前衛(wèi)的。一起來看看我對小D(Dea_n)的大部分作品的吸色情況吧。
小D(Dea_n)的用色著實很大膽,很多都是貼邊用色。我上大學的時候,老師曾經說過盡量少用貼邊的顏色設計,包括灰色也可以使用帶有顏色傾向的高級灰。這下終于明白了為什么小D(Dea_n)的配色這么亮眼。
當然我也有自己的小發(fā)現,我發(fā)現每個的作品主配色的 CMYK 值總會有兩種色值為 0%,比如C:0%、M:91%、Y:95%、K:0%。
難道只是偶然?當時我也請教過小D(Dea_n)是否是刻意的,得到的答案是并沒有。然后小D(Dea_n)靠自己卓越的配色能力進入小米 RIGO 設計團隊。
當小米 miui9 系統(tǒng)官網海報出來的時候,我把作品拿到 PS 一吸色,結果告訴我小D 一定參與了這個作品的配色設計。那為什么只有黃色的 CMYK 的色值是有 3 種顏色混合而成的。
難道僅靠著一點吸色就可以肯定 CMYK 配色方法的存在?CMYK 配色方法是不是只存在 UI 界面設計中?CMYK 配色方法可不可以增加它的擴展性?CMYK 配色方法可以作為一種配色方法幫助設計師完成色彩搭配的工作嗎?帶著這些疑問我繼續(xù)研究配色。
我們來看一下「子彈短信」的應用圖標,它的用色基本符合之前說的 CMYK 配色方法,當然是不包含子彈上的深色調。漸漸地我發(fā)現 CMYK 配色方法的路子越來越寬了。
Asher 是追波繪畫寫實圖標的大神,他的寫實作品配色飽和度高,光影通透到位,需要很強的手繪功底。在他的設計作品中除去暗色調和深色調的部分,其他配色基本都使用了 CMYK 配色的技巧。
我們都知道 iOS 系統(tǒng)和 Android 系統(tǒng),在他們各自的系統(tǒng)規(guī)范中對配色也有相應的規(guī)范。我們提取兩大系統(tǒng)規(guī)范中的配色進行吸色分析。
一頓猛吸之后,發(fā)現大廠系統(tǒng)規(guī)范的用色也基本符合 CMYK 配色方法的標準。
前段時間 IBM 重新定義了他們的設計語言,在產品配色中 Blye 60、Alert60、Alert40、Alert20、Alert50 等主要配色都符合 CMYK 配色的方法。
近期很多互聯網公司進行了品牌改版,深亮色調到淺亮色調慢慢成為一種趨勢。
新版的 Facebook LOGO 從深藍色變?yōu)榱了{色,字體則繼續(xù)保持原樣。其中 CMY 值進行適當減少。除此之外,圖標部分也由原來的圓角正方形變?yōu)閳A形,圖標中的「f」從偏右的位置移到圓形的中間位置。
全球旅行者喜愛的民宿預訂平臺 Airbnb 的品牌 logo 主色也符合 CMYK 配色的方法。和 2019 潘通流行色珊瑚橘很接近。
微信 7.0 版本使用了經過調整的全新圖標。圖標除了原來綠色漸變的背板變淺外,兩個標志性的對話氣泡與背景板的比例也做了相應的調整。色彩的 CY 值減少了。調整后的新版圖標除了空間感和符號感也更強外,整體變得「更輕」了。
在網易云音樂 6.0 版本中,對品牌 LOGO 再次進行了調整。新版網易云音樂圖標最明顯的變化為紅色的主色調,其次為「留聲機」和「音符」組合而成的圖形部分。
紅色較之前變得更加明亮,同時圖標紅色背景由之前的純色改為輕微的紅色漸變填充。新的紅色著重考慮了用戶長時間使用屏幕造成的視覺疲勞,采用比較「輕」的色彩可有效降低這種問題。其中顏色 CMY 三種色值都有減少。圖形部分,新版圖形縮小了中間交叉部分的面積,頂部向右彎曲的弧形變大。整體效果較之前更加清晰,特別是在更小的應用尺寸中,其展示的效果明顯要比之前的好。
看到上面的描述是不是特別想知道當 CMYK 中的兩個色值同時為 0 時,不同顏色的色域范圍?帶著這樣的想法,把紅橙黃綠青藍紫中每類選一種顏色進行區(qū)域研究。打開 PS,在拾色器中截取不同顏色的色域范圍如下:
上圖白色區(qū)域就是在紅色 C 值為 0、K值為 0 時的色域范圍,范圍還是很小的。
黃色的 CMYK 色域很奇怪,在色相 38-58 度的黃色純度最高時,CMY 都有色值。也就是 PS 里面最純的黃色也是由 CMY 復色調和而成的。這也是為什么之前黃色使用時,CMYK 色值是由三種顏色混合而成的。
上圖白色區(qū)域就是在綠色 M 值為 0、K 值為 0 時的色域范圍,范圍開始慢慢變大,意味著綠色高飽和度的可使用顏色越來越多。
上圖白色區(qū)域就是在綠色 M 值為 0、K 值為 0 時的色域范圍,范圍也開始慢慢變大,大體范圍和綠色相當。
上圖白色區(qū)域就是在藍色 Y 值為 0、K 值為 0 時的色域范圍,范圍應該很大了。
上圖白色區(qū)域就是在紫色 Y 值為 0、K 值為 0 時的色域范圍,范圍和藍色的色域范圍相當。
上圖白色區(qū)域就是在洋紅色 Y 值為 0、K 值為 0 時的色域范圍,范圍和藍色、紫色的色域范圍相當。
1. CIE
從理論上講,可見光分布的色彩域就是 CIE 所表示的色域。在顏色感知的研究中,CIE 1931 XYZ 色彩空間(也叫做CIE 1931色彩空間)是其中一個采用數學方式來定義的色彩空間。從 CIE 圖中能看出冷色的區(qū)域遠遠大于暖色的區(qū)域。其中黃色和紅色的色域范圍相對較少,完全符合 PS 拾色器里面的色域范圍。
2. RGB
RGB 是計算機熒光屏顯示顏色的色彩方式,它們是由 R、G、B 三種發(fā)光質通過加光混合產生的。RGB 色彩模式是一種加色模式,將紅光、綠光和藍光以不同的比例相加可以合成各種各樣的色光。R、G、B 三種顏色各能產生 2 的 8 次冪,即 256 級不同等級亮度的顏色。256*256*256 即 16777216種顏色。RGB 色彩模式主要用在電腦顯示器和電視上。RGB 色彩模式是繪圖軟件最常用的一種顏色模式。
3. CMYK
CMYK 由C(青)、M(品紅)、Y(黃)、K(黑)四色高飽和度的油墨以不同角度的網屏疊印形成復雜的彩色圖片。CMYK 色彩模式是一種顏料模式,它利用色料三原色混色原理,加上黑色油墨,形成各種各樣的色彩。
這種模式屬于相減混色模式,廣泛運用于繪畫和印刷領域。CMYK 的色域范圍比 RGB 的色域范圍要小,某些色彩無法用 CMYK 油墨印刷出來。當這些不能印刷出來的顏色出現時,在 PS 的「拾色器」對話框上會顯示一個帶感嘆號的三角形警告標志,表示這些顏色超出 CMYK 的色域。即使設計了比較鮮艷的顏色,如果超出了 CMYK 印刷顏色的色域,計算機就會用一個接近它的較灰暗的顏色去頂替它。可見大部分 CMYK 印刷顏色的色域小于 RGB 屏幕顏色的色域。
我們來仔細研究下 CIE 色域范圍,CMYK 當中的黃色色域值有一小段超過了 RGM 的色域值。這就說明黃色的更飽和的 CMYK 的原色和間色可能在 RGB 的范圍之外。
其他的我們還有一個方法去驗證。就是在 PS 里面新建顏色模式為 CMYK 的文件,打開拾色器界面,把顏色調到右上角改變色相值的 0-360度 的范圍。色相在 38-58 度的黃色區(qū)域對話框上不會顯示帶感嘆號的三角形警告標志,表示黃色區(qū)域的 CMYK 色域值是超過 RGB 的色域值。這就是為什么 iOS 系統(tǒng)規(guī)范中的黃色色值必須是三種顏色混合而成的。這時候特殊的顏色就需要特殊處理。
CMYK 配色法就是兩種顏色的色值為 0%,但是黃色因為色域問題是由三色組成的(c值盡量小于10)。
色域集中在純色系的范圍,濁(灰)色系和暗色系除外。
界面的主色(純色系為主)、圖標設計、品牌色(純色系為主)都可以使用 CMYK 配色法。
CMYK 配色法目前多適用于互聯網產品,雖說在創(chuàng)意上要敢于創(chuàng)新,但在實際的工作中還是需要理性地根據公司品牌和產品定位,合理地進行色彩搭配。目前此方法沒有更多的理論依據支撐,如有疑問希望多多交流。
藍藍設計( m.820esy.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。