自己做出來的漸變色又土又丑？看人家怎麼把漸變色玩出大花樣！

如今每個人手裡都有著一部電話，不管手機系統是安卓還是iOS，界面設計已經趨於扁平化，在扁平化設計興起之時，漸變是設計師最簡單的手法之一，也是移動端APP設計常用的設計技巧。下面來分析一下色彩的漸變現象和表現形式：

漸變現象

漸變現象分為兩種：色相漸變和明度漸變。

首先我們來介紹一下色相漸變，牛頓透過二菱鏡將太陽光折射成紅橙黃綠青藍紫七色光譜，得到了一個全色相的色環，把色彩按色相環的順序排列組合就形成了漸變色彩形式中的色相漸變。色相漸變言簡意賅則是由一個顏色到另一個顏色的漸變或是多個顏色的漸變。

其次為明度漸變，色彩的明度有兩種，一是同一色相不同明度，如同一顏色加黑或者加白摻和以後能產生各種不同的明暗層次。二是各種顏色的不同純度，每一種純度都有與其相應的明度。色彩的明度變化也會影響到純度，（如下圖）藍色加入黑色後明度降低，加上白色則明度提高。

漸變的表現形式

這裡我們簡單做個介紹，漸變色有五種形式，線性漸變、徑向漸變、角度漸變、對稱漸變、菱角漸變。在日常設計工作中線性漸變、徑向漸變用的較多（如下圖）。

了解了漸變色的一些基本概念後，接下來我們再分析下在使用漸變色過程中幾種常用的表現手法：

一、雙色漸變

雙色漸變是漸變設計中很重要的組成部分，其漸變現象可多種多樣。漸變方向主要指從一個顏色到另一個顏色的漸變，如下圖五從A-B，它有橫向漸變、縱向漸變、對角漸變三種方式。

這種手法可作為設計的主視覺存在，也可是諸多特性中的一個。其效果是獨一無二的，可以讓畫面更加豐富、活潑，同時使畫面更整體統一，提升美感。

（橫向漸變）

（縱向漸變）

（對角漸變）

二、圖片上的漸變色疊加

在圖片上疊加色彩，可讓畫面更具神秘、優雅、更具吸引力，讓用戶注意到上面更加重要和更關鍵的元素。其中半透明的疊加可以讓畫面更細膩，同時也奠定了畫面的主色調。使用過程中要注意對背景圖的挑選，色調應與內容的含義相匹配，疊加後需強化頁面信息的可讀性，不要只為了裝飾而裝飾，否則呈現出來的結果會完全相反。

整個頁面多處採用了漸變，頭部用的圖片疊底和雙色橫向漸變，到中間卡片機票信息和下方button都採用了雙色橫向漸變。

頭部使用了綠色雙色橫向漸變，整體頁面控制在綠色色調中讓畫面更協調，同時也保持了信息可讀性。

以上都採用了卡片式設計，每一個卡片都給了統一的雙色低透明度的漸變色，更好的增強圖片本身的氛圍，讓畫面更具神秘感，吸引用戶。

三、多層次漸變疊加

Instagram此次改版的主要目的是讓用戶更專註於他人分享的內容。不管這個設計好壞與否，你不得不承認第一眼看這個彩虹色讓你眼前一亮。也讓我們重新認識到在UI設計中，使用得當的漸變色彩，可以使界面和圖標的設計感得到迅速提升。

Instagram圖標主要由一組線性對角漸變，加兩組球形徑向漸變疊加組成。

頂部由圖層 1雙色漸變和圖層2、3單色低透明度漸變疊加組成，使畫面更柔具有層次感。

（三層徑向漸變疊加組成）

四、色塊漸變

漸變的顏色不只可以運用在一個色塊上，還可以運用在一組色塊上。設計師會採用相同色、同類色、近似色、對比色、補色來將每個菜單項清晰區分開，讓界面平衡在一個頻率上，這樣的畫面多姿多彩，也更富有節奏感和舒適性。

五、網格漸變

AI網格工具繪畫出的成品不亞於3D，是一種很好的矢量畫圖方法，繪畫技巧相對複雜，要求較高，廣泛用於平面設計作品中。網格配色的運用，考驗設計師的顏色搭配功底，調整每一個瞄點讓色彩過渡自然，也可採用多圖層的疊加方式。

寫實類手法，需要耐心做細微的調整，注重瞄點透明度的使用

安利時間

對設計師而言，想要用好漸變色，需要有更好的色感，在色彩搭配和透明度上多下功夫。在這裡推薦下面兩個網頁，特別實用可在線調整漸變色的方向和再線生成css代碼供開發。

配色網站推薦一（webgradients）

http://webgradients.com

配色網站推薦二（uigradients）

https://uigradients.com/#BradyBradyFunFun

在UI設計中，漸變大多是配合著投影、外發光使用，以增強漸變的立體感。雖然漸變色在設計領域當中是常用的表現手段，但是不要為了漸變而漸變，如給功能上和可讀性帶來了壞影響，那麼物極必反最終以作品的失敗告終。

【翼狐網】全新3D動畫專欄

高級三維動畫藝術

動畫師煉成手冊

此次的進擊的動畫系列

共有三個階段

讓零基礎的愛好者

一步一步成為一名動畫師

動畫師初識--工欲善其事，必先利其器

這是一個認識Maya工具的模塊

從3D動畫軟體入門

零基礎掌握軟體基礎操作

輕鬆開始自己的動畫學習之路

漸入佳境中--任何理論都不如現實具體

如何表演出真實又特具性格的動畫

這是動畫師進階的第二步

本模塊通過極致作用的案例

展示動畫里常用到的技能特點

這對練習動畫節奏與性格表演

將起到促進作用

綜合交互表演--讓角色真正與「你」交互

本案例為一個綜合案例為基礎

涉及到多知識點

你可以讓角色為行為作交互

感受角色的重量感

表現角色的造型動態線與重量的關係等

通過對上面模塊的學習

你已經對動畫師有一定有認識

可以嘗試動畫師的兩種表演藝術

分別為遊戲動畫師及影視動畫師

點擊展開全文

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