網頁設計的漸變潮回來了?

發表於2016-09-02

8cd357c7d1a70000018c1bf55691.jpg

翻譯:MOMO、Nierkou、NoNo“、大果只、最光陰、八重、bear 、suyan266 共同翻譯完成

校對:Haku、杯中的海

在扁平設計新紀元開始之時,一項設計師們曾經迴避的技術正在捲土重來。幾乎在一夜之間,漸變色突然出現在各個網站設計中。

從背景影象到圖片標註甚至到使用者介面元素的細微文理,雙色效果正在大規模捲土重來。當然也有點不同,以下就是在你再次運用漸變色之前你需要知道的事(以及很多可以激發你創造力的例子)。

領路的弄潮兒

網頁設計的漸變潮回來了?

網頁設計的漸變潮回來了?

今年早些時候,Spotify引領了雙色調設計潮流,雙色蒙板幾乎成為其品牌的視覺符號。如果你認真看,Spotify使用雙色調有一個明顯的漸變梯度,它平衡了明亮的流行色,有時又通過使用單色相向明暗漸變。

其他很多大品牌也迴歸漸變風格來傳遞他們的資訊。線上雜誌的提供商——Texture,就在它的設計中就使用了全屏的漸變。

但這些並不是漸變風格重返設計舞臺的全部案例。他們如雨後春筍般出現在從零售到系列產品等的一切設計作品中。

漸變的使用中並沒有什麼明確的規則。他們可能包括多色漸變,中心漸變,對角線漸變,或者垂直漸變等。在一個展示或一個簡單的專題中,漸變可能是其主要的視覺元素。

特別棒的是,設計師們變著花樣來使用漸變,而且他們真的看起來很酷。

漸變的扁平化配色

 

網頁設計的漸變潮回來了?

網頁設計的漸變潮回來了?

當漸變被應用在扁平化設計時代,他的迴歸結合了大量的扁平化元素,尤其是色彩。在一些最典型、最大膽的設計案例中,色彩漸變更是直接從平面設計配色表當中“借用”的。

這些色彩的選用使得漸變有了現代感,看上去也與其他網站的設計趨勢很契合。你還可以玩混搭,用這種色彩風格搭配平面藝術風格的漸變,或是在材料設計的使用者介面上新增一種漸變,甚至可以嘗試在一個小專案的背景中新增一個柔和的色彩組合景。

色彩選擇的好處在於它真的是其他趨勢的一個補充,在不用完全摒棄現有的審美的前提下,更輕鬆的轉變設計方式,來將一部分重新設計。

雙色調很潮

網頁設計的漸變潮回來了?

網頁設計的漸變潮回來了?

雙色漸變是一個好的方法。這是一個與現在的趨勢結合的一種漸變,並且這個漸變非常好用。

雙色調這一概念的缺點就是他有點……被用爛了。似乎給人的感覺就像所有的設計流派都在用同不同的顏色玩同一種漸變模式。(而且不同顏色中大多數還都是各種藍色和綠色)

對於流行趨勢有一點需要注意,那就是:讓他為你所用,做出你的特色。不要複製別人已經用過的。

使用漸變的背景圖片

網頁設計的漸變潮回來了?

網頁設計的漸變潮回來了?

得益於漸變設計的流行,帶有深度的背景圖又回來了,並且很可能持續流行,(這得益於VR(虛擬現實)),因為越來越多的網站和設計師試著把更多的現實主義和三維空間的東西融合進設計裡。

如今,漂亮的扁平化設計越來越流行,這種設計給人的感覺簡潔舒適,但是它主要的缺點是缺乏真實性。不妨在閒暇時間環顧四周,親近自然,遠望天空。你很有可能看到漸變色——有藍色,紅色,黃色,還有紫色。

其實漸變色和投影是一個概念,在設計的時候都能增加深度和真實性。(因此如果是你想要這種效果,就要簡單而巧妙地使用它)。

使用漸變疊加的圖片

網頁設計的漸變潮回來了?

a68557c7bbd20000012e7e3fc387.jpg

帶有顏色疊加的圖片的設計已經流行了好一段時間了,因此從單色疊加轉換到漸變色疊加,沒啥可驚奇的。

對大圖而言這種效果是非常好的選擇,例如關鍵的頭部能夠幫助使用者把焦點放在重要的設計元素上,也能留出一塊空間用於輸入文字,或者進行行為引導,使之更加具備可讀性。

把漸變色疊加在圖片上,這種方法使影象和顏色之間達到了某種平衡。色相能夠跟圖片的含義相匹配嗎?你能一直非常清楚地瞭解並且理解圖片所表達的故事? 為了保留圖片的完整性和全部資訊,這些元素需要以一種十分巧妙的方式結合起來。

UI元素中的少量漸變

55b757c7bbec0000018c1b046180.jpg

網頁設計的漸變潮回來了?

一些設計師將漸變加入使用者介面元素中,而這些漸變與其他時下一些流行的漸變款式不同。這些漸變效果更傾向於小範圍的漸變,而且還是單一顏色的漸變。

在蘋果早期IOS的時代,這是一種主流的款式,但是卻並未受到大眾過多的喜愛。毫無疑問,使用這種漸變看起來更適用於比較大的元素中。對於一些像小圖示的設計,這種小範圍的漸變效果很難被識別,甚至會分散使用者的注意力。然而,在一個大的空間中,這種小範圍的漸變效果能夠抓住讀者眼球,將注意力轉向行動或者一些特大的按鈕。

對於每種漸變款式,都不應讓使用者在看到漸變的時候,停下來去想,“哇,這是一個很酷的漸變效果。”漸變效果在某種程度上應該是被無視的。漸變效果只是用來增強使用者體驗,而不是讓使用者注意力停留在美學形式上,除非你自己是講究追求這種效果的設計師。

總結

我必須承認當漸變不再流行的時候我是覺得有些遺憾的,所以現在看到趨勢又復甦了我非常激動,這種迴圈很有意思。

帶有絢麗顏色的漸變是一種能花最少的時間來增加圖片吸引力的方式,簡單卻不簡潔既令人心動又能引起興趣。這種技巧迴歸主流得益於所有的設計師的推動。

相關文章