2022 年 20 大網頁設計趨勢

實驗性導航、滾動效果和動態排版只是 2022 年主導的網頁設計趨勢中的一小部分。

查看包含 2022 年最佳網站設計示例的完整列表，以獲取靈感來解決您今年的網頁設計項目。

這些趨勢中的一個共同主題是運動設計。 經驗豐富的 UI/UX 設計師和前端開發人員 Gary Simon 認為，運動設計將在 2022 年無處不在。要查看使用基於滾動的動畫、視差效果、動畫 SVG 等的網站的幾個示例，請查看他的視頻：

1. 實驗導航

我們喜歡什麼：實驗性導航可以幫助吸引和引導訪問者以特定方式瀏覽網站。

實驗性導航是指顛覆傳統模式的導航模式（所有大寫導航在屏幕頂部，無襯線字體）。 這些實驗模式可以幫助創造興趣並引導用戶以特定方式在網站上移動。

以 Kim Kneipp 的投資組合網站為例。 如果您單擊主頁右上角的菜單按鈕，則會從屏幕底部滑入一個菜單，該菜單看起來像書中的目錄。 每頁都有編號，以建議閱讀順序。 在右側，項目也按類型和顏色編號和分類。

2.滾動效果

我們喜歡什麼：滾動效果可以刺激訪問者並鼓勵他們繼續滾動。

滾動效果——由滾動動作觸發的動畫——可以創造更多動態的網絡體驗。 這些越來越多地用於交互式網站，以吸引讀者繼續滾動，表示內容的中斷，並創建三維體驗。

Engineered Floors 使用水平和垂直滾動以及其他效果的組合來做到這一點。 例如，當用戶登陸主頁時，他們會看到右側似乎是一把椅子的圖像。 當用戶滾動時，該圖像會縮小以顯示起居室，該起居室逐漸被地毯覆蓋。 這種 3D 體驗令人愉悅且內容豐富。

3. 動力學排版

我們喜歡什麼：動態排版可以取悅訪問者並幫助他們消化您的內容。

動態排版（或移動文本）是一種動畫技術，自 60 年代故事片開始使用動畫開場標題以來就一直存在。 它可以用於網站設計中的類似目的，以在訪問者登陸主頁後立即吸引訪問者的注意力。

它也可以用來突出重要部分，引導訪問者滾動，並逐漸顯示信息，例如在 Arcadia 上。

4.拖動交互

我們喜歡什麼：拖動交互可以為用戶提供對他們體驗的控制感。

拖動交互旨在模仿實際的物理動作。 它們本質上允許網站訪問者在屏幕上拾取和移動對象。 這種類型的手勢交互正在更多的網站上實施，尤其是電子商務和投資組合網站。

以 Robin Mastromarino 的投資組合網站為例。 除了點擊主頁滑塊的控件，您還可以拖放不同的幻燈片來瀏覽他的特色項目。 頁面過渡和動畫基於拖動速度，為用戶提供對這些效果的控制感。

5. 復古排版

我們喜歡什麼：復古字體可以激發網站訪問者的懷舊感和感傷感。

越來越多的公司正在使用帶有復古感的大而大膽的排版作為其主頁的標題。 這種風格最適合簡短的單詞，頁面的其餘部分保持最小和乾淨。

這是標有“新風格”的更大趨勢的一部分。 在其 2022 年字體趨勢報告中，鑄造和技術公司 Monotype 將 Neue Nouveau 描述為對新藝術運動的一種扭曲，該運動的特點是裝飾性設計、裝飾筆觸結尾以及對角線和三角形字符形狀。 報告稱，我們可以在今天的排版中看到其中一些相同的特徵——比如有機形式和華麗。

這是法國餐廳 Picky Joe 的一個例子。 如右圖所示，迷幻的標題與餐廳的複古內飾相匹配。

您可以在此處查看其他餐廳網站設計。

6. 電影攝影

