設(shè)計(jì)趨勢(shì)可以塑造一切，從設(shè)計(jì)師的創(chuàng)作方式到用戶界面設(shè)計(jì)，再從網(wǎng)站到包裝設(shè)計(jì)的未來迭代方向。因此關(guān)注現(xiàn)在的流行趨勢(shì)很重要，這樣您的設(shè)計(jì)就不會(huì)很快過時(shí)。

讓我們深入探討2022年的一些頂級(jí)網(wǎng)頁設(shè)計(jì)趨勢(shì)。我們將著眼于 2021 年末開始出現(xiàn)的趨勢(shì)，這些趨勢(shì)將為來年即將流行的設(shè)計(jì)趨勢(shì)奠定基礎(chǔ)。

閱讀更多以前的趨勢(shì)文章：2021 年網(wǎng)頁設(shè)計(jì)趨勢(shì)

目錄：

有趣、積極樂觀的設(shè)計(jì)

黑白配色方案

大膽和實(shí)驗(yàn)性排版布局

超大鼠標(biāo)指針

三維設(shè)計(jì)元素的應(yīng)用

近乎野蠻

滾動(dòng)文本元素

玻璃擬物風(fēng)格

更多漸變

無圖片主頁

圖層效果

分屏美學(xué)

交互式字體

巨型頁腳

包容性設(shè)計(jì)

非凡的想象力

結(jié)論

有趣、積極樂觀的設(shè)計(jì)

時(shí)髦的形狀、顏色，甚至面孔可以帶來很多的樂趣。設(shè)計(jì)師們正在使用這一網(wǎng)頁設(shè)計(jì)趨勢(shì)，應(yīng)用到公司機(jī)構(gòu)、電商或個(gè)人展示類網(wǎng)站內(nèi)容，提供趣味、樂觀的設(shè)計(jì)（如上面的示例），這些設(shè)計(jì)的共同點(diǎn)是它們?yōu)槭澜缱⑷肓艘稽c(diǎn)額外的快樂。

沒有什么比笑臉更能表達(dá)樂觀了。恰當(dāng)?shù)呐鋱D是描繪這種氛圍和利用這一趨勢(shì)最簡(jiǎn)單方法。注意拍攝技巧和被拍對(duì)象的整體形象，尋找與內(nèi)容契合角度，例如上面來自 LegalSuper 的示例。

在經(jīng)歷了全球肺炎大流行的幾年之后，設(shè)計(jì)師們正在為設(shè)計(jì)的項(xiàng)目增添一些額外的樂趣和溫度。這就是我們現(xiàn)在都需要的感覺。

趣味和樂觀的情緒被注入以面孔為載體的配圖上、較細(xì)的字體、有趣的搭配，以及散發(fā)出積極情緒的顏色。為了充分利用這一趨勢(shì)，請(qǐng)考慮較細(xì)的元素并避免選擇使用較粗的字體或厚重的配色。

FOFSO用鮮艷的衣服、模特緊張但帶著快樂的面孔緊盯鏡頭來做到這一點(diǎn)。

黑白配色方案

黑白配色方案是今年最鮮明的設(shè)計(jì)趨勢(shì)。不使用彩色，你真的必須在限制范圍內(nèi)思考和設(shè)計(jì)。雖然這聽起來有點(diǎn)嚇人，但它可以釋放并激發(fā)你的創(chuàng)造力。結(jié)果絕對(duì)是驚人的。

從另外一個(gè)角度來說，黑白配色的設(shè)計(jì)幾乎無處不在。這種對(duì)比鮮明審美表明有很多設(shè)計(jì)師會(huì)關(guān)注簡(jiǎn)單和直接。

使黑白配色方案既清新又現(xiàn)代的關(guān)鍵在于應(yīng)用恰當(dāng)?shù)男Ч捅憩F(xiàn)技巧。

在上面的例子中，懸停時(shí)有一個(gè)微妙的、流動(dòng)的動(dòng)畫以及超大的鼠標(biāo)反色指針來增強(qiáng)交互性。

大膽和實(shí)驗(yàn)性排版布局

