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

漸變，是設(shè)計(jì)師最簡(jiǎn)單的手法之一，也是移動(dòng)端APP背景設(shè)計(jì)常用的設(shè)計(jì)技巧。所以今天我來(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)了？

圖片來(lái)自于花瓣

不賣(mài)關(guān)子，給大家先上個(gè)圖，這是用下面的方法調(diào)出來(lái)的部分漸變色，毫無(wú)抵抗力啊，當(dāng)然還可以延展非常多。

打開(kāi)Photoshop，拾色器默認(rèn)情況都是下面這樣的，也都習(xí)慣的在這個(gè)模式下去選擇顏色，但今天會(huì)給大家介紹下其他模式的應(yīng)用。

先簡(jiǎn)單介紹一下HSB,Lab,RGB,CMYK是什么功能，其實(shí)這是幾種不同的色彩模式。

- HSB模式中：H表示色相，S表示飽和度，B表示亮度。

- RGB模式中：是指的三原色，R紅色、G綠色、B藍(lán)色

- Lab模式中：L表示亮度，a表示從紅色至綠色范圍的顏色分量，b表示從黃色至藍(lán)色范圍的顏色分量。

- CMYK模式中：C青色、M洋紅（品紅）、Y黃色、K黑色

很多剛接觸Photoshop的這個(gè)軟件的同學(xué)，如果打開(kāi)拾色器是下圖這樣，拾色器中間的豎條不是默認(rèn)的多色情況，多數(shù)會(huì)以為軟件出問(wèn)題了，然后搜索問(wèn)題。

剛接觸PS的我也是如此，但前幾天的又一次鼠標(biāo)意外，發(fā)現(xiàn)拖動(dòng)滑塊可以非常好的運(yùn)用RGB模式去搭配顏色，尤其是臨近色和純色的的搭配（之前雖然知道類(lèi)似的，但是這個(gè)能更直觀的看到）下面舉例紅綠藍(lán)顏色的搭配，當(dāng)然還可以延伸出更多的色彩搭配，更多可以打開(kāi)ps實(shí)踐玩起來(lái)。

雖然得到了這些很棒的漸變色，可以幫助更好的進(jìn)行選擇，但是在選擇的過(guò)程中依然要對(duì)飽和度、明度的細(xì)微調(diào)整才能使用。

除了用拾色器進(jìn)行色彩的選擇，還有其他的很多方法可以進(jìn)行顏色的搭配，下面在列舉一種純懶人方法，我們經(jīng)常會(huì)在電影中或者一些風(fēng)景中看到非常棒的顏色搭配，我頻繁使用的一個(gè)方法就是高斯模糊。

1、首先找到一張你滿(mǎn)意的圖片（網(wǎng)上搜的圖，沒(méi)有高清無(wú)碼的，老司機(jī)自行腦補(bǔ)細(xì)節(jié)）這個(gè)方法不要求圖片的大小，小圖一樣可以。

2、濾鏡-模糊-高斯模糊，半徑根據(jù)你選取的圖片去調(diào)整。

3、模糊之后還是會(huì)顯得畫(huà)面發(fā)灰，那這個(gè)時(shí)候就需要你用曲線(xiàn)和色彩飽和度配合去調(diào)整，通常情況下發(fā)灰都是對(duì)比度不夠，那就加對(duì)比，一個(gè)曲線(xiàn)解決不了，那就拉倆個(gè)。

4、最好一步，移動(dòng)到合適的位置，也可以像我一樣截取某一塊進(jìn)行拉伸，簡(jiǎn)單幾步，你想要的顏色就出來(lái)了，初次用這個(gè)方法還可以用得到的圖片加上圖層混合模式去疊加在某張圖片上， 也會(huì)有意外效果，熟練幾次這個(gè)方法你一定會(huì)非常喜歡的，沒(méi)事多多舉一反三。

當(dāng)然網(wǎng)絡(luò)還有很多漸變色提取網(wǎng)站，也可以用用

快速提升設(shè)計(jì)格調(diào)幾個(gè)方法技巧

一、垂直線(xiàn)性漸變

拉漸變是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ī)則的使用漸變色。

