在Web2.0時(shí)期，漸變已經(jīng)成為一種普遍趨勢。

部分原因是它們幫助實(shí)現(xiàn)了3D的擬態(tài)外觀，逼真的按鈕。然而一段時(shí)間后，許多設(shè)計(jì)師對它們感到厭倦，并宣布漸變已經(jīng)過時(shí)，是一種味道不好的設(shè)計(jì)。在iOS7之后，這一切又重新回到了人們的視野中，后來的Modern Design讓漸變再次成為了人們的焦點(diǎn)。

因?yàn)樵絹碓绞軞g迎，很多設(shè)計(jì)師開始稱漸變?yōu)?"新色彩"。

第一代iPhone時(shí)代的一個(gè)擬物化按鈕，頂部有強(qiáng)烈的漸變、厚實(shí)的邊框、硬朗的陰影。

舊按鈕樣式

現(xiàn)代的漸變，不需要任何額外的裝飾，可以配合同色系的柔光影子，營造出美輪美奐的半真實(shí)感。

現(xiàn)代按鈕

我們喜歡自然的東西，尤其是自然界中存在的東西。需要證據(jù)嗎？你每天在你身邊看到什么？天空！天空不只是一種純色，而是一種漸變色，它取決于天氣和光線。

天空是漸變重要的來源

我們看到的大多數(shù)物體都是三維的，投射陰影。因?yàn)楣饩€很少是均勻的，所以產(chǎn)生的顏色和陰影從來都不是完全平坦的，也不是只用一種顏色來填充的，它們是漸變的，這使得這種特殊的色調(diào)混合比純色更自然。它們在本質(zhì)上是漸變的，這使得這種特殊的色調(diào)混合比純色更自然。

看看你周圍的日常物體。它們的性質(zhì)都是漸變的，而且它們也會(huì)隨著外部光源的變化而變化。

"看看周圍。你看到的幾乎所有東西其實(shí)都是漸變的"

當(dāng)我們開始選擇漸變時(shí)，必須要發(fā)現(xiàn)它們的兩個(gè)主要特質(zhì)。

一個(gè)是創(chuàng)造深度和更明確的形狀的能力。

另一個(gè)是關(guān)于吸引眼球，并引導(dǎo)它到形狀的某些部分。我們的眼睛喜歡明亮、溫暖的色調(diào)，且飽和度相當(dāng)高。

即使是微妙的漸變，也會(huì)讓你的按鈕更友好，更有 "點(diǎn)擊感"。

深度可以讓漸變+陰影組合出現(xiàn)在離眼睛更近的地方--這有助于理解它們背后的交互。

這并不意味著我們應(yīng)該完全拋棄扁平化設(shè)計(jì)，回到前十年的擬物按鈕。兩種方法都有各自的好處和缺點(diǎn)，所以將兩者健康地混合起來可能是有用的。

扁平化的設(shè)計(jì)風(fēng)格可以讓設(shè)計(jì)不那么雜亂，更加簡約，注重功能而不是形式。

Skeuomorphic，或者干脆說是一種更自然的設(shè)計(jì)，提醒我們，我們是在為真實(shí)的人設(shè)計(jì)，他們更喜歡他們已經(jīng)知道和理解的東西。逼真的漸變可以為一個(gè)原本極簡的項(xiàng)目增加 "人文因素"，使其更加人性化。

漸變是兩種或多種顏色之間的過渡。這些顏色也可以有一個(gè)透明度值。你可以用它來實(shí)現(xiàn)一個(gè)對象相對于其背景的淡出效果。

漸變主要有三種類型。

LINEAR（線性漸變）

線性是最流行的漸變類型。正如它的名字所說，它是兩種或多種顏色的線性過渡。我們可以修改顏色本身、透明度和漸變角度。

線性漸變樣本案例

RADIAL（徑向漸變）

徑向漸變開始時(shí)，一種顏色在漸變環(huán)的中間，而另一種顏色最終在其邊緣。這種漸變最常見的是圓形漸變，過渡是沿著圓圈均勻分布的。

兩種沒有透明度的顏色通過添加高光和陰影，可以在圓圈中創(chuàng)造出3D效果。

如果漸變的兩端顏色相同，其中一端處于全透明狀態(tài)，我們最終會(huì)產(chǎn)生模糊或淡出的效果。

徑向漸變在非圓形的形狀上效果很好，可以為它們添加一點(diǎn)有機(jī)的、現(xiàn)實(shí)的風(fēng)格。

ANGULAR（角度漸變）

角度漸變以逆時(shí)針方向繞圈。顏色之間的角度決定了過渡是雙向的（180度角）還是中間有一條尖銳的分界線（0度）。

這種類型的漸變很少是界面的好選擇。

設(shè)置在同一位置的兩種顏色之間會(huì)有一條尖銳的邊緣，而漸變則是反方向的。

兩種顏色在180度的時(shí)候，顏色之間會(huì)有一個(gè)流暢的過渡，往兩邊走。

你可以添加更多的顏色和玩轉(zhuǎn)角度，以達(dá)到一些有趣的結(jié)果。

最佳做法

如何設(shè)計(jì)一個(gè)既好看，又有意義的優(yōu)秀界面設(shè)計(jì)的漸變？要做到這一點(diǎn)，需要遵循一些基本規(guī)則。

兩種顏色

雙色漸變是大多數(shù)設(shè)計(jì)的最佳選擇。顏色多了，漸變就會(huì)在視覺上變得忙碌。

選擇正確的顏色

盡量搭配相似的顏色，暖色調(diào)搭配暖色調(diào)，冷色調(diào)搭配冷色調(diào)。

這樣可以幫助你避免不好的混搭（最極端的是紅色和綠色的混搭）

細(xì)微漸變

最好的漸變往往是非常微妙的，顏色之間的差別不大。這讓它們看起來更自然，也更容易上手。

漸變是按鈕和其他互動(dòng)元素的流行選擇。這里有一些關(guān)于如何讓它們發(fā)光的技巧。

你幾乎可以選擇任何顏色，并從中創(chuàng)建一個(gè)漂亮的漸變。不過，如果你剛開始學(xué)習(xí)漸變，最好使用安全的方法，每次都能成功。

第一步

創(chuàng)建一個(gè)線性漸變，并在兩端使用相同的顏色。在我們的例子中，它只是從#E0C3FC到#C3C3FC的過渡。

第二步

檢查你的調(diào)色板是否處于HSBmode（色調(diào)、飽和度、亮度），并將其中一個(gè)漸變結(jié)尾的色調(diào)值減少或增加15-30。在我們的例子中，頂部的顏色的Hue值減少了30。

第三步

為了獲得更有機(jī)、更友好的效果，你可以嘗試旋轉(zhuǎn)漸變(這里是45度)或?qū)柡投冉档?0-15點(diǎn)。

我希望你喜歡它。

原文地址：https://medium.com/swlh/playing-with-gradients-3b3697f0e30f#

這里有一些有用的工具，可以幫助你創(chuàng)建自己的夢幻漸變：

https://cssgradient.io/gradient-backgrounds/

https://webgradients.com/