Delight Mag Blogs

樂生活誌 

Homepage       Blogs   

2021年網站設計趨勢21種

 

傑夫·卡德羅在2020年12月匯總出以下這 21 種網頁設計趨勢, 從復古排版到不斷增長的無代碼運動,將在2021年影響我們設計和改進人們體驗網頁的方式。

1.復古字體

我們看到許多舊事物再次變得酷,然後再變得更加不酷。復古字體的流行也經歷了同樣的潮起潮落,許多具有復古字體的設計並沒有過時。
復古排版經歷了一些復興。 一些程式化和藝術性正在重新構想復古字體。
在Shopify平臺的狂歡節促銷頁面上看到這種新舊融合。 通過一些實驗為傳統的粗體字體注入了新的活力。 既賦予它們一些酷炫和現代感,同時保持易讀性及向過去致敬。

2.視差滾動動畫

多年來,視差滾動效果一直是網站設計的一種趨勢,在 2021 年,我們希望看到對視差可以實現的效果進行更多微妙和創造性的探索。
視差效應中的過多動態可能對前庭障礙患者有害,因為深度動態的錯覺會導致迷失方向和頭暈。
更多設計師考慮以下準則,以確保他們將視差最小化且不會造成傷害:

不要讓視差效應分散隊重要信息的注意力

不要讓用戶更難完成重要任務

將視差效果的數量保持在最低限度

最小化每個實例內的視差移動量

將視差效果限制在屏幕的小區域內

包括一個供用戶關閉視差效果的選項

這樣,視差滾動會被巧妙地使用,不是為了華麗的效果,而是作為強調或突出重要內容的工具。

3.水平滾動

以前被認為是網頁設計的失禮,水平滾動正在捲土重來。
我們看到越來越多的網頁設計師繼續嘗試水平滾動。不是為了與眾不同,而是為了逐步公開次要信息​​的實用方式,就像在圖片庫中一樣。

成功採用水平滾動的設計師有以下注意事項:

不要強迫用戶在水平內容中導航:允許使用其他導航方式,例如帶有清晰標籤的箭頭按鈕

使用清晰的視覺提示來指示內容使用水平滾動的位置,並且不要將這些提示隱藏在懸停之後

考慮在水平滾動中顯示哪些內容會受益 - 照片庫是一個很好的競爭者,因為水平滾動會向用戶顯示一個小的預覽,並允許他們選擇查看更多內容或繼續向下移動頁面

避免需要對需要閱讀的文本進行水平滾動

在Designer 功能頁面上,使用少量水平滾動來放大大圖像,並以更大的尺寸顯示圖像的更多相關位,以配合相關內容。
舉例:Momento Design Studio、McBride Design

4. 無處不在的 3D 視覺效果

隨著更高分辨率屏幕的出現,3D 設計已經從 Geocities 的塊狀和斜面邊緣走了很長一段路。 我們一直在看到高質量的 3D 視覺效果無縫地編織到網頁設計中。 它們不是花哨的干擾,而是增加了整體用戶體驗。

創意機構 Sennep 在整個網站中加入了 3D 元素的深度。 所有設計元素之間都有一種很好的和諧感。 說明如何在更簡約的佈局中,3D 可以給人留下更大的印象,增加網頁的維度感。

5. 多媒體體驗

隨著大多數人可以訪問更快的互聯網速度,多媒體網絡體驗隨處可見。 將視覺、文本、視頻和音頻結合在一起,可以提供豐富的用戶體驗。
2021 年成功的設計對使用多媒體體驗具有以下約束:

優先考慮簡單性,例如在結合運動和音頻時。 太多的事情可能會讓認知障礙患者分心或不知所措。

周到地使用不同的媒體格式,以最大限度地提高內容的可訪問性。

包括所有預先錄製的多媒體的隱藏式字幕和抄本。

包括圖像的替代文本,並用更長的描述性文本伴隨複雜的圖像。

確保所有文本都是用 HTML製作的,而不是呈現在圖像中。

避免自動播放視頻或動畫內容:相反,提供一個清晰的“播放”按鈕,讓用戶可以選擇播放和暫停內容。

