對(duì)于漸變一詞的解釋：“一種有規(guī)律性的變化”。作為設(shè)計(jì)師我們提到漸變，首先想到的就是漸變色，在工作中漸變色的使用隨處可見，比如色彩搭配、文字處理、圖形圖標(biāo)等等。
那么在設(shè)計(jì)中使用漸變色具體有哪些作用呢？希望本期文章對(duì)你有所幫助。
你也許不止一次的在工作中使用漸變色，但你對(duì)漸變色的了解有多少？它有哪些屬性？如何分類？
接下來(lái)讓我們重新認(rèn)識(shí)一下漸變色。漸變可分為有規(guī)則和不規(guī)則兩種。
所謂有規(guī)則，顧名思義就是可以通過一些具體參數(shù)進(jìn)行調(diào)整的。
首先從基礎(chǔ)屬性上來(lái)看，漸變色會(huì)根據(jù)方向、長(zhǎng)短的不同，呈現(xiàn)出不同的視覺表現(xiàn)形式。
方向區(qū)別：
長(zhǎng)短的區(qū)別：
在保證其他屬性不變，只改變其長(zhǎng)度時(shí)：漸變?cè)介L(zhǎng)，色彩的變化越平緩；反之就會(huì)越急促。
如果將設(shè)計(jì)中的漸變色進(jìn)行簡(jiǎn)單分類的話，可以根據(jù)漸變呈現(xiàn)的樣式和顏色屬性作為分類切入點(diǎn)。
從呈現(xiàn)樣式上區(qū)分的話，可以將常用的漸變色分為線性、徑向、角度、對(duì)稱、菱形。
根據(jù)色彩色相數(shù)量的不同，可以將漸變色分為：無(wú)彩色、單色、多色。
同理可以根據(jù)色彩的明度和飽和度不同，將漸變色分為高明度、低明度、高飽和度、低飽和度。
再來(lái)說下不規(guī)則的，就是沒有太多規(guī)律、主觀性比較強(qiáng)，工作中常用的就是通過濾鏡中的模糊或模糊畫廊里的模糊工具，制作不規(guī)則漸變。
下面列舉幾個(gè)比較常用的制作不規(guī)則漸變的方法：
① 利用高斯模糊制作。
方法：繪制圖形填充合適的顏色，通過模糊工具調(diào)整。
② 利用光圈模糊工具
方法：繪制圖形之后，通過模糊畫廊里的光圈模糊工具，對(duì)其每個(gè)圖形進(jìn)行模糊處理，多調(diào)整即可。
③ 利用液化、路徑模糊工具
方法：簡(jiǎn)單畫幾個(gè)圖形，填充顏色之后用液化工具隨便涂抹兩下，再通過路徑模糊進(jìn)行調(diào)整。
這里給大家提供幾個(gè)制作思路，工具使用的先后順序不同，得到的結(jié)果也不同，都是嘗試嘗試，也許會(huì)有意想不到的效果。
所以你會(huì)發(fā)現(xiàn)，漸變色的表現(xiàn)形式是多種多樣的，就跟我們上學(xué)時(shí)候?qū)W習(xí)排列組合一樣，每種不同的組合都會(huì)產(chǎn)生不一樣的結(jié)果。
重新認(rèn)識(shí)漸變色，目的是讓你對(duì)其有更系統(tǒng)的理解和認(rèn)知，那么接下來(lái)就詳細(xì)說下：漸變色在設(shè)計(jì)中的妙用有哪些？
對(duì)于“質(zhì)感”一詞，百科上是這么解釋的：指造型藝術(shù)中運(yùn)用不同的表現(xiàn)手段表現(xiàn)出的各種不同物體所具有的特質(zhì)。
如金屬、竹木、陶瓷、玻璃、呢絨等的軟硬、輕重、粗細(xì)、糙滑等真實(shí)感覺。
而漸變色對(duì)于我們營(yíng)造整體設(shè)計(jì)質(zhì)感，有一定的輔助作用，用最簡(jiǎn)單的漸變色和純色對(duì)比：
單純只看背景的話，很明顯右側(cè)漸變色背景在視覺表現(xiàn)上質(zhì)感更強(qiáng)、也更加豐富，下面結(jié)合案例來(lái)看，你認(rèn)為哪款海報(bào)質(zhì)感更強(qiáng)？
比如我們經(jīng)常會(huì)看到一些工業(yè)設(shè)計(jì)，在展示產(chǎn)品時(shí)經(jīng)常會(huì)用到一些單色漸變或無(wú)彩色漸變作為背景。
如上圖所示，背景使用漸變色的目的也很明顯，更利于產(chǎn)品質(zhì)感的凸顯，與產(chǎn)品本身形成視覺上的呼應(yīng)。
接下來(lái)我們用AirPods耳機(jī)做個(gè)演示：
不改變整體元素，只在其背景上拉個(gè)簡(jiǎn)單的灰到白的漸變：
是不是感覺質(zhì)感提升了很多？
類似的案例還有：
綜合來(lái)看，一般當(dāng)漸變色的目的是提升整體質(zhì)感時(shí)，多為無(wú)彩色漸變或單色漸變。
在設(shè)計(jì)工作中，畫面空、枯燥乏味是很多設(shè)計(jì)師容易碰到的棘手問題，面對(duì)“空”最常見的解決方式就是做加法，也就是說增加視覺元素，而色彩也是視覺元素的一種。
漸變色在視覺上會(huì)給人很強(qiáng)的節(jié)奏感和審美情趣，通俗來(lái)講：相比純色，漸變色在視覺上的變化更豐富、層次感更強(qiáng)。
人們對(duì)于色彩的感知度是非常敏感的，所以當(dāng)我們的設(shè)計(jì)作品出現(xiàn)單調(diào)、缺少層次感時(shí)，通過改變色彩屬性，營(yíng)造更多視覺上的變化，也能幫助我們解決問題。
比如使用漸變色，就是能很好的解決上述問題，下面看個(gè)簡(jiǎn)單的案例：
通過案例對(duì)比我們不難發(fā)現(xiàn)：在只改變背景配色的情況下，漸變色背景讓作品整體在視覺上變得更加豐富、有層次感。
類似的案例還有很多：
不僅如此，豐富畫面的漸變色不只是局限于背景，還可以是文字、裝飾元素、圖形等等，前提是要兼顧整體性，以免出現(xiàn)亂的現(xiàn)象。
下面做個(gè)案例，用最近很火的歌曲《漠河舞廳》擼個(gè)簡(jiǎn)單的海報(bào)，先把文字和構(gòu)圖確定好。
整體略顯單調(diào)，簡(jiǎn)單做下調(diào)整，適當(dāng)?shù)募有┭b飾的元素。
這樣就有點(diǎn)感覺了，但整體視覺上還是不夠豐富，給背景加點(diǎn)漸變?cè)囋嚒?
適當(dāng)?shù)募狱c(diǎn)雜色，會(huì)不會(huì)更有質(zhì)感一些？
再改個(gè)配色形式試試：
來(lái)波紅配綠：
花里胡哨再來(lái)一個(gè)：
當(dāng)使用漸變色的目的是豐富畫面時(shí)，不管是單色、多色，線性還是徑向、規(guī)則與否等等，對(duì)其就沒有太多的限制。
聚焦，理解起來(lái)很容易，就是視線、注意力等集中于某處，舉個(gè)例子：
我們將其看做兩塊黑色的幕布，左側(cè)除了漆黑一片，沒有其他任何視覺元素，這就導(dǎo)致我們的眼睛會(huì)一直在這塊幕布上來(lái)回游離，視線沒有著落點(diǎn)。
而右側(cè)幕布上出現(xiàn)了一個(gè)綠色的亮點(diǎn)，與周圍大面積的漆黑形成了強(qiáng)烈的視覺反差，此時(shí)我們看這塊幕布時(shí)，視線就會(huì)不由自主的落在綠色亮點(diǎn)上，這就形成了視覺上的聚焦。
正如無(wú)印良品的這組“地平線”系列海報(bào)一樣，視線總有著落點(diǎn)。
所以在商業(yè)設(shè)計(jì)中，一直在強(qiáng)調(diào)主次、層次，目的就是為了讓用戶看懂你的設(shè)計(jì)，而不是一味的炫技。
我們也可以把設(shè)計(jì)上的聚焦理解為強(qiáng)調(diào)突出，使得作品整體主次分明，視覺富有邏輯感。
而說到強(qiáng)調(diào)突出，很多人都會(huì)想到放大、加粗、變色等，常見的表現(xiàn)手法有：對(duì)比、留白、光效等等。
另外，漸變中有個(gè)模式叫徑向漸變，由四周向中間過渡，給人最直觀的視覺感受就聚焦，很適合用于強(qiáng)調(diào)、突出，比如：
把漸變色用于強(qiáng)調(diào)突出作用時(shí)，其表現(xiàn)形式有很多種，比如：給需要突顯的標(biāo)題、文字添加醒目的漸變色、或者是通過使用漸變色塊、圖形、形狀營(yíng)造視覺差異化，從而達(dá)成強(qiáng)調(diào)突出的意圖。
在案例中的表現(xiàn)：
想要在設(shè)計(jì)中實(shí)現(xiàn)聚焦，核心還是營(yíng)造視覺差異，只有這樣在視覺才能形成層次、節(jié)奏、主次，這對(duì)于商業(yè)設(shè)計(jì)來(lái)說是非常重要的。
有氛圍感的畫面，即便沒有太多精細(xì)化的處理，也能通過整體營(yíng)造出獨(dú)特的美感。
比如暖色調(diào)的畫面會(huì)給人一種溫馨、陽(yáng)光、浪漫的感覺；提到春節(jié)我們就會(huì)想到喜慶、快樂等等，這就是氛圍帶來(lái)的特殊感受。
舉個(gè)簡(jiǎn)單的例子：看到下面的漸變色，第一時(shí)間你會(huì)想到什么？
應(yīng)該會(huì)有很多人想到：夕陽(yáng)、落日、黃昏等等，就像下面這張圖一樣。
這就是有氛圍感的畫面，即便是簡(jiǎn)單的兩個(gè)顏色形成的漸變，也能給人帶來(lái)無(wú)限的遐想。
漸變色本身在視覺上就富有一定的節(jié)奏感和層次感，所以用于提升畫面整體氛圍感是再合適不過了。
這也是為什么在電商設(shè)計(jì)中，一提到大促活動(dòng)、氛圍感要求強(qiáng)些的專題，設(shè)計(jì)師都會(huì)想到藍(lán)紫、紅黃、藍(lán)青等漸變色的原因。
漸變色之所以對(duì)提升畫面氛圍感有幫助，主要是因?yàn)椴煌蕦傩宰兓瘞?lái)的視覺差異化感受。
所以當(dāng)漸變色用于提升作品氛圍感時(shí)，無(wú)彩色漸變和單色漸變出現(xiàn)的相對(duì)會(huì)少一些。
通過整篇文章的見解，你是不是對(duì)漸變色又有了新的認(rèn)知？
漸變色對(duì)于設(shè)計(jì)師來(lái)說都不陌生，甚至是不起眼的，但卻能幫助我們解決很多設(shè)計(jì)中的棘手問題。
當(dāng)然，漸變色還有其他作用，比如：傳遞品牌價(jià)值、體現(xiàn)設(shè)計(jì)美學(xué)等等。
你會(huì)發(fā)現(xiàn)，很多時(shí)候并不是說你遇到的問題有多難解決，而是你缺少系統(tǒng)性的知識(shí)，不能將單個(gè)知識(shí)點(diǎn)串聯(lián)起來(lái)，所以才導(dǎo)致你每次看到文章知識(shí)點(diǎn)時(shí)都會(huì)恍然大悟，到工作中又是不知該怎么辦。
所以一定要利用非工作時(shí)間，多做練習(xí)，只有大量的練習(xí)、總結(jié)，才能真正將理論知識(shí)變成自己的。
原文地址：美工美邦（公眾號(hào)）
作者：老張
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》硬核干貨！漸變色在設(shè)計(jì)中有哪些妙用？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司