對於UI設計而言,色彩是非常有趣且有非常多知識點的一部分。本文中,筆者主要分享一些CMYK的配色法的分析與思考。
今年特別想嘗試寫寫系列文章,趕上公司設計UED分興趣小組,我最終選擇了色彩興趣小組,其實色彩要學的,能寫的還是很多很多的。
其實早在三年前我就開始慢慢研究配色的相關技巧和知識理論。所以在選擇興趣小組的時候,果斷的選擇了色彩。
界面配色
時光飛逝,2016年玩追波的時候,有幸和PP、Dea_n、UISTAR、俊哥、冰箱龍、Penny在一個叫FreedomUnion團隊,當時團隊小D(Dea_n)的界面漸變風當時很受歡迎,他使用的顏色乾淨、舒服、有感染力。很快形成了自己特有的設計風格。
當時被他的配色深深吸引了,我就特別想研究研究他的配色,就嘗試把他的作品在PS中打開,嘗試吸吸色,找找他經常使用的配色範圍,還有看看為什麼他配出來的顏色就很吸引人,長時間看眼睛也不會太累?下面先欣賞一下小D(Dea_n)的設計作品吧!!!
作品已經過了三年了,按照正常的配色作品應該看上去會有些過時,但是小D(Dea_n)的作品看上去並沒有,還是有不少作品的配色現在看上去也是很前衛的。一起來看看我對小D(Dea_n)的大部分作品的吸色情況吧。哇,不吸不知道,一吸嚇一跳。
小D(Dea_n)的用色著實很大膽,很多都是貼邊用色,我上大學的時候,老師曾經說過使用顏色儘量少用貼邊的設計,包括灰色也可以使用帶有顏色傾向的高級灰。這下終於明白了為什麼小D(Dea_n)的配色這麼亮眼。
當然我也有自己的小發現,我發現每個的作品主配色的CMYK值總會有兩種色值為0%(比如C:0%、M:91%、Y:95%、K:0%)
當時就很好奇,難道只是偶然。當時我也請教過小D(Dea_n)是否有刻意,得到的答案是並沒有。然後小D(Dea_n)靠自己的卓越的配色能力進入小米RIGO設計團隊。
當小米miui9系統官網海報出來的時候,我把作品拿到PS吸色,結果告訴我小D一定參與了這個作品的配色設計。
為什麼只有黃色的CMYK的色值是有3種顏色混合而成的?
帶著上面的疑問,我看到好的作品還是喜歡到PS裡面吸吸色,看看好的作品的顏色的CMYK值。總想搞明白為啥CMYK值總會有兩種色值為0%這件事?
如果真的僅這一點點的配色技法就可以肯定CMYK配色方法的存在?CMYK配色方法是不是只存在UI界面設計中?CMYK配色方法可不可以增加它的擴展性?CMYK配色方法可以作為一種配色方法幫助設計師完成色彩搭配的工作?帶著這些疑問會繼續學習研究配色。
圖標配色
2018年8月,老羅推出社交應用「子彈簡訊」,子彈簡訊推出以後,還有一個討論,是說子彈簡訊即將挑戰微信的地位。現在看來大家都懂得。我們來看一下「子彈簡訊」的應用圖標,它的用色基本符合之前說的CMYK配色方法,當然是不包含子彈上的深色調。漸漸的發現CMYK配色方法的路子越來越寬了。
Asher是追波繪畫寫實圖標的大神,他的寫實作品配色飽和度高,光影通透到位,需要很強的手繪功底。在他的設計作品中除去暗色調和深色調的部分,其他配色基本都使用了CMYK配色的技巧。
大廠系統規範
我們知道在移動端主流兩大系統是蘋果的iOS系統和谷歌的Android系統,在他們各自的系統規範中對配色也有相應的系統規範。iOS是開發者中心系統的配色規範,谷歌的是Material Design對配色也有相應規範。我們提取兩大系統規範中的配色進行吸色分析。
一頓猛吸之後神奇的一幕出現了,發現大廠系統規範的用色也基本符合CMYK配色方法的標準。為什麼iOS中的黃色色值是三種顏色混合而成的。文章的後面會很仔細的講到。大多配色都使用了兩種配色。
前段時間IBM重新定義了他們的設計語言,在產品配色中Blye 60、Alert60、Alert40、Alert20、Alert50等主要配色都符合CMYK配色的方法。
整體的色彩都是高亮色,由於我們在系統界面設計中能使用的元素大體分為字體、圖標、圖片、顏色等,所以在系統排版過程中整個界面多為有彩色與無彩色的範疇,即文字配色多位黑白色,可交互可點擊的配色或圖標多為系統的高亮色,在整個界面設計中會更突出,起到強調吸引用戶的目的。
配色中的主色或品牌色
近期很多網際網路公司進行了品牌改版。深亮色調到淺亮色調慢慢成為一種趨勢。
2019年4月30日,Facebook F8開發者大會在加州聖荷西會議中心舉辦。會上,創始人兼執行長馬克·扎克伯格(Mark Elliot Zuckerberg)宣布Facebook 全面改版,新版LOGO從深藍色變為亮藍色,字體則繼續保持原樣。其中CMY值進行適當減少。此外,變化最大的為Facebook的圖標部分。原來的圓角正方形變為圓形,圖標中的「f」從偏右的位置移到圓形的中間位置。
全球旅行者喜愛的民宿預訂平臺愛彼迎(Airbnb)的品牌logo主色也符合CMYK配色的方法。和2019潘通流行色 – 珊瑚橘很接近。
微信7.0版本使用了經過調整的全新圖標。圖標除了原來綠色漸變的背板變淺外,兩個標誌性的對話氣泡與背景板的比例也做了相應的調整。色彩的CY值進行了減少。
調整後的新版圖標除了空間感和符號感也更強外,整體變的「更輕」了。目前這個全新的配色方案已經在微信下面的各個子品牌圖標中開始應用,比如微信支付、部分PC頁面等。
在6.0版本中,網易雲音樂對品牌LOGO再次進行了調整。新版網易雲音樂圖標最明顯的變化為紅色的主色調,其次為「留聲機」和「音符」組合而成的圖形部分。
紅色較之前變的更加明亮,同時圖標紅色背景由之前的純色改為輕微的紅色漸變填充。新的紅色著重考慮了用戶長時間使用屏幕造成的視覺疲勞,採用比較「輕」的色彩可有效降低這種問題。其中顏色CMY三種色值都有減少。圖形部分,新版圖形縮小了中間交叉部分的面積,頂部向右彎曲的弧形變大。整體效果較之前更加清晰,特別是在更小的應用尺寸中,其展示的效果明顯要比之前的好。
不同顏色CMYK的色域範圍
看到文章上面描述的是不是特別想看看當CMYK中的兩個色值同時為0時不同顏色的色域範圍?帶著這樣的想法,把紅橙黃綠青藍紫中每類選一種顏色進行區域研究。打開PS在拾色器中截圖不同顏色的色域範圍如下:
上圖白色區域就是在紅色C值為0、K值為0時的色域範圍,範圍還是很小的。
黃色的CMYK色域很奇怪,在色相38-58度的黃色純度最高時CMY都有色值,就是PS裡面最純的黃色也是有CMY複色調和而成的。這也是為什麼之前的黃色使用中都是CMYK色值是由三種顏色混合而成的。
上圖白色區域就是在綠色M值為0、K值為0時的色域範圍,範圍開始慢慢變大,意味著綠色高飽和度的可使用顏色越來越多。
上圖白色區域就是在綠色M值為0、K值為0時的色域範圍,範圍也開始慢慢變大,大體範圍和綠色相當。
上圖白色區域就是在藍色Y值為0、K值為0時的色域範圍,範圍應該很大了。
上圖白色區域就是在紫色Y值為0、K值為0時的色域範圍,範圍和藍色的色域範圍相當。
上圖白色區域就是在洋紅色Y值為0、K值為0時的色域範圍,範圍和藍色、紫色的色域範圍相當。
CIE
從理論上講,可見光分布的色彩域就是CIE所表示的色域。在顏色感知的研究中,CIE 1931 XYZ色彩空間(也叫做CIE 1931色彩空間)是其中一個最先採用數學方式來定義的色彩空間。從CIE圖中能看出冷色的區域遠遠大於暖色的區域。當中黃色和紅色的色域範圍相對較少,完全符合PS拾色器裡面的色域範圍。
RGB
RGB是計算機螢光屏顯示顏色的色彩方式,它們是由R、G、B3種發光質通過加光混合產生的。RGB色彩模式是一種加色模式,將紅光、綠光和藍光以不同的比例相加可以合成各種各樣的色光。R、G、B3種顏色各能產生2的8次冪即256級不同等級亮度的顏色。256*256*256即16777216種顏色。RGB色彩模式主要用在電腦顯示器和電視上。RGB色彩模式是繪圖軟體最常用的一種顏色模式。
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度的黃色區域對話框上不會顯示帶感嘆號的三角形警告標誌,表示黃色區域的CMYK的色域值是超過RGB的色域值。這就是為什麼iOS中的黃色色值必須是三種顏色混合而成的。這時候特殊的顏色就需要特殊處理。
CMYK配色法使用技巧
CMYK配色法就是兩種顏色的色值為0%,但是黃色(c值儘量小於10)。因為色域問題其飽和度最高的黃色色值也是有三色組成的。色域集中在純色系的範圍,濁(灰)色系和暗色系除外。界面的主色(純色係為主)可以使用CMYK配色法。圖標設計可以使用CMYK配色法。品牌色(純色係為主)也可以使用CMYK配色法,因為大廠的品牌色應用現在慢慢會成為一種趨勢。
總結
CMYK配色法目前多適用於網際網路產品,在色彩的創意上敢於創新,在實際的工作中還是需要理性的根據公司品牌和產品定位合理的進行色彩搭配。目前此方法沒有更多的理論依據作為支撐,如有疑問希望多多交流。如果感覺此方法還不錯可以在繼續深入研究慢慢完善自己的配色體系。
本文由 @水手哥 原創發布於人人都是產品經理。未經許可,禁止轉載
題圖來自 Unsplash ,基於 CC0 協議