# 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/)