2024年网页设计趋势预测如何？

Vũ Khôi

Wotech Electronics 博客作者

关于 2024 年网页设计趋势——步入 2024 年，年初正是我们为新事物预留时间的时刻。这也非常适合设计师群体唤醒我们内心的"艺术之魂"。闲话不多说，快来和 Markdao 一起浏览 2024 年的 UX/UI 设计趋势吧，说不定您就能为自己接下来的网页设计项目"迸发"出一个绝妙的点子呢！

每年，我们都会整理一系列不仅美观，而且贴近设计师群体、可供其借鉴并加以发展的新设计趋势。每到时节，每年都会有 2024 年的设计趋势以及 website inspiration（网站灵感）由 Markdao 汇总更新。无论您喜欢还是讨厌它，实际上总有一些聪明而实用的设计潮流。这些设计功能可能包括在更小的空间里承载更多信息，乃至与用户建立更多互动。

‍

快来和 Markdao Agency 一起看看 2024 年那些依然存在并正在互联网上占据主导地位的网页设计趋势吧！

2024年网页设计趋势：需要关注正在并将统治市场的变化

1. 便当盒趋势（Bento Boxes）——不只是儿童午餐盒

便当盒是午餐盒文化乃至日本文化中不可或缺的美食。日本人以井然有序地收纳食物、保持一切整洁而闻名。

图 1 - Bento Box 风格的设计趋势

‍

我们永远不会知道是谁想出了这个点子，不过便当盒在屏幕上呈现出极佳的数字化效果，就像它们把食物装进盒子里一样。

Bento 是另一种2024 年网页设计趋势，开始在 Dribbble 和 Behance 等平台上掀起热潮，吸引数百万设计师追捧。然而，这种"模块化"设计概念最早起源于网站的仪表盘。这包括 PayPal 等销售和财务仪表盘、Google Ads 等分析工具等许多应用。

您还记得 Windows Phone 和 Lumia 吗？嗯，它们使用的用户界面（UI）本质上就是 Bento 设计的早期迭代。后来，Microsoft 也在 Windows 8 中将这一概念应用到了桌面 Windows 的开始菜单中。

图 2 - Win 8 上的 Bento 设计风格

‍

尽管各行各业都在使用，但当 Apple 决定首次采用 Bento 网格时，Bento 风格的 2024 网页设计趋势彻底爆发。起初，他们将其用于 iPhone 产品页面，但随后迅速扩展到 Apple 的活动演示和发布会页面中。

图 3 - Bento Box 风格设计的 Apple 海报

‍

Apple 以开创影响全球的重大设计潮流而广为人知，Bento 只是其中之一。每一位设计师，甚至可以说几乎整个设计师群体，都在使用 Bento 来做演示、设计网站、介绍产品，而且这个清单还在延续。

老式 Bento 风格设计与 2024 新网页设计趋势的最大区别在于：网格中的每个部分代表一个独立的空间，而不再是某个组合的一部分。

与许多其他 UI 设计趋势不同，Bento 的发展远不止是一种美观的布局样式。如今它已发展为涵盖产品演示，结合了其他一些独特的布局，甚至融入了新的视觉设计概念（New Visual Design Concept）进行风格化。

来看看下面的例子，直观感受布局的力量：

图 4 - Diagram 上的 Bentobox 实时演示布局

‍

上面的示例来自 diagram.com，它使用 Bento 网格通过交互式体验（Interactive Experience）展示其工具实际功能的真实案例。这让工具更具吸引力，也让用户知道自己可以期待什么。

为了帮助我们这样的设计师，网上有一些专门提供 Bento 设计灵感的网站。其中一个网站是 bentogrids.com，那里收藏了大量面向 UI 和平面设计的 Bento 网格。真心感谢这个网站的创造者，为设计师群体带来了如此多的灵感！

2. 空间设计趋势与技术飞跃（Spatial Design Trends & Leaps in Technology）

想象一下吧！您刚睡醒，拿起手机查看"重要邮件"，此时正在看第二眼，而您的整个信息流里刷满了 Apple 全新的 Vision Pro。这正是 2023 年 6 月 5 日那天，全世界科技和设计爱好者的真实清晨。

图 5 - 图片来源：Apple

‍

在接下来的几周里，这就是科技界所能谈论的全部话题，设计师们也都在努力磨炼空间设计（Spatial Design）技能。

除了上述 2024 网页设计趋势之外，许多不同的 AR/VR 初创公司也走在前列，它们的技术终于被提及。这为 AR 和 VR 带来了真正的推动力，而这是我们确实需要的。

您知道，各项要素齐聚便会创造出传世之作。有了出色的技术，出色的设计潜力就会涌现。

从智能手表到折叠手机，设计师们一直在努力展现自己真正的适应能力。空间设计（Spatial Design）也不例外。

图 6 - A glimpse of what is to come

‍

