2023 年值得期待的 10 種網頁設計趨勢

“地精模式”被選為 2022 年牛津年度詞彙。 該術語指的是“一種毫無歉意地自我放縱、懶惰或邋遢的行為，通常拒絕社會規範或期望。” 它已成為年度第一個由公眾投票決定的詞。

在過去的幾十年裡，作為一個社會，我們已經慢慢地陷入了自我放縱，這已經不是什麼秘密了。 有時，這是令人尷尬的，有時是過分的，但你可以在西方生活的各個方面看到這一點。 運動時尚裝，網購一切，懶惰時點快餐，狂看最新的電視劇。 這些只是現代生活的一些例子，它們為我們內心的妖精突破創造了完美的氛圍。 現在地精模式是一個被廣泛接受的概念，想想它將如何反映在未來的網頁設計中是很有趣的。

當我們將它們與 UI 和 UX 設計相關聯時，這些新演變的社會規範，正如地精術語所反映的那樣，很有趣。 就其核心而言，UI 和 UX 設計是一個基於標準、最佳實踐和用戶研究的領域，同時盡可能具有包容性。 我們看到這種趨勢的一種方式是通過將品牌放在第一位的妖精網站，然後再放在用戶之前。 這些網站有時會忽略最佳實踐甚至可訪問性，質疑什麼是“美”。 他們渴望加強品牌形象，使用粗獷的風格、圖像溢出、重複、強烈的色彩、響亮、刺耳的入口動畫、多個對像等，使網站令人難忘和引人入勝。我們可以愛上這些網站，或批評它們，但我們不能假裝我們從未使用過其中一兩個噱頭來增強網站的存在感。

Bornfight studio 是一家專門從事網絡製作的小型機構。 他們的地精態度通過他們網站的語氣表現出來，非常“當面”，不拘小節，還有些厚顏無恥。 以他們有趣的曲奇餅橫幅為例——“生活苦澀，所以我們使用曲奇餅”，或者他們坦率地宣稱他們工作是為了讚美和金錢，以及重疊圖像的壓倒性但華麗的懸停動畫。

在極端主義的另一面，我們看到了一種簡單運動，它聲稱我們所需要的只是某種平衡——一種“放慢速度”的練習。 這種趨勢為用戶創造了愉悅和放鬆的體驗，與“一切只看外表的文化”背道而馳。

我們將看到越來越多的網站通過減少細節來探索簡單性，並要求匿名。

這些網站有時就像一個結構或設計好的線框，使用簡約的排版、網站內有限範圍的類型樣式、與大圖像或與替代詳細 UX 插圖的無定形插圖共同對齊的柔和顏色。 此外，時而甜美的動畫捲軸包裹著網站，讓你飄入寧靜之中。

令人驚訝的是，設計這樣的網站可能是一個艱難的過程，因為需要成熟的設計師才能理解本質所在，什麼是多餘的。 這些網站有時在風格和性能方面更受歡迎，使它們與加載內容和圖像的競爭對手網站區分開來。

Templeton Clothing 是來自巴伐利亞北阿爾卑斯山的電子商務網站。 快速瀏覽一下他們的英雄部分就足以了解他們的態度； 慢動作動畫，沒有促銷或沒有 CTA。 他們不使用任何語言，而是要求您放鬆並滾動。 整體黑白線性邊框和大圖符合他們的“反設計，突出產品為主，品牌為輔”。

去年我們談到了滾動條，雖然感覺就像十年前一樣，但今年，網絡體驗似乎向前邁進了幾步，採用了新的參與方式。

在我們創建網站之前，我們會規劃用戶旅程，並且出於功能原因——我們會創建一個結構和框架。 如果我們將它與現實世界平行，網站就是我們希望用戶走向轉化的路徑。 這一趨勢提出的問題是，這個用戶旅程是什麼？它在 2023 年應該是什麼樣子？

這種“愉悅”的方法激發我們開始將網站視為不僅僅是一組頁面，而是一種 3 維體驗。 當然，總體目標是讓用戶參與進來並保持好奇心，並在一路上用驚喜和快樂的複活節彩蛋引領他們前進。 動畫光標是這種令人愉悅的一個很好的例子，它可以在增強網頁設計中的用戶體驗方面發揮重要作用。

出於這種思想流派，我們可以將我們過去認為是技術性的、道路上的岔路口的功能想起來，例如菜單或內部鏈接、CTA 和道路的盡頭——例如頁腳或 404。在這些“衝突區域”，我們可以映射用戶可能經歷的感受，例如成功或失敗、興趣、信任或懷疑等。添加動畫、營銷信息和幽默主題可以緩解用戶體驗並加強用戶之間的聯繫和品牌。 似乎，暫時，客戶對這些領域沒有強烈的感受，這使他們成為我們釋放創造力的理想場所。