二、垂直線(xiàn)性漸變 球形漸變

Web界面面積比較大，在大面積使用漸變的時(shí)候。如果只是使用垂直的線(xiàn)性漸變是略顯單調(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è)80%透明度的E色，疊加在去色后的圖片上。這樣界面會(huì)層次會(huì)更加豐富。

三、多角度球形漸變

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

四、色塊漸變

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

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

相信通過(guò)我的HSB調(diào)色分析，你可以熟練運(yùn)用顏色創(chuàng)造各種高大上的漸變。

五：扁平化配色與漸變

漸變配色的回歸正巧是在扁平化大行其道的今天，所以它不可避免地同大量扁平化的元素搭配到了一起，而其中最值得考慮的因素，就是色彩。某些用色最大膽、跨度范圍最大的漸變色設(shè)計(jì)干脆直接就從扁平化配色中“借用”色彩。

六：雙色調(diào)的加入

雙色漸變是漸變?cè)O(shè)計(jì)中的很重要的組成部分。而雙色漸變同其他設(shè)計(jì)趨勢(shì)的結(jié)合效果拔群，這一點(diǎn)值得再三強(qiáng)調(diào)。

而雙色調(diào)漸變的唯一缺點(diǎn)，大概是……被用的太多了。如果你稍加注意就會(huì)發(fā)現(xiàn)，確確實(shí)實(shí)有一大堆網(wǎng)站采用了雙色漸變來(lái)作為背景或者主要視覺(jué)模塊，似乎沒(méi)有哪種雙色搭配沒(méi)人用過(guò)。藍(lán)綠和橙紅搭配是用的最多的。

謹(jǐn)慎使用這一趨勢(shì)，因?yàn)榇_實(shí)很容易與別的網(wǎng)站“撞衫”。

七：漸變背景圖

漸變的回歸，使得我們?cè)俅慰梢钥吹皆S多擁有景深或者縱深的背景圖。虛擬現(xiàn)實(shí)的流行讓越來(lái)越多的設(shè)計(jì)師嘗試更加現(xiàn)實(shí)、更加立體的網(wǎng)站設(shè)計(jì)，毫無(wú)疑問(wèn)，你會(huì)在未來(lái)看到更多這樣的設(shè)計(jì)。

扁平化設(shè)計(jì)確實(shí)時(shí)尚而更易于接受，但是它缺少富有現(xiàn)實(shí)質(zhì)感的元素也是不爭(zhēng)的試試。試想一下自然中元素給人的感受和體驗(yàn)。漸變色的使用很好地緩解了這個(gè)局面，畢竟自然界中很少有特別純粹特別單一的色彩。

不難想象，漸變色和陰影背后的概念和規(guī)則是相通的。它們?yōu)樵O(shè)計(jì)創(chuàng)造了深度和層次。

八：圖片上的漸變色疊加

作為一種設(shè)計(jì)趨勢(shì)，在圖片上疊加色彩已經(jīng)流行了相當(dāng)長(zhǎng)的一段時(shí)間。而從圖片上的單色色彩疊加，到漸變色的疊加，是一個(gè)相當(dāng)自然的“推導(dǎo)”過(guò)程。

在頁(yè)面的背景、頭圖中加入漸變的色彩疊加，可以讓它們的整體感更強(qiáng)，從而讓用戶(hù)注意到其他的更加重要、關(guān)鍵的元素，強(qiáng)化頁(yè)面的可讀性。這種設(shè)計(jì)對(duì)于大圖的作用尤其明顯。

在圖片上疊加漸變色的技巧在于平衡色彩和圖片之間的關(guān)系。色調(diào)是否要同圖片的含義相匹配？疊加后能否看清圖片中的細(xì)節(jié)？不同的色彩搭配方式帶來(lái)的結(jié)果可能是截然相反的。

九、微妙的漸變與UI元素

和漸變色的流行做法不同，有些設(shè)計(jì)師選擇在UI元素中使用微妙的漸變色。在較小的UI元素中，色彩變化幅度更加微妙，并且通常使用的都是單色調(diào)。

欣賞案例

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

～此文轉(zhuǎn)載，如有侵權(quán)，請(qǐng)聯(lián)系刪除