重現江湖的漸層色背景網頁設計

重現江湖的漸層色背景網頁設計

似乎是在一夜之間,漸層的設計又重新回到網頁設計中來了,這是在這幾年扁平化設計當到的年代、設計師努力迴避的一種配色方式,從背景到圖層疊加應用,再到細微的紋理,它的多種應用以卷土之勢出現在使用者界面之上,但這次與過去稍有不同

似乎是在一夜之間,漸層的設計又重新回到網頁設計中來了,這是在這幾年扁平化設計當到的年代、設計師努力迴避的一種配色方式,從背景到圖層疊加應用,再到細微的紋理,它的多種應用以卷土之勢出現在使用者界面之上,但這次與過去稍有不同

網頁設計界領航者

網址地址:https://www.spotify.com/us/

網站地址:https://designshack.net/articles/graphics/is-the-gradient-making-a-comeback/
年初,雙色調潮流一直由Spotify引導著,這幾乎也成了該品牌的視覺符號。放大點看你會發現,Spotify的雙色調用色是有一定梯度的,它平衡明亮的顏色,有時又通過使用單色相向明暗漸變。
其他的大牌網站也同樣重拾了這種漸變設計用於用戶 交互 。Texture——一家在線雜誌供應商——回歸得比較徹底,整屏都是漸變。
然而,這些僅僅是新版漸變色使用的冰山一角。它爆髮式的出現在單品到系列設計的每一個地方。
與此同時,它並不存在任何明確的使用規則。可以是多色漸變,也可以是輻射漸變、點光漸變或者垂直線性漸變。它已成為視覺陳列或簡單專欄中主要的設計風格。
令人稱奇的是,設計師以多種形式運用了回歸后的漸變,同時視覺效果超贊的!

扁平化漸變配色

網站地址:http://www.lovefila.com/

網站地址:https://wpcrew.co/
儘管在扁平化設計領域中一度被拋棄,然而重新回歸的漸變色融合了大量扁平化元素,尤其是色彩。一些大膽的色彩甚至是從扁平設計的調色板中直接「借來的」。
這樣的的色彩選擇使得漸變更加 modern,也更加契合其他網站的設計趨勢。當然,你也可以把它與平面設計結合,或是在材料設計的用戶界面再增加一種漸變,甚至如果有較小的設計項目,你還可以嘗試用柔和的顏色組合作為背景。
漸變的色彩選擇比較隨意,它也是對其他設計流行趨勢的一種補充。如果你並不想完全拋棄現有的設計成果,可以稍作轉變,局部替換就好。

雙色調已開始流行

網站地址:http://www.lewislopez.com/

網站地址:http://www.symodd.com/
雙色漸變是一種非常重要的設計技巧,更是一種融合性的、超棒的流行趨勢。
但是這個概念有一個缺點:有點被過度使用。好像整個設計界都在用,而大部分呈現出來的都是藍綠漸變,效果也就千篇一律,沒啥特色。
流行看重的是個性,而非共性。千萬不要簡單的ctrl C、ctrl V。

背景中的漸變圖片

網站地址:https://timelikes-infonity.fr/

網站地址:http://swissarmyman.com/
漸變的回歸也使得背景更有深度了,這樣的趨勢還會延續。因為得益於VR(虛擬現實),越來越多的網站和設計師都在嘗試將現實、3D效果與設計相結合。
雖然扁平化設計具有直觀、舒適、簡單的優點,但也比較缺乏真實性。閑暇時多貼近大自然,那多彩——藍的、紅的、黃的和紫的天空,任何時候都能賦予你靈感。
天空和漸變、陰影是同一種概念。當一項設計完成後,運用這些概念能有效地增加設計的層次感和真實性。所以要抓緊時間掌握這些技巧,它們能給予你強大的力量。

圖片的漸變疊加

網站地址:https://www.nycpride.org/

網站地址:https://designshack.net/wp-content/uploads/reveal.jpg
除了上面說到的,在圖片上使用漸變疊加也流行好一段時間了。所以從單色疊加到漸變疊加的轉變就沒什麼新奇的。
這種應用在大幅面的圖片上效果比較明顯,比方說英雄的背影,在這類圖片上使用漸變疊加的好處是,能夠固定視覺焦點到重要的元素上,或者創建一個可讀性較強的空白區域,便於添加個性化、呼籲性的文本內容。
技巧就是在照片的頂部要平衡好圖片和色彩之間的關係。隨時檢查:顏色與圖片涵義是否匹配?是否能看懂圖片所表達的故事?為了完整保留圖片本身的信息,漸變與圖片必須要巧妙地融合才行。

UI元素中的少量漸變

網站:https://toeaantui.nl/

網站:http://www.baldorfood.com/
一些設計師將漸變加入用戶界面元素中,而這些漸變與其他時下一些流行的款式不同。它的效果更傾向於小範圍的漸變,而且還是同色系的漸變。
在蘋果早期IOS的時代,這是一種主流的款式,但是卻並未受到大眾過多的喜愛。毫無疑問,使用這種漸變看起來更適用於比較大的元素中。對於一些像小圖標的設計,這種小範圍的漸變效果很難被識別,甚至會分散用戶的注意力。然而,在一個大的空間中,這種小範圍的漸變效果能夠抓住讀者眼球,將注意力轉向執行按鈕或者一些特大的按鈕。
對於每種漸變款式,都不應讓用戶在看到漸變的時候,停下來去想,「哇,這是一個很酷的漸變效果。」漸變效果在某種程度上應該是被無視的。它只是用來增強用戶體驗,而不是讓用戶的注意力停留在漸變本身的美感上,除非你執意要那種效果。

配色工具

網上有很多不錯的配色工具,對於不懂配色的新人來說,還可以試試這些工具來獲得配色的靈感。

UI Gradients

一個在線在成漸變配色工具,自帶的漸變配色方案非常美麗。

網站地址:http://uigradients.com/

Colllor

使用 Collor 可以方便的創建色調一致的配色,看起來非常不錯,使用方法很簡單,打開網站,輸入 RGB 色值,就能自動獲得該顏色的其它色調,非常漂亮哦。

網站地址:http://colllor.com
 

結語

帶有絢麗顏色的漸變或者與圖片疊加的漸變是一種能有效提高圖片轉化率的設計技能,簡潔卻不簡單,既令人心動又能引起興趣。她的回歸得益於所有的設計師的推動。感謝你們!
轉載自設計達人

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。