我們喜歡什麼：即使在最複雜的佈局中，Cinemagraphs 也可以幫助吸引訪問者的視線。

Cinemagraphs——在流暢、連續循環上運行的高質量視頻或 GIF——已經成為一種流行的方式，可以為原本靜態的頁面添加運動和視覺趣味。

雖然全屏循環在過去很流行，但今年你會看到更小的電影圖像被整合到復雜的佈局中，以幫助吸引眼球並讓讀者保持滾動，就像設計和技術工作室 Grafik 的這個例子一樣。

7. 野蠻主義

我們喜歡什麼：粗野主義優先考慮簡單性和功能性，這是用戶體驗的支柱。

為了在整潔有序的網站海洋中脫穎而出，一些設計師選擇了更不拘一格、打破常規的結構。 雖然一開始看起來很不協調，但許多受歡迎的品牌現在正在將這些激進的替代設計元素融入他們的網站，比如彭博社。

粗野主義是對日益標準化的網頁設計的一種反應，其特徵通常是鮮明、不對稱、不墨守成規的視覺效果，以及明顯缺乏層次和秩序。 換句話說，它很難描述，但當你看到它時你就知道了——就像下面來自 Chrissie Abbott 的例子。

8. 單色漸變

我們喜歡什麼：單色漸變在視覺上很有趣，但不會分散注意力。

漸變色這幾年已經遍布網絡，到了2022年還是很常見的。今年很多網站背景都是漸變色，既單色又柔和。

Red Ventures 的視覺設計師 Kendra Pembroke 說：“我看到了很多漸變，尤其是單色漸變，它們給人一種深度感和視覺趣味，同時又不會讓人分心。”

Creative Studio Better Half 展示瞭如何使這種效果看起來清新現代的完美示例。 它結合了大膽的排版和懸停動畫與單色、柔和的黃色漸變背景。

9.分層

我們喜歡什麼：分層可以幫助增加網站的深度並講述品牌的故事。

分層圖像、顏色、形狀、動畫和其他元素為沒有大量文本的站點增加了深度和紋理。 下面是歌手兼詞曲作者SIRUP 的一個時尚示例。

10.純文本

我們喜歡什麼：這種極簡主義的方法確保訪問者只獲得最重要的信息。

一些網站完全刪除了圖像和突出的導航部分，依靠幾行簡單的文本來告知訪問者他們的公司。

例如，丹麥機構 B14 使用其主頁的英雄部分來簡單地描述其使命宣言。 這是一種現代、整潔的信息呈現方式，與使用電影、懸停動畫和動畫光標效果的投資組合部分形成鮮明對比。

11. 動畫插圖

我們喜歡什麼：動畫插圖有助於傳達複雜的想法並為網站增添一些個性。

越來越多的公司正在轉向插畫家和圖形藝術家為其網站創建定制插圖。 “插圖可以很好地傳達生活方式照片並不總是能夠捕捉到的更複雜的想法，”彭布羅克解釋道。

在今年的網站設計中，這些插圖通常是動畫以增加交互性。

例如，如果您將鼠標懸停在NewActon 網站（由澳大利亞數字機構 ED 設計）上的一幅插圖上，該插圖和周邊區域的插圖將會擺動。 然後，只有您懸停的插圖會繼續在一個小圓圈中移動。 這種設計也很實用：每個插圖代表右側導航菜單中的一個類別。

12. 極簡主義

我們喜歡什麼：極簡主義可以對用戶體驗和網站性能產生積極影響。

將經典極簡主義推向極致，一些設計師正在挑戰網站外觀的慣例，只展示絕對的必需品。 這種被稱為“極簡主義”的趨勢對於用戶體驗和加載時間非常有用。

設計師 Mathieu Boulet 的網站以一些指向其社交資料和信息的選擇鏈接為中心。

13.混合水平和垂直文本

