如何巧妙運(yùn)用漸變迅速提升界面的格調(diào)

2018-07-12 2135 0

 



迷人漸變 快速提升設(shè)計(jì)格調(diào)


我們都知道iOS7以后,界面設(shè)計(jì)已經(jīng)趨于扁平化。實(shí)際界面設(shè)計(jì)中我們已經(jīng)很少繪制寫(xiě)實(shí)圖標(biāo)。所以貌似現(xiàn)在的UI界面顯得千篇一律。比較有經(jīng)驗(yàn)的設(shè)計(jì)師會(huì)熟練運(yùn)用插畫(huà)設(shè)計(jì)還有動(dòng)效設(shè)計(jì),使自己的界面顯得與眾不同,然而這些技巧都是需要時(shí)間歷練,短時(shí)間并不容易掌握這些知識(shí)。
 

 

有沒(méi)有一種方法簡(jiǎn)單實(shí)用,迅速提升界面的格調(diào)了?

instagram 換標(biāo)的設(shè)計(jì)刷遍了大家都朋友圈,對(duì)于這個(gè)新圖標(biāo)褒貶不一,不管這個(gè)設(shè)計(jì)好壞與否,你不得不承認(rèn)第一眼看這個(gè)彩虹色讓你眼前一亮。也讓我們重新認(rèn)識(shí)到在UI設(shè)計(jì)中,使用得當(dāng)?shù)臐u變色彩,可以使界面和圖標(biāo)的設(shè)計(jì)感得到迅速提升。


 

ddda57387f3b6ac72580ed25328c.jpg


 

漸變是設(shè)計(jì)師最簡(jiǎn)單的手法之一,也是移動(dòng)端APP背景設(shè)計(jì)常用的設(shè)計(jì)技巧。所以今天我來(lái)教大家如何還可以巧妙運(yùn)用漸變,迅速提升界面的格調(diào)。


 


 

 

一、垂直線性漸變


32f157387f666ac72580ed5aa7e5.jpg


拉漸變是Photoshop的基礎(chǔ)操作,那么如何運(yùn)用的好看了?顏色選擇才是關(guān)鍵


我們把一個(gè)漸變顏色拆分成A B C三個(gè)顏色,每個(gè)顏色用HSB標(biāo)注顏色色值,關(guān)于如何運(yùn)用HSB模式去觀察顏色的方法,在我的UI設(shè)計(jì)書(shū)籍《術(shù)與道-移動(dòng)應(yīng)用設(shè)計(jì)必修課》已經(jīng)詳細(xì)描述,這里就不多贅述。

 

0c1057387f7b6ac72580edbb1bc3.jpg


 

這是某App的一組引導(dǎo)畫(huà)面,運(yùn)用了三組漸變顏色,分別標(biāo)注HSB的色值,通過(guò)這組色值的變化,分析如下。
 


 

5d8557387f996ac72580edd235f0.jpg


 

A色 B值非常高,普遍50以上

從A色到B色,H值的變化范圍為正負(fù)30到70,S值減少10,說(shuō)明B顏色略變淡。

從B色到C色,H值的變化范圍為正負(fù)30到40,S值增加15到50,說(shuō)明C顏色開(kāi)始變濃。

 

以上色值僅供參考,實(shí)際使用并非整數(shù)。根據(jù)以上規(guī)律去有規(guī)則的使用漸變色。

 


 

二、垂直線性漸變+球形漸變


 

Web界面面積比較大,在大面積使用漸變的時(shí)候。如果只是使用垂直的線性漸變是略顯單調(diào)的,這個(gè)時(shí)候我們需要加一個(gè)球形的漸變。


 


 

601357387fad6ac72580ed7b9f83.jpg


 

A+B+C色構(gòu)成一個(gè)漸變,這時(shí)候我們?cè)傺a(bǔ)充一個(gè)D色的球形漸變并高斯模糊。D色的圓形矢量形狀要轉(zhuǎn)換為智能對(duì)象,這樣調(diào)節(jié)高斯模糊及大小的時(shí)候可以無(wú)損調(diào)整。如果界面上需要運(yùn)用圖片,我們?cè)傺a(bǔ)充一個(gè)80%透明度的E色,疊加在去色后的圖片上。這樣界面會(huì)層次會(huì)更加豐富。

 


三、多角度球形漸變


 

想讓界面更加絢麗,這時(shí)候我們可以考慮多組球形漸變搭配使用。例如最新改版的instagram就是一組線性漸變,加兩組球形漸變組成。球形漸變也是由多組顏色構(gòu)成。


 

a62157387fc46ac72580edec8dcb.jpg


 



四、色塊漸變


 

漸變的顏色不只可以運(yùn)用在一個(gè)色塊上,還可以運(yùn)用在一組色塊上。設(shè)計(jì)師運(yùn)用一組近似性色彩,將每個(gè)菜單項(xiàng)清晰區(qū)分開(kāi),讓界面平衡在一個(gè)頻率上,這樣的畫(huà)面更有節(jié)奏感和舒適性。


 

9710573880056ac72580ed8cf08e.jpg


 

如何選擇色塊的顏色了?一樣運(yùn)用HSB,逐級(jí)加H色值,H色值越大,S相應(yīng)的色值也要逐漸變小。至于希望你的界面整體顏色跨度大還是小,取決你逐級(jí)H色值加的多少。


 

相信通過(guò)我的HSB調(diào)色分析,你可以熟練運(yùn)用顏色創(chuàng)造各種高大上的漸變。如果有不明白的嗎,也與我互動(dòng)進(jìn)行討論。


 

15535738802e6ac72580ed4e41f7.jpg

欣賞案例

最后給大家看一下相關(guān)精彩案例,可臨摹學(xué)習(xí)


 

4f995738807e6ac72580ed76a72c.jpg7af4573880876ac72580edac2644.jpg


 


 

a6c4573886086ac72580edd7b0b6.jpg

 

 


 


21
評(píng)論區(qū)(0)
正在加載評(píng)論...