在扁平化設(shè)計(jì)剛剛興起之時(shí)，漸變是設(shè)計(jì)師們避之不及的設(shè)計(jì)手法，然而今天它已經(jīng)正式回歸。幾乎是在一夜之間，無(wú)數(shù)的網(wǎng)站開(kāi)始使用漸變色。

從背景到圖片上的色彩疊加，包括UI元素上所遮蓋的色彩，所有的這一切都表明漸變以一種微妙的方式回歸了。不過(guò)和以往的我們所看到的漸變不同，重新回歸的漸變色設(shè)計(jì)有著不一樣的使用技巧和特色，更加貼合這個(gè)時(shí)代的風(fēng)格和需求了。如果你也想使用，不妨從今天的設(shè)計(jì)示例中學(xué)習(xí)一下“全新”的漸變?cè)O(shè)計(jì)。

潮流的引領(lǐng)者

在今年早些時(shí)候，Spotify 開(kāi)始在自家網(wǎng)站上大量使用雙色調(diào)設(shè)計(jì)，將雙色調(diào)的潮流帶了起來(lái)。如果你仔細(xì)查看Spotify 的頁(yè)面會(huì)發(fā)現(xiàn)，其中色彩其實(shí)是有明暗、色調(diào)的漸變效果的。

而其他的著名品牌也開(kāi)始逐步回歸，開(kāi)始在設(shè)計(jì)中融入漸變色彩。而在線電子雜志供應(yīng)商 Texture 干脆使用了全屏的漸變色彩設(shè)計(jì)。

重新流行的“新”漸變?cè)O(shè)計(jì)的案例并不只有這么點(diǎn)兒。更多采用類似漸變?cè)O(shè)計(jì)的網(wǎng)站正如同雨后春筍般涌現(xiàn)，類型已經(jīng)不拘泥于專題頁(yè)，從產(chǎn)品展示到電商網(wǎng)站，不一而足。

現(xiàn)在所流行的漸變?cè)O(shè)計(jì)其實(shí)并沒(méi)有什么特別與眾不同的規(guī)范，或者規(guī)則，它可以是多種不同色彩支架你的加變，可以是從中央到周?chē)妮椛洌梢允菑纳系较碌淖匀蛔兓部梢允菑慕锹漭椛涞狡渌恢茫梢宰鳛樵O(shè)計(jì)的主視覺(jué)而存在，也可以是諸多特性中的一個(gè)。

漸變最實(shí)在的一點(diǎn)在于設(shè)計(jì)師可以輕松駕馭，使用范疇不拘泥于一時(shí)一地，自由隨性地使用同樣可以創(chuàng)造實(shí)相當(dāng)不錯(cuò)的效果。

扁平化配色與漸變

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

這些色彩的使用讓色彩的漸變同如今網(wǎng)站的現(xiàn)代風(fēng)更加貼合，顯得更加符合趨勢(shì)。將漸變的設(shè)計(jì)同扁平化設(shè)計(jì)的美學(xué)特征融為一體，或者在Material Design 風(fēng)格的界面中適當(dāng)加入一些柔和的色彩組合，都是能帶來(lái)不錯(cuò)的效果。

漸變色的使用對(duì)于其他的設(shè)計(jì)趨勢(shì)而言，是一個(gè)不錯(cuò)的補(bǔ)充，漸變本身的緩沖作用，使得你即使要重設(shè)計(jì)也無(wú)需從頭再來(lái)。

雙色調(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)，從而讓用戶注意到其他的更加重要、關(guān)鍵的元素，強(qiáng)化頁(yè)面的可讀性。這種設(shè)計(jì)對(duì)于大圖的作用尤其明顯。

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

微妙的漸變與UI元素

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

在早期的iOS系統(tǒng)當(dāng)中，這種設(shè)計(jì)相當(dāng)?shù)某Ｒ?jiàn)，不過(guò)現(xiàn)在已經(jīng)很少見(jiàn)到了。

不可否認(rèn)，漸變色還是更適合同較大的元素搭配起來(lái)。在較小的元素諸如小圖標(biāo)、小按鈕等控件上使用的時(shí)候，色彩梯度并不是那么容易看清楚，甚至有可能讓用戶分心。

但是不論是在什么情況下使用漸變?cè)O(shè)計(jì)，都不要讓用戶產(chǎn)生停下來(lái)感慨“Wow好贊的漸變”的效果，這樣就喧賓奪主了。漸變是用來(lái)強(qiáng)化用戶體驗(yàn)，而非勾引用戶來(lái)關(guān)注設(shè)計(jì)美學(xué)的。

結(jié)語(yǔ)

坦率的講，當(dāng)初漸變被斥之為“過(guò)時(shí)的設(shè)計(jì)”之時(shí)，我是相當(dāng)傷感的。這也是為何今天看到漸變?cè)O(shè)計(jì)回歸的時(shí)候如此的興奮。

作為設(shè)計(jì)中最常見(jiàn)、最基本的一種技法，漸變?cè)O(shè)計(jì)應(yīng)當(dāng)會(huì)一直存在下去。

【技多不壓身的設(shè)計(jì)師才有高薪資！】

1. 平面設(shè)計(jì)：《超贊！設(shè)計(jì)師完全自學(xué)指南》
2. 交互設(shè)計(jì)：《交互設(shè)計(jì)師修煉指南！教你從零開(kāi)始成為優(yōu)秀交互設(shè)計(jì)師》
3. UI設(shè)計(jì)：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
4. 前端開(kāi)發(fā)：《天貓高手來(lái)教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開(kāi)發(fā)？》
5. 摳圖技巧：《從菜鳥(niǎo)到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識(shí)學(xué)起來(lái)！為設(shè)計(jì)師量身打造的DPI指南》
8. 交互設(shè)計(jì)自學(xué)路徑圖：《零基礎(chǔ)入門(mén)！給非科班生的自學(xué)路徑圖之交互設(shè)計(jì)篇》

原文地址：designshack
原文作者：CARRIE COUSINS
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量150萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com