我們喜歡什麼：混合水平和垂直文本違反慣例，因此可以取悅和吸引一些用戶。

將文本從通常的水平對齊中解放出來並將其垂直放置在頁面上會增加一些令人耳目一新的維度。 以動作體育視頻製作人 Prime Park Sessions 為例，它在最小頁面上結合了水平和垂直文本對齊方式。

14. 幾何形狀和圖案

我們喜歡什麼：幾何形狀和圖案可以將訪問者的注意力引導到某些產品或 CTA 上。

異想天開的圖案和形狀在網站上出現的頻率越來越高，為原本由平面和材料設計所統治的景觀增添了一些風情。 加拿大設計工作室 MSDS 在其主頁上使用了大膽的圖案字母。

15.細襯線字體

我們喜歡什麼：這種趨勢為品牌增加了一定程度的複雜性。

由於屏幕分辨率的限制和整體缺乏在線字體支持，設計師多年來一直避免使用襯線字體，以保持網站的清晰和乾淨。 隨著最近的改進，襯線字體在 2021 年迎來了重要時刻。

根據 Monotype 的 2022 年字體趨勢報告，雖然去年是大而粗的襯線，但 2022 年將迎來更薄、更輕的襯線。

正如在 The Sill 上所見，細長的襯線標題增添了一絲精緻和風格。

16.重疊的文本和圖像

我們喜歡什麼：重疊的文本和圖像可以最大化頁面上的空間。

與隨附圖像略有重疊的文本已成為博客和作品集的流行效果。 自由藝術總監和前端開發人員 Thibault Pailloux 使他們的重疊文本在每個標題下方都帶有彩色下劃線。

17. 破碎的網格

我們喜歡什麼：這種違反約定的技術可以使標準的網站頁面或部分更有趣。

雖然網格仍然是在網站上顯示文本和圖像的最常見和最有效的方式之一，但破碎的網格繼續進入主流網站，並提供了一種與規範不同的變化。 例如，查看 HealHaus 的網站。 它的主頁以重疊的圖像和文本塊為特色。

18.有機形狀

我們喜歡什麼：有機形狀在不分散內容的情況下增加個性。

嚴格的網格佈局和鋒利的邊緣的日子已經一去不復返了——現在一切都是關於曲線和柔軟、有機的形狀。

“有機形狀可以幫助增加一些趣味性，而不會影響信息的顯示方式，”彭布羅克說。

在下面來自 Spring Invest 的示例中，英雄部分中的有機形狀不僅具有裝飾性，而且具有功能性。 黃點就像一個光標，畫出形成公司標誌的淚滴。 這些形狀不僅增加了愉悅的時刻——它們還有助於強化品牌的身份和價值主張，以“塑造商業的未來”。

19. 網頁紋理

我們喜歡什麼： Web 紋理將注意力吸引到網站上的特定部分。

Web 紋理是在視覺上類似於 3D 表面的背景圖像。 如果做得好，紋理可以通過吸引觸覺讓觀眾沉浸在網站中，正如 Color Of Change 所證明的那樣——背景喚起了類似膠帶的紋理。

20. 網格線

我們喜歡什麼：這種趨勢強調網格是一種組織原則。

最近幾個月，網格線開始出現越來越多，這是有充分理由的。 網格線以一種易於閱讀和理解的方式構建內容——但它也增加了現代美感。 在Foundations for a Better Oregon 網站上，網格線用於創建看起來具有未來感的清晰佈局。

您可以在您的網站上使用的設計趨勢

當然，你不需要結合所有這些趨勢來構建 2022 年最好的網站設計之一——我們懷疑這甚至是可能的。 但是，即使添加幾個作為突出的組件或更細微的細節也可以顯著改善您網站的用戶體驗，從而提高參與度、更多的 CTA 點擊，並為您的在線業務帶來更好的結果。

編者註：這篇文章最初發表於 2018 年 1 月，為了全面性而進行了更新。