2021-11-24 資深UI設計者
設計趨勢可以塑造一切，從設計師的創作方式到用戶界面設計，再從網站到包裝設計的未來迭代方向。因此關注現在的流行趨勢很重要，這樣您的設計就不會很快過時。
讓我們深入探討2022年的一些頂級網頁設計趨勢。我們將著眼于 2021 年末開始出現的趨勢，這些趨勢將為來年即將流行的設計趨勢奠定基礎。
閱讀更多以前的趨勢文章：2021 年網頁設計趨勢
目錄：
有趣、積極樂觀的設計
黑白配色方案
大膽和實驗性排版布局
超大鼠標指針
三維設計元素的應用
近乎野蠻
滾動文本元素
玻璃擬物風格
更多漸變
無圖片主頁
圖層效果
分屏美學
交互式字體
巨型頁腳
包容性設計
非凡的想象力
結論
時髦的形狀、顏色，甚至面孔可以帶來很多的樂趣。設計師們正在使用這一網頁設計趨勢，應用到公司機構、電商或個人展示類網站內容，提供趣味、樂觀的設計（如上面的示例），這些設計的共同點是它們為世界注入了一點額外的快樂。
沒有什么比笑臉更能表達樂觀了。恰當的配圖是描繪這種氛圍和利用這一趨勢最簡單方法。注意拍攝技巧和被拍對象的整體形象，尋找與內容契合角度，例如上面來自 LegalSuper 的示例。
在經歷了全球肺炎大流行的幾年之后，設計師們正在為設計的項目增添一些額外的樂趣和溫度。這就是我們現在都需要的感覺。
趣味和樂觀的情緒被注入以面孔為載體的配圖上、較細的字體、有趣的搭配，以及散發出積極情緒的顏色。為了充分利用這一趨勢，請考慮較細的元素并避免選擇使用較粗的字體或厚重的配色。
FOFSO用鮮艷的衣服、模特緊張但帶著快樂的面孔緊盯鏡頭來做到這一點。
黑白配色方案是今年最鮮明的設計趨勢。不使用彩色，你真的必須在限制范圍內思考和設計。雖然這聽起來有點嚇人，但它可以釋放并激發你的創造力。結果絕對是驚人的。
從另外一個角度來說，黑白配色的設計幾乎無處不在。這種對比鮮明審美表明有很多設計師會關注簡單和直接。
使黑白配色方案既清新又現代的關鍵在于應用恰當的效果和表現技巧。
在上面的例子中，懸停時有一個微妙的、流動的動畫以及超大的鼠標反色指針來增強交互性。
在2022年，沒有錯誤的字體排版方式。大、黑、粗——甚至是襯線字體——無處不在。他們看起來棒極了。在使用這種網站設計趨勢時，請考慮文字將如何動態響應（在手機屏幕上一切看起來都將不同）以及如何最大限度地對訪問者產生影響。許多實驗性字體不僅設計有天賦，還包括動畫或 flex（CSS響應字體布局） 選項等元素。
從輪廓到彩色字體，再到不斷變化的形狀和填充，大膽和實驗性字體應用在網站設計中占據主導地位。談到今天的網絡排版，真的沒有規則，設計師們在打破束縛重建一切可能。
Garcia Salmeron在主頁的設計上使用了多種字體效果來體現這一趨勢：混合和匹配主標題中的字符、帶有實驗性的字體選擇以及帶有圖像和背景的彩色填充層。
這是一種新的設計趨勢，點擊上圖鏈接，您會看到許多超大光標的應用示例，在參與設計過程中，在網站前端交互完成之前根本看不到超大指針或鼠標懸停的實際效果，這屬于頁面交互效果的一種。
這個用戶交互界面的應用無處不在。最常見的例子和用法是 Jade Sheng 的例子，它的圓形指針在屏幕上移動，甚至可以在穿過可點擊元素時改變顏色。
這種 UI 設計趨勢的偉大之處在于，它為網站訪問者提供了有價值的可用性信息，并幫助他們更好地參與改進設計，提升用戶體驗。
雖然在2020和2021年有很多設計師為網站進行全面的3D化設計，但新興趨勢是將扁平的元素通過3D控制與整體有美感結合起來。
具有3D風格的元素屬性包括用于創建深度和維度的陰影、動畫以及拉伸和變形等圖層效果。
Sennep 在上面的例子中使用一個手指插圖引導用戶發現來做到這一點，伸出手指扶正標題。插圖使用手部動作配合陰影來完成這種好玩的設計。
是時候思考在3D三維界面中完成所有事情了。從真實的網絡模型到具有深度的視頻或照片插圖，三維元素有助于為設計提供更好更直觀的理解，例如上面的建筑渲染，或者增強視覺刺激興趣點。
三維設計也延伸到視覺敘事。考慮如何以突出景深和陰影的方式講好您的故事或產品展示。例如上面的示例使用視頻，是有效傳達這種風格的最可靠和最真實的方式之一。
野蠻主義是最近比較矚目的網站設計趨勢，但它對于大多數項目來說過于苛刻和尖銳。于是進入這一趨勢的最新迭代——“近乎野蠻” 的出現也就不足為奇了。
這些設計沿用了許多相同的鮮明效果，但邊緣處理更柔軟。即使有一些明顯的邊界和線條，元素之間也有足夠的空間，而不是銳利的硬邊緣。
沒有太多的裝飾或其他視覺效果，留下顏色和文字來真正承載這些。其結果更引人注目，不至于太苛刻把用戶拒之門外，是野蠻主義和可用性的結合體。
雖然我們總是希望文本元素可讀，但它們也可以是動態的。滾動文本元素——通常使用超大字體，只有幾個字，在同一個位置循環出現——可以強調關鍵詞并激發用戶的興趣。
文本滾動通常往屏幕左側位置緩慢移動。空心描邊字體是一種流行的選擇，保持可讀性的關鍵是使用簡短的常用詞或短語。
引導用戶關鍵行為召喚用語和其他消息應與滾動文本分開，以確保網站訪問者可以輕松閱讀它們。
滾動文本選項不僅僅是網站設計趨勢或技巧，它們實際上可以幫助鼓勵用戶互動增加參與度。在上面來自 Mama Joyce Peppa Sauce 的示例中，超大鼠標光標內包含滾動文本，該文本顯示的是更大的滾動文本。（您甚至可能想重復觀看這個互動內容。）
玻璃擬態風格（Glassmorphism）的最初始于2020年末和 2021 年初的新擬態風格（Neumorphism），并演變進化成現在流行的玻璃擬物效果。
Glassmorphism設計外觀讓人聯想到玻璃。有透明、折射或光澤等元素構成。
很多設計師在追波（Dirbbble） 上展示使用這種設計風格的作品，也可以在大量已發布的網站設計中找到這種設計方法的設計。
漸變的應用一直很廣泛。在2021年之前的設計中的大部分漸變都出現在背景中。
2022年，漸變將會增加兩種新的形式：
l 文本顏色漸變填充（如上面的例子）來增加影響和突出強調
l 填充矢量插圖或圖標以創建漸變紋理效果
沒照片？沒問題！無需圖像也可設計，讓我們在2022年緊跟潮流吧。
使用不同類型的UI或設計技巧，來充分美化沒有圖像的主頁。在此處的示例中，Kirifuda 使用了漂亮的黑白配色方案，在文本元素之間增加疊印效果。超大字體和手寫風格的字體有助于將它們整合在一起。（請注意將其他設計趨勢與這一趨勢相結合以獲得出色的效果。）
沒有圖片的設計也是嘗試其他技術的好機會，例如動畫、鼠標指針懸停狀態或其他交互元素。
主頁上沒有圖像的設計通常會導致美感缺失。但這完全沒問題。使用另一種設計方法來激發用戶興趣吧，例如使用有趣的大文本字體元素。
圖層堆疊、元素間距和圖形重疊可以在設計元素中產生景深錯位效果，彼此之間建立連接。分層效果展示明顯又直接，也可以簡單一點。這兩個選項可以一起使用或單獨使用以產生整體影響。
State Creative 使用多個圖層——背景、中景、前景——以視覺上有趣且有意義的方式將各種元素組合在一起。
分屏美學重新流行。幾年前的趨勢是出于可用性和響應性的原因，現在它更像是一種細分設計。
這些視覺效果可以包括水平或垂直分割的屏幕，每一側具有相同或不同的功能或點擊動作。
最好的分屏設計可以同時做兩件事：
l 提供了強烈的視覺沖劑體驗
l 他們使用多個入口點來深入挖掘內容
可變粗細的交互字體在大多數情況下，這種效果需要使用懸停狀態才有效，盡管您可以嘗試其他一些更復雜的效果。（帶有流體字體動畫也越來越受歡迎。）
在考慮交互式文本元素時，請優先考慮內容的可讀性和易于理解性。文本的效果僅在其中的文字可讀和可理解時才有效。（否則設計的意義就會丟失。）
當設計展示相對簡單時，這種設計才最有效。這個技巧在單獨使用時是最好的。
誰能想到網站頁腳——尤其是那些包含大量信息的頁腳——會成為流行的網站設計元素？
對于包含大量信息、大量頁面或多個節點入口的網站，超級頁腳是 2022 年必備的設計元素之一。
世界自然基金會有一個雙層頁腳：
l 在粗黑條中，有三列菜單選項，便于導航，按用戶可能想要在站點上執行的操作（發現、支持、聯系）分組
l 黑條中還有一個完整的注冊表單，用于了解訂閱有關該組織的更多信息
在底部較細的白色頁腳欄中是組織信息、社交媒體鏈接、非營利免責聲明、版權聲明和服務條款鏈接（隱私政策、披露信息和相關條款）
當存在明顯具有不同目的的元素分組時，超級頁腳效果很好。帶有標題的列格式以及水平底部錨點幫助， Wild Souls的這個頁腳看起來很棒。
巨型頁腳甚至可以呈現出“近乎野蠻”的風格。訣竅是使用元素來創建獨特的組織感，以便用戶知道如何輕松找到他們正在尋找的信息。
設計師正在努力打造一個更具包容性的網絡，它幾乎體現在所有已發布的內容中。從圖像到語言再到替代文本，沒有理由不嘗試讓您的項目更加包容所有人。
包容性延伸到種族、性別中立、文化、可及性和能力上。共同的主題是您的網站應該以這樣的方式組合在一起，以便任何想要訪問內容的人都可以訪問到內容，并且人們也可以在屏幕上看到他們可以與之相關的其他人。
這里的要點是，你不需要用大喊“我們具有包容性”的圖像和語言。這是展示比講述更重要，真實比蠻力更重要的設計。
真實和想象之間的界線從哪里開始？當您查看大量網站時，可能無法100%確定。沒關系。
享受這種想象力帶來的樂趣，融合真實和想象，創造出非凡的圖像。你的想象力是這里唯一的限制。
在 K Plus Film 的示例中，人物位于屏幕周圍飛舞的水果頂部。顏色和比例創造了一種引人入勝的視覺效果，這真是太棒了。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.91whvog3.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務