随之而来的是一款广受欢迎、专注设计师的工具——"Bezi"。它类似于 Figma 和 Spline 等设计工具，但多了一个维度。设计师可以参与空间设计，连接正在运行的 AR/VR 头显，并打造互动式空间体验。当然，如今的网页设计领域也有一些机构正在使用这项技术来增强用户体验。

为了直观了解 Bezi，让我们一起快速浏览 Bezi 能让您创造出什么——已远不止是普通的设计：

图 7 - Demo from Bezi.com

‍

您知道，更好的 UX 正是带来更好 AR/VR 体验的重要因素。深入理解精美设计背后的技术、使用 VR 头显进行实际测试、在空间环境中试验一切——这些都将纳入设计师必备的工作技能之中。

随着我们在设计行业不断前行，对于 UX 的现有认知必将迎来许多新的课题与变化。然而，这是一项您想要现在就积累、未来也能用上的技能——这是一项稳赚不赔的长期投资。

除了 Apple 丰富的想象力和雄厚的财力之外，还有一些对技术了解较少的公司，为"戴眼镜"带来了全新的体验。

尽管 Google 的"Google Glasses"项目从未进行过超大规模量产，但墨镜公司 RayBan 已凭借其全新的 Meta Wayfarer 加入智能穿戴设备的竞赛。

图 8 - 图片来源：RayBan

‍

别被 RayBan 平常的设计所迷惑；内置摄像头和智能功能让您可以存储视频/图片，并直接直播到社交媒体。这为用户体验（User Experience）和客户体验（Customer Experience）带来了全新的维度。也许这将成为 2024 年的网页设计趋势。谁又能预知人类未来世界里会发生什么呢！

3. 人人都能随心做动画（Animation Trend）！

听起来很奇怪对吧？别急，Markdao 马上为您解释：

当一项新技能能够被更多人掌握时，新的趋势往往随之诞生。提到 2024 设计趋势，Animation Trend 将是这份榜单上的一个名字。

这正是 LottieFiles 所承担的使命。当我以传道者的身份加入公司时，我惊讶地发现，我们竟能如此轻松地为任何工具中的任何用户界面（UI）添加动画。鉴于对 Lottie 动画的需求，他们甚至推出了一款 Figma 插件，让我们能够将自己的 Figma 动画转换为可导出的 Lottie JSON 文件。

图 9 - LottieFiles plugin for Figma

‍

这免除了 After Effects 及类似软件相当高的学习成本。因此，设计师可以快速独立制作动画。

如今，您会开始注意到各公司落地页（Landing Page）上的吸引力互动。这都得益于访客对差异化体验日益增长的需求，以及把讲故事作为销售产品/服务手段的需求不断上升。

马上看看这些 website inspiration，以下面的落地页互动为例，证明动画的力量：

图 10：Apple Watch Series 9 Landing Page — Double Tap Interaction on Scroll

‍

尝试运用动画，开始您 2024 网页设计趋势的创作吧。借助滚动触发的动画（Scroll Animation），访客将沉浸于您呈现的内容之中。Webflow 和 Framer 等无代码（No-code）工具不断创新，让设计师无需编写冗长代码的烦恼就能实现这样的动画效果。

人们或许会以为动画潮流的旅程到此为止。动画可能已经达到巅峰，再无值得期待之处。幸运的是，我们这些科技领域的工作者总是在寻找下一个重大突破。此外，由于实用工具数不胜数，您能想象到的一切都可以实现。

其中一种可能性是新兴的"动态按钮趋势"（Animated Button Trend）。这种新 UI 风格运用动画技术，让一个简单、本无太多互动性的按钮焕发生机。这些变化包括按钮周围简单的描边动画，到鼠标移动时在按钮内移动的真正的星星。

请欣赏下方的"animated button"，看看每次鼠标悬停时它多么讨喜：

图 11 - Galaxy 的 Click Button

‍

这样的 2024 网页设计趋势往往由多米诺效应催生。首先，某位设计师的社交媒体帖子走红，随后其他知名设计师纷纷跟进。

4. 扁平化设计（Flat Design）是否走到了尽头？

在讨论 2024 趋势时提到 Flat Design 的退潮似乎有些反常规，但我们需要提一下它，因为下一个趋势正是由它衍生而来。

近来，许多设计师都在谈论设计界正在从扁平化设计（Flat Design，比如您在 Medium 上看到的设计）转向拟真视觉风格（Pseudo Realistic Visual Style）。尽管我们曾见过许多运用 Flat Design 的网站灵感在过去风靡一时，但如今它们已成为过去。当今的设计趋势，特别是网页设计，包含 3D 图形（3D Graphic）、景深效果（Depth Effect）、新拟态（Neumorphism）、拟物化（Skeuomorphism）等。

近来，我们看到许多公司将 3D 作为自己的核心风格。虽然目前在网页设计和应用中或许还不常见，但 logo 正在按照这一新趋势更新。

图 12：Just a few good examples of the new 3D wave made by Chan Karunaratne

