來源:ui.cn 作者：風尾竹
漸變，是設計師最簡單的手法之一，也是移動端APP背景設計常用的設計技巧。所以今天我來教大家如何巧妙運用漸變，迅速提升介面的格調。
我們都知道iOS7以後，介面設計已經趨於扁平化。實際介面設計中我們已經很少繪製寫實圖標。所以貌似現在的UI介面顯得千篇一律。比較有經驗的設計師會熟練運用插畫設計還有動效設計，使自己的介面顯得與眾不同，然而這些技巧都是需要時間歷練，短時間並不容易掌握這些知識。
有沒有方法技巧簡單實用，迅速提升介面的格調了？
圖片來自於花瓣
不賣關子，給大家先上個圖，這是用下面的方法調出來的部分漸變色，毫無抵抗力啊，當然還可以延展非常多。
打開Photoshop，拾色器默認情況都是下面這樣的，也都習慣的在這個模式下去選擇顏色，但今天會給大家介紹下其他模式的應用。
先簡單介紹一下HSB,Lab,RGB,CMYK是什麼功能，其實這是幾種不同的色彩模式。
- HSB模式中：H表示色相，S表示飽和度，B表示亮度。
- RGB模式中：是指的三原色，R紅色、G綠色、B藍色
- Lab模式中：L表示亮度，a表示從紅色至綠色範圍的顏色分量，b表示從黃色至藍色範圍的顏色分量。
- CMYK模式中：C青色、M洋紅（品紅）、Y黃色、K黑色
很多剛接觸Photoshop的這個軟體的同學，如果打開拾色器是下圖這樣，拾色器中間的豎條不是默認的多色情況，多數會以為軟體出問題了，然後搜索問題。
剛接觸PS的我也是如此，但前幾天的又一次滑鼠意外，發現拖動滑塊可以非常好的運用RGB模式去搭配顏色，尤其是臨近色和純色的的搭配（之前雖然知道類似的，但是這個能更直觀的看到）下面舉例紅綠藍顏色的搭配，當然還可以延伸出更多的色彩搭配，更多可以打開ps實踐玩起來。
雖然得到了這些很棒的漸變色，可以幫助更好的進行選擇，但是在選擇的過程中依然要對飽和度、明度的細微調整才能使用。
除了用拾色器進行色彩的選擇，還有其他的很多方法可以進行顏色的搭配，下面在列舉一種純懶人方法，我們經常會在電影中或者一些風景中看到非常棒的顏色搭配，我頻繁使用的一個方法就是高斯模糊。
1、首先找到一張你滿意的圖片（網上搜的圖，沒有高清無碼的，老司機自行腦補細節）這個方法不要求圖片的大小，小圖一樣可以。
2、濾鏡-模糊-高斯模糊，半徑根據你選取的圖片去調整。
3、模糊之後還是會顯得畫面發灰，那這個時候就需要你用曲線和色彩飽和度配合去調整，通常情況下發灰都是對比度不夠，那就加對比，一個曲線解決不了，那就拉倆個。
4、最好一步，移動到合適的位置，也可以像我一樣截取某一塊進行拉伸，簡單幾步，你想要的顏色就出來了，初次用這個方法還可以用得到的圖片加上圖層混合模式去疊加在某張圖片上， 也會有意外效果，熟練幾次這個方法你一定會非常喜歡的，沒事多多舉一反三。
當然網絡還有很多漸變色提取網站，也可以用用
快速提升設計格調幾個方法技巧
一、垂直線性漸變
拉漸變是Photoshop的基礎操作，那麼如何運用的好看了？顏色選擇才是關鍵
我們把一個漸變顏色拆分成A B C三個顏色，每個顏色用HSB標註顏色色值。
這是某App的一組引導畫面，運用了三組漸變顏色，分別標註HSB的色值，通過這組色值的變化，分析如下。
A色 B值非常高，普遍50以上
從A色到B色，H值的變化範圍為正負30到70，S值減少10，說明B顏色略變淡。
從B色到C色，H值的變化範圍為正負30到40，S值增加15到50，說明C顏色開始變濃。
以上色值僅供參考，實際使用並非整數。根據以上規律去有規則的使用漸變色。
二、垂直線性漸變+球形漸變
Web介面面積比較大，在大面積使用漸變的時候。如果只是使用垂直的線性漸變是略顯單調的，這個時候我們需要加一個球形的漸變。
A+B+C色構成一個漸變，這時候我們再補充一個D色的球形漸變並高斯模糊。D色的圓形矢量形狀要轉換為智能對象，這樣調節高斯模糊及大小的時候可以無損調整。如果介面上需要運用圖片，我們再補充一個80%透明度的E色，疊加在去色後的圖片上。這樣介面會層次會更加豐富。
三、多角度球形漸變
想讓介面更加絢麗，這時候我們可以考慮多組球形漸變搭配使用。例如最新改版的instagram就是一組線性漸變，加兩組球形漸變組成。球形漸變也是由多組顏色構成。
四、色塊漸變
漸變的顏色不只可以運用在一個色塊上，還可以運用在一組色塊上。設計師運用一組近似性色彩，將每個菜單項清晰區分開，讓介面平衡在一個頻率上，這樣的畫面更有節奏感和舒適性。
如何選擇色塊的顏色了？一樣運用HSB，逐級加H色值，H色值越大，S相應的色值也要逐漸變小。至於希望你的介面整體顏色跨度大還是小，取決你逐級H色值加的多少。
相信通過我的HSB調色分析，你可以熟練運用顏色創造各種高大上的漸變。
五：扁平化配色與漸變
漸變配色的回歸正巧是在扁平化大行其道的今天，所以它不可避免地同大量扁平化的元素搭配到了一起，而其中最值得考慮的因素，就是色彩。某些用色最大膽、跨度範圍最大的漸變色設計乾脆直接就從扁平化配色中「借用」色彩。
六：雙色調的加入
雙色漸變是漸變設計中的很重要的組成部分。而雙色漸變同其他設計趨勢的結合效果拔群，這一點值得再三強調。
而雙色調漸變的唯一缺點，大概是……被用的太多了。如果你稍加註意就會發現，確確實實有一大堆網站採用了雙色漸變來作為背景或者主要視覺模塊，似乎沒有哪種雙色搭配沒人用過。藍綠和橙紅搭配是用的最多的。
謹慎使用這一趨勢，因為確實很容易與別的網站「撞衫」。
七：漸變背景圖
漸變的回歸，使得我們再次可以看到許多擁有景深或者縱深的背景圖。虛擬現實的流行讓越來越多的設計師嘗試更加現實、更加立體的網站設計，毫無疑問，你會在未來看到更多這樣的設計。
扁平化設計確實時尚而更易於接受，但是它缺少富有現實質感的元素也是不爭的試試。試想一下自然中元素給人的感受和體驗。漸變色的使用很好地緩解了這個局面，畢竟自然界中很少有特別純粹特別單一的色彩。
不難想像，漸變色和陰影背後的概念和規則是相通的。它們為設計創造了深度和層次。
八：圖片上的漸變色疊加
作為一種設計趨勢，在圖片上疊加色彩已經流行了相當長的一段時間。而從圖片上的單色色彩疊加，到漸變色的疊加，是一個相當自然的「推導」過程。
在頁面的背景、頭圖中加入漸變的色彩疊加，可以讓它們的整體感更強，從而讓用戶注意到其他的更加重要、關鍵的元素，強化頁面的可讀性。這種設計對於大圖的作用尤其明顯。
在圖片上疊加漸變色的技巧在於平衡色彩和圖片之間的關係。色調是否要同圖片的含義相匹配？疊加後能否看清圖片中的細節？不同的色彩搭配方式帶來的結果可能是截然相反的。
九、微妙的漸變與UI元素
和漸變色的流行做法不同，有些設計師選擇在UI元素中使用微妙的漸變色。在較小的UI元素中，色彩變化幅度更加微妙，並且通常使用的都是單色調。
欣賞案例
最後給大家看一下相關精彩案例，可臨摹學習。