2016年5月12日，Instagram將經典復古相機圖標，改為了扁平漸變風格。於是，設計圈掀起一片嘩然。甚至還被說成：「年度最失敗的設計案例」。

2016年12月21日，優酷更換新圖標。定睛一看，同樣是漸變風格設計。

後來，我們漸漸發現，手機裡面的各種圖標也變成了這副摸樣。

不用太意外，漸變設計風已經大行其道了。就好像是在告訴設計師，你要不整個漸變風，都不好意思說自己是搞設計的。尤其是今年，無論是網頁還是移動App，以迅雷不及掩耳之勢襲擊了我們的視線。

比如，下面的幾款App界面，如果不注意Logo標識，你可能不太容易分辨出它是哪一家。

圖 | 國美App截圖

圖 | 京東App截圖

圖 | 每日優鮮App截圖

圖 | 小紅書App截圖

類似這樣趨於同質化的漸變設計，對於設計師來說，簡直太可怕了。既無創意，又無可識別性，大大限制了個人的成長和思維。要我說，再這樣下去，隨便找一個會MicrosoftWord或是WPS的職場新人就能搞定了，還要設計師做什麼？

▼

▼

▼

其實，漸變風格設計非常有趣。出於好奇，這幾日搜集了不少精彩的作品。以下按圖標vs網頁兩部分展示，咱們一起過過眼。

- 01 -

圖 標

?極簡線型漸變

圖 | 極簡線型漸變圖標案例

極簡的線條漸變，透著高級感，純凈又幹練。如果你家公司逼格很高，這一款設計可以派上用場了。

?線型+背景漸變

圖 | 線型+背景漸變圖標案例

這款很常見的設計，比較通用。有著鮮明的背景色，適合作為指示、分類性圖標使用。

?插圖漸變

圖 | 插圖漸變圖標案例

這款溫暖、童趣的圖標，除了動漫類公司外，能夠帶給人溫暖、舒適感受的服務型公司、個人品牌，應該是一款不錯的選擇。

?線型插圖漸變

圖 | 線型插圖漸變圖標案例

文創小店、花店、工作室，貌似很適合這種文藝小清新的調調。

?幾何漸變

圖 | 幾何漸變圖標案例

幾何形狀的設計，具有科技感。技術、科技類型的公司可以嘗試這樣的設計。

- 02 -

網 頁

?圖形漸變

圖 | 圖形漸變網頁案例

這家網站背景並不是漸變設計，而是利用三角形元素小範圍使用漸變。畫面效果動感又活潑，很符合品牌調性。

?線條漸變

圖 | 線條漸變網頁案例

個人很喜歡這家網頁設計，純色背景，中部僅僅用了一個大約只有1像素的線條漸變，就把網頁的設計感提升了。

?圖片漸變

圖 | 圖片漸變網頁案例

在照片上覆蓋一層藍紫漸變，兩種顏色色調相似，漸變很溫和。與簡單的工作狀態照片融合在一起，相當和諧。

?文字漸變

圖 | 文字漸變網頁案例

典型的產品網頁面設計，一個巨大的漸變設計的「GO」，足夠吸引你的眼球。既體現了產品的個性，又很好的利用了漸變設計，很成功的一款設計。

?VI色漸變

圖 | VI色漸變網頁案例

選擇哪幾種色彩作為漸變色，也需要考慮周全。比如，這家的VI色是藍色和綠色，Logo是這兩種色彩，背景漸變色同樣使用。

?背景色漸變

圖 | 背景色漸變網頁案例

背景是一幅城市風景，本身有著漂亮的漸變色彩。設計師直接把這些色彩，運用在圓形的覆蓋元素上，使得整體色彩形成統一。

?紋理漸變

圖 | 背景色漸變網頁案例

仔細看這家網頁漸變是有線型紋理的，頁面上的Logo、圖標，也是用了線型元素。這樣，就使得網頁具有統一的整體感。很多元素都用到了線型，但並不覺得雜亂。

?組合漸變

圖 | 組合漸變網頁案例

這是一款精彩的網頁設計。它的背景、主體Logo、矩形按鈕，所有的畫面元素，都使用了相似的漸變色。所以，它看上去依然清透、純凈。

------------------

過眼了這麼多漸變設計案例，對於漸變的設計思路，小夥伴們想必是有了更豐富的認知。

當然，如果你家的產品足夠有個性，也沒必要非得追這個流行。

圖 | 華為Logo變化對比圖

比如，我們親愛的大華為，偏要任性。就在昨天2018年3月28日將自己的Logo從漸變風格，回歸純色。絕對算是漸變橫行時代里的一股清流了。

流行趨勢對於設計師來說，必然重要。但如果只是為了追流行，而失去了設計的本意，真就得不償失了。

▼

▼

▼

▌Hi，還記得我么？

▌我是火星妹

離開火星時代許久，仍有小夥伴向我諮詢課程和設計師相關問題。於是，決定開個公眾號，繼續和愛設計的小夥伴分享。

▌在這裡，你將會看到：

1.設計圈新資訊

2.精彩作品解析

3.創作經驗分享

4.課程親測推薦

5.課程優惠活動

▌重要的是：

你有什麼想法，或是想要看什麼內容，記得直接告訴！不然，我可能會偷懶……^_^

我們繼續聊設計，聊夢想……

?星妹推薦?

?考眼力！PS合成無痕術，專治各種不服。

- END -

以上圖片 | 來源於網路

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