“選擇”和“搭配顏色”,聽到這兩個詞匯的時候,是不是從潛意識上就會有反感。
心理琢磨著,這絕對是個坑!肯定得翻來覆去的折騰一把。
其實很多初學(xué)設(shè)計師都會碰到同樣的問題。
那么今天米醋哥和大家介紹在界面中最為常用的三個方法(設(shè)計必備!)
那我們就橫刀直入的來說說這三招吧。
經(jīng)常很多大神在網(wǎng)上說配色不要超過三種色,在這我只說三遍,色不過三,色不過三,色不過三!不管是做平面也好,還是網(wǎng)頁,還是做APP等設(shè)計,都需要遵守這個基本的道理。
那啥才算是不超過三種顏色的搭配呢?
在這里很多人都會認(rèn)為就是不要超過三種不同的顏色值。其實不然,不超過三種顏色的搭配,是指不超過三種色相的搭配。在單個色相中可以運用顏色明度或飽和度做色彩的豐富性,而色相不要過三!
如果設(shè)計的界面的顏色太多,炫酷的眼花繚亂是個什么樣的效果?下面我們來看看一家知名的招聘網(wǎng)站。
我想你和我一樣頓時淚流滿面了~
是的,我們單純的就想找份合適的工作,過上幸福美好的生活。并沒有那么簡單,一進(jìn)入主頁面,剎那間,狗皮膏藥鋪面而來。這種感覺,我的小心臟頓時崩潰了……就一小小塊面積,一個城市地址就出現(xiàn)了三種顏色。難道這樣真的好嗎?
我們來做一個對比。有一種設(shè)計,叫別人家的設(shè)計。綠色永遠(yuǎn)是品牌色,紅色就是網(wǎng)站的裝點色,這就叫傳承。
統(tǒng)一的主色彩風(fēng)格的導(dǎo)向,能加強用戶對產(chǎn)品的記憶程度,也然產(chǎn)品的體驗感更加舒適和自然。
那是不是越簡潔的顏色就最好?
那咱就只用一種顏色得了。下圖中單一顏色和多種色相顏色配色下的對比,我們可以看到在單一顏色下的設(shè)計更為統(tǒng)一,畫面更為和諧。在多種顏色下界面中的功能模塊更為明確,區(qū)分性更強,所以說在使用多種顏色的時候還需要考慮產(chǎn)品的內(nèi)容與核心。
三色搭配,只要控制在不超過三種色相的范圍即可。學(xué)過畫畫的商業(yè)設(shè)計師,應(yīng)該都清楚知道顏色的明度、暗度、飽和度。
運用單色的設(shè)計,會顯得單調(diào)乏味。而整體顏色飽和度過低會導(dǎo)致畫面沉悶而不透氣。明快的顏色和明暗的色彩搭配能使畫面顯得層次感豐富而又有朝氣。
在界面設(shè)計中,色彩是設(shè)計中的重中之重,是否正確和完整的表現(xiàn)出產(chǎn)品氣質(zhì)至關(guān)重要。單一的色相,豐富的明度和飽和度能使界面看的有層次感和豐富性。而精簡的色,處理器來也會跟容易統(tǒng)一和把控。在用色時,顏色越少越好,但要保證正確的傳達(dá)出需要表現(xiàn)的功能和元素為前提。在我們每添加一種顏色的時候都需要好好的考慮一下,有沒有必要。因為再復(fù)雜的設(shè)計,也不會多個三種主色彩。
以下界面為了區(qū)分更多的內(nèi)容區(qū)域運用了三種顏色,但因為顏色過度導(dǎo)致頁面分割凌亂,紅色在頁面中就是多余的,功能分割相對也是多余的??梢杂脙煞N顏色時候,就不要用到三種顏色??梢杂靡环N顏色的時候就不要用三種顏色。簡潔,會使作品更為成熟。
在桌面圖標(biāo)設(shè)計中,常常也會用到兩色和三色的搭配形式。這樣的配色能使圖標(biāo)顯得簡約而不乏味。
在運用色彩進(jìn)行設(shè)計的時候,心里要有數(shù)。色彩的主次關(guān)系能定作品的性。優(yōu)秀的作品色彩就是那么的清晰,
記住色彩功能的劃分:主要色、輔助色、裝點色。
主色決定設(shè)計的風(fēng)格
在設(shè)計中色彩充當(dāng)了重要的情感元素,那主色就是作品的文化方向。我們在設(shè)計初期需要對項目有明確的了解后提煉選擇出最為貼切的主色進(jìn)行定位。
每種顏色承載的文化都是不同的,會領(lǐng)導(dǎo)了整個界面設(shè)計的方向。
網(wǎng)頁設(shè)計、移動界面設(shè)計、banner設(shè)計、平面設(shè)計……不同的媒介,主色的運用規(guī)律各不相同。網(wǎng)頁設(shè)計和界面設(shè)計,通常主色運用在結(jié)構(gòu)和裝飾。而Banner和海報為了更為醒目,主色通常運用在背景顏色上。
在界面設(shè)計中常將品牌LOGO的顏色定為主色彩,并且在不同的界面中主色彩出現(xiàn)的面積也會隨之變化。
下圖我們可以看到大眾點評、百度外賣、美團(tuán)應(yīng)用都將產(chǎn)品LOGO的顏色進(jìn)行了延續(xù),將logo顏色定義為主色彩,有效的統(tǒng)一了產(chǎn)品的傳播性。
同時還發(fā)現(xiàn),這幾個產(chǎn)品的界面設(shè)計主色面積使用也是非常一致。首頁中使用的主色彩面積較大,導(dǎo)航條全部填充了主色。在二級頁面中則使用的面積較少,將主色點綴到界面中。
我們可以這樣去理解,在用戶使用產(chǎn)品時,更希望用戶記憶產(chǎn)品。而在用戶進(jìn)入了信息頁面時則更注重易用性,希望用戶能找到自己需要的東西。所以主色在首頁使用的面積較多,而二級頁面使用在關(guān)鍵的操作點上。從產(chǎn)品角度出發(fā),我們在使用主色的時候要考慮頁面的內(nèi)容關(guān)系,理解界面的層次與功能性質(zhì)。從視覺出發(fā),選擇了飽和度較高的色彩做為主色時,要考慮因為顏色面積過多而造成的視覺疲勞。
在banner和海報的設(shè)計中主色的面積一般會運用在背景色中,相對面積較大??芍^是直奔主題式。
通常大家覺得只要色彩面積最多就是主色。其實不然,人們的閱讀心理是有差異的,如果顏色飽和度較低容易被相對面積少的高飽和度顏色搶眼,所以在定義界面主色的時候要懸著飽和度(純度)高的顏色作為主色會比較的穩(wěn)定。
在界面設(shè)計匯總使用互補色彩的對比是最為強烈的。這種色彩能使用戶的視覺產(chǎn)生強烈的刺激,情感濃烈,給人留下鮮明的印象。這種方式是最易于傳播的。適合在夸張的、張揚的場景下使用。但這種顏色用的太過于平凡容易造成用戶的視覺疲勞。給人一種不安定的感覺。那么在使用這樣的搭配方式時需要控制使用的位置和信息的面積了,核心的地方可以這樣去使用。
主要的三對互補色:紅綠、藍(lán)橙、黃紫
我們可以看到很多APP的icon為了吸引用戶的注意就用到了強烈對比的互補色
番茄快點、QQ空間、相機360
色彩中還會運用到冷暖對比
冷暖對比色是自然平衡的規(guī)律,可以在設(shè)計中大量使用,這樣的配色會使作品非常的出彩,不顯單調(diào)。
我們先看看一下幾款A(yù)PP的icon設(shè)計:
下面這款A(yù)PP的名稱叫KOI,很喜歡這款應(yīng)用配色,運用到了冷暖配色,起了非常好的點綴效果,看起來靈動而醒目。
Tweetbot的icon也用到了冷暖顏色的對比,是不是醒目又可愛啊,大家可以去試試這種搭配,百試百靈。
Seedling Comic Studio,這款icon運用到了冷暖搭配顯得由為的精彩,視線里面集中到了中心點上。
在設(shè)計中,冷色與暖色的對比是界面設(shè)計中最為廣泛的使用方法,效果也非常的出眾。
色彩好比就是陰陽太極,冷與暖的兩級平衡還原了生活中的和諧。用這樣的配色效果讓用戶感覺舒服平和。
冷暖色彩搭配的方法基本沒有啥缺點,使用在設(shè)計中,技巧性比較多,對設(shè)計的細(xì)膩感受要求比較高。
雖然支付寶的主圖標(biāo)發(fā)生了改變,變成了簡潔的藍(lán)色支付寶,但主頁面中還是利用到了冷色與暖色的搭配,很好的區(qū)分了分類,并且讓頁面中豐富的分類變得不是那么得零散。很多設(shè)計師每次碰到滿版分類圖標(biāo)的時候很頭大,處理的時候容易把頁面搞花了,建議使用冷暖的方式去調(diào)整,將頁面平衡好。
當(dāng)時米醋哥在設(shè)計360防丟器的時候就用了兩個色,紅色和藍(lán)色的冷暖搭配。將360字體樣式融入到建筑中取用了暖紅色,而尋找位置的大頭針運用了冷藍(lán)色。
好了,先寫到這里?;仡櫼幌陆裉煳覀冎v的知識點。
1.色不過三
2.主色的定義,及面積
3.找輔助色,還記的有那幾對輔助色嗎?
今天和大家分享的這不僅是運用在界面中,更是選擇顏色時至為重要的三個點!實用性極高!看似簡單,大家運用起來還要多加分析哦~