10年經(jīng)驗的資深設(shè)計師,總結(jié)了這份 UI 配色設(shè)計終極奧義
配色,設(shè)計師的世紀(jì)難題。從平面到屏幕,CMYK 到 RGB,墨點到像素,色彩越來越豐富,形式越來越復(fù)雜。UI 的開展從擬物的繁瑣細(xì)節(jié)中擺脫出來,卻在色彩的展現(xiàn)中放飛了自我。
零賣業(yè)有個有趣的鉆研成果 —— 「七秒鐘定律」:人們在挑選商品和服務(wù)時 ,只需求 7 秒鐘就能夠斷定是否感樂趣,而在這瞬間的 7 秒鐘內(nèi),色彩的作用占到了 67%。
要在小小的手機屏幕中進(jìn)入這么多顏色,并連結(jié)其中的聯(lián)系和邏輯,實在不易。若你還對配色一無所知,完全不知道配色應(yīng)該怎么入手,辣么你需求打聽一下,我?guī)啄杲?jīng)驗總結(jié)的配色思路。
拾色器中的黃金三分法
無論咱們用 PS、AI,還是 Sketch、XD、Figma,和色彩打交道至多的地方即是拾色器窗口,咱們來看看這些案例:
固然是不同的應(yīng)用,但是這個拾色器的用法如出一轍,但是,許多新人并無搞懂拾色器的正確應(yīng)用邏輯。
許多人知道,UI 的色彩使用 RGB 模式,但是拾色器要緊的選色道理遵循的是 HSB 模式的邏輯,也即是色相(H)、飽和度(S)、明度(B)。
HSB 是色彩科學(xué)中對全部顏色屬性的表面劃分,是種觀點上的定義,能夠用來注釋任何色彩,也即是說能夠和 RGB 和 CMYK 互相轉(zhuǎn)化,且 HSB 的選色邏輯更清晰、簡潔、精悍。
因為一個正確的選色過程,是先斷定出色相,然后再在這個色相維度下選出明度和飽和度,因此咱們首先要關(guān)注色相選定條。
細(xì)心的同窗應(yīng)該已經(jīng)發(fā)現(xiàn)了,它們的首尾都是血色,那是因為色相的序列是一個首尾相接的環(huán)形模式,因此它現(xiàn)實上即是色環(huán)的柱狀展示圖,應(yīng)用起來和色環(huán)沒有現(xiàn)實差別。
接下來就要說到重點,飽和度和明度選定區(qū),我自己使用的習(xí)氣,是將這個選定區(qū)通過黃金三分法的方法切割成等比的 9 個區(qū)域,然后明白它們在 UI 中的對應(yīng)感情和應(yīng)用場景。
在以前的大量剖析中,互聯(lián)網(wǎng)產(chǎn)物的主色和重要輔助色都會往右上角聚集,少許次要、不可點的色彩聚集在中上方,而筆墨背景色則聚集在左側(cè),無人區(qū)則是咱們重點避讓的對象。
底下咱們剖析幾個案例,看看它們在這個選定區(qū)中的色彩漫衍情況:
大家也能夠自己拿少許合流的應(yīng)用做截圖,然后把它們的 UI 元素色彩分列到拾色面板中,就會得到根基一致的結(jié)果。牢記這9個區(qū)域的場景劃分,能夠贊助咱們很高效、平安地實現(xiàn) UI 配色。
UI配色中的色彩選定
在浩繁的 UI 設(shè)計規(guī)范中,色彩片面的介紹,都勢必包含三品種型,劃分是:
- 主色:應(yīng)用的焦點色彩,品牌色
- 輔色:豐富頁面視覺和轉(zhuǎn)達(dá)效果的次要顏色
- 中性:沒有色相的筆墨、背景用色
1. 主色的選定
主色是一個應(yīng)用的最焦點的色彩,品牌的象征色,好比想到餓了么的藍(lán)色、微信的綠色、京東的血色、淘寶的橙色。
斷定主色,并無大家想象的辣么復(fù)雜,它的要點在于——你想讓用戶感覺到類感情,然后通過感情關(guān)聯(lián)一個大致的色彩局限,再進(jìn)行微調(diào)。
在今天的互聯(lián)網(wǎng)產(chǎn)物中,主色的應(yīng)用選定局限在拾色器區(qū)域的右上角,前方已經(jīng)有注釋了。這和平面設(shè)計中的用色有很大的不同。
挪動端產(chǎn)物要在一個方寸大的空間中爭奪用戶的注意力,引起用戶的樂趣,辣么低飽和平淡的色調(diào)是無法實現(xiàn)這個指標(biāo)的,因此今天主色飽和度越來越極致,好比咱們之前整理的一篇總結(jié):
為何支付寶要換 Logo 顏色?剖析下目前 Logo 的主色趨向
再加上屏幕的 RGB 表現(xiàn)特征,高比擬度,高動靜局限的特質(zhì)能給用戶提供更好的觀感。因此選定主色最平安的做法,即是在斷定色相范例后,在右上方區(qū)域選出適宜的色值。
2. 輔助色的選定
輔助色是豐富應(yīng)用中的次要色彩,它會包含一到幾何個和主色不同的色彩,除了品牌轉(zhuǎn)達(dá)外,具備更強的實用性。
前方咱們提到過色環(huán),這里就要派上用場了。咱們知道色環(huán)是個色彩序列首尾相連的環(huán)形模型,它蘊含一個最質(zhì)樸的準(zhǔn)則,即兩個顏色在這個環(huán)形中角度越大,辣么視覺迥異性越大,比擬越強,好比下圖的展示:
這些配色的模式是不能夠閉著眼隨便挑的,它們僅僅作為一個色彩比擬度的校驗規(guī)范。而真正輔助色的選定,是憑據(jù)現(xiàn)實場景的功效決意的。
好比通知、提醒、作廢用大血色,確認(rèn)、和議用綠色大概藍(lán)色,收藏、打分、評價用橙黃色。都是已經(jīng)在用戶心智中建立了規(guī)范的用色范例,跟著通例技巧來做,是沒有別的思路的情況下最簡單、最平安的輔助色選定方法。
沒有規(guī)范元素用色的情況下,再思量應(yīng)用色環(huán)的 「角度準(zhǔn)則」,越需求被突出的顏色,能夠在色環(huán)中離主色越遠(yuǎn),越不需求被突出的則越近。
好比下方攜程的案例,主色在藍(lán)色的情況下,支付、保險金標(biāo)簽這些需求被重點突出的色彩,使用了主色的互補色, 讓咱們一眼就能瞥見并產(chǎn)生猛烈的操縱愿望。
3. 中性色的選定
中性色,是頁面中筆墨、背景用到的顏色,它們負(fù)擔(dān)起最根基的層次闡揚、便于閱讀的重?fù)?dān)。多數(shù)小白覺得中性色無關(guān)緊要,現(xiàn)實情況湊巧相反。
主色輔助色決意了界面視覺是否出彩,而中性色的應(yīng)用直接決意了頁面能不能夠正常使用。若看過相對多的原型案例,就應(yīng)該清楚,即便惟有黑白灰的狀況下,咱們明白這些頁面和進(jìn)行使用也不會有絲毫的障礙。
中性色的配置,即是訂定一個由深到淺的灰度階梯,應(yīng)用在對應(yīng)權(quán)重的元素上,色彩輕重的要緊校驗依據(jù)是 HSB 中的 B(明度) 值。
中性色固然指的是無個性,但并不是只能用純灰色,多見的一種做法,即是為中性色增加適量的藍(lán)色飽和度,提升觀看體驗(滿足RGB的某種特征)。
這種做法,顏色越淺的時分飽和度應(yīng)用色值就越低,將這個規(guī)則在拾色器中進(jìn)行闡揚,辣么咱們就能夠得到一個 L 型曲線,我稱它為 「中性曲線」。
掌握對于主色、輔助色、中性色的選定技巧,辣么對于UI配色的奧義來說,你已經(jīng)掌握了一半,接下來就要打聽更詳細(xì)的現(xiàn)實思路了。
配色方法的四象限
配色并不是惟有色彩的色值自己,大家一直在鉆研種種色彩生理學(xué)和表面,卻很少體貼它們怎樣應(yīng)用,怎樣配置。
因此,我憑據(jù)主色和輔助色應(yīng)用總結(jié)了一個配色的四象限表格,再劃分看看它們對應(yīng)的案例:
1. 主色占比大,色彩豐富度高
主色會作為頂部標(biāo)題欄或別的重要模塊中的背景色,進(jìn)行大面積應(yīng)用,加深用戶對品牌的認(rèn)知和辨識度。而產(chǎn)物中又包含了大量功效和服務(wù),需求用豐富的色彩來進(jìn)行暗示,吸引用戶關(guān)注。
2. 主色占比大,色彩豐富度低
這類配色中,主色的應(yīng)用占比也大,出現(xiàn)頻率高,鮮有別的顏色出現(xiàn)。相對適用于圖片內(nèi)容豐富的題材中,大概是相對正式、品牌感強的應(yīng)用。
3. 主色占比小,色彩豐富度高
這是多數(shù)合流應(yīng)用的趨向,低落主色占比,留出更多的空間給內(nèi)容模塊的展示上,突出自己帶有的服務(wù)和功效。
4. 主色占比小,色彩豐富度低
通常,會應(yīng)用這種方法是因為產(chǎn)物的服務(wù)是相對單一,但也需求用戶投入注意力的應(yīng)用,設(shè)計師就會盡力以免賜與用戶過量的攪擾。
每次在進(jìn)行配色的時分,咱們都需求對自己要應(yīng)用類配色應(yīng)用方法做出計劃,然后再著手實行。有了這個指標(biāo),后面在整個項目的設(shè)計中的配色步驟即是水到渠成的事情了。
配色流程演示
在現(xiàn)實前,咱們要簡單講講一個應(yīng)用大概界面的規(guī)范配色的流程了,流程順序以下:
詳細(xì)應(yīng)該怎么使用這套流程,咱們用一個圖蟲APP改版的案例來做演示,首先從四象限中的第一個主色占比高、色彩豐富度高的范例做起。
1. 配色流程演示
原型是 UI 設(shè)計的根基藝能了,在首先詳細(xì)設(shè)計、配色前,搭建頁面的框架原型是一個必備的條件,底下,是咱們已經(jīng)籌辦好的原型案例。
然后,咱們斷定以橙色作為應(yīng)用主色,并在拾色器中進(jìn)行確認(rèn)。
有了主色,就能夠?qū)撁孢M(jìn)行色彩添補和圖片添補了。既然咱們主色是占比大的,辣么首先能夠用到的即是頂部標(biāo)題欄的背景色了,以及底部 Tabbar 中的選中色,大按鈕色等。
接著,咱們首先整理中性色的使用,選定新的顏色來添補筆墨和背景,清晰的闡揚模塊層級,筆墨消息的權(quán)重。
最后,即是增加輔助色和別的色彩的元素了,這個步驟建議都是放在最后一步操縱。因為色彩越豐富,越難控制,容易讓整個畫面顯得雜亂無序,因此先實現(xiàn)基礎(chǔ)搭建,能夠更好的贊助咱們校驗彩色的使用是否合理。
底下,咱們使用彩色的金剛區(qū)圖標(biāo),然后將用戶關(guān)注、認(rèn)證用戶、標(biāo)簽等元素使用別的色彩,來豐富頁面的色彩內(nèi)容。
2. 別的配色范例應(yīng)用
憑據(jù)第一個方案,咱們能夠再用這個原型來實現(xiàn)別的的三個方案的配色。
好比底下的主色占比大,但是色彩豐富度低的。因為已經(jīng)不太適用別的輔助色,因此主色添補上咱們不再添補頂部導(dǎo)航欄的背景,而是將更多元素應(yīng)用主色,削減輔助色數(shù)目。
然后是主色占比小,色彩豐富度高的方案,進(jìn)一步低落主色應(yīng)用的比例,然后在金剛區(qū)、標(biāo)簽等處使用較為豐富的配色。
最后,即是主色占比小,色彩豐富性也低的方案,辣么使用中性色的元素就首先增加,只保留最焦點的少許元素使用主色,和極少的輔助色。
憑據(jù)四種不同的配色方案,咱們就能夠得到四種不同的配色結(jié)果和風(fēng)格,在每次設(shè)計首先實施前,咱們都能夠憑據(jù)這種做法來做嘗試,并選出自己寫意的方案。
要再次夸大,UI 配色是極端夸大形式的應(yīng)用科學(xué),最后做的往往會和一首先想的效果有極大收支,因此需求咱們有幾個備選方案,能夠隨時進(jìn)行調(diào)整,并選出合理的那個。