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

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

​

 

漸變色興起的緣由在於扁平化風格極其容易形成同質性，設計師若是須要追求視覺豐富度的設計語言，多數會運用插畫設計和動效設計讓本身的設計脫穎而出，可是這些技巧短期內難以快速掌握。

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

1、線性漸變

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

橫向漸變：

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

​

 

縱向漸變：

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

​

 

對角漸變：

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

​

 

2、圖片上的漸變色疊加

​

 

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

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

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

 

3、多角度多層次疊加

​

 

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

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

​

 

 

4、具備功能性的漸變效果

​

 

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

 

瞭解了漸變色在移動APP中的基本表現方式後，對於設計師來講，想要用好漸變色，須要在色感和色彩搭配上多下功夫。這裏爲你們推薦一些經常使用的漸變色設計工具。

uiGradients

​

 

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

網址：https://uigradients.com/

CoolHue

​

 

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

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

小結

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