信息大爆炸以來，用戶在使用產(chǎn)品時，面對著越來越多的信息，往往容易眼花繚亂。為了突出內(nèi)容，減少過度美觀修飾對信息的干擾，扁平化風格應運而生并開始流行。拋棄多余的元素，以強烈簡潔的功能界面區(qū)分，扁平化已經(jīng)成為了UI設計中的主流風格。

然而，扁平化風格還是存在著不足的，比如：簡潔有余，張力不足。有些時候，扁平化設計會變得太“平”了以至于影響了可用性。如果用戶界面太“平”了，可操作性的元素就會淹沒在一片看起來都一樣的扁平化元素之海中。

那么如何補救由扁平設計造成的問題？

作為一種設計方法，近扁平設計僅僅當扁平化風格能提升可用性時才采用它。它并不會武斷地認定或暗示漸變和投影是有害的。

近扁平設計允許利用細微的投影和漸變來營造空間感、距離感、視覺層次感、視覺線索和邊緣效果。因此設計師為了彌補扁平化的這種缺陷，重新在色彩上尋求突破口。使用漸變色就是其中最有利的武器。

從2017年開始，UI界面上的色彩運用越來越大膽。如新版的淘寶，摒棄了之前單一的橙色，而采用了比較年輕態(tài)的漸變色，主色調(diào)、導航欄圖標采用暖色單色相的漸變色。

在app設計中，此類漸變多用于app內(nèi)導航欄圖標，入口圖標等的設計。

通過使用單色相漸變，淘寶APP的整個頁面感覺更通透了、充滿了活力，再沒有呆板與窒息感。

最近大火的一款游戲APP——紀念碑谷2也是的背景也是采用了單色相的漸變作為游戲背景，在讓整個畫面豐富的同時又不會太搶奪主體的色彩，使畫面顯得清新透氣而不沉悶。

使用色系相近的不同顏色，帶來強烈的視覺沖擊，有種夢幻的感覺，最早嘗試這種風格的是ins，ins擬物風時期的logo一直廣受好評，在進入扁平風時代后，ins沒有簡單的將logo拍平，而是采用了強烈的多色漸變，讓人耳目一新。它極簡風格的UI界面，對用戶十分友好，用戶只需要欣賞美麗的照片，然后雙擊點贊就行了。

最近蘋果推出的ios11，也在扁平化的基礎上做了一些改進，除了讓標題更粗更黑，也將可點擊的組件加上了漸變色，其中不乏強烈的多色相漸變。

畫面中的色彩具有兩種或以上的漸變手法，多色相漸變在視覺上的表現(xiàn)力會更強一些，給用戶更強的視覺沖擊力，這類配色在Web 端、banner設計、插畫設計等運用居多。

然而，新潮的設計師們并不滿足此，他們把漸變玩出了更多的花樣。其中最出色的便是今年強勢改版的優(yōu)酷視頻APP。

不過這種風格還是比較復雜，不適合做尺寸較小的icon。可以看到，優(yōu)酷后來將icon改回了單色相漸變。

不僅是GUI設計，對色彩的大膽使用也蔓延到平面設計。此類色彩的運用多用于電商H5活動頁面，能夠極大地調(diào)動活動所要營造的氛圍，給用戶最強的視覺沖擊力，最終達成消費的目的。

講了辣么多，那么如何講以上一些漸變色如何運用到實際上來才能讓自己的設計稿顯得高大上呢？

教你玩轉(zhuǎn)漸變色

一、直線型漸變

我們將漸變色的部分分為A、B、C三個部分進行取色分析。

從上面的案例取色分析可以看到，如何讓自己的漸變色配色不要看上去太臟，那么取色的亮度（B）就要很高，漸變色里的色值都在90以上。因此亮度的取值很重要哦！

二、垂直性漸變+球形漸變

由于Web界面面積比較大，在大面積使用漸變的時候。如果只是使用垂直的線性漸變是略顯單調(diào)的，這個時候我們需要加一個球形的漸變，增加畫面的豐富性。

球型漸變的制作很簡單，新建一個圖層，選擇有羽化邊緣的筆刷樣式，在畫面上輕輕掃一筆，然后用剪切蒙版蓋在前面做好的有垂直漸變的底色上。

這兩招你學會了么？色彩的運用還是需要多看多臨摹才能把握精髓。還在等什么，快打開PS，練一練吧。

原文地址：學UI網(wǎng)