Studio Brot 是一家專注於廣告和品牌的設計機構。 他們的服務被分解和簡化，以麵包烘焙隱喻的形式呈現給用戶（Brot——德語的麵包）。 我們愛上了他們的導航技術和整個網站上的各種動畫，它們總是讓您處於領先地位，讓您想知道接下來會發生什麼。

作為物理和虛擬之間界限模糊的一部分，潛入並預見電子商務領域的變化是很有趣的。 這有點自相矛盾。 一方面，物理設計正變得高度數字化，但另一方面，一些大膽的電子商務網站暗示了一種感性的、可觸摸的購買體驗。

有充分的理由，我們很多人都喜歡走進一家服裝店，聞到新衣服的氣味，或者試穿一件襯衫並感受面料的柔軟度。 這種網絡趨勢試圖通過交互式產品展示來重現真實的購物體驗，增加另一層維度，使整個購買過程幾乎觸手可及。

即使預算很少，我們也可以嘗試使用 lottie 動畫、旋轉和 3d 動畫來刺激用戶的感官——所有這些都是為了鼓勵用戶探索和參與我們銷售的產品。 這創造了一種強大的、令人難忘的發現產品功能、角度和燈光的感覺，並且具有很好的趣味性。 訣竅是了解您的產品與其他產品有何不同，以及如何讓用戶與之互動。

Grace 是一種營養產品，採用有效的營銷方法。 他們讓用戶通過精心設計的用戶旅程模擬開箱、玩弄包裝和展示產品的體驗，這在實體店甚至是不可能的。

雖然我們距離 AI 技術的早期階段還很遠，但直到最近它才為公眾所接受，而且似乎每個人都在談論它。 在過去的一年裡，我們目睹了幾個似乎改變遊戲規則的在線 AI 引擎的突破。 ChatGPT、dall.e2、Midjourney、Stable diffusion 等引擎以及 deepfake 技術引發了關於我們作為創作者的角色在未來會是什麼樣子的廣泛爭論。

大部分討論都圍繞著這樣一個概念，即 AI 將很快使對創意專業人士的需求過時。 這是一種非常反烏托邦的方法。 事情的真相是，人工智能在目前的狀態下更像是一種供我們使用的工具，而不是未來的替代品。 我們會使用它。

隨著 dall.e2 和 Midjourney 以其令人驚嘆的圖像製作能力的爆炸式增長，我們已經看到這種趨勢在過去幾個月中加速。 最近，將 ChatGPT 引入其中，並且微文案從未如此平易近人。 但重要的是要記住，我們從這些引擎中獲得的結果需要付出努力，就像任何工具一樣，我們掌握得越多，我們的控制力就越大。 讓我們專注於圖像製作。 如果我們以 Midjourney 為例，您可以根據簡單的文本提示輕鬆創建圖像。 這些圖像過去常常需要很長時間才能創建甚至找到併購買其權利。 但簡單的提示只能讓你到此為止。 關鍵是在進行過程中細化您的查詢，重點關注您認為需要改進的領域。 你挖掘得越深，你就會越快地得到想要的結果。

5 月，我們將慶祝 WordPress 誕生 20 週年。 WordPress 的推出引發了一場自身的革命，將網絡創作帶給了大眾。 現在，我們進入了 2023 年——每隔幾週我們就會讀到一個不同的、轟動一時的數字發展。

有時，我們希望像優秀的早期採用者一樣站在技術的最前沿，閱讀一篇文章並學習一種新工具或技術，並與我們的網絡創建者社區分享我們的發現。 但時不時地，即使在這個數字加速時代，我們也更願意跳過學習曲線，依偎在舒適的過去。 我們仍然看到大量 80-90 年代的圖案。 我們發現有趣的是對舊技術的渴望，比如我們家裡的第一台電腦或看起來很笨拙的緊湊型光盤播放器。

因此，對於我們中間的落後者，或那些喜歡 Y2K 的人，我們特別注意拼貼畫、像素化、強烈的色彩、類似 MS-DOS 的 UI 和舊街機遊戲的影響。

Hie 是一家面向內容創作者的人才中介機構。 他們使用懷舊物品，並從當代的角度重新構想它們。 這種嬉戲旨在激發我們的好奇心並吸引我們。

人們的注意力每年都在下降。 我們當然可以將此歸咎於社交媒體、Tiktok 和 Instagram，但我們既是消費者，也是創造者。 鑑於這一現實，UI 不能保持靜態。 Motion 是吸引用戶的絕佳工具，可以提供非常有效和身臨其境的體驗。 在過去的一年裡，我們看到了運動如何讓我們保持參與，讓我們消費更多的內容。 它讓我們作為用戶感覺我們正在以比以前更高的層次和更有意義的方式與網站互動。

