2022 年頂級(jí)網(wǎng)頁(yè)設(shè)計(jì)和 UI 趨勢(shì)

時(shí)間：2023-10-16 08:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-16 08:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

2022 年頂級(jí)網(wǎng)頁(yè)設(shè)計(jì)和 UI 趨勢(shì)：有趣、樂(lè)觀的設(shè)計(jì)

時(shí)髦的形狀、顏色，甚至是面孔都可以帶來(lái)很多樂(lè)趣。設(shè)計(jì)師正在使用網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)，為從投資組合網(wǎng)站（例如上面的示例）到電子商務(wù)的所有內(nèi)容提供有趣、樂(lè)觀的設(shè)計(jì)。這些設(shè)計(jì)的共同點(diǎn)是它們?yōu)槭澜缱⑷肓艘稽c(diǎn)額外的快樂(lè)。

沒(méi)有什么比笑臉更能表達(dá)樂(lè)觀了。正確的圖像是描繪這種氛圍并利用這種網(wǎng)站設(shè)計(jì)趨勢(shì)的簡(jiǎn)單方法。注意攝影和整體圖像，并尋找與虛擬觀眾相關(guān)的面孔，例如來(lái)自 LegalSuper 的上述示例。

在經(jīng)歷了過(guò)去幾年的全球健康大流行之后，設(shè)計(jì)師們正在為設(shè)計(jì)項(xiàng)目增添一些額外的樂(lè)趣和勇氣。這正是我們現(xiàn)在需要的感覺(jué)。

充滿樂(lè)趣和樂(lè)觀的圖像具有面孔、較輕的字體和有趣的字體，以及散發(fā)出積極情緒的顏色。為了充分利用這一趨勢(shì)，請(qǐng)考慮更輕的元素，并避免選擇較重的字體或顏色。 FOFSO 使用主頁(yè)上的語(yǔ)言以及緊張而快樂(lè)的面孔，穿著鮮艷的衣服和有趣的背景盯著鏡頭。

黑白配色方案

黑白配色方案是今年最鮮明、最美麗的設(shè)計(jì)趨勢(shì)。沒(méi)有顏色，你真的必須在限制范圍內(nèi)思考和設(shè)計(jì)。雖然這聽(tīng)起來(lái)有點(diǎn)嚇人，但它可以釋放并幫助激發(fā)創(chuàng)造力。此外，結(jié)果絕對(duì)令人驚嘆。

也許在另一個(gè)世界事件的跡象中，黑白配色幾乎無(wú)處不在。這種鮮明的美學(xué)是一個(gè)指標(biāo)，表明有多少設(shè)計(jì)師可能會(huì)關(guān)注簡(jiǎn)單性和鮮明性。

使黑白配色方案在看起來(lái)新鮮和現(xiàn)代的同時(shí)運(yùn)作良好的關(guān)鍵在于應(yīng)用正確的效果和技術(shù)。

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

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

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


從輪廓到彩色字體再到不斷變化的形狀和填充，粗體和實(shí)驗(yàn)性類型選項(xiàng)正在主導(dǎo)網(wǎng)站設(shè)計(jì)。談到今天的網(wǎng)頁(yè)排版，真的沒(méi)有規(guī)則，設(shè)計(jì)師們正在玩弄所有的東西。 Garcia Salmeron 的設(shè)計(jì)在主頁(yè)上使用了多種類型的效果來(lái)體現(xiàn)這一趨勢(shì)：在主標(biāo)題中混合和匹配字符，有點(diǎn)實(shí)驗(yàn)性的字體選擇，以及帶有圖像和背景的彩色填充層。

超大指針

這是一種設(shè)計(jì)趨勢(shì)，如果您單擊此處，您將在此處的許多示例中看??到，但在您嘗試參與網(wǎng)站設(shè)計(jì)之前根本看不到：超大指針或鼠標(biāo)懸停。

這個(gè)用戶界面元素?zé)o處不在。最常見(jiàn)的例子和用法是 Jade Sheng 的例子，它帶有一個(gè)圓形指針，它在屏幕上移動(dòng)，甚至在它穿過(guò)可點(diǎn)擊元素時(shí)擴(kuò)展或改變顏色。

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

