4月份流行的網頁設計趨勢

圖形和字體是增加網站視覺體驗的重要元素,即使它們並不會佔據很大空間,影響依然非常明顯。

如果你仔細觀察這個月的網頁設計趨勢,會注意到設計師在處理字體排版和圖形元素的時候非常仔細,充分利用這些元素的概念來營造更為優秀的設計。

1. 斑點和氣泡元素

不少設計師開始利用諸如斑點和小氣泡這樣的裝飾性元素,分散在網頁的各個角落。

這些裝飾性的元素大多以小圓點的形式呈現,它們的形態多種多樣,但是總體上有著吸引視線、豐富視覺的功能。即使是基於相同的設計概念,不同的氣泡和斑點,讓每個設計項目都有著不同的性格。
這些元素可以是任何色彩,而微妙的漸變和高飽和度的色調是目前設計師的最愛。

斑點和氣泡本身在形態上也有著柔和流暢的特點,讓整個氛圍顯得圓潤順滑。
設計師借助氣泡在整個畫布上進行構圖,通過襯託來營造深度,借助動效營造動靜對比,所有的這些設計可以以不高的成本創造出時髦有趣的設計感。

而所有的這些大都是為了一個目的:創造出用戶偏好的視覺入口。
總的來說,斑點和氣泡是一種吸引用戶注意力的有效設計元素。

如果你用的好,它們不僅可以作為裝飾而存在,還可以作為視覺引導,控制整個頁面的動線,給用戶以視覺上的自然指引,創造出富有流動性的頁面佈局。

4月份流行的網頁設計趨勢
Andy

4月份流行的網頁設計趨勢
Wedze

4月份流行的網頁設計趨勢
Sretks

2. 「懸浮的」矩形元素

這是網頁設計當中,另外一種流行廣泛但是尚未有正式定名的一種設計趨勢。

帶有「懸浮」效果的矩形元素開始出現在各式各樣的網頁當中,從產品展示型的網站到各種品牌的網站頁面,幾乎無處不在。
也許是因為懸浮的矩形元素讓圖層以一種有趣的方式呈現出來,這種設計技巧和視差滾動、動畫可以很好地結合到一起。

現在這種設計趨勢已經表現的非常明顯了。
通過帶有懸浮效果的圖層,各種元素可以獨立的按照自己的方式運行。這個概念和 Material Design 中「紙」的意象很接近。

不過,懸浮的矩形在概念上沒有 Material Design 中那麼結構化,設計師可以發揮的空間也更大。
充滿流動性的設計,在視覺上是非常吸引人的,這樣的設計更容易鼓勵用戶互動,因為在這樣的設計當中,用戶會隨著設計的引導而好奇接下來會有什麼。從目前的實戰案例中可以看到,許多設計中都有懸浮的矩形元素,它們在整個布局中作為訊息的載體,可以打開和關閉,充滿了神秘感,也承載著關鍵性的交互。

懸浮的矩形元素的優勢是,它幾乎可以和任何元素匹配起來,可以很簡單也可以很複雜,可以簡單的幾個區塊搭配起來,也可以是由很多矩形來構成訊息流。
這一設計趨勢的優勢在於靈活自由,以及強大的可定製性。不過從獨特性上來說,相對於其他的要弱一些。

4月份流行的網頁設計趨勢
Badsam

4月份流行的網頁設計趨勢
Hugo-vann

4月份流行的網頁設計趨勢
Copper-heart

3. 圖片和影片填充文字

最後的這個設計趨勢也不算太新鮮的東西,之前就有不少設計師這樣玩過,不過現在作為一種流行趨勢開始大規模地普及:將圖片填充到相對較粗的文本字體當中。
雖然這個想法不算新穎,但是在視覺上有著強大的張力。在下面的三個案例當中,都充分地運用了這一技巧。

Valnet 在它的首頁左側,有一個巨大加粗的字母 V,在背景中嵌入動態的影片,字母所形成的新的框架,讓影片的體驗更加獨特有趣。

Greatest Stories Retold 這個網頁中採用了相同的概念,字母背後有影片在播放,這種形式留給用戶更多想象力。影片中的訊息其實傳遞出來的並不多,更多的是色彩和明顯的運動感,它們真正的功能是誘使用戶點擊並查看更多的網頁內容。
Belly Q 這個網頁則使用了圖片的縮放來創造更為微妙的動效。前景是一個黑色的覆蓋層,而用戶能夠透過中間鏤空的字母 Q 看到背景的影片。

分層效果並不複雜,但是這種方法非常有效地創造出了視覺焦點。
動畫和圖片填充文字,這種設計技巧本身就能夠創造出神秘感,這種設計會讓用戶有興趣點擊其中內容,查看更多。絕大多數的用戶對於高度可視化的內容是感興趣的,而這種恰到好處的神秘感的營造,會促進用戶的交互。

只要確保他們能夠獲得所需的訊息,給他們以答案,那麼這個設計就是有效的。

4月份流行的網頁設計趨勢
Bellyq

4月份流行的網頁設計趨勢
Stories

4月份流行的網頁設計趨勢
Valnet

結語

這個月所流行的這三種設計元素或者說設計趨勢,有著極大的靈活性,你可以將他們運用在主頁當中,也能放在著陸頁里,甚至可以貫穿整個設計項目。


 

【想讓你的網站其他人優秀嗎?這些設計趨勢一個都不要錯過!】

1.9種讓你的網頁很專業
2.預測2018網頁設計趨勢
3.2018年手機應用UI設計趨勢
4.這3個設計趨勢是網頁設計師的最愛
5.2018必看設計懶人包手冊
6.高手進擊懶人包影片-設計師與開發者推薦的精選影片


 

以下幾點請你深思一下

給你最好的網頁設計Gogoshark|鯊魚邦不私藏分享

 


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化