漸變色在設計中的應用 -- 趨勢，案例，資源

預計閱讀時間：8分鐘

漸變是指物體從明到暗，從深到淺，或從一種顏色到另一種顏色神秘而浪漫的過渡。在平面設計剛剛興起時，設計師們在設計中保留了漸變。自從Instagram將標誌從經典的寶麗來相機改為顏色鮮艷的平面圖標以來，視覺設計中的漸變色正在逐漸捲土重來。

這一趨勢的原因在於flat design color combinations（扁平化顏色組合）看起來有些平淡無味。如果設計師追求豐富的視覺設計語言，漸變是最好的選擇。我們來看看移動APP中使用的漸變顏色示例。

1.線性漸變

水平漸變：

這是一個電子商務應用程序的概念設計，包括設置，授權和優惠券。設計師通過使用統一雙色水平漸變的卡片來呈現用戶的優惠券信息，突出卡片上的信息。總的來說，界面簡約而優雅。

垂直漸變：

如何讓您的天氣APP脫穎而出？看看這個。設計師非常巧妙地使用垂直漸變來創建具有APP時間軸的複雜夜間天空背景。界面和功能相輔相成。

對角線漸變：

這款音樂應用的著陸頁是由快速原型製作工具Mockplus創建的。 當您打開APP時，它會請您現在的狀態自動過濾符合當前情緒的音樂。

設計師使用對角線漸變作為背景，溫暖的漸變界面使界面更友善親切。此外，對角線漸變使界面更加生動和豐富，給用戶帶來了柔和而人性化的AI產品體驗。

2.在圖片上疊加漸變

在背景和頭圖上添加漸變疊加可以增強整體感，使用戶意識到增強頁面可讀性的其他更重要和關鍵的元素。 這種設計對大圖像的影響尤其顯著。 此外，整體形象將更加神秘優雅。

您還應該注意選擇背景圖片，圖片內容和色調。所有元素需要保持一致，使用半透明可以使圖片更加細膩。漸變需要加強頁面信息的可讀性，而不是為了裝飾而裝飾。

3.多角度多層級疊加漸變

當Instagram改變它的圖標和UI時，Instagram首席設計師Ian Spalter在Medium上寫了一篇關於圖標變化的文章。

「如果鏡頭是一個大膽，簡單的標誌符號的橋樑，那麼彩虹就是通往彩色漸變的橋樑。 顏色一直是Instagram的重要組成部分 - 你可以在經典應用圖標，過濾器和社區的照片和視頻中看到各種顏色。

當我們開始重新構思彩虹時，我們縮小選擇，並最終用溫暖和熱情的顏色來與圖形搭配。「

Instagram保持著最初icon的核心元素：彩虹，鏡頭和取景器，它們在背景上創建了一個多角度，多層疊加的簡約和多彩的彩虹圖像。具體來說，該圖標主要使用一組線性對角線漸變，再加上兩組球面徑向漸變疊加。

4. 功能性漸變

漸變不僅限於用作裝飾，它還可以具有一些功能。設計師將使用相同相似的顏色，對比色以及互補的顏色來清楚地區分每個菜單項目。使圖片變得豐富多彩，更有節奏，更舒適。

漸變色配色工具

uiGradients

這個網站已經給了每個顏色一個相應的名字。 單擊左上角瀏覽所有顏色，也可以從上面的導航欄中選擇一種顏色，並用所有相應的漸變計劃呈現顏色。 選好後，只需單擊上面顯示的值即可複製顏色值。 選好後，只需單擊上面顯示的值即可複製顏色值。uiGradients - Beautiful colored gradients?

uigradients.com這個網站已經給了每個顏色一個相應的名字。 單擊左上角瀏覽所有顏色，也可以從上面的導航欄中選擇一種顏色，並用所有相應的漸變計劃呈現顏色。 選後，只需單擊上面顯示的值即可複製顏色值。

Coolhue

CoolHue是一個非常有用的漸變背景網站，提供約30種不同的漸變背景。 這些元素可以免費下載為照片格式或CSS3語法。 只需將其添加到網站樣式表單中，即可在任何區域應用漸變顏色。

//webkul.github.io/coolhue/

總結

在手機APP的快速發展下，漸變色流行是人們審美水平不斷提高的結果。在UI設計中，漸變通常與陰影和外部光線一起使用以增強其三維效果。儘管目前的設計趨勢中漸變非常火爆，但仍要基於APP本身的需求來使用。

以上文章資料均來自Mockplus 作者 Vincent。原文地址：Gradient Color in App Design: Trends, Examples & Resources

由鹿也翻譯並分享，請勿轉載！

推薦閱讀：