三維設(shè)計(jì)元素

雖然 2020 年和 2021 年有很多設(shè)計(jì)師為完整的網(wǎng)站處理完整的 3D 設(shè)計(jì)，但新興趨勢(shì)是將 3D 元素與更扁平的整體美感結(jié)合起來(lái)。

具有 3D 風(fēng)格的元素可能包括陰影、動(dòng)畫(huà)或圖層效果，以創(chuàng)建深度和維度。

Sennep 在上面的示例中使用圖解查找來(lái)完成此操作，該查找可以伸出并修復(fù)設(shè)計(jì)其余部分中的文本。該插圖使用陰影和運(yùn)動(dòng)來(lái)完成這種趨勢(shì)設(shè)計(jì)風(fēng)格。

是時(shí)候用 3D 來(lái)思考幾乎任何事情了。從現(xiàn)實(shí)生活中的網(wǎng)絡(luò)模型到具有深度的視頻或照片插圖，3D 元素可以幫助為設(shè)計(jì)提供額外的理解，例如上面的建筑渲染，或增強(qiáng)視覺(jué)趣味。

三維設(shè)計(jì)也延伸到視覺(jué)敘事?？紤]如何以突出景深和陰影的方式捕捉您的故事或產(chǎn)品。視頻（例如上面的示例）是有效傳遞這種風(fēng)格的最嘗試和最真實(shí)的方法之一。

近乎野蠻主義


粗野主義是人們想要加入的網(wǎng)站設(shè)計(jì)趨勢(shì)，但對(duì)于大多數(shù)項(xiàng)目來(lái)說(shuō)，它過(guò)于苛刻和尖銳。進(jìn)入這一趨勢(shì)的最新迭代——幾乎是野蠻主義。

這些設(shè)計(jì)使用了許多相同的鮮明效果，但邊緣更輕。而不是單色字體，更容易看的襯線和沙色襯線是常態(tài)。即使有一些明顯的邊界和線條，元素之間也有足夠的空間，而不是尖銳的邊緣。

沒(méi)有太多的裝飾或其他視覺(jué)效果，只留下顏色和文字來(lái)真正承載這些項(xiàng)目。




滾動(dòng)文本元素


雖然您總是希望文本元素可讀，但它們也可以是動(dòng)態(tài)的。滾動(dòng)文本元素——通常使用超大字體、幾個(gè)詞、在一個(gè)位置——可以增加對(duì)關(guān)鍵詞的強(qiáng)調(diào)并激發(fā)用戶的興趣。

文本滾動(dòng)通常在屏幕左側(cè)兩個(gè)不太繁忙的位置緩慢移動(dòng)。輪廓字體是一種流行的選擇，保持可讀性的關(guān)鍵是使用簡(jiǎn)短、常用的單詞或短語(yǔ)。

號(hào)召性用語(yǔ)和其他消息應(yīng)與滾動(dòng)文本分開(kāi)，以確保網(wǎng)站訪問(wèn)者可以輕松閱讀它們。

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

玻璃態(tài)


玻璃態(tài)的第一個(gè)暗示始于 2020 年末和 2021 年初的新態(tài)，并演變成現(xiàn)在流行的更完整的玻璃效應(yīng)。

Glassmorphism 正是您可能想的那樣：設(shè)計(jì)元素的外觀讓人聯(lián)想到玻璃。可能有透明度、冷淡或光澤的元素。

設(shè)計(jì)師們一直在 Dirbbble 上以一種主要方式使用這種風(fēng)格，并找到了進(jìn)入大量已發(fā)布網(wǎng)站設(shè)計(jì)的方法。

更多漸變





除了每個(gè)設(shè)計(jì)都非常平坦的短時(shí)間內(nèi)，漸變是不斷出現(xiàn)的設(shè)計(jì)趨勢(shì)。2021年，設(shè)計(jì)中的大部分漸變出現(xiàn)在背景中。

到 2022 年，漸變將采用兩種新形式：

沒(méi)有圖像的主頁(yè)


