UI設計中如何把漸變色用好絕對是一門絕活

如果您對用色持開放態度，不會局限於使用深顏色，那麼，您很可能在UI設計方案中加入亮麗的漸變色或者純色，配色完後您覺得效果如何呢？是漸變色好看，還是純色好看呢？

UI設計中如何把漸變色用好絕對是一門絕活

第一個方案的每個形狀都是漸變色，第二個方案填充純色。如果從上面的兩個方案來選擇，我想大部分人會選擇純色的方案，當然，您不能僅從以上方案來判斷兩種配色方案的好或不好，我們應該從兩種方案中吸取有用的經驗。接下來，我們將分享使用漸變色的一些經驗。首先，讓我們用Justin的歌詞來做一些練習，學習漸變色一些基本原則：

上圖使用了漸變色的背景，文字也是使用漸變色，看上去並不合適。雖然在漸變色上在疊加一種漸變色可以做得好看，但很難駕馭，除非要表達特別的理念，不然不建議這樣使用。在上圖的漸變背景中，您可以看到有多種主顏色，而且能很明顯的區分三個主要顏色：青色，鮮艷的品紅色，橙色。

來看上圖中，背景色的漸變柔和很多，過渡非常自然，您不會注意到兩個顏色中間有新的顏色。這跟上圖有很大的不一樣。上圖的背景色是比較淺的顏色，白色的文字也就不是很突出。如果您想漸弱效果，可以增加透明度，不過，您需要多次嘗試和查看對比效果。

上圖中，漸變的背景只使用了一種顏色，從淺藍色到深藍色。這是一種比較保險的做法，不會出錯。您可以選擇任意一種顏色，然後從淺色漸變到深色，但是，這種做法的設計感就弱了，比較傳統。所以在設計時，您要清楚這種漸變是否跟設計需求相匹配。這個方案看著非常明亮，我喜歡！兩種都是亮顏色，漸變一起不會死板，而且白色的文字非常清晰，完美的組合。如果您想引起別人的注意，強烈的顏色是一個不錯的解決方案，大膽又獨特。

2，這是另外一個經典案例：Mixpanel。背景色是不搶眼的雙色漸變。背景上的插圖也是基於漸變的。插圖在頁面上是重點，背景色作為陪襯。同時，CTA按鈕於背景色形成鮮明的對比，能夠吸引大家的注意。

3，第三個案例是遊戲《紀念碑谷》的創作者的網站：Ustwo。網站的字體使用了漸變色，突出顯示信息。網頁上沒有很多元素吸引您的注意力，所以這個文字吸引了您的注意力。乾淨漂亮的漸變色我們在使用完美顏色來創建漸變色時，有時候不能得到完美的結果，難道是因為我們選擇的顏色不夠純嗎？來看下我們下圖的試驗，我們採用了一對乾淨純凈的互補色，但結果是，這種漸變色看起來很糟糕。

上圖的中間的顏色看起來很臟。在這種情況下，您可以更改其中一種主要顏色（第1和2列）。或者在中間在添加一種顏色，就能從渾濁顏色變到清晰顏色（第3列）。簡單！

平滑漸變有些時候，您可能創建一個漸變色，然後發現中間會出現一條線，看著不太正常。如下圖：

如果出現這種情況，您不一定需要改變顏色，你需要改變漸變的區域規則。讓結果更順暢。怎麼操作呢？您應該花一些時間在漸變的中心區域添加點，並稍微將它們從中心移動到頂部/底部。然後慢慢從中心進一步添加點並以相同的方式移動。重複這些操作，直到看到線條消失。然後您會發現順暢多了。

替代方案如果您不想使用上面的漸變方式，這邊還有另外一種漸變的形式——梯度漸變。這種漸變能夠增加深度感和功能性。來看以下示例，這是一個使用漸變創建的徽標。

CloudVisionConsulting公司的徽標第一步，我們創建一個漸變色。然後第二步，我們在漸變色中添加了兩個顏色，讓淡藍色更清晰。第三步，我們將漸變色分成七份，選取中間的純色。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！