編者按：網(wǎng)頁(yè)依然是一個(gè)值得探討的話題，它們依然非常重要。而網(wǎng)頁(yè)的設(shè)計(jì)趨勢(shì)，和平面、視覺(jué)、APP 的設(shè)計(jì)，也有著極深的牽扯，了解網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)和背后的緣由，也會(huì)對(duì)其他的設(shè)計(jì)有相當(dāng)?shù)慕梃b價(jià)值。資深 UI/UX 設(shè)計(jì)師 Michal Malewicz 對(duì)于設(shè)計(jì)趨勢(shì)一直有很深入的洞察，他的這篇文章總結(jié)了 3 種 2025 年將會(huì)流行的趨勢(shì)，以及 3 種正在消失的趨勢(shì)。以下是正文：
進(jìn)入 2025 年，已經(jīng)出現(xiàn)了一些新的、令人興奮的設(shè)計(jì)趨勢(shì)。我知道我每年都這么說(shuō)，但今年不同。
我將通過(guò)一些范例向你介紹我所觀察到的 3 種主要趨勢(shì)，需要注意的是，其實(shí)中最后一個(gè)趨勢(shì)將成為 2025 年最大的趨勢(shì)！而且和之前兩個(gè)趨勢(shì)的影響力差距很大！
之后，我們將討論 2025 年將消失的三種趨勢(shì)。探索它們可能會(huì)浪費(fèi)你的時(shí)間，所以梳理出來(lái)，讓你有所準(zhǔn)備。值得一提的是，正在消失的 3 種趨勢(shì)的后 2 種特別值得關(guān)注，許多初創(chuàng)公司仍在嘗試這樣做，但是我認(rèn)為這是巨大的時(shí)間和資源的浪費(fèi)！
讓我們從第 1 個(gè)趨勢(shì)開(kāi)始。這個(gè)趨勢(shì)這實(shí)際上并不是什么新鮮的東西，但技術(shù)上，它達(dá)到新的高度。
視覺(jué)上過(guò)于沉重、略顯夸張的網(wǎng)頁(yè)瀏覽體驗(yàn)仍有提升空間。然而，這需要在設(shè)計(jì)師覺(jué)認(rèn)知中的炫酷和客戶感知之下的實(shí)用，兩者之間取得微妙的平衡。
https://paywithpeppermint.com/
精美的動(dòng)畫可以增強(qiáng)體驗(yàn)，如果做得好，不會(huì)讓人感到不知所措，例如上面這個(gè)網(wǎng)站。
這是一個(gè)例子，其中設(shè)計(jì)良好的文案和充足的留白，加上一些微妙的動(dòng)畫（僅具有裝飾性）融合在一起。調(diào)整修改任何文本或者其他視覺(jué)元素都會(huì)是個(gè)壞主意。
如果你自己制作了豐富細(xì)膩的視覺(jué)效果，會(huì)發(fā)揮很好的作用，就像上面這個(gè)例子一樣。
想象一下這個(gè)網(wǎng)站使用 AI 生成的圖片——很快就會(huì)讓人厭煩。同時(shí)，這也證明一些使用了「滾動(dòng)劫持」技術(shù)的頁(yè)面，仍然適用于展示實(shí)體產(chǎn)品。
這個(gè)網(wǎng)站在某些地方做得有點(diǎn)過(guò)頭了，讓人不知所措，但它在有用和惱人之間保持了微妙的平衡。它確實(shí)讓我想要擁有這款產(chǎn)品，但它的滾動(dòng)方向變化也讓我很惱火。
當(dāng)然，蘋果在這方面仍然做得很好，但我注意到的一件事是，他們的產(chǎn)品展示頁(yè)面也被設(shè)計(jì)得更加微妙。他們的 3D 變換和驚艷的效果，仍然令人印象深刻，并且現(xiàn)在蘋果官網(wǎng)在動(dòng)畫設(shè)計(jì)上比以往更少一點(diǎn)。
這種設(shè)計(jì)策略，讓蘋果官網(wǎng)更具可讀性，更容易理解。
這樣的動(dòng)畫對(duì)于大多數(shù)普通企業(yè)來(lái)說(shuō)并不適用，但是豐富的動(dòng)畫對(duì)于動(dòng)畫工作室而言是非常有意義的。
BentoUI 或者說(shuō)便當(dāng)盒風(fēng)格，仍然非常流行，并受到蘋果、三星、Nothing 等知名品牌的推崇。這是一種展示不同類型內(nèi)容的炫酷方式，這些內(nèi)容被組織在形同便當(dāng)盒的容器中，可以指導(dǎo)你如何閱讀它們。
下面是一個(gè)不太好的案例，設(shè)計(jì)師隨機(jī)地將 AI 生成的圖像添加到不同的格子中，只是為了簡(jiǎn)單填充空間，但你可以清楚地看到它圖文之間的割裂。
而好的 BentoUI 在設(shè)計(jì)上要足夠清晰，并確保它在視覺(jué)效果、照片、圖形和文本之間是平衡的。要讓便當(dāng)發(fā)揮作用，它必須在視覺(jué)上做到平衡和恰到好處，內(nèi)容不要太多。
BentoUI 經(jīng)常將美觀的微交互和非網(wǎng)格部分有機(jī)地整合起來(lái)，就像上面這個(gè)網(wǎng)站案例。
它將故事敘述、全屏視覺(jué)與不同媒體類型的便當(dāng)模塊融合在一起。
這可能是我今年最喜歡的 BentoUI 設(shè)計(jì)。它做得非常清晰，同時(shí)內(nèi)容非常翔實(shí)。尤其值得注意的是，這個(gè)設(shè)計(jì)當(dāng)中絕大多數(shù)的便當(dāng)模塊，通常采用優(yōu)雅的平衡，視覺(jué)更重的部分會(huì)搭配著簡(jiǎn)單直觀的文字，而視覺(jué)上復(fù)雜的則更加輕量、 扁平，這就是 BentoUI 的正確平衡模式。
你還可以使用非統(tǒng)一的便當(dāng)盒來(lái)展示較大產(chǎn)品的范圍（例如其功能）。 Chronicle 在上面的部分中做得非常好。但請(qǐng)注意，大多數(shù)卡片上的文本都是靜音的（因此不會(huì)太顯眼/太過(guò)壓抑），而且大多數(shù)卡片都沒(méi)有復(fù)雜的圖像。
這是便當(dāng)格的正確平衡。
敲黑板：注重轉(zhuǎn)化率的傳統(tǒng)排版，這才是 2025 年的趨勢(shì)！
與讓設(shè)計(jì)師垂涎于精美的過(guò)渡不同，2025 年最重要的設(shè)計(jì)趨勢(shì)實(shí)際上是專注于將訪客轉(zhuǎn)化為付費(fèi)客戶的有效設(shè)計(jì)。這是因?yàn)?，在?dāng)前的經(jīng)濟(jì)形式下，居家辦公和在線經(jīng)濟(jì)已經(jīng)結(jié)束，企業(yè)需要重新?tīng)?zhēng)取客戶的關(guān)注，需要貨真價(jià)實(shí)的效益！
而注重轉(zhuǎn)化率的排版布局，它們不必看起來(lái)都一樣，但是所有的這類案例，都清楚地表明了它們的主要焦點(diǎn)是什么。這太棒了！
以下是今年我最喜歡的一些例子：
它采用了經(jīng)典的網(wǎng)站結(jié)構(gòu)，左對(duì)齊的標(biāo)題，消除疑慮、明確標(biāo)記的操作指引。它摒棄了特效，而是追求更清晰的表達(dá)——它解決了什么問(wèn)題？如何解決？就是這個(gè)。就像這樣。
這個(gè)網(wǎng)站也是，使用簡(jiǎn)潔明了的文案，下方帶有 CTA 勾選標(biāo)記，減少障礙。有免費(fèi)試用，你可以在提交之前觀看內(nèi)容演示！
而這個(gè)網(wǎng)站則是以故事為導(dǎo)向、引人入勝的示例，它使用視覺(jué)效果來(lái)放大消息傳遞，并完全準(zhǔn)確地傳達(dá)消息傳遞。在設(shè)計(jì)中，它沒(méi)有采用的「滾動(dòng)劫持」這樣的「技巧」。
盡管它用了動(dòng)畫，但并不會(huì)讓人感到壓抑。它確實(shí)成功地講述了為什么你應(yīng)該使用它。
Buffer 還很好地使用了 CTA 按鈕，減少用戶的顧慮，并在側(cè)面提供了明確的視覺(jué)效果呈現(xiàn)，僅顯示了幾個(gè)主要的指標(biāo)。
2025 年設(shè)計(jì)師應(yīng)該將重點(diǎn)放在這樣的網(wǎng)站上，做的東西足夠清楚，加載速度夠快，沒(méi)有太多浮夸的裝飾。務(wù)實(shí)的方法是 2025 年發(fā)展在線業(yè)務(wù)的關(guān)鍵。用戶沒(méi)有時(shí)間探索大多數(shù)網(wǎng)站上的「世界」，他們想盡快搞定事情。
現(xiàn)在讓我們來(lái)談?wù)勅N正在消失的設(shè)計(jì)趨勢(shì)。第二和第三種趨勢(shì)的消失尤其讓我高興！
粗野主義曾風(fēng)靡一時(shí)，但并未大范圍流行起來(lái)。只有少數(shù)大型網(wǎng)站采用過(guò)這種風(fēng)格。其他網(wǎng)站有的只是在重新設(shè)計(jì)的時(shí)候偶爾采用。如果產(chǎn)品采用這種風(fēng)格，很難讓人覺(jué)得專業(yè)。Figma 和 Gumroad 可能是唯一仍在這樣做的大品牌。
這里有一些很好的例子，比如 Shader 。它符合 APP 的概念，有著瘋狂、豐富多彩的疊加層。如果你從事視頻和貼紙相關(guān)的業(yè)務(wù)，你可以考慮使用這種風(fēng)格。但粗野主義，或者新粗野主義，對(duì)大多數(shù)品牌來(lái)說(shuō)并不適用。
過(guò)多的動(dòng)畫、交互性元素和裝飾，會(huì)很快就會(huì)讓人厭倦，并降低轉(zhuǎn)化率。例如，Linear 今年縮減了其網(wǎng)站的信息量，盡管其舊網(wǎng)站深受設(shè)計(jì)師的喜愛(ài)。他們的新網(wǎng)站更簡(jiǎn)單，轉(zhuǎn)化率可能更高。
我們回到了網(wǎng)站加載速度更快，并且不會(huì)讓過(guò)多的動(dòng)畫令用戶感到不知所措。
以下是一些設(shè)計(jì)內(nèi)容信息過(guò)載的例子。在所有這些例子中，形式都遠(yuǎn)遠(yuǎn)超過(guò)了功能，以至于用戶在被信息轟炸了一段時(shí)間后，根本不關(guān)心網(wǎng)站到底有什么。你可以滾動(dòng)著頁(yè)面享受視覺(jué)內(nèi)容，僅此而已。
https://motchiri.com/collection/hello-world
這種體驗(yàn)很美妙，一切都感覺(jué)很好，但我認(rèn)為作為一個(gè)網(wǎng)站，它失敗了——你像兔子一樣穿過(guò) 3D 景觀，新鮮感很快就消失了。這是一個(gè)假裝網(wǎng)站的游戲。
這個(gè)網(wǎng)站肯定是在專業(yè)的藝術(shù)指導(dǎo)監(jiān)督下完成的。但與此同時(shí)，它們又過(guò)于夸張，除了一些自命不凡的設(shè)計(jì)師外，它不會(huì)吸引任何人。是的，很漂亮，非常漂亮，但僅此而已。
這個(gè)網(wǎng)站也確實(shí)很漂亮、很復(fù)雜、很有藝術(shù)感，完全讓人無(wú)法抗拒。但是它只能給設(shè)計(jì)師留下深刻印象，不一定能打動(dòng)客戶。
?
乍一看，這是一個(gè)漂亮的網(wǎng)站，但即使在我的 M1 Pro 芯片的 MacBook Pro 上打開(kāi)，它的加載速度也非常慢，完全破壞了體驗(yàn)。
社交媒體上隨處可見(jiàn) AI 生成的背景。
它讓我想起過(guò)去彌漫設(shè)計(jì)圈的「晃眼 Dribbble 綜合癥」，但那時(shí)候制作那種扎眼的背景至少需要相當(dāng)?shù)脑O(shè)計(jì)技巧才能實(shí)現(xiàn)?，F(xiàn)在任何人都可以輸入提示，粘貼相同的標(biāo)題、相同的內(nèi)容和按鈕，并將其稱為「設(shè)計(jì)」。
然后我們得到了相當(dāng)愚蠢的概念，比如到處都是云，一些隨機(jī)排布的光影和斑點(diǎn)?；蛘吒婀值膭?dòng)漫式插圖。其中 99% 與產(chǎn)品或服務(wù)無(wú)關(guān)，只是看起來(lái)不錯(cuò)。
好消息是，現(xiàn)在使用這些技術(shù)來(lái)構(gòu)建的真正網(wǎng)站很少。它們?nèi)匀皇歉拍钤O(shè)計(jì)或無(wú)代碼設(shè)計(jì)的模板。
玻璃擬物化、超大字體等元素當(dāng)然是網(wǎng)頁(yè)設(shè)計(jì)的自然組成部分，只是它們不再是潮流，而是常態(tài)。不過(guò)，如今趨勢(shì)變化，大多數(shù)企業(yè)不再追求光鮮亮麗，而是追求轉(zhuǎn)化率。他們跟蹤轉(zhuǎn)化，進(jìn)行優(yōu)化、改進(jìn)和簡(jiǎn)化。
網(wǎng)站的加載時(shí)間再次變得重要。設(shè)計(jì)清晰，保留留白，刪除雜亂和無(wú)用的裝飾。當(dāng)然，現(xiàn)在仍有創(chuàng)新的空間，只是對(duì)于 99% 的企業(yè)來(lái)說(shuō)，這從來(lái)都不是正確道路。網(wǎng)站應(yīng)該功能齊全、易于瀏覽、易于理解、美觀大方，按這個(gè)優(yōu)先級(jí)來(lái)進(jìn)行設(shè)計(jì)。
我很高興看到「轉(zhuǎn)化率」成為 2025 年設(shè)計(jì)的主要指標(biāo)。
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。
繼續(xù)閱讀本文相關(guān)話題
發(fā)評(píng)論！每天贏獎(jiǎng)品
點(diǎn)擊 登錄 后，在評(píng)論區(qū)留言，系統(tǒng)會(huì)隨機(jī)派送獎(jiǎng)品
2012年成立至今，是國(guó)內(nèi)備受歡迎的設(shè)計(jì)師平臺(tái)，提供獎(jiǎng)品贊助 聯(lián)系我們
品牌形象設(shè)計(jì)標(biāo)準(zhǔn)教程
已累計(jì)誕生 726 位幸運(yùn)星
發(fā)表評(píng)論 為下方 11 條評(píng)論點(diǎn)贊，解鎖好運(yùn)彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評(píng) ↓