沒(méi)有照片？沒(méi)關(guān)系！在沒(méi)有圖像的情況下設(shè)計(jì)它，您將在2022年成為潮流。

使用不同類型的用戶界面或設(shè)計(jì)技巧來(lái)充分利用沒(méi)有圖像的主頁(yè)。在此示例中，Kirifuda 使用美麗的黑白配色方案，并在文本元素之間具有疊印效果。超大的排版和手寫(xiě)風(fēng)格的字體有助于將它們整合在一起。（請(qǐng)注意，將其他設(shè)計(jì)趨勢(shì)合并到這個(gè)趨勢(shì)中，以獲得出色的效果。

沒(méi)有圖像的設(shè)計(jì)也是嘗試其他技術(shù)（如動(dòng)畫(huà)、懸停狀態(tài)或其他交互元素）的絕佳機(jī)會(huì)。


主頁(yè)上沒(méi)有圖像的設(shè)計(jì)通常會(huì)導(dǎo)致極少的美感。這完全沒(méi)問(wèn)題。使用另一種技術(shù)來(lái)激發(fā)興趣，例如有趣字體中的大文本元素。

分層效果


堆疊、邊緣和重疊的元素可以在設(shè)計(jì)元素和深度效果之間建立連接。分層效果可以是明顯和直接的，也可以是低調(diào)的。這兩個(gè)選項(xiàng)可以一起使用，也可以單獨(dú)使用以產(chǎn)生整體影響。

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

分屏美學(xué)

分屏美學(xué)重新生效。幾年前的趨勢(shì)當(dāng)時(shí)出于可用性和響應(yīng)的原因而起作用，現(xiàn)在它更像是一種設(shè)計(jì)。

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

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

交互式字體


在屏幕上與您一起移動(dòng)的文本是交互式字體背后的支柱。在大多數(shù)情況下，這可以使用懸停狀態(tài)，盡管您可以嘗試一些其他更復(fù)雜的效果。（帶有字體的液體動(dòng)畫(huà)也越來(lái)越受歡迎。）

在考慮交互式文本元素時(shí)，請(qǐng)考慮可讀性和理解力。文本效果只有在其中的文字仍然可讀和可理解的情況下才有效。（否則設(shè)計(jì)的信息和意義就會(huì)丟失。）

當(dāng)設(shè)計(jì)中沒(méi)有很多其他技術(shù)分層時(shí)，這種設(shè)計(jì)趨勢(shì)也最有效。當(dāng)它單獨(dú)存在時(shí)，這個(gè)技巧是最好的。

超級(jí)頁(yè)腳


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

對(duì)于包含大量信息、大量頁(yè)面或多個(gè)參與點(diǎn)的網(wǎng)站，巨型頁(yè)腳是 2022 年必備的設(shè)計(jì)元素之一。

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

當(dāng)存在具有不同目的的明顯元素級(jí)別時(shí)，巨型頁(yè)腳效果很好。帶有標(biāo)題的列格式以及水平底部錨點(diǎn)有助于 Wild Souls 的此頁(yè)腳看起來(lái)很棒。


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

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


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

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

這里的細(xì)線是，您不需要過(guò)度使用尖叫“我們是包容性的”的圖像和語(yǔ)言。這是展示比講述更重要的設(shè)計(jì)情況之一，真實(shí)和真實(shí)比強(qiáng)迫更重要。

非凡的意象


真實(shí)結(jié)束和想象之間的界限從哪里開(kāi)始？當(dāng)您查看很多網(wǎng)站時(shí)，您可能無(wú)法 100% 確定。沒(méi)關(guān)系。

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

在 K Plus Film 的示例中，人們位于在屏幕上飛來(lái)飛去的水果上。顏色和比例創(chuàng)造了一種引人入勝的視覺(jué)效果，這絕不是典型的。

結(jié)論

就網(wǎng)站設(shè)計(jì)趨勢(shì)而言，新的一年已經(jīng)開(kāi)始以非凡的方式爆發(fā)?？紤]如何將這些元素合并到現(xiàn)有項(xiàng)目中或作為新項(xiàng)目的一部分。最重要的是，玩得開(kāi)心！

翻譯自：Top Web Design and UI Trends for 2022