巧用漸變色打造精緻移動端APP

漸變色是指某個物體的顏色從明到暗，或由深轉淺，或是從一個色彩緩慢過渡到另一個色彩，充滿變幻無窮的神秘浪漫氣息的顏色。在扁平化設計剛剛興起時，漸變是設計師們避之不及的設計手法。然而自從Instagram把經典的寶麗來相機logo更改為色彩鮮亮的扁平化圖標以來，漸變色逐漸回歸到了人們的視野之中，也逐漸成為了近年來移動APP設計的主要風潮之一。

漸變色興起的原因在於扁平化風格極其容易造成同質性，設計師如果需要追求視覺豐富度的設計語言，多數會運用插畫設計和動效設計讓自己的設計脫穎而出，但是這些技巧短時間內難以快速掌握。

而漸變色在實際的設計中簡單實用，可以高效率地提高設計的格調；更具視覺衝擊的特點能夠牢牢抓住用戶眼球；簡潔的圖形和高飽和度的漸變色又能夠較好兼顧設計的便利度和視覺的分量感。在漸變色設計風潮回歸的背景下，我們一起來看看漸變色在移動APP中常見的表現手法。

一、線性漸變

線性漸變是漸變設計中基礎的表現手法之一，也是最常見的創作手法之一。一般來說，漸變的方式按照方向分為三種：橫向漸變、縱向漸變和對角漸變。下面我們來看看實例分析。

橫向漸變：

這是一款在線購物APP的概念設計，包括設置，自定義和優惠券界面，設計師以卡片的形式呈現了用戶既有的優惠券信息，每張卡片都使用了統一的雙色橫向漸變色，突出了卡片上的信息，整體界面極簡而高雅。

縱向漸變：

天氣類APP的界面設計怎樣才能脫穎而出？看看下面這款設計。設計師巧妙地運用雙色縱向漸變，配合APP的時間線，打造了精緻的傍晚的天空漸變背景，在按照滑動查看溫度變化時，能夠獲得視覺上的時間流動觀感，主題和功能相互呼應，相得益彰。

對角漸變：

這款設計是用快速原型工具Mockplus打造的音樂APP啟動頁。在功能上，當你打開APP時，系統會自動詢問用戶的當前心情狀態，來自動篩選符合當前心情的音樂，實現智能推送。設計師巧妙地運用了對角的漸變色作為背景，暖色調的漸變背景使界面變得更加友好和親切，對角的手法使界面更加活潑動感富有層次，帶給用戶柔和人性化的AI產品體驗。

二、圖片上的漸變色疊加

作為一種設計趨勢，在圖片上疊加色彩已經流行了相當長的一段時間。而從圖片上的單色色彩疊加，到漸變色的疊加，是一個相當自然的「推導」過程。

在頁面的背景、頭圖中加入漸變的色彩疊加，可以讓它們的整體感更強，從而讓用戶注意到其他的更加重要、關鍵的元素，強化頁面的可讀性。這種設計對於大圖的作用尤其明顯。此外畫面整體也會更加神秘、優雅並且富有吸引力。

使用過程中也要注意對背景圖的挑選，圖片的內容和色調需要保持一致，使用半透明往往能讓畫面更加細膩，但是再相互疊加後需要強化頁面信息的可讀性，不能為了裝飾而裝飾。

三、多角度多層次疊加

對於Instagram圖標和UI的變化，團隊成員這樣說到：如果鏡頭是進入一個更大膽、更簡潔設計的橋樑，那彩虹就是帶你進入彩色漸變設計的聯結者。色彩一直就是 Instagram 最重要的一個組成部分，你能在經典的 App 圖標、過濾器和整個社群中的照片與視頻中見到各種不同的顏色。當我們開始重新想像彩虹，我們更多地關注那些簡約的設計，但最終我們還是需要更多的溫度和能量來填充我們的圖形設計。

Instagram抓住了原有logo的核心元素：彩虹、鏡頭和取景器，背景上用多角度多層次的疊加打造出了簡約而繽紛的彩虹意象。具體來看，這枚icon主要用了一組線性對角漸變，加兩組球形徑向漸變疊加組成，成為了漸變色運用的最驚艷的案例。

四、具有功能性的漸變效果

漸變色的運用也不限制於單一的背景裝飾，也可以具備一些功能性。設計師會採用相同色、同類色、近似色、對比色、補色來將每個菜單項清晰區分開，讓界面平衡在一個頻率上，這樣的畫面多姿多彩，也更富有節奏感和舒適性。

了解了漸變色在移動APP中的基本表現方式後，對於設計師來說，想要用好漸變色，需要在色感和色彩搭配上多下功夫。這裡為大家推薦一些常用的漸變色設計工具。

uiGradients

這款網站貼心地為每一種顏色搭配取了相應的名字，點擊左上角即可瀏覽所有顏色，還可以從上面導航欄中選擇一種顏色，從而呈現出這個色系對應的所有漸變色搭配方案，挑選到合適的後，點擊上面顯示的色值即可複製。

網址：https://uigradients.com/

CoolHue

CoolHue是一個相當實用的漸層背景網站，提供大約 30 種不同配色的漸層背景，可以免費下載為圖片格式或產生 CSS3 語法。只要把它加入網站樣式表，就能在任何區域套用漸層色彩。

網址：https://webkul.github.io/coolhue/

小結

移動APP高速發展的背景下，漸變色也是人們審美水平不斷提高的產物。在UI中漸變常常配合投影和外發光使用，以增強其立體效果。雖然漸變是目前設計風潮中的熱點，但是其獨到的表現方式還是要根據APP本身的需求而來，不能對功能和可讀性產生負面影響。