logo
Home / Blog

2021年網頁設計趨勢

綜合國外知名專業設計資源網站以及幾位知名設計師的觀點,歸納出2021年網頁設計的趨勢。

1. 極簡主義

延續2020年的風格,極簡主義仍是成為許多網頁設計師的偏好。經歷了2020年,疫情打亂了許多人的生活,許多人被迫留在家裡,也因此接觸網路的時間也比往常多出很多。不安的日子讓人們越想要尋求生活上的平靜以及避免面對大量的廣告及訊息,網頁設計師也不斷的找尋使元素更簡單的呈現方法,他們藉著限制顏色的數量,並嘗試不同的比例和組成來構建頁面並藉由這些元素擔起至關重要的角色功能以正確突出產品的最佳質量。

範例網站/日本服飾 Syan ; 美髮品牌 Ray

2. 舒適的顏色

在長時間凝視營幕後,使用者出現眼睛疲勞的情況並不少見。設計師一直在尋找能讓眼睛更為放鬆的配色方式。2021年,網頁設計師將在黑暗與光明的兩個極端之外的區塊進行思考。他們在柔和的調色板中找到中間的位置,例如有益健康的綠色,柔和的藍色,溫暖的棕色或淺粉紅色,而這些不僅使網站顏色不如純黑色或純白色更刺眼,更會自然地帶來鎮定和放鬆。

範例網站/ Bobby Rowe ; Squilla

.

3. 3D視覺效果

隨著高解析度螢幕愈來愈推陳出新,3D設計已漸漸地延伸至網頁設計中。現實與虛擬現實之間的界線愈來愈模糊,二維空間中的三維效果和技術就是一個很好的例子。設計師不斷努力從插圖、動畫到使用對象及圖像場景創建來增加整體用戶體驗。

範例網站/ Monsieurnoss ; Ya Ya

4. 幾何及抽象藝術設計

由點狀、正方形、圓形或線條等幾何組成的抽象形狀,雖然單個呈現時會感覺略為簡單,但當它們組合起來的時候,會可以變得很龐大。有設計師預測在2021年,抽象藝術的元素會被用作網頁設計中攝影圖片的替代品。

範例網站/ Indicius ; The Pentool

5. 模糊的彩色背景

幾年前流行的漸層背景,至今仍是個趨勢。以往設計師會使用大約兩到三種顏色做變化,但目前的顏可以增加到更多種。高斯模糊也是經常使用的效果,可以為圖像和漸變提供柔和的感受。

背景圖片的模糊化也是常見的手法,不過漸漸被由色彩產生的背景取而代之。

範例網站/ 支付工具 Stripe ; 藝術家 MomentHouse

6. 視差效果

多年來,視差效果持續是網站設計中的一種趨勢,我們希望在2021年能看到更多關於視差的實現及創造性的探索。 (請注意,過多視差效果能會對前庭神經疾病患者造成暈眩的傷害,請將視差效果限制在螢幕的一小部分內或有選項可關閉)。

範例網站/ Green Meadow ; Ok Alpha

7. 格狀區塊設計

網格看似簡單,但是在如何將其佈局到到設計中有很大的挑戰。網格正以一種簡潔大膽的外觀吸引人們的注意力。

範例網站/ Flowmingo ; Hudson Gavin and Martin u

8. 沉浸式體驗視覺

拜AR及VR於近年的來強力發展,瀏覽器也不得不升級做了很多相容的增強,未來可見的是更多的WEB VR及AR的網站會出現。

範例網站/ No-fishing ; Securing space project

9.擬物化設計 Neumorphism

設計師們對於擬物化及扁平化設計的支持與反對有極大的落差,雖然設計的領頭羊APPLE在iOS7即開始使用扁平化設計,也帶領了網頁的設計主流為扁平設計至今,雖然目前並不多見擬物化風格的網站,但是自2020年開始,由於3D的熱門,又有捲土重來的趨勢。不管是哪種方式,都是需要針對網站的特性來決定。

範例網站/ Vuse ; Steel UI

10. 更豐富的多媒體素材及應用

隨著頻寬的增加及硬體的加速,以往遙不可及的影音在網頁上瀏覽如今也普遍可見,HTML5的技術更讓影音或音頻可直接處理或而無需加裝外掛程式。不僅如此,未來由聲音輸入的介面取代傳統的文字會愈來愈常見。

範例網站/ Nicolas Errera ; Mutto

所有文章


2021年網頁設計趨勢

想要了解下國外設計師歸納的2021年網頁設計趨勢嗎?

PWA介紹(Progressive Web App)?

由Google於2016年所提出的概念-漸進式網頁應用程式,意即由網頁來執行應用程式

UX為什麼很重要?

從2015年進軍台灣的蝦皮如何打敗露天及奇摩而成為拍賣的盟主談起

Microinteractions微互動如何改善UX設計?

一位資深產品設計師於多年前提出的微互動觀點,發酵於近幾年並帶給UX界不少的發想及實作

企業E化不能等-從一則實例談起

最近讀到一則新聞,員工離職把硬碟格式化,結果造成公司業務大停擺

Adobe Animate介紹

十多年前網頁動畫獨領風騷的FLASH於2016年更名為Adobe Animate後,原軟體於2020年底將正式停止服務

Figma介紹

Figma這幾年在UX界爆紅,他的優勢在哪邊? 為何得到設計師的青睞?

LINE官方帳號(俗稱LINE2.0)整理包

LINE@生活圈已全面升級並改名為官方帳號

Google將於2020/9正式採用行動版內容優先索引

不具適合手機瀏覽的網站是該調整的時候了

擴增實境AR在APP的應用愈來愈多元

擴增實境時在APP上的應用由早期的2D已進步到3D的應用,其多元性及互動趣味更甚以往

Wireframe的優點

Wireframe俗稱線稿圖,好的Wireframe節省一半的製作時間及增強各部門的效率

程式碼也可以環保化

對人可以不用斤斤計較,但是對雲端服務就要斤斤計較,甚至是錙銖必較

原始碼的歸屬

請人客製化網站,原始碼到底是誰的?

實體 v.s. 網路

實體店面與網路銷售的困境與尷尬

CRM系統回歸以人為本的初衷

再龐大的CRM系統若缺乏對人的關懷也是令人失望的,從一通電話談起

 立 即 洽 詢  125 world