我們的用戶習慣於看到像素移動和跳躍； 他們希望得到每一個動作的指示。 這種反饋讓用戶感覺自己是一個積極的參與者，從而讓他們感到在場和專注。 創造這種體驗的一種方法是通過軟滾動動畫，通過在緩入微動畫的部分之間使用浮動視差效果來製作。 另一個例子，我們預計會變得更流行，是超出規範的運動——甚至可以玩弄用戶的平衡感和重力。 我們將看到更多旨在玩轉你的眼睛的動畫或集成視頻，有粗糙的入口動畫、強大的放大、放大、可變字體、旋轉貼紙等。 有時可能會讓人筋疲力盡，但用戶的注意力是如此寶貴，我們將通過任何必要的方式來吸引他們。

Estudios Victor Cordon 是一個支持獨立藝術社區的創意平台。 當您從一個部分滾動到另一個部分時，它們會使用恆定的無縫運動。 需要注意的一點是，我們發現它既美麗又獨特，屏幕上的組件實際上是靜態的，但背景產生的運動給人一種流動性和持續運動的感覺。

與簡潔的設計美學相比，我們看到越來越多的網站通過獨特的排版佈局將邊界推向了邊緣。 考慮到這種設計實踐在背麵包裝、音樂節海報、標籤和標牌等空間有限的媒體上很常見，這種趨勢非常令人驚訝。也許這種趨勢與我們對使用真實材料的設計的渴望有關，這我們放棄了屏幕和交互體驗。

為了吸引註意力，最有趣的是玩排版和網格，同時放棄傳統的網頁佈局，以創造令人難忘的基於文本的觀看體驗。 這些網站傾向於使用帶有野獸派風格排版的大號信箋，這在網絡上通常不使用。 作為這一運動的一部分，我們可能還會看到更多網站的部分只有一個段落，字體大小如此之大以至於佔據了整個部分。 總之，它向頁面添加了一個動態元素，即使它是靜態的。

Parazker 的網頁有很多內容。這個單折本可以很容易地展開成多個摺頁和頁面，但這種呈現方式營造出一種熟悉感，就像包裝上的標籤或條形碼一樣。 這裡的設計者將所有信息壓縮到一個折疊中，以便用戶可以一目了然地查看所有信息。

在現實世界中極端分子的聲音不斷上升的時代，我們有機會在我們創建的替代網絡世界中有所作為。 畢竟，作為網絡創建者，我們是一個大社區。 我們有機會增加更多價值，使萬維網成為一個更美好、更具包容性的地方。

隨著我們社會對數字依賴的增加，自從 Covid19 襲擊以來，用戶花更多的時間上網以獲得最基本的服務。 在開始一個項目時，我們通常會創建一個準確的簡介並根據特定的用戶角色和需求定制設計。 也許今年，我們的新年決心可以嘗試通過他人的眼光看待互聯網——讓所有人都能使用技術，無論他們的能力、經濟狀況、年齡、教育程度或地理位置如何。

這是思維方式的一個小轉變和工作流程的一個小調整。 它從啟動階段開始，負責向客戶介紹可訪問性和相關法律要求。 從早期的簡要階段開始思考，多投入一點時間和精力，有助於塑造網站的設計風格。 我們可以明智地使用顏色和字體大小，以及替代文本，並支持鍵盤導航。 通過這一挑戰的鏡頭進行設計不僅可以創造新的風格和慣例，還可以改變我們體驗整個網絡的方式。

社交媒體具有無限的可能性，但仍有一些局限性； 在您的個人資料中僅共享一個鏈接當然是其中之一。 因此，“生物鏈接”誕生了。 bio 中的鏈接基本上是一個登陸頁面，旨在連接社交、網站、商店、視頻、音樂、播客、活動等。 他們都聚集在這個旨在連接、形成新關係和轉換的頁面中。

隨著越來越多的用戶通過社交媒體訪問，我想到的問題是，您的社交資料和您的網站之間的橋樑應該如何看待？ 它只是您個人資料頁面的擴展嗎？

到目前為止，生物佈局中的鏈接是非常基本的。 尚未完全探索此登錄頁面佈局中隱藏的功能和機會。 類似列表的視圖或畫廊——它們主要設計有大小和​​層次相同的按鈕或照片。 但問題出現了，他們應該是嗎？ 您所有的鏈接都具有相同的權重嗎？

如何將導航方法集成到這些簡單的頁面中？ 我們很可能會在來年看到這個領域的擴展，創作者會提出關於這張數字名片外觀的新願景。

概括