2021十大網頁設計趨勢

Covid-19肆虐,企業紛紛開啟遠端上班模式,大環境更加仰賴科技產品,疫情的出現不僅改變了人們生活習慣,更深深影響了這兩年的設計走向,現在就讓我們一起來看看Aile為大家整理出來2021年的十大網站設計趨勢吧!

 

1. 黑暗模式設計 Dark mode

近年來人們對科技的依賴加深,花費更多時間在觀看螢幕,因此幫助降低眼睛疲勞的「黑暗模式」應運而生,透過深色背景與淺色字體搭配減低光源,不僅優化使用者在光線不足環境中的閱讀體驗,還能節約裝置電力。

黑暗模式設計在美學方面,不僅營造超現代的視覺樣貌與神祕奢華的情緒氣氛,更能讓使用集中注意畫面的焦點。

EX:英國倫敦的大英博物館官方網站,使用黑暗模式營造簡約現代的性格,更襯托出博物館經典的建築樣貌。

https://www.britishmuseum.org/

 

 

2. 3D視覺元素 3D visuals 

扁平化視覺是典型的網站設計手法,但隨著科技趨勢轉變,越來越多網站嘗試跳脫平面思維,加入3D元素增加視覺層次上的深度。三維空間的氛圍在平面網站中展出,帶給使用者不一樣的視覺刺激。

EX:Chip&Byte的官網,大量運用3D元素並讓使用者透過鼠標產生互動,增加網站的豐富度與空間感。

https://www.chipebyte.com/

 

 

3. 水平滾動瀏覽 Horizontal scrolling

直式滾動是網站問世至今用戶普遍習慣的閱讀模式,但當網站資訊過多時便會形成頁面過長的情形,於是延伸出橫向瀏覽的需求,近幾年設計師們更嘗試將水平滾動的瀏覽作為主要導覽方式,為使用者帶來創新的視覺體驗。

 

EX:Polygondesign的官網,便是透過水平滾動的方式凸顯品牌風格與產品特性(空間及家飾)。

https://polygondesign.com.au

 

4. 影片嵌入主頁 Embedded videos for engaging homepages

學術研究指出使用者進入網站後的0.05秒是品牌建立形象的關鍵時間,所以首頁的呈現與設計是相當重要,因此,越來越多官網會將服務內容與使用情境剪成精華影片並嵌入主頁,藉此讓使用者停留觀看,達到短時間介紹品牌服務與傳遞品牌形象的目的。

 

EX:jumeirah大飯店的官方網站,在首頁嵌入的影片中,展現飯店設施與建築景觀所帶來的視覺震撼。

https://www.jumeirah.com/en/stay/dubai/burj-al-arab-jumeirah

 

 

5. 擴增實境AR Augmented reality (AR) experiences

AR是一種將虛擬物件與現實空間結合的技術,藉由虛實整合使畫面會出現於介面中,最有名的例子是Pokémon Go,透過此技術讓神奇寶貝出沒在現實街道中;亦或是Instagram的限時動態拍攝特效也是擴增實境應用在生活中的經典案例。

除了生活中隨處可見的AR技術外,許多產品網站也開始將其即時整合與沉浸式體驗的特性應用在網頁設計上,讓使用者在家瀏覽網站即可調整虛擬商品,輕鬆了解產品樣貌與細節,讓產品更貼近真實並與消費者互動。

EX:Jeep 在其產品選購的頁面使用AR技術,讓使用者在瀏覽產品與細節了解上有更好的體驗。

https://www.jeep.com/bmo.wrangler.2021.html#/build/interior/10472/CUJ202110JLJL74G/2TK/APA,PDN,X9,ERC,DEM,DLK,Z1K,SDA,WJP,A7,UAA,23K

 

 

6. 滾動敘事瀏覽 Scrollytelling

這是一個強調「故事敘述」的閱讀體驗,透過使用者操作滾動的方式瀏覽並網頁產生互動;用極具張力的視覺畫面,一步步帶領使用者進入故事,了解網站想傳遞的重點細節。

EX:Apple AirPods Pro的產品頁面,透過滾動敘事的瀏覽方式,帶領使用者了解產品的每個設計細節。

https://www.apple.com/tw/airpods-pro/

 

 

 

7. 幾何網格 Geometric grids

網頁設計的編排本身就建構在一個隱形的網格系統上,如此能讓畫面中的文字與元素皆保持一致性,資訊層級的瀏覽也更加順暢有邏輯。幾何網格效果便是將畫面中的主要框架刻意的強調出來,並強化畫面的區域與分割。常見的網格風格,設計師會運用大且明顯的字體元素,甚至是搭配色彩呈現出誇張的線條,創造出大膽幾何的網站視覺。

EX:eatsleepwork 的網站就是透過網格線條架構,搭配電腦桌面的情境主題,將幾何網格特性發揮得淋漓盡致。

https://www.eatsleepwork.com/

 

 

8. 視差滾動  Parallax scrolling 

透過元素之間不同速度的位移改變,將網頁的二維空間營造出三維的深度錯覺,元素位置的變化亦創造出多元的視覺樣貌,局部使用在網頁中能使畫面生動有層次之外,也能配合滑鼠創造出微互動的效果藉以強化重點;大範圍使用於網頁的瀏覽結構能引導使用者的閱讀視線,並強調故事性與創意表現。

EX: drinkcann官網,透過背景滾動視差與變色傳遞每個氣泡飲品的特性。

https://drinkcann.com/

 

 

9. 互動式設計 Interactive design

將互動設計導入網站中,讓使用者不再只是單向接收瀏覽訊息,更能參與其中產生有趣的互動,體驗意想不到的故事旅程!

EX:APPS 是VGNC公司設計的互動體驗,帶著使用者一步步了解產品的製造與產出,透過創新的體驗推廣品牌旗艦產品。

https://apps.ua/en/

 

 

10. 微動畫設計 Micro animation

生動活潑的網頁設計越來越流行,在網站中加入微量動畫,賦予畫面生命力,不僅能增加畫面細節使整體氛圍活潑,更能有效引導使用者的閱讀視線。

EX:Smashmallow 網站,透過微動畫對使用者進行導覽,同時也使畫面更加生動活潑,豐富使用體驗。

https://www.smashmallow.com/

 

 


繼續閱讀