与其他趋势一样，人们采用这些风格的主要原因，是 Spline 和 Vectary 等"易于使用"的网页版 3D 工具的问世，让将 3D 内容引入网页和应用变得极为容易。它们还通过动画让 3D 内容生动起来。

当我了解到基本的线性渐变（Linear Gradient）和一些阴影就能为您的设计和素材增加景深和第三维度时，我简直兴奋不已。

另一家始终引领设计方向并创造趋势的公司是 Airbnb。他们以简洁却高效的应用设计和互动而闻名遐迩。2023 年，他们发布了一次应用更新，带来了许多全新且重要的功能。

他们做了什么？他们融入了十多个 3D 风格的视觉元素，而他们的宣传视频大多也采用 3D 形式。

图 13：Launch video by Airbnb

等距视觉（Isometric Visual）、3D 角色和动画，以及一连串的应用互动，让我百看不厌。从平面到 3D 的转变正在缓慢而稳定地进行着，这就是我相信这一趋势将持续存在的原因。

当然，当网页设计（Web Design）将等距视觉、3D 角色和动画相结合、每种元素都保持适当的平衡时，一个相当酷的网站定会诞生。

目前，究竟是谁开启了这一 2024 网页设计趋势仍是一个谜，但对真实、易懂设计的需求，推动着我们为用户而创新，当然也为了我们自己 creative 的理由。

5. AI 设计工具的洪流——是福是祸？

人工智能是过去十年间在科技领域被使用和认可最多的词汇。虽然一些设计师将其视为对自己职业未来的威胁，但我们大多数人正在利用这项技术更快地创造出最精美的设计。我们也必须承认，自 2023 年年中以来，一些网页设计工作一直持续到 2024 设计趋势，继续应用 AI，与以往相比大大缩短了设计时间。

图 14：Adobe Firefly being used for video manipulation

‍

一些自诩"AI 加持"的设计工具套件，正尝试在不同程度上接入 Open AI API，也在 AI 模型上运作。然而，这些 AI 的大多数功能不过是营销噱头：随机的 UI 设计、打乱素材，甚至为客户遇到的棘手问题提供基础方案。这只是我的一些批评，也得到了设计师群体许多成员的认同。

在这些营销噱头的喧嚣中，出现了一些前来拯救被蒙蔽世界的英雄。其中一位英雄是 Relume，一个深受粉丝喜爱的角色。这家专注于 Webflow 的公司推出了名为 Relume A.I. 的工具，一款高效的线框图（Wire-framing）与站点地图（Site-mapping）工具。

图 15：Relume A.I in action

‍

您只需输入一句提示词（Prompt），大体描述您的项目，它就会为您提供完整的线框图和站点地图。这个线框图填充了数据，相关布局可以快速复制到 Figma 和 Webflow 中。

另外，请告诉我，难道只有我一个人认为 Chat-GPT 正在扼杀人类的创造力，并让我们对它产生依赖吗？

6. UX 迈向更贴近、共情用户体验的方向

‍

如果说视觉和 UI 设计已经足够成熟，那么至少可以说 UX 已经在发展，这一点可以从研究者和 UX 设计师们的关注点中得到证明。您知道吗，这意味着简化流程，让设计更易接近、更具包容性。

许多设计师正投身于可用性（Usability）领域，而非视觉设计。这带来了更简约、更易于落地的 2024 网页设计趋势。尽管过去几年行业经历了诸多变化，设计师们更关注什么真正有效，而不是重新发明"老旧的轮子"。

图 17：Google trends graph on "UX Accessibility" from 2019 to 2023

上图的 Google 趋势图显示，无障碍设计（Accessible Design）已在多大程度上成为一项行业性要求。

这些无障碍技术涵盖从色彩对比度（Color Contrast）、易读字体（Readable Font）、易识别的行动元素（Recognisable Action Elements），到为不同能力的人群创建阴影效果，将注重无障碍的功能推上台面。

为什么Accessibility的需求日益增长？

无障碍设计之所以被大力推动，是因为当前的设计需要面向所有年龄段的人群，甚至包括身体有障碍的人士。企业希望从各种不同的人口群体中获利，也在推动各个方面的包容性。随着越来越多人使用数字技术，设计师几乎必须专注于易接触的 2024 网页设计趋势（Accessible Design）。

就连各类课程和培训项目也早已捕捉到这一需求，正在让学生带着良好的无障碍设计知识步入设计行业。

个性化

除了 Accessibility 之外，个性化才是真正让用户"锁定"在某个应用或网站上的关键因素。您肯定曾在 YouTube 上见过这样的小提示——

图 18：Youtube assessing what kind of content you like to give you better recommendations

‍

您也会观察到，许多应用会试用某项新功能几天，随后因为用户评价不佳而撤回。这直接体现了 UX 设计师在引领产品和服务的未来以及 2024 网页设计趋势方面的主导地位。

‍

相关文章