---
# System prepended metadata

title: 2024網頁設計趨勢

---

# 2024年網頁設計的9大趨勢
### 讓世界頂尖設計師告訴你

[資料取自WixTW連結](https://www.wixtw.com/post/2024-9-web-design-trends)

2024年在受到社群媒體和AI人工智能的影響下，Z世代(GEN Z)風潮將佔據主導地位，不同於Y世代主流的極簡主義風格，網站設計趨勢將逐漸被Z世代更具多彩、豐富、充滿流行文化氛圍的風格所取代。

### 1.千禧年 (Y2K) 美學風潮將持續發燒
疫情像是一台時光機，將我們帶回Y2K
雖然Y2K風格美學已在2023年於網頁設計趨勢中回歸，但這股風潮將在2024年持續發燒。視覺設計將呈現出2000年代初期的科技感，以及和未來主義(optimistic futurism)中那些吸睛且鮮明的色彩，以明亮色、撞色，例如：鮮豔的粉紅色、金屬色、紫色和黃色，以及Flash動畫和低保合感的圖案為特色。

Y2K是"Year 2000" 的縮寫，也就是西元2000年的意思。以及那個時代背景所帶起的一種時尚風潮──「Y2K風格時尚」

***[網站位置](https://aroke01.com/)
![001](https://hackmd.io/_uploads/H1vRM8JmR.jpg)



### 2.紋理的運用 (Designs with texture)
在這個特別追求快速的時代，過去幾年網頁設計風格大多使用柔性、講求觸感的設計元素。由於技術的發展和2024年的風行的「More-is-more」極繁主義精神，帶有紋理的文字、抽象圖形和背景，將被廣泛運用在網頁設計中。

雖然在去年，我們已經看到許多金屬材質、液態質感的元素在網頁設計中被運用，但這一趨勢在今年2024年爆發，我們將會看到更多類似動物毛皮、液化玻璃和Q彈柔軟(Squishy Branding)等紋理風格，或是像藝術家Yonk在的Wix系列透明影片中展示的那種模塑風格，甚至是像Meta和Sprite品牌合作的設計風格將被廣泛運用。

或許是受到後疫情時代的影響，這種更有形、更有實感的網頁互動需求會大幅提升。我們將會看到更多千禧年(Y2K)初期流行文化元素：像是熔岩燈、尼克兒童頻道的GAK，以及曾風行一時的“毛絨幸運兔腳鑰匙圈"...等等具備Y2K那個時代的流行文化特色。


***[m-trust](https://m-trust.co.jp/)
***[網站位置](https://www.editorx.com/transparent-videos/artists/yonk?_gl=1*l708he*_ga*MTkxNjQ0NDI4MS4xNzA0MjczNDkx)
![003](https://hackmd.io/_uploads/Sku3VIyQR.jpg)



### 3.極繁主義再次回歸 (More-is-more)
依我筆者的觀察，在經歷了一段時間的「極簡風」網頁設計後，更多的設計師或品牌正轉向「極繁主義 (More is more)」風格。Huri提到：「如果說2023年是簡潔設計為主的一年，那麼2024年則將成為大膽設計的一年。」

網頁設計趨勢將變成：你將看大量資訊集中於單一版面，明亮而風格強烈的排版上，放置大量不對稱的元素、或者強烈的顏色或材質被運用。

如果你正在尋找的「極繁主義 (More is more)」設計靈感，或許可以參考Starface網站這樣鮮明與大膽的設計風格：他們使用了柔和圓角搭配鮮明霓虹色，運用90年代風格的排版使視覺形成強烈對比。從目前的趨勢來看，設計師們好比像是在透過"刺激"的方式，將我們從過去幾年單調的疫情生活中喚醒。

***[Starface](https://starface.world/)

![004](https://hackmd.io/_uploads/rJfuSLJXC.jpg)

***[劇場アニメ『KILLTUBE』](https://www.killtu.be/)
CHOCOLATE Inc.推出劇場動畫《KILLTUBE》
***[standfoundation](https://www.standfoundation.jp/)
是一家創意工作室，站在現在與未來的邊界上，在現實與虛擬之間進行設計。
直到人類創造力被人工智慧擊敗的那一天。充滿樂趣地應對每一個挑戰，刺激血液和細胞的創意
繼續生產。
[shinyaokano](https://shinyaokano.jp/)
Shinya Okano，一名藝術總監/視覺設計師。專注於激發美感和情感的設計



### 4."反"設計的網頁設計 (Anti-design web design)
Kadussi說：「設計師們開始擁抱"違反設計原則"的風格——歡迎來到反設計的新世界！」

無論是氣候、地緣政治變化還是工作所帶來的種種不確定性，過去幾年我們就如同生活在一個充滿不確定性的時代。反設計的風格起源於粗獷主義(Brutalism)，特質是「打破常規的設計原則，重新呈現生活周遭的混亂感，散發強烈的觀察性陳述」。這種設計趨勢的特點是強烈、更具視覺衝擊感，呈現出破碎和不成比例的視覺體驗：像是衝突的紋理、撞色、重疊元素、大字體或是不對稱、無結構的佈局。

由於設計師嘗試使用"反設計"來突破創意的界限並吸引新的受眾群，但這種搶眼的風格並不適合所有網站或品牌。Kadussi指出：「反設計的風格並不適用像是電子商務，這種高度依賴特定的網站架構和用戶流程的網站。」，反設計的風格可能會反而會降低使用者吸引力。但是，若是你正在打造作品集、活動或特殊主題的網站，反設計或許可以幫你傳達更深層的含義。


我們將消除與勞動有關的社會問題，創造一個每個人都可以按照自己的方式工作的社會。
https://recruit.smarthr.co.jp/

活動網站
https://featuredprojects.jp/

Kurt Champion的反設計手法創造了一個令人驚艷的互動體驗。
https://kurtchampion.com/
https://www.youtube.com/watch?v=YDfk4ibAGsE

紐約時報，就利用這種反設計風格在其網絡專題中，生動地描繪了持續的氣候災難所帶來的混亂和破壞感。
https://www.nytimes.com/2022/11/10/magazine/natural-disaster-rebuild.html



### 5.多巴胺色系的運用 (Dopamine-inspired colors)
去年的網頁設計趨勢主要還是以大地色系為主，但今年將是原色及霓虹色系的天下，所有的設計都將洋溢著鮮豔的色彩，引領我們進入一個充滿活力的世界！你將會看到大量的土耳其藍(Turquoise)、霓虹綠(Poison Green)和霓虹桃粉(Valentino Pink)等醒目的色調被運用，對色彩的大膽強化，充分體現了「極繁主義 (More is more)」的設計趨勢。

色彩疊加&漸變搭配圖像運用，都是將多巴胺的色彩融入網站設計的好方法。為網站注入多元、衝突的色彩，能夠營造出一種既酷又有點粗獷的氛圍，這種風格非常適合吸引追求潮流的Z世代。我們可以嘗試使用不同材質的元素裝飾同一頁面，或者在文字段落、標題和CTA中，更大膽地運用多樣化的色調。

**大眾普遍認為多巴胺是產生愉悅的物質。

![008](https://hackmd.io/_uploads/Bk7YEDk70.jpg)

***[潛能開發課程網站](https://talent-life.jp/)
***[cielia-房地產公司](https://www.cielia.com/m/special/journey/)
***[多巴胺穿搭是什麼?](https://www.harpersbazaar.com.hk/fashion/dopamine-dressing-updated)


### 6.圓角的運用 (Rounded corners)
自從蘋果在iPhone的用戶介面和應用程式設計中加入圓角以來，這種設計元素就開始普及，甚至連最小型的電商網站和部落格上都可以看到這種設計風格。圓角設計的應用可以輕鬆地融合進本篇文章中提到的其他設計趨勢。你可以將圓角設計與Y2K風格做搭配，為網站增加柔和、夢幻的氛圍；或者用它來與粗獷主義(Brutalism)的強烈風格形成鮮明對比；甚至可以用圓角對極繁主義 (More is more) 帶來的強烈風格感做平衡。
![007](https://hackmd.io/_uploads/SkUQXDyX0.jpg)

#### Valuens Group-價值設計師
我們的工作是探索真正的財富並擴大客戶生活的可能性。
https://recruit.valuence.inc/
#### askphill
https://askphill.com/


### 7.AI生成的元素 (AI-driven content)
2022年開始，AI人工智慧工具迎來了一場的爆炸性的成長，同時也帶來了一定程度的恐慌。當它剛出現時，大家不禁都在想：設計師會不會被取代呢？隨著世界開始廣泛使用這些工具，雖然人工智慧能在幾秒內創造出創新的圖像，但人類仍需提供給它初步的創意概念。我們的設計專家預測，在2024年，AI人工智慧將不會取代設計師，反而會為他們開啟許多新的可能性。不過，關鍵在於設計師必須加強他們與AI的語言溝通技巧，讓AI工具更精準地實現他們的創意構想。

![005](https://hackmd.io/_uploads/HkqpKU17C.jpg)

Kadussi指出：「未來，設計界將需要對攝影、平面設計和網頁設計等領域的專業術語進行統一及標準化，以便更有效地指導AI工具的學習與發展。」



### 8.真實、無濾鏡的圖像 (Real, unfiltered imagery)
即使人工智慧和虛擬實境技術蓬勃發展，用戶還是渴望看到像是在TikTok和BeReal這樣的平台上所提供的更真實、坦率的內容。人們想要看到更真實的人物形象和未經修飾的原始圖像，這意味著減少過度修飾和設計。“圖像的重點將不再僅僅是創造一種‘氛圍’，而是更深入地與故事產生連結。

![006](https://hackmd.io/_uploads/B1Ls5Ik7R.jpg)

Lauren Z Marsau在她的作品集網站上大量使用無濾鏡的圖片，敘述了一個令人印象深刻的故事。
***[網站位置](https://laurenzmarsau.com/)

***[Guy Bourdin](https://bourdin.tilda.ws/)
蓋伊·伯丁 (Guy Bourdin) 
法國攝影師和藝術家以其挑釁性而聞名作品


### 9.滾動&觸發式動畫 (Scroll and trigger-based animations)
2022年開始，網站設計中可以看到使用滾動效果來創造非傳統的佈局，讓用戶有沉浸在故事中的感覺，也為網站帶來更多樂趣。隨著用戶的注意力越來越短暫，我們將需要在網站設計中加入更多動態元素來讓用戶保持興趣。2024年開始，這種互動式網頁設計趨勢將晉升到下一階段，更頻繁地使用小巧、有趣的元素來吸引用戶。

![662917634fa9b100039152](https://hackmd.io/_uploads/Hyo0TLJQ0.jpg)

***[Unfold](https://mewsunfold.com/)
Unfold 是由 Mews 主辦的年度酒店技術論壇。 第五屆大會將匯集數百位業界最具啟發性的創新者、遠見者和思想家來到阿姆斯特丹的 Muziekgebouw。

***[Bemo studio](https://www.bemo.studio/info)
創造藝術來形象化看不見的世界，激發好奇心和想像。我們對設計充滿熱情，並有目的地傳達敘事。我們的方法是由這種堅定的願景塑造的，從而形成了一個強大的多媒體創意工作室。

[pedenmunk](https://www.pedenmunk.com/)
Taylor Peden 和 Jen Munk-vold 位於紐約的導演/攝影團隊。 畢業於藝術中心設計學院。 PEDEN+MUNK，Jen Munkvold 和...的充滿活力的二人組

[pagebuddy](https://pagebuddy.app/)