漸變色風(fēng)格已經(jīng)流行好幾年，絕大部分應(yīng)用或者網(wǎng)站基本都能遇到漸變色設(shè)計(jì)，漸變色之所以受歡迎是因?yàn)樗梢载S富設(shè)計(jì)細(xì)節(jié)、營(yíng)造空間感、強(qiáng)調(diào)品牌調(diào)性等，因此作為設(shè)計(jì)師更要重視它的運(yùn)用方法。
今天就和大家聊下漸變色風(fēng)格特點(diǎn)，以及如何在優(yōu)秀設(shè)計(jì)中學(xué)習(xí)漸變色的使用思路。
1.漸變色在設(shè)計(jì)中的價(jià)值
漸變色廣泛運(yùn)用在各行業(yè)設(shè)計(jì)中，它幫助很多產(chǎn)品有效的打造具有傳播性的品牌基因、增強(qiáng)品牌記憶、豐富設(shè)計(jì)細(xì)節(jié)。對(duì)設(shè)計(jì)師來(lái)說(shuō)，又多一種設(shè)計(jì)表達(dá)手法。
▲ spotify的漸變色更是讓人記憶尤新，通過(guò)漸變色打造獨(dú)有的產(chǎn)品調(diào)性。其封面設(shè)計(jì)最具記憶點(diǎn)。
▲ apple music因其獨(dú)特漸變色LOGO，吸引很多用戶和粉絲，其流動(dòng)的漸變色正好符合音樂(lè)律動(dòng)感，也最具記憶性。
2.漸變色直觀感受
當(dāng)我們說(shuō)起漸變色，我相信大家有不同的情感表達(dá)。最直觀的是強(qiáng)視覺(jué)感知、美觀性強(qiáng)、極具吸引力、記憶性等。
▲ 2016年5月知名產(chǎn)品instagram更換品牌后，其驚艷的漸變色吸引很多設(shè)計(jì)師和用戶的關(guān)注，有吐槽也有贊美的，其后近幾年諸多設(shè)計(jì)跟隨這樣的風(fēng)格。
▲ 融合幾何圖形的漸變色，帶來(lái)更加直觀的空間感和流動(dòng)感。
3.運(yùn)用場(chǎng)景
漸變色在設(shè)計(jì)中運(yùn)用范圍廣包括UI設(shè)計(jì)、Web、圖標(biāo)、LOGO、海報(bào)設(shè)計(jì)等下面來(lái)看看它運(yùn)用在這些設(shè)計(jì)中特征點(diǎn)。
▲ 在背景中可增加界面細(xì)膩度和品質(zhì)感，如果單純白色或者純色，畫(huà)面顯得蒼白無(wú)力，如果你想給用戶營(yíng)造活力的氛圍，那么還可以使用暖色調(diào)。
▲ 在卡片上配合幾何圖形可區(qū)分功能模塊。如果是金色漸變，可表達(dá)尊貴身份，一般會(huì)運(yùn)用到會(huì)員卡片設(shè)計(jì)。
▲ 在關(guān)鍵功能上應(yīng)用漸變色，能起到強(qiáng)調(diào)作用，同時(shí)增加該功能的趣味性。通過(guò)顏色漸變來(lái)表達(dá)當(dāng)前的功能狀態(tài)。
WEB中的運(yùn)用
▲ 一般運(yùn)用在頭圖背景色偏多，凸顯品牌的同時(shí)，可以讓畫(huà)面有更多細(xì)節(jié)。
▲ 配合幾何圖形運(yùn)用，可以增加空間感和神秘感。
LOGO中的運(yùn)用
▲ 在LOGO中雙色漸變或者多色漸變，可以讓logo更加立體與空間感，有助于形成口碑傳播與營(yíng)造吸引力，instagram和apple music 就是一個(gè)很好的例子。
海報(bào)中的運(yùn)用
▲ 海報(bào)中運(yùn)用漸變色，玩法可以有很多種類(lèi)型，視覺(jué)沖擊力強(qiáng)，吸引注意力，滿滿的時(shí)尚感。
圖標(biāo)中的運(yùn)用
▲ 在圖標(biāo)中運(yùn)用可凸顯其特殊含義，比如音樂(lè)的圖標(biāo)，色彩更加流動(dòng)性與活躍，撞色對(duì)比。聯(lián)系人圖標(biāo)運(yùn)用藍(lán)色漸變，更加理性與冷靜。
4.需要注意的點(diǎn)
漸變色設(shè)計(jì)雖然很酷，但是也有其弊端，切勿過(guò)度使用需要避免顏色沖突、注意光源位置、方形或者多邊形推薦使用線性漸變、圓形盡量使用徑向漸變，漸變過(guò)度一定要平滑，下面看幾個(gè)案例。
▲ 反面案例：界面中過(guò)多的漸變色，造成視覺(jué)噪音污染，使得畫(huà)面無(wú)重點(diǎn)，信息層級(jí)也不清晰。
▲ 正面案例：知道哪些地方運(yùn)用亮色，哪些范圍運(yùn)用暗色，便于通過(guò)漸變色制造光源，強(qiáng)調(diào)重要信息。
▲ 正面案例：當(dāng)大面積使用漸變色，盡量采用同色系或者鄰近色漸變，使用線性漸變，同時(shí)注意避免過(guò)高飽和度。
▲ 正面案例：同色系運(yùn)用且過(guò)度平滑，低飽和度漸變，使界面更加輕量簡(jiǎn)約，同時(shí)又不失細(xì)節(jié)。
▲ 反面案例：避免使用過(guò)于刺激性撞色，如果你沒(méi)有很好色感，最好使用鄰近色，同色系等容易掌握的顏色。
5.寫(xiě)在最后
漸變色運(yùn)用，需要我們長(zhǎng)期練習(xí)與感悟，當(dāng)然多欣賞優(yōu)秀的設(shè)計(jì)，也可以快速提高。如果色感不好的小伙伴，推薦多使用同色系漸變或者鄰近色。
下面推薦2個(gè)漸變色彩工具，日?？梢远嗫纯磳W(xué)習(xí)，便于快速提高漸變色運(yùn)用技巧。
1.grabient
漸變色可進(jìn)行編輯與調(diào)整，然后點(diǎn)擊漸變色卡即可進(jìn)行復(fù)制應(yīng)用。
2.webgradients
點(diǎn)擊色卡可進(jìn)入全屏預(yù)覽，如果你做大面積漸變色，這個(gè)網(wǎng)址非常值得保存。
原文地址：功夫UX（公眾號(hào)）
作者：功夫UX