有效使用多媒體有責任地解決各種因素。
Nicolas Errera 的網站包括一個漂亮背景視頻的播放控件:點擊播放,也可以暫停。 它還包含一個微妙的動畫,指示您在視頻中的位置。

6. 增強現實 (AR) 體驗

借助多媒體體驗,增強現實 (AR) 的令人驚嘆的沉浸式體驗,現在不僅僅意味著在Apple 或 Android 移動設備上可尋找神奇寶貝。WebXR API 和 Wayfair Technologies 開發的軟件等新技術為幾乎所有人打開了這個領域。

Jeep的汽車經銷在這個“製造和定價 Jeep”頁面中使用了 AR,提供輕鬆而無壓力的體驗。 而越來越多的零售和電子商務網站正在利用 AR 的力量來幫助銷售。

7. 專注粒狀紋理

剛性網格和純色平面塊確實可以從網頁設計中汲取個性。 粒狀紋理可以給它們更自然的感覺。
我們在這個網站上看到了 Studio Gusto 的顆粒感之美。 它使用低保真設計元素來提供更粗糙的用戶體驗,比許多網頁設計中常見的光滑完美感覺更自然。

8. 專注於柔和的色彩

就像粒狀紋理可以給設計帶來更自然的感覺一樣,柔和的顏色也可以。
Magic Theatre Studio 使用淺色調色板和深綠色塊,在此網頁設計的各個部分之間形成鮮明對比。 這些柔和顏色是手繪風格文本和插圖的完美背景。 在背景中,有一種幾乎無法分辨的輕微嗡嗡聲,以及對明暗背景的微妙扭曲,使設計感覺非常生動。

9. 根據喜好設計

網頁開發在提供更個性化的體驗方面取得了長足的進步。可以是任何內容,包括在暗/亮模式之間的切換以及更改網站外觀和導航的其他方式,以及提供根據個人口味定制的內容,例如 Spotify 生成的自定義播放列表。
新的設計實踐和算法使互聯網不再是被動的用戶體驗,而是更加以用戶為中心。未來將更加關注滿足瀏覽網站的人的需求、願望和品味。

10. 高斯模糊

高斯模糊在為圖像和漸變提供柔和的焦點漩渦方面效果很好。 這種效果已經存在一段時間了,但設計師一直在網頁設計中更突出的空間中使用它。
Moment House 的主頁不是以英雄形像開始,而是以令人愉悅的高斯模糊顏色開始。 這給人一種大氣的感覺,並直接與緊隨其後的洛杉磯城市景觀照片聯繫起來。 它完美地捕捉到了透過金光和陰霾觀看洛杉磯的鏡頭。

我們在 Monograph Communications 的背景中看到了高斯模糊。 這种红色、紫色和藍色的蓬鬆混合,在直線和覆蓋它的大膽排版之間形成了很好的對比。

Goodbooks 集成了高斯模糊的蒸汽狀氣泡。 下面的屏幕截圖並沒有真正做到這一點,但感覺就像隱藏在白色屏幕後面的東西。 我們看到了形狀的變化和旋轉,但永遠不會完全看到它是什麼。 這是一個非常棒的視覺錨點,並引起人們對它下面的號召性用語的關注,以查看他們推薦的前 12 本書。

我們喜歡看到永遠存在的東西,比如高斯模糊,在以新的和有趣的方式使用它們的設計師手中變得更加流行。

11.滾動講述

我們已經看到設計師通過網絡體驗講故事的趨勢越來越大。這就是滾動式講述的用武之地 - 視覺敘事可以提升故事並讓您沉浸在其敘事中。
scrollytelling 克制地最佳應用如下:

在小範圍內保持運動。

根據用戶的條件提供交互:提供明顯的播放控件來播放/暫停/停止交互和動作。

確保任何滾動的元素都有助於強調故事,而不是分散對重要文本的注意力。

我們自己的網頁設計藝術史網站使用小巧精緻的動畫和精美的插圖來支持藝術史如何影響網頁設計的故事。

12.黑暗模式

想起 AC DC 的“Back in Black”,因為黑暗模式在 2021 年將出現在更多屏幕上。越來越多的設計師開始擁抱黑暗模式美學,黑色提供了完美的黑暗背景,讓設計元素從屏幕上彈出。

