CMYK配色法,UI高級進階必備

2021-01-07 人人都是產品經理

對於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 協議

相關焦點

  • UI設計師必備的6個配色網站
    ,有很多的不同濃度發顏色,都是可以很快速的找到,很流行的顏色搭配網站,可以讓你自動取出顏色的rgb值,ui設計師必不可少的工具,對於我們後端開發或者其他的崗位,我覺都有必要知道的,了解多了和別人聊天話題就多,對自己有很大的幫助的。
  • 咖啡色cmyk色值是多少 咖啡色配什麼顏色好看
    咖啡色cmyk色值是多少 咖啡色配什麼顏色好看 2018-11-05 15:39:57 來源:全球紡織網 咖啡色cmyk色值是多少?咖啡色配什麼顏色好看?
  • UI設計必備:10個無需翻牆就能天天進階的UI設計網站
    推薦指數:4顆星網址:http://www.lovelyui.com/UIcolorsGetUIcolors:在線UI顏色分享網是一個幫助你發現最佳顏色搭配的網站,色彩小白必備,該網站把搭配好的顏色整合在一起供設計師使用,複製即可直接使用。
  • UI設計中配色設計攻略
    不知道有沒有小夥伴跟我一樣在做頁面配色時會很痛苦呢,很多時候都是憑感覺去配色。最近研究了一下配色方法,今天我就針對UI設計中配色設計攻略進行簡單的說明,希望能幫助到一部分小夥伴。有個有趣的研究成果 —— 「七秒鐘定律」:人們在挑選商品和服務時 ,只需要 7 秒鐘就可以確定是否感興趣,而在這短暫的 7 秒鐘內,色彩的作用佔到了 67%。
  • 10個好用到爆的設計必備配色網站!
    Uigradients以漸變色彩為主的設計神器uiGradients是一個在線以漸變色為主的分享網站,網頁裡有接近上百種漸變配色方案,設計師可根據自己風格來選擇搭配,每個都很好看,拿來即用,節約了大量試顏色的時間!這麼好的配色網站先給你分享下如何使用?
  • 極度舒適的「皮粉+灰」進階秋季配色!皮粉大衣+高級灰羊絨衫+撞色粉襯衫+高腰闊腿褲~
    要說什麼配色出彩又容易出錯?
  • 穿衣不懂「配色」?必輸!3色搭配法+4套配色方案,簡單一學就會
    與以往的色彩理論乾貨不同,今天的分享更側重於搭配實操運用,是基礎版的進階升華課程。在開始之前,我們先來回顧一個理念:三色搭配法。相信懂一點色彩搭配的人,都知道它,全身顏色不超過3種,早已人人皆知。➝ 三色搭配法服飾中的配色,其要點在於對色彩面積比例的把握。面積大小、比例調配,給人的印象也會大不相同。而三色搭配法,則來源於此。
  • 從入門到進階 助你掌握廚房配色小技巧
    同樣的顏色,為什麼別人家廚房裝出來是簡約輕奢高級feel,而你費上九牛二虎廚房還是十八線「城鄉結合部」的既視感?都是因為顏色沒配好!今天來分享5套櫥櫃真實用戶案例,從入門到進階,幫助大家一步步掌握配色小技巧。
  • 那些誘人的UI配色是怎麼配出來的?
    本文由Norman_HU原創翻譯,原作: Wojciech ZielińskiF原文地址:https://blog.prototypr.io/how-to-use-colors-in-ui-design
  • UI設計師怎樣做,才能達到年薪30w?
    並且,要想成為一名優秀的ui設計師你不僅需要熟練使用各種軟體,還要會設計頁面,還要懂客戶、懂溝通、懂數據、懂動效……工具是每位設計師必須了解熟悉的,它們就是你生存的武器,時下常用的軟體我們都應該掌握,比如ai、ps、ae、Axure RP等等。學軟體必須精通使用,練到爐火純青,將會大大提高你的工作效率。
  • 分享 | 最舒服的配色方案 + 專業設計師必備的10個配色網站
    1.Flat Design(必不可少,顏色自動分類)http://www.flatuicolorpicker.com/2.色彩社區(不僅可以配色,還可以共享他人的色彩)http://www.colourlovers.com/
  • 設計師必備的10個配色網站!
    種類特別多,可以挑選到眼花哦。8.https://www.webdesignrankings.com/resources/lolcolors/一個很可愛的配色網站,收集的顏色以明亮活潑為主。當滑鼠移動到每個水滴上都會出現顏色的編號,可以方便提取可參考。
  • 高級英語詞彙進階distinct distinguish differentiate disparity
    語言水平是初級,中級還是高級主要從詞彙表達體現中學,到大學,到留學,中考,高考,大學英語四六級,考研,雅思,託福,GRE。這裡為大家整理必備詞彙,採擷人類思想精華。米歇爾·歐巴馬Distinct(進階詞彙)截然不同的;有區別的;不同種類的;清晰的;清楚的;明白的;確實的Remember my mantra: distinct... or extinct
  • CMYK色彩原理與材質實現(上)
    使用 PS 濾鏡將圖片轉換為 CMYK 印刷格式首先,CMYK 與 RGB 一樣也是一種色彩模型,RGB 為加色法(additive color model)CMYK 為減色法(subtractive color
  • 高級英語詞彙進階false fake artificial forge counterfeit
    這裡為大家整理必備詞彙,採擷人類思想精華。蕾哈娜artificial(進階詞彙)人工的;人造的;假的;人為的;非自然的;虛假的;假裝的I absolutely don't think a sentient artificial intelligence is
  • 講究女人一定要學會配色,優雅又高級
    女性可以長得不完美,但優雅的女性則會選擇裝飾自己,讓自己看上去優雅又高級。 1、大地色同色系搭配——基礎配色 同色系配色法運用在大地色系當中其實很好理解
  • 高級英語詞彙進階teach instruct impart instill inculcate
    語言水平是初級,中級還是高級主要從詞彙表達體現中學,到大學,到留學,中考,高考,大學英語四六級,考研,雅思,託福,GRE。這裡為大家整理必備詞彙,採擷人類思想精華。喬治·亨利·路易斯impart(進階詞彙)通知;透露;傳授;把(某性質)賦予;將…給予Imparting knowledge is only lighting other men's candles at our lamp without depriving ourselves of any flame.
  • 高級英語詞彙進階 gift, talent, genius, prodigy, brainiac
    語言水平是初級,中級還是高級主要從詞彙表達體現中學,到大學,到留學,中考,高考,大學英語四六級,考研,雅思,託福,GRE這裡為大家整理必備詞彙採擷人類思想精華單詞音頻:奧斯卡·王爾德(王爾德太毒舌了)Prodigy(進階詞彙)(年輕的)天才,奇才,精英;神童I tried painting for a short time and realized that I was not a child prodigy at painting.
  • 你想進階成為頂尖配色高手嗎?
    Flat UI Colors – 超快速的免費在線配色工具當網頁/App設計時間緊迫,設計師需要快速搭建或選擇界面配色時, Flat UI Colors會是一款非常適用的工具。作為一款快速在線配色工具,Flat UI Colors為設計師們提供了13款根據世界各地設計師喜好打造的優質配色方案。設計師簡單粘貼複製,即可將需要的配色方案直接應用到他們設計項目之中, 方便易用。
  • 這七組高級配色法,讓你時髦起來
    顏色再好看,配色沒對也是白搭今天就要為大家推薦七組高級有創意的顏色搭配點亮你的冬春季,還不準備試一試粉+灰粉色+灰色的搭配必須要說少女心的粉色和高級灰絕對是最顯氣質的冬春搭配選擇一條有設計感和質感的駝色半裙搭配藍色大衣,優雅高級出挑的同時又不會顯得用力過猛