在2022年，沒有錯(cuò)誤的字體排版方式。大、黑、粗——甚至是襯線字體——無處不在。他們看起來棒極了。在使用這種網(wǎng)站設(shè)計(jì)趨勢(shì)時(shí)，請(qǐng)考慮文字將如何動(dòng)態(tài)響應(yīng)（在手機(jī)屏幕上一切看起來都將不同）以及如何最大限度地對(duì)訪問者產(chǎn)生影響。許多實(shí)驗(yàn)性字體不僅設(shè)計(jì)有天賦，還包括動(dòng)畫或 flex（CSS響應(yīng)字體布局） 選項(xiàng)等元素。

從輪廓到彩色字體，再到不斷變化的形狀和填充，大膽和實(shí)驗(yàn)性字體應(yīng)用在網(wǎng)站設(shè)計(jì)中占據(jù)主導(dǎo)地位。談到今天的網(wǎng)絡(luò)排版，真的沒有規(guī)則，設(shè)計(jì)師們?cè)诖蚱剖`重建一切可能。

Garcia Salmeron在主頁的設(shè)計(jì)上使用了多種字體效果來體現(xiàn)這一趨勢(shì)：混合和匹配主標(biāo)題中的字符、帶有實(shí)驗(yàn)性的字體選擇以及帶有圖像和背景的彩色填充層。

超大鼠標(biāo)指針

這是一種新的設(shè)計(jì)趨勢(shì)，點(diǎn)擊上圖鏈接，您會(huì)看到許多超大光標(biāo)的應(yīng)用示例，在參與設(shè)計(jì)過程中，在網(wǎng)站前端交互完成之前根本看不到超大指針或鼠標(biāo)懸停的實(shí)際效果，這屬于頁面交互效果的一種。

這個(gè)用戶交互界面的應(yīng)用無處不在。最常見的例子和用法是 Jade Sheng 的例子，它的圓形指針在屏幕上移動(dòng)，甚至可以在穿過可點(diǎn)擊元素時(shí)改變顏色。

這種 UI 設(shè)計(jì)趨勢(shì)的偉大之處在于，它為網(wǎng)站訪問者提供了有價(jià)值的可用性信息，并幫助他們更好地參與改進(jìn)設(shè)計(jì)，提升用戶體驗(yàn)。

三維設(shè)計(jì)元素的應(yīng)用

雖然在2020和2021年有很多設(shè)計(jì)師為網(wǎng)站進(jìn)行全面的3D化設(shè)計(jì)，但新興趨勢(shì)是將扁平的元素通過3D控制與整體有美感結(jié)合起來。

具有3D風(fēng)格的元素屬性包括用于創(chuàng)建深度和維度的陰影、動(dòng)畫以及拉伸和變形等圖層效果。

Sennep 在上面的例子中使用一個(gè)手指插圖引導(dǎo)用戶發(fā)現(xiàn)來做到這一點(diǎn)，伸出手指扶正標(biāo)題。插圖使用手部動(dòng)作配合陰影來完成這種好玩的設(shè)計(jì)。

Skolkovo Park

是時(shí)候思考在3D三維界面中完成所有事情了。從真實(shí)的網(wǎng)絡(luò)模型到具有深度的視頻或照片插圖，三維元素有助于為設(shè)計(jì)提供更好更直觀的理解，例如上面的建筑渲染，或者增強(qiáng)視覺刺激興趣點(diǎn)。

Zoox

三維設(shè)計(jì)也延伸到視覺敘事?？紤]如何以突出景深和陰影的方式講好您的故事或產(chǎn)品展示。例如上面的示例使用視頻，是有效傳達(dá)這種風(fēng)格的最可靠和最真實(shí)的方式之一。

近乎野蠻

野蠻主義是最近比較矚目的網(wǎng)站設(shè)計(jì)趨勢(shì)，但它對(duì)于大多數(shù)項(xiàng)目來說過于苛刻和尖銳。于是進(jìn)入這一趨勢(shì)的最新迭代——“近乎野蠻” 的出現(xiàn)也就不足為奇了。

這些設(shè)計(jì)沿用了許多相同的鮮明效果，但邊緣處理更柔軟。即使有一些明顯的邊界和線條，元素之間也有足夠的空間，而不是銳利的硬邊緣。

沒有太多的裝飾或其他視覺效果，留下顏色和文字來真正承載這些。其結(jié)果更引人注目，不至于太苛刻把用戶拒之門外，是野蠻主義和可用性的結(jié)合體。

滾動(dòng)文本元素

雖然我們總是希望文本元素可讀，但它們也可以是動(dòng)態(tài)的。滾動(dòng)文本元素——通常使用超大字體，只有幾個(gè)字，在同一個(gè)位置循環(huán)出現(xiàn)——可以強(qiáng)調(diào)關(guān)鍵詞并激發(fā)用戶的興趣。

文本滾動(dòng)通常往屏幕左側(cè)位置緩慢移動(dòng)?？招拿柽呑煮w是一種流行的選擇，保持可讀性的關(guān)鍵是使用簡(jiǎn)短的常用詞或短語。

引導(dǎo)用戶關(guān)鍵行為召喚用語和其他消息應(yīng)與滾動(dòng)文本分開，以確保網(wǎng)站訪問者可以輕松閱讀它們。

Peppa Sauce

滾動(dòng)文本選項(xiàng)不僅僅是網(wǎng)站設(shè)計(jì)趨勢(shì)或技巧，它們實(shí)際上可以幫助鼓勵(lì)用戶互動(dòng)增加參與度。在上面來自 Mama Joyce Peppa Sauce 的示例中，超大鼠標(biāo)光標(biāo)內(nèi)包含滾動(dòng)文本，該文本顯示的是更大的滾動(dòng)文本。（您甚至可能想重復(fù)觀看這個(gè)互動(dòng)內(nèi)容。）

玻璃擬物風(fēng)格

玻璃擬態(tài)風(fēng)格（Glassmorphism）的最初始于2020年末和 2021 年初的新擬態(tài)風(fēng)格（Neumorphism），并演變進(jìn)化成現(xiàn)在流行的玻璃擬物效果。

Glassmorphism設(shè)計(jì)外觀讓人聯(lián)想到玻璃。有透明、折射或光澤等元素構(gòu)成。

很多設(shè)計(jì)師在追波（Dirbbble） 上展示使用這種設(shè)計(jì)風(fēng)格的作品，也可以在大量已發(fā)布的網(wǎng)站設(shè)計(jì)中找到這種設(shè)計(jì)方法的設(shè)計(jì)。

更多漸變

漸變的應(yīng)用一直很廣泛。在2021年之前的設(shè)計(jì)中的大部分漸變都出現(xiàn)在背景中。

2022年，漸變將會(huì)增加兩種新的形式：

l  文本顏色漸變填充（如上面的例子）來增加影響和突出強(qiáng)調(diào)

l  填充矢量插圖或圖標(biāo)以創(chuàng)建漸變紋理效果

無圖片主頁

沒照片？沒問題！無需圖像也可設(shè)計(jì)，讓我們?cè)?022年緊跟潮流吧。

使用不同類型的UI或設(shè)計(jì)技巧，來充分美化沒有圖像的主頁。在此處的示例中，Kirifuda 使用了漂亮的黑白配色方案，在文本元素之間增加疊印效果。超大字體和手寫風(fēng)格的字體有助于將它們整合在一起。（請(qǐng)注意將其他設(shè)計(jì)趨勢(shì)與這一趨勢(shì)相結(jié)合以獲得出色的效果。）

沒有圖片的設(shè)計(jì)也是嘗試其他技術(shù)的好機(jī)會(huì)，例如動(dòng)畫、鼠標(biāo)指針懸停狀態(tài)或其他交互元素。

主頁上沒有圖像的設(shè)計(jì)通常會(huì)導(dǎo)致美感缺失。但這完全沒問題。使用另一種設(shè)計(jì)方法來激發(fā)用戶興趣吧，例如使用有趣的大文本字體元素。

圖層疊加效果

圖層堆疊、元素間距和圖形重疊可以在設(shè)計(jì)元素中產(chǎn)生景深錯(cuò)位效果，彼此之間建立連接。分層效果展示明顯又直接，也可以簡(jiǎn)單一點(diǎn)。這兩個(gè)選項(xiàng)可以一起使用或單獨(dú)使用以產(chǎn)生整體影響。

State Creative 使用多個(gè)圖層——背景、中景、前景——以視覺上有趣且有意義的方式將各種元素組合在一起。

分屏美學(xué)

分屏美學(xué)重新流行。幾年前的趨勢(shì)是出于可用性和響應(yīng)性的原因，現(xiàn)在它更像是一種細(xì)分設(shè)計(jì)。

這些視覺效果可以包括水平或垂直分割的屏幕，每一側(cè)具有相同或不同的功能或點(diǎn)擊動(dòng)作。

最好的分屏設(shè)計(jì)可以同時(shí)做兩件事：

l  提供了強(qiáng)烈的視覺沖劑體驗(yàn)

l  他們使用多個(gè)入口點(diǎn)來深入挖掘內(nèi)容

交互式字體

可變粗細(xì)的交互字體在大多數(shù)情況下，這種效果需要使用懸停狀態(tài)才有效，盡管您可以嘗試其他一些更復(fù)雜的效果。（帶有流體字體動(dòng)畫也越來越受歡迎。）

在考慮交互式文本元素時(shí)，請(qǐng)優(yōu)先考慮內(nèi)容的可讀性和易于理解性。文本的效果僅在其中的文字可讀和可理解時(shí)才有效。（否則設(shè)計(jì)的意義就會(huì)丟失。）

當(dāng)設(shè)計(jì)展示相對(duì)簡(jiǎn)單時(shí)，這種設(shè)計(jì)才最有效。這個(gè)技巧在單獨(dú)使用時(shí)是最好的。

巨型頁腳

誰能想到網(wǎng)站頁腳——尤其是那些包含大量信息的頁腳——會(huì)成為流行的網(wǎng)站設(shè)計(jì)元素？

對(duì)于包含大量信息、大量頁面或多個(gè)節(jié)點(diǎn)入口的網(wǎng)站，超級(jí)頁腳是 2022 年必備的設(shè)計(jì)元素之一。

世界自然基金會(huì)有一個(gè)雙層頁腳：

l  在粗黑條中，有三列菜單選項(xiàng)，便于導(dǎo)航，按用戶可能想要在站點(diǎn)上執(zhí)行的操作（發(fā)現(xiàn)、支持、聯(lián)系）分組

l  黑條中還有一個(gè)完整的注冊(cè)表單，用于了解訂閱有關(guān)該組織的更多信息

在底部較細(xì)的白色頁腳欄中是組織信息、社交媒體鏈接、非營利免責(zé)聲明、版權(quán)聲明和服務(wù)條款鏈接（隱私政策、披露信息和相關(guān)條款）

當(dāng)存在明顯具有不同目的的元素分組時(shí)，超級(jí)頁腳效果很好。帶有標(biāo)題的列格式以及水平底部錨點(diǎn)幫助， Wild Souls的這個(gè)頁腳看起來很棒。

巨型頁腳甚至可以呈現(xiàn)出“近乎野蠻”的風(fēng)格。訣竅是使用元素來創(chuàng)建獨(dú)特的組織感，以便用戶知道如何輕松找到他們正在尋找的信息。

包容性設(shè)計(jì)

設(shè)計(jì)師正在努力打造一個(gè)更具包容性的網(wǎng)絡(luò)，它幾乎體現(xiàn)在所有已發(fā)布的內(nèi)容中。從圖像到語言再到替代文本，沒有理由不嘗試讓您的項(xiàng)目更加包容所有人。

包容性延伸到種族、性別中立、文化、可及性和能力上。共同的主題是您的網(wǎng)站應(yīng)該以這樣的方式組合在一起，以便任何想要訪問內(nèi)容的人都可以訪問到內(nèi)容，并且人們也可以在屏幕上看到他們可以與之相關(guān)的其他人。

這里的要點(diǎn)是，你不需要用大喊“我們具有包容性”的圖像和語言。這是展示比講述更重要，真實(shí)比蠻力更重要的設(shè)計(jì)。

非凡的想象力

真實(shí)和想象之間的界線從哪里開始？當(dāng)您查看大量網(wǎng)站時(shí)，可能無法100%確定。沒關(guān)系。

享受這種想象力帶來的樂趣，融合真實(shí)和想象，創(chuàng)造出非凡的圖像。你的想象力是這里唯一的限制。

在 K Plus Film 的示例中，人物位于屏幕周圍飛舞的水果頂部。顏色和比例創(chuàng)造了一種引人入勝的視覺效果，這真是太棒了。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)