13.卡通插圖

不久前,網站只是文本和一些圖像或圖形。 隨著發展,網頁設計師現在創造的作品在更個人的層面上與人們聯繫。 卡通插圖作為一種人性化感覺來改造網站廣受歡迎。卡通插圖在創造力和使品牌更具風度。

有很多資源和藝術家製作精美的卡通插圖。Blush 是查找自定義角色插圖的絕佳平台,例如 Vijay Verma 的這套精美插圖。

14. 幾何網格

網格很簡單,但在如何將它們集成到設計中方面具有很大的靈活性。 幾何網格作為一種結構佈局的方式正在獲得牽引力,具有乾淨和大膽的外觀。
Hudson Gavin 和 Martin 的這種設計將塊用於導航元素和內容。 這些大的顏色方塊在導航時很有趣,並且可以很好地保持您的注意力。

幾何網格不必統一排列。 Flowmingo 使用更不對稱的幾何網格,但正方形和線條是其佈局的基礎。 較粗的加權線始終強調方形。

15. 自定義光標

光標可能是網頁設計中最容易被忽視的一點,我們大多數人都滿足於一個簡單的舊箭頭。 當設計師可以將網站的這個微不足道的部分變成很酷的東西時,這是一項相當大的成就。

鋼筆工具將他們的圓形光標更進一步,將動畫和文本結合在一起,產生近乎迷幻的效果。

來自 Büro 的變形圓形光標,它會根據它懸停在什麼設計元素上改變它的外觀。

16.滾動卡片

我們很高興看到滾動卡片成為設計不可或缺的一部分。 無論是水平滾動還是垂直滾動,它們都為網站添加了活潑的動作,是展示信息的好方法。

17.無色設計

稀疏的白色使設計更加簡潔,任何有顏色的元素都會受到更多關注。
這個為 Latinxs Who Design 設計的設計有很多空白,帶有懸停效果,可以將每個設計師的黑白圖像轉換為全彩色。

即使像極簡設計這樣的東西仍然可以通過微交互、動畫和其他動態效果提供引人入勝的體驗。
用戶體驗數據庫還採用無色設計方法,使其最小化且易於閱讀。

18. 音頻

將音頻作為設計的一個組成部分為視障人士消除了可訪問性障礙,也有利於那些喜歡在網站上收聽大量文本的人。

19. 受印刷品啟發的網頁

隨著數字技術取代了很多曾經是物理對象的東西,舊媒體開始重生。 黑膠唱片的流行證明了人們想要體驗的不僅僅是一堆零和一。
從印刷品中獲得靈感的佈局滿足了人們與現實世界中的事物建立聯繫的願望。 雜誌風格的佈局和傳統圖形設計的其他元素提供了與紙上印刷的觸覺體驗的聯繫。

來自 Home Run Studio 和Foundamour 的示例,都從印刷中汲取靈感,讓他們熟悉並與出版建立聯繫。

20. 設計系統的一致性

設計系統功能強大。通過使用 CMS 創建可重複的佈局和相關集合,可以輕鬆進行更新或編輯以及快速創建重複的網站。無論是小規模使用還是大規模使用,它們對於任何組織創建和管理其設計都很有用。

一些看起來非常有用的應用程序旨在使設計系統工作流程變得更加容易,具有風格,充當管理任務和具備協作空間,提供模板以及其他設計系統工具。

21.無代碼

沒有代碼並不意味著完全消除代碼。 程序員和開發人員將永遠是重要的。沒有代碼意味著開放這些專業領域,讓任何有想法或願景的人都可以進行創作。

通過沒有代碼,設計師可以成為前端開發人員。 作家成為網頁設計師。 小企業主可以進入電子商務世界。 無論您是誰,沒有任何代碼可以讓您成為更多人。 它消除了非設計師、僅設計人員和開發人員之間的分界線。 它將人們聚集在一起進行協作。

以上描述了2021年的21種網頁特色。未知2022年又將有什麼新設計趨勢的? 我們迫不及待地想看看 2022年的設計風格會發生什麼新穎變化。

 

參考:

https://webflow.com/blog/web-design-trends-2021