2020-3-7 資深UI設(shè)計(jì)者
不管是做 UI 設(shè)計(jì)還是畫插畫，有很多同學(xué)覺得自己是因?yàn)樘熨x不夠所以對(duì)色彩的敏感度不夠，其實(shí)不然。一個(gè)可能是大家總結(jié)的太少，從來都是憑感覺和運(yùn)氣去配色，但配色都是有講究的。本文不會(huì)給大家重復(fù)講解什么是 rgb，什么是 hsb，什么是 cmyk 或者什么三原色，這些大家都可以從網(wǎng)上直接搜到。我今天要給大家分享的是人們是如何認(rèn)識(shí)色彩，并且在產(chǎn)品設(shè)計(jì)中使用的。
大家都知道，對(duì)于不同的顏色，我們對(duì)其的感知是不同的，有人覺得暖色在前，冷色在后。暖色更醒目，冷色不醒目。那這是什么原因呢？首先我們要知道眼睛內(nèi)存在兩種感光細(xì)胞：視錐細(xì)胞和視桿細(xì)胞，視桿細(xì)胞能夠感知光線強(qiáng)弱但無法感知顏色，而視錐細(xì)胞卻相反，視錐細(xì)胞內(nèi)還有 3 種對(duì)不同頻率光敏感的細(xì)胞。我們經(jīng)常會(huì)用到視錐細(xì)胞，而視桿細(xì)胞卻用的少，更多的是在黑暗的環(huán)境中使用的多。
視錐細(xì)胞的三種類型分別是低頻、中頻和高頻視錐細(xì)胞，分別對(duì)紅、綠、藍(lán)三種顏色的光敏感。而且這三個(gè)視錐細(xì)胞分別也有重合的部分。低頻視錐細(xì)胞對(duì)整個(gè)可見光頻譜都敏感，它的范圍包含的比較廣，特別是對(duì)于頻譜中段的黃色到紅色部分更加敏感。但是像高頻的紫色幾乎只有藍(lán)視錐細(xì)胞可以感知。
大家在平時(shí)生活中都能看到，在馬路上、機(jī)動(dòng)車道上以及一些警示牌都會(huì)采用黃色、橙色等標(biāo)識(shí)，因?yàn)檫@些非常醒目。更容易被紅視錐細(xì)胞感知到，但如果你的標(biāo)識(shí)用的是冷色調(diào)那這個(gè)交通事故可能要發(fā)生的頻繁得多。
1. 人對(duì)色彩邊緣的對(duì)比更加敏感
我們來做個(gè)實(shí)驗(yàn)，如下圖，大家覺得在中間的灰色塊是純色還是漸變色，可能很多同學(xué)看上去都會(huì)覺得是個(gè)漸變色，但其實(shí)它就是一個(gè)純色，不信的同學(xué)可以自己在工具中嘗試一下。
但如果你把這個(gè)色塊拿出來后，不在這個(gè)環(huán)境中直接進(jìn)行邊緣對(duì)比，那就不會(huì)出現(xiàn)漸變的情況了。光說原理，我們也來看一下在產(chǎn)品設(shè)計(jì)中需要注意的地方，因?yàn)樵?UI 界面設(shè)計(jì)中我們通常需要把一些圖片、卡片疊加放置，這樣就會(huì)造成邊緣視覺的對(duì)比，本來不明顯的兩個(gè)元素重疊之后變的很明顯，例如一些標(biāo)簽的背景色和頁(yè)面整體的背景色。
如果你想要讓兩個(gè)顏色接近的元素具有識(shí)別度，那么最好將這兩個(gè)元素進(jìn)行重疊擺放而不是分開擺放。另外，如果是卡片樣式的設(shè)計(jì)，背景色一定不要過于灰暗也不要過于淺白，過于深的話會(huì)讓卡片輪廓過于明顯而導(dǎo)致整體看上去顯臟以及很明顯的對(duì)比，顯得不自然和舒適。如果過于淺的話也會(huì)導(dǎo)致信息的不聚焦。
還有，為什么被框起來的文字會(huì)看上去更加有點(diǎn)擊的欲望其實(shí)也是這個(gè)道理，因?yàn)槲淖趾捅尘隘B加產(chǎn)生的輪廓只是文字的輪廓，在我們的第一印象中只是一種符號(hào)。當(dāng)它被賦予顏色之后，我們才會(huì)意識(shí)到它需要我們?nèi)プ⒁饣蛘呖杀稽c(diǎn)擊，但依然不夠明顯，所以為了強(qiáng)化可點(diǎn)擊這個(gè)感覺，我們才用了線框、背景色、箭頭等方式。
1. 加深品牌印象與品牌感
一般來說，產(chǎn)品都會(huì)有一個(gè)品牌的主色。而這個(gè)品牌的主色也通常會(huì)運(yùn)用在外面的產(chǎn)品界面中，所以例如閑魚、馬蜂窩等，主色都采用了黃色，黃色具有非?；顫?、有趣、好玩的特性，無論是線上還是線下都使用了這個(gè)品牌黃色，從每一個(gè)線上元素的主色，到線下包裝的印刷色。
但一定要注意的是，如果品牌的主色偏灰偏暗的話，可能不太適合線上的產(chǎn)品進(jìn)行通用。例如之前的嚴(yán)選、云集、711便利店、宜家等產(chǎn)品的主色都是偏深和暗的，所以在線上的界面用起來會(huì)非常不和諧，和整體偏淺色、輕的風(fēng)格對(duì)比起來太強(qiáng)烈，引起不適。
而且線上覺得還不錯(cuò)的顏色，由于印刷的原理，實(shí)物也會(huì)更加偏低飽和和偏暗。
2. 引導(dǎo)用戶視覺凹增加易讀性
我們?cè)凇度绾斡欣碛袚?jù)做設(shè)計(jì)，而不是憑感覺？》里提到了人們?nèi)绾伍喿x信息，提到了一個(gè)視覺凹的概念。所以在界面中，什么樣的地方使用色彩是有講究的。所以在這里通常會(huì)需要使用顏色的地方在于希望引導(dǎo)用戶和吸引用戶注意的地方才會(huì)使用色彩。例如下方產(chǎn)品，使用了高亮色來引導(dǎo)用戶視覺。
當(dāng)然色彩的運(yùn)用也會(huì)將整個(gè)頁(yè)面的層級(jí)凸顯出來，而不單純的用中性色來區(qū)分層級(jí)。
3. 區(qū)分信息交互的狀態(tài)
同樣是上兩張圖，大家可以清晰的看到，美團(tuán)中的附近熱賣好點(diǎn)、滿減標(biāo)簽、價(jià)格，其實(shí)都只具備信息的呈現(xiàn)，但不具備交互的特征和狀態(tài)。但淘票票中的「4.7萬」和「展開」卻不一樣，「展開」使用了輔助藍(lán)色，這里的展開就具備這個(gè)文案所描述的這個(gè)控件具備的交互特性──點(diǎn)擊后將隱藏的文字展示出來。藍(lán)色一般我們都會(huì)使用在某個(gè)可點(diǎn)的鏈接上，當(dāng)然也會(huì)有其他的色彩來表示可點(diǎn)擊。
所以不是所有的元素都要賦予顏色，這樣會(huì)使整個(gè)頁(yè)面非?；靵y。
另外，UI 設(shè)計(jì)中主色除了引導(dǎo)用戶的作用外，也可以表示當(dāng)前正被激活的信息狀態(tài)。例如愛奇藝 app 中播放詳情頁(yè)面，當(dāng)前版塊標(biāo)簽和正在播放劇集的激活狀態(tài)。
4. 營(yíng)造氛圍傳遞熱度
色彩除了上方所述的字段中的不同使用，在圖片和整體氛圍營(yíng)造中也起了很大的作用，目前很多 2c 的產(chǎn)品往往會(huì)在界面氛圍的營(yíng)造中運(yùn)用一些手段。例如導(dǎo)航欄、底部標(biāo)簽欄上的圖標(biāo)，或者在首頁(yè)營(yíng)銷版塊的瓷片區(qū)域都會(huì)用品牌色在活動(dòng)時(shí)段內(nèi)進(jìn)行氛圍打造。
在色彩的心理學(xué)上，大家都知道每個(gè)顏色具有一定的性格特征和表達(dá)。而且都會(huì)有正反兩面，可以看下方多種色彩的描述。
然而其實(shí)很多的產(chǎn)品使用的色彩和我們所認(rèn)知的會(huì)有一些差別，比如咖啡品牌的主色選擇，在我們常規(guī)人之中，咖啡應(yīng)該是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其實(shí)都用了和咖啡本質(zhì)沒什么關(guān)系的顏色。
在瑞幸剛出來的時(shí)候，很多人其實(shí)不太習(xí)慣把這個(gè)藍(lán)色和咖啡結(jié)合起來，但是為了塑造品牌差異化，瑞幸一直將「藍(lán)色」作為品牌的主基調(diào)，「小藍(lán)杯」這一稱呼不但讓消費(fèi)者感到親切，也在眾多的咖啡中有了屬于自己的記憶點(diǎn)。在這支廣告片中，主基調(diào)同樣是使用藍(lán)色，不但符合了當(dāng)下消費(fèi)者的視覺偏好，也在為用戶留下記憶點(diǎn)之后，讓用戶在看到藍(lán)色時(shí)自然而然地想到瑞幸咖啡。
但凡各位使用了這樣的配色，保證各位過不了試用期，相信我。所以大家千萬要避開。
高飽和度的色彩
高飽和度的色彩，會(huì)讓人產(chǎn)生「幻覺」！讓人產(chǎn)生視覺疲勞，例如我將餓了么這個(gè)界面的色調(diào)調(diào)整一下大家看一下，不亮瞎算我輸。
灰部使用過多的配色
為什么很多時(shí)候我們總覺得界面臟兮兮的。是因?yàn)槲覀冊(cè)诮缑婊蛘吲渖惺褂昧诉^多的低飽和度、灰度較多的配色，所以這也是要避免的。
沒有規(guī)律且過多的配色
讓界面或者插畫看起來非?；靵y。一般來說顏色的使用也需要有側(cè)重點(diǎn)，所以我們常用的方法是6、3、1的色彩配比。
熒光色
熒光色絕對(duì)不可以使用在 UI 界面中，尤其是主色。
太輕柔的顏色
在很多 dribbble 的飛機(jī)稿中，經(jīng)常能看到這樣的配色和練習(xí)。無論是在練習(xí)中還是實(shí)際項(xiàng)目中，這樣的界面也完全無法讓用戶看到想看的信息，沒有重點(diǎn)且輕飄飄的感覺。
現(xiàn)在很火的新擬物化設(shè)計(jì)
說真的，這樣的風(fēng)格確實(shí)耳目一新，但個(gè)人覺得可能不會(huì)成為主流。因?yàn)樗秃偷谖宸N一樣：信息可識(shí)別性很差。且不談色弱的人群，就正常的用戶來說大面積的白色+飽和度低的元素結(jié)合，感覺就是得了「白內(nèi)障」。另外我們常說的一點(diǎn)就是所有元素都強(qiáng)調(diào)就等于什么都沒有強(qiáng)調(diào)，這樣的風(fēng)格在每一個(gè)元素都具有陰影的情況下都在爭(zhēng)先恐后讓用戶感知，原則是輕量化卻又需要那么多陰影，這樣就有點(diǎn)自相矛盾的感覺。
為了營(yíng)造這樣的「新擬物」的輕量氛圍，還不得不在整個(gè)界面中簡(jiǎn)化大部分元素，能不加文字就不能加文字。有一句話一直非常影響我做設(shè)計(jì)：「設(shè)計(jì)是需要被簡(jiǎn)化的，但是簡(jiǎn)化的過程一定不簡(jiǎn)單」。所以不是單純的簡(jiǎn)化所有元素為了達(dá)到這個(gè)風(fēng)格的目的。
不要將對(duì)抗色重疊
例如下方，兩種對(duì)抗色重疊后會(huì)引起視覺閃爍的感覺。
1. 定義主色
首先我們必須要說，色彩肯定是需要結(jié)合產(chǎn)品和用戶的定位去指定和提煉的，所以前期會(huì)需要去做一些研究，例如用戶畫像，品牌沖刺或者是情緒板等方法。得到幾類「真實(shí)的虛擬用戶」，從而確定一些主色的方案。然后我們?cè)谥魃倪x擇中需要避開上面提到的坑，并且對(duì)市面上的 app 進(jìn)行總結(jié)，我們發(fā)現(xiàn)大部分的產(chǎn)品色，簡(jiǎn)單來講在我們 HSB 模式中取色都在一個(gè)固定的范圍，就像這樣。
在上文中也說到用色比例的 631 法則，所以在選取輔助色的時(shí)候我們需要定義好輔助色可以用在什么地方。例如知乎，其實(shí)輔助色沒有非常明顯的一種或者兩種，都是多色的輔助色方案，都在一個(gè)配色的系統(tǒng)中選取顏色即可。大部分產(chǎn)品目前都是這樣的策略，一個(gè)主色搭配多個(gè)輔色，如果有其他獨(dú)立的板塊可能需要重新定義專屬的配色策略。
2. 定義中性色
其次再定義中性色，比如字體和線條以及背景色。字體是為了讓信息有對(duì)比，顯示層級(jí)，那么通常給 2-3 種層級(jí)即可，至少 2 種，至多 3 種。在選擇 3 個(gè)層次的中性色文字時(shí)，給大家一個(gè)建議：標(biāo)題/正文文字顏色 HSB 的 B 值不要大于 20，備注和次要文字 b 值不要大于 50，默認(rèn)文字不要大于 80，大家可以去嘗試一下，且中性色不得使用純黑。
文章來源：優(yōu)設(shè) 作者：應(yīng)俊
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com