在2023年末，Wix Studio预测新一年的网页设计将反映出新兴技术的发展趋势，既会迎合这些技术，也会有所回退。2024年确实如他们所料。
我们看到极简主义设计风格在屏幕上巩固了它的地位，用户继续将传统网页设计原则与Y2K设计风格和早期网页设计的怀旧情感融合，以寻求更多的差异化。
然而，也有更多回归手工元素和“反设计”极简主义的趋势，这表明了对涌入我们屏幕的AI生成内容浪潮的抵制。
以下是对2024年网页设计趋势的更新，包括如何将这些趋势融入到你的工作中。
01. 超现实主义
超现实主义模糊了现实与模拟之间的界限，使得模拟版本看起来比现实本身更真实或更具冲击力。这个概念由让·博德里亚提出，通常适用于媒体、艺术和文化领域，在这些领域中，模拟的体验可能比真实体验更引人入胜。
这一趋势随着AI的全球崛起变得尤为显著。过去两年，Google Trends数据显示，搜索“AI设计工具”的次数增加了1700%，而“生成式AI”的搜索量则激增了8500%。
然而，AI仅是推动这一趋势的一个方面。设计师和创作者们正在不断突破界限。例如，TikTok上的NPC角色、MSCHF的病毒级大红靴、Brompton House的可点击互动零食，以及Superorganism的雾气动画覆盖，仿佛将观众带入虚拟热带雨林。MSCHF的网站也充满了超现实的灵感，特别是在他们的商店部分中，扭曲的视频横幅和动画元素。
顺应趋势
▪**互动3D元素：**集成用户可以操作的互动3D元素，比如可点击的对象，每次互动时可以改变状态或外观，从而创造更具沉浸感的体验。
▪ **超现实动画 ：**使用能够改变数字环境感知的动画，如覆盖层或动态变化的背景，来营造沉浸感和异世界感。
▪ **意想不到的设计特色：**引入富有趣味的设计特征，如扭曲的视频或动画元素，来惊喜和吸引用户，使在线体验更具动态性和趣味性。
02. 人性化设计
一些设计师通过手工插图和手写字体，为数字化的世界注入了一丝温暖和人性化。
例如，Dinner Ladies 的精美脚本字标与模仿手绘点画和阴影线条技术的彩色艺术相结合。Earth Alliance 的 Delicious Nuggets 也采用了松散的铅笔素描风格手绘插图。抗炎食品品牌 Superkeen 也运用了类似风格，为其充满幻想的卡通吉祥物的轮廓添加了细腻的渐变。这些独特、不完美的线条和有机质感的定制视觉效果，与我们每天看到的精致数字图形形成了鲜明对比，使这些网站更具亲和力和亲近感。
顺应趋势
▪ **手绘插图：**使用可见纹理和有机线条的手绘插图，增加个人化触感。考虑将这些插图融入到主视觉图像、图标或背景中，让网站更加引人入胜。
▪ **手写字体：**将手绘插图与手写字体搭配，提升手工感。使用手写字体作为标题或关键文本元素，营造温暖和亲切的美感。
▪ **细腻渐变和层次感：**为插图添加细腻的渐变和层次感，使其看起来更具动态和层次。这可以让角色和元素更为突出，增加设计的丰富度。
03. 极致粗野主义
粗野主义网站设计已经存在多年，但在2024年，这一风格出现了升级版，将粗犷的极简主义原则与精致的美学相结合。饮料品牌如 Iessi 和 Sar Studio 展示了高端摄影与实用字体及显著网格线的结合。Family Type 则在深色背景下使用了创意滚动效果。
顺应趋势
▪ **简约至上：**坚持使用有限的色彩调色板，比如黑白色加上一种大胆的颜色，如红色。
▪ **在限制中创新：**通过增大系统字体如 Times New Roman 或 Arial 的字号，赋予它们更多的视觉冲击力。
▪ **用高影响力的摄影提升实用主义：**通过融入高质量的摄影作品，将功能性和极简设计提升到新的视觉深度和情感层次。
04. 互动趣味
在当下这个艰难的时代，融入一些趣味性的设计显得尤为重要。通过出其不意的动画效果和富有趣味的滚动或悬停效果，可以在不让人感到过于繁杂的情况下，为观众带来愉悦的体验。
例如，越南咖啡品牌 Fat Milk 将其抽象的logo转化为一个动画效果，展现出类似于奶油滴落的白色空间扩展。Welch’s Fruit Snacks 也通过浮动的3D元素来增加趣味性，这些元素在滚动时会移动和改变尺寸。设计师 Bruno Simon 将趣味提升到全新层次，他创建了一个3D世界，观众可以通过操控小车在其中导航。对于这一趋势的更为低调的例子，可以参考 Apple 的 AirPods Max 网站；其细腻的滚动动画在不分散注意力的情况下增加了互动性。
顺应趋势
▪ **使用细腻动画：**整合能够增强体验的网页动画，如滚动效果或细腻的悬停动作，为用户添加互动性，但避免让动画效果过于压倒性。
▪ **中性色基础：**使用中性色（如白色、灰色和米色）保持整体设计的干净，让互动元素更为突出。
▪ **大胆展示字体：**使用大胆的展示字体来突出标题和辅助文本元素，创造最大视觉冲击力。
05. 数字可持续性
数字可持续性不仅仅是一种具体的美学风格，更是一系列实践方法，旨在确保你创建的数字作品对环境的影响最小。互联网及其背后的所有系统占全球排放量的约3.7%，这一比例与航空业相当。让这个数字沉淀一下。
如果你希望创建一个环保的网站，减少能源使用是可持续网页设计的重要部分。设计师通过简化代码、减少HTTP请求和优化图像来提高网站的效率，从而加快加载速度。
这些做法还可以改善网站的可访问性，因此你不仅在创建对环境更友好的网站，同时也在为用户提供更好的体验。
C40 Cities 最近采用了生态设计实践重新设计了他们的网站，成功将每次主页访问的CO2排放量从6.7克减少到0.34克，相比重新启动前减少了90%以上。此外，该网站在Google Lighthouse的可访问性评分中获得了98%的高分，页面加载时间也缩短至1.2秒。添加黑暗模式切换按钮也提高了能源效率和可访问性。Re-scripted 和 Perpetuum 都展示了黑暗模式的创意使用。Royalties团队在设计2024巴黎奥运会标志和定制字体时，创建了一个可变字重字体，并为移动用户实现了黑暗模式选项。
顺应趋势
▪ **使用节能字体：**选择系统字体或可变字体，而非定制网页字体，以减少HTTP请求次数并提高加载速度，从而降低能源消耗。
▪ **选择暗模式：**实施暗模式设计或使用深色背景配以高对比度字体，避免使用纯白色背景，因为在OLED屏幕上，深色像素消耗的能源较少，并且对有视觉障碍的观众更为友好。
▪ **测试设计：**无论是设计新网站还是修改现有网站，都可以通过Website Carbon测试网址，计算你的碳足迹，验证网站是否使用绿色主机，并确保内容加载高效且对所有用户可访问。
06. 极繁主义
迪特尔·拉姆斯曾 famously 说过“好的设计是尽可能少的设计。”但极繁主义者却不同意。如果要提到2023年网络设计的一个主流趋势，并且在2024年持续升温，那就是极繁主义。设想一下：大尺度的宏观摄影、刺激多巴胺的色彩、富有表现力的排版以及强烈的视觉观点。
我们一直在等待极繁主义达到市场饱和的巅峰，但到目前为止，客户和消费者似乎对这种“越多越好”的风格情有独钟。它在各个领域都有吸引力，尤其是对于快消品、食品饮料和面向年轻受众的新兴品牌的网络存在。例如JKR重新设计的主流苏打品牌Fanta；明星厨师Molly Baz网站上活泼的主色调和粗体大写字母品牌；Playlab Inc.设计的新书《More is More》；以及Collins对Disney旗下流媒体服务Freeform的新诠释。
这一趋势还催生了多种小型识别子趋势，包括传统复兴和80年代灵感的复古魅力。
顺应趋势
▪ 粗体字体：使用大型、醒目的字体来突出标题和关键信息。搭配鲜艳的色彩，打造视觉冲击力。3D字母效果也会引人注目。
▪ **鲜艳色彩调色板：**在背景、按钮甚至文本高亮部分使用一系列明亮、对比鲜明的颜色，以创造充满活力和能量的外观，或者使用从霓虹粉色到电光蓝 的渐变色来突出标题和重要文本元素。
▪ **增加比例：**超大号的文本和图像能为最基本的字体增添戏剧感。尝试将按钮设计得更大，或在网站页脚中将标志放大，填满整个屏幕的宽度。
07. 文化遗产复兴
这种极繁主义的设计子趋势借鉴了17世纪和18世纪巴洛克及洛可可艺术运动的奢华、装饰和微小细节。更广泛地说，它源于一种不那么通用、数字优化的视觉遗产。这种复兴的实现部分得益于技术的进步，如今的高分辨率和更大屏幕尺寸可以支持更多视觉细节。
2023年2月，Burberry的品牌重塑是这一趋势获得关注的早期信号。该品牌复兴了其钴蓝色衬线字标和122年的骑士徽章，突破了奢侈时尚界无衬线字体的潮流。这一举措曾是设计Twitter（现为X）上的热门话题。
顺应趋势
▪ **古典字体：**选择如Garamond或Caslon等字体，因其历史意义和复古感，或者选择具有装饰性的字体包，带有特殊字形和矢量元素，以创建独特的字母组合标志。
▪ **丰富的宝石色调与柔和的中性色：**如酒红、海军蓝和翡翠绿等色彩与奶油色、灰褐色和古董白色背景搭配，能增添优雅感。
▪ **图案与插图：**寻找复古花卉图案、装饰性边框或Toile De Jouy图案，以增加装饰元素，唤起过去的奢华感。
8. 80年代的奢华
另一种极繁主义的衍生趋势传达了80年代和早期90年代的奢华和排他性视觉风格。成功的创业公司如防晒品牌Vacation、“会员专享”酒庄Rochambeau Club以及设计友好的$1,500酒柜品牌Rocco，都体现了这种风格。
这种设计方法运用了几种常见的元素，比如颗粒状背景纹理、柔和的单色渐变以及大量使用复古摄影和造型。它还采用了老式杂志排版技巧，如细线条图案和带边框的图像。字体选择上也充满复古感：寻找中性半衬线体或细衬线体，搭配次要的手写体。
但复古魅力不仅仅体现在80年代的印刷媒体。百事可乐在其125周年庆典上重新演绎了1980年代中期的视觉识别，采用了麦当娜的复古片段，而护肤品牌Billie则在最近的数字营销活动中融入了过去的俗气夸张的电视购物风格。
顺应趋势
▪ **颗粒状背景纹理：**在背景中添加颗粒状纹理，以营造复古感。
▪ **柔和单色渐变：**使用温和的渐变色，如粉色到浅桃色，以增添复古氛围。
▪ **杂志排版技巧：**用细线条框住图像，并使用带边框的区域来增加设计感。
▪ **复古字体：**将紧凑的衬线字体与中性无衬线字体搭配，以平衡夸张的视觉效果与可读性。
09. 拨号设计
早期的互联网时代充满了怀旧感，那时候有更多小众的在线社区，品牌指南也较少。如今，网页设计师们正在重新探索这种早期的实验精神，运用低保真社交资产和Y2K风格的回顾元素来进行设计。
可以参考一些主要机构的社交素材，如Droga5和Wieden + Kennedy；刚刚上线的互联网文化网站Byline；新兴的以MySpace为灵感的Gen Z应用NoSpace；以及为“常在线”用户提供内容的女性创办媒体公司Boys Club。不得不提的还有Charli XCX的专辑《Brat》，其低分辨率无衬线字体配上激进的亮绿色背景，正是拨号设计美学的巅峰。这一切都是Y2K风潮的一部分，预示着这一设计风格将在明年继续流行。
如今，一个优秀的迷因也可以作为设计资产，尤其是针对年轻的千禧一代、Z世代和Alpha世代。例如，可以关注Seamoss Girlies（Z世代的反Goop品牌）、之前提到的Boys Club、社交驱动的晨后药品Julie和消息应用Ghost等社交媒体账号。而在Instagram上滚动浏览，就能看到这一趋势的真实体现。
品牌也通过运用低保真设计元素来迅速响应网络上的短暂趋势。一个意外的例子是Celestial Seasonings，这家经典的90年代茶叶公司将其Sleepytime Bear吉祥物转化为今年的迷因，并通过在官方账号上大量使用这一网络名人图标来加以利用。
顺应趋势
▪ 像素化字体： 使用像素字体，如Press Start 2P或Neue Pixel Grotesk，以模拟早期网页设计的低分辨率文本风格。
▪ 明亮且冲击力强的颜色： 选择包括明亮霓虹色和对比背景的色彩方案，例如黑色配亮绿色或蓝色配粉红色 ，以反映90年代网站的生动且有时冲突的色调。
▪ **早期互联网用户界面：**采用复古风格的按钮，带有浮雕和阴影效果，使用大块头的按钮并配有粗体大写字母。融入动画GIF和拼贴背景图像，呈现真实的怀旧风格。
10. 复古未来女性风
这个趋势专为“Dollz”设计。互联网变得越来越可爱，得益于受Kawaii（日本可爱美学）启发的网页设计。它充满了极具女性气息的闪耀装饰，以及心形、蝴蝶结和蝴蝶等元素。这一趋势与如芭蕾核心和小巧核心的时尚潮流交织在一起，同时也与设计师如热销级别受欢迎的Sandy Liang的女性时尚一同流行。
2023年，女孩风格和女性化设计作为传统企业网页设计的有力对抗重磅回归，这也表明消费者，尤其是年轻人，已经厌倦了老旧的无衬线字体。正如创意咨询公司Digital Fairy所解释的，早期互联网的创意表达，如Myspace、Tumblr和Blingee等网站上的风格，依然在今天的设计师中引起共鸣，他们将继续在2024年中运用这种可爱风格，为希望迎合年轻、在线活跃用户的客户服务。
顺应趋势
▪ **Y2K字体：**使用未来感字体，如Orbitron或Space Mono，并结合复古迷幻字体，如Cyber Angel，创造出既怀旧又现代的视觉效果。
▪ **柔和色调：**融入薄荷绿、婴儿粉和柔和的薰衣草色等柔和的粉彩色调，并用银色或玫瑰金等金属色点缀，增添未来感。
▪ **装饰按钮：**设计按钮时，可以结合霓虹光效或闪光效果，并使用复古灵感形状，如圆角矩形或药丸形状，来融合旧与新。
精选文章：