教你巧妙運(yùn)用漸變色快速提升設(shè)計(jì)格調(diào)

　　漸變是設(shè)計(jì)師最簡(jiǎn)單的手法之一，也是移動(dòng)端APP背景設(shè)計(jì)常用的設(shè)計(jì)技巧。所以今天設(shè)計(jì)中國(guó)的筆者來(lái)教大家如何巧妙運(yùn)用漸變，迅速提升界面的格調(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ì)感得到迅速提升。

　　一、垂直線性漸變

　　拉漸變是Photoshop的基礎(chǔ)操作，那么如何運(yùn)用的好看了?顏色選擇才是關(guān)鍵我們把一個(gè)漸變顏色拆分成A B C三個(gè)顏色，每個(gè)顏色用HSB標(biāo)注顏色色值。

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

　　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è)球形的漸變。

　　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è)