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