3D 在网页设计中的 10 个前沿应用

3D还是不3D？ 这是我们需要问自己的问题。

3D 技术和设计已经成为我们生活中根深蒂固的部分。 它存在于电影、游戏、电视节目、智能手机、打印机、AR 和 VR 中。

但是，它在网页设计中占有一席之地吗？ 如果是这样，到什么程度？ 我们会创建一个完全 3D 的网站吗？ 可能不是。

对于初学者来说，大多数网站不应该感觉像是可以迷失的身临其境的世界。如果目标是让访问者采取行动，那么您需要为他们设计简单的旅程。

还有性能问题。 您的电视可能不会被 3D 超载，但它可能会对网络托管造成影响——尤其是如果 3D 渲染是由外部插件或 API 生成的。 和第二计数的每一个部分，当涉及到您的访客，根据最近的数据。

但这并不意味着 3D 在网页设计中没有立足之地。 事实上，3D 可以做很多事情，而且还有很多不同的方向。

让我们看看哪种 3D 最适合网络，如何使用它们，然后看看当今使用 3D 的 10 个很棒的网站示例。

所有 3D 网页设计都意味着我们沿 x 轴、y 轴和 z 轴放置对象。

对 3D 设计最常见的解释是我们在 Apple 网站上看到的：

这张英雄形象中的 iPhone 12 款式存在于三个维度中。 图形没有移动，但是，我们仍然可以看到它们有深度。

也就是说，Richard Sancho 网站上的英雄形象也是 3D 网页设计的样子：

没有可见的 3D 对象。 但是，很明显文本后面的浮动（和交互式）颜色球体在不同的平面（或多个平面）上移动。

因此，与 2D 网页设计不同，您可以让设计和对象变宽或变高，3D 网页设计允许您为其添加深度以及前后移动它们。

在 1950 年代和 60 年代，开发了许多具有进行 3D 计算机建模能力的计算机程序。 Ivan Sutherland 的 Robot Draftsman 软件，也称为 Sketchpad，是第一个使用图形用户界面 (GUI) 的软件，它引领了计算机辅助设计 (CAD) 的发展。

尽管如今 CAD 主要用于创建建筑物、产品和其他物理对象等事物的 3D 渲染，但很容易看出这些早期技术如何为现代 3D 网页设计铺平了道路。

现在，我们还没有看到 3D 主导网页设计趋势的原因之一是因为它并不总是那么容易创建。

1994 年 — 引入虚拟现实标记语言 (VRML)

VRML 在互联网的早期就出现了。 它是一种文件格式，也称为“世界”(.wrl)，允许设计人员创建 3D 对象和场景。

1997 — Flash 出现

为了在网站上启用 Flash 3D 图形和动画，开发人员必须获得 Flash 软件许可，使用 ActionScript 对其进行编码，然后将其嵌入网站。 这需要大量的工作，而且还严重影响了网站加载时间，尤其是在拨号期间。

2001 — X3D 成为 VRML 的继承者

今天，X3D 是由 Web3D 联盟维护的免版税开放标准。 它可用于各种 3D 应用程序：CAD、地理空间可视化、人体动画、AR、VR、3D 打印、医学培训，当然还有网页设计。 更重要的是，它不依赖于在浏览器中运行的插件。

2010 年——拟物化流行起来

拟物化是一种设计趋势，用于使界面和/或其元素看起来像它们所基于的真实对象。 这种趋势并没有持续多久，因为除了看起来很酷之外，它没有提供许多额外的好处。 因此，平面设计主导了未来几年的网页设计趋势。

2011 年——WebGL 被引入

WebGL 是一种免版税的 API，使设计人员和开发人员能够创建适用于大多数现代 Web 浏览器的 3D 图形。 WebGL 的唯一问题是它很难使用。 您必须使用 JavaScript、Java 或 Objective C 以及 GLSL 来编写 3D 图形。

2012 年——《纽约时报》雪落文章发表

视差网页设计长期以来一直用于视频游戏设计。 然而，直到 2012 年《纽约时报》发表其多媒体雪落文章时，我们才真正开始看到人造 3D 滚动效果在网络上流行起来。

2014 年——谷歌开发其材料设计系统

Material Design 的创建有很多原因。 然而，它对网页设计的最大贡献之一是它为页面带来了深度和触感，这有助于提高可用性。 虽然设计系统有其问题，但它给网页设计世界留下了持久的印象，今天仍然可以在平面设计 2.0 的分层和阴影中看到它的一些细节。

2021 — 选择你的毒药

现在有许多应用程序可以让网页设计师创建自定义和复杂的 3D 设计：

• AutoCAD
• 搅拌机
• 草图
• 维克瑞

您还可以使用多种 AR 和 VR 技术为这些特定用例创建 3D 渲染。

如果您不想创建整个 3D 世界，请考虑使用 Elementor 的样式工具为您的网站组件和运动效果添加深度，使您的设计栩栩如生。

设计趋势来来去去。 所以，你必须问自己——3D 是一种值得投资的设计技术或趋势吗？

以下是您可能希望在工作中开始使用它的一些原因：

当大多数网站都是扁平的时，具有 3D 功能的网站将立即脱颖而出。

只要确保它以良好的品味并符合网页设计原则即可。 如果 3D 场景或对象毫无意义并且仅用作吸引注意力的策略，它们将使您的网站脱颖而出——只是出于错误的原因。

您可以通过多种方式在网页设计中使用 3D。 例如：

• 在访客第一次进入网站时创造身临其境的世界体验
• 让您最重要的图形栩栩如生
• 为访问者提供更精细的演练或 360 度产品视图

通过将网页设计中的正确元素移动到第三个平面，您将为访问者创造更具吸引力的体验。

我们的感官与我们的情绪密切相关，触觉也不例外。 虽然访问者显然无法实际接触 3D 网站，但它提供了平面设计无法提供的触感。

因为触摸通常可以帮助人们与他人建立更多联系并加深他们对世界的体验，所以我们可以假设与网站上的 3D 元素互动也可能使访问者更接近品牌。 即使事实并非如此，设计的触觉特性也会给他们留下持久的印象。

3D 网页设计有大量的实际应用。 例如，您可以将产品、属性和事件的 3D 渲染添加到网站。

我们已经知道消费者在没有亲眼看到的情况下在线购买某些高价商品是多么困难。 通过在网站上添加栩栩如生的效果图，您可以帮助他们更快、更顺利地做出决策。 有了更自信和更满意的购物者，您可能会从中获得更多转化。

即使现在 3D 设计在网络上并不无处不在，但如果您找到正确的方式为客户的网站执行它，这绝对是一个值得的趋势。

如果您正在寻找灵感，请查看以下网页设计中的 3D 创意示例。 完成后，前往我们的动画网站综述。 并非所有示例都使用 3D，但不容错过的示例！

这是我们第二次在此博客上介绍 Robert Burgel 的平面设计机构。 它第一次出现在我们的最佳投资组合网站列表中。 这次是因为主页上的原始英雄形象。

黑色横幅上有拼写出罗伯特名字的剪纸。 这些字母只有在背景中霓虹鱼在它们身后游动时才会显露出来。 它让英雄形象感觉就像你在看鱼缸，这是一个你不会很快忘记的设计。

Flux Academy 是网页设计师通过课程学习如何设计和完善技能的地方。 虽然主页上有许多 3D 图形，但它是最有趣的第一个。

当访问者向下滚动页面时，与设计相关的浮动图标全部向下落入雕像的头部。 对于公司的全部内容，这是一个非常巧妙的比喻。

这个例子还值得注意的是3D图形相对简单。 平面图标。 一塑雕像。 插图的球体和面孔。 这只是向您展示，通过正确的阴影和运动效果，您可以实现非常有趣的 3D 体验。

不仅仅是创意机构可以使用 3D。 只需在 Dasher & Crank 网站上查看这张英雄图片即可。

很多时候在餐厅网站上，你会看到他们的菜肴和物品是从上面拍摄的，让他们看起来很平坦。 即使是从侧面看到的人，也往往没有真实感，因为它们是在某人的手、盘子或餐厅背景的背景下拍摄的。

但是这里有纯粉红色背景，冰淇淋饼干三明治作为 3D 物体非常漂亮——让它们看起来足够好，可以伸手咬进去。

想想你最后一次坐下来在线阅读报告或电子书是什么时候。 尝试逐段查找与您最相关的数据可能会很痛苦。 此外，其中很多都保存为 PDF 格式，可能有误。

但 Contra 的《2021 年独立状况报告》是一个很好的例子，说明了 3D 如何改变阅读和教育体验，只要你使用它就够了。

整个过程中都有少量 3D 对象，例如斑点和硬币。 但是，大部分 3D 渲染用于表示整个报告中的数据可视化和自由职业者引述。

Apple 并不是唯一一家使用 3D 来突出其产品的智能手机公司。 三星 Galaxy Z Fold 的登陆页面从人们进入该网站的那一刻起就让产品栩栩如生。

请注意初始加载页面上的图形如何是手机的旋转 3D 插图。 当他们进入网站时，访问者将从各个角度看到实际的手机，以及它打开和关闭时的外观。

对于想知道折叠式智能手机会是什么样子的顾客，他们不需要去商店去了解，因为 3D 效果图很好地表现了他们。

大英博物馆与 Google 文化研究所合作，为世界博物馆创建了这个微型网站。 它是由 WEIR+WONG 使用 WebGL 设计的，是一种真正独特的视觉设计时间线并在其中放置大量数据的方式。

博物馆仍然有它的常规网站，游客可以在那里了解更多关于他们的收藏品和展品的信息。 然而，这个 3D 时间线不是在网站上展示他们收藏的项目，而是将它们放在它们来自的类别和时间范围内。

与让访问者被动地跟随时间线或浏览您的库存不同，像这样的 3D 表示将其转变为更积极的体验。

KITKAT Chocolatory 是一个有趣且身临其境的 3D 网站。 它与 KITKAT 的其他网站完全不同。 这是为什么？ 好吧，这不是一个供想要了解更多关于 KITKAT 品牌及其产品的人的网站。

欢迎喜爱 KITKAT 产品的巴西客户探索和订购糖果公司的最新巧克力。 他们还可以使用自己的个人照片定制产品的包装。

像这样的品牌和体验值得拥有一个独特的 3D 世界。

很明显，从一开始我们就应该遵循咖啡胶囊的插图和手绘草图，因为它从 Capsul'in Zero Impact 网站上掉下来了。 这是由 Index 的设计师创作的精彩 3D 描绘。

我们首先将其视为带有插图的咖啡胶囊。 不久之后，设计师剥去了它的标记，并最终剖析了它的每个不同部分。 与其将 3D 胶囊用作一些花哨的设计选择，不如将其外观随着产品故事和规格在整个页面中的展示而发生变化。

TAG Heuer（泰格豪雅）是一个以时尚时计而闻名的品牌。 虽然有很多方法可以让网站感觉优雅和优雅，但没有什么比在 3D 中展示您的产品更棒的了。 这就是泰格豪雅在这里所做的。

在这些照片中，我们看到美丽的时计在鲜明的白色和黑色背景下被框起来。 在某些情况下，它只是手表的照片。 在其他情况下，会产生轻微的视差效应。 在某些情况下，我们会看到手表在运动，例如表扣打开和关闭时。

这不是一种只能由奢侈品牌使用的 3D 技术。 较小的品牌也可以使用 3D 产品视觉效果来更有效地在线销售其产品。

马自达在这里所做的很像电子商务公司根据客户选择更改产品照片颜色时所做的。 也就是说，马自达不仅让客户能够在 2D 模型上看到他们的定制。

这种 3D 渲染让客户可以在车辆外部移动以及在内部旋转，以仔细查看模型以及他们的颜色选择如何影响模型。

任何时候您的网站都在销售昂贵的产品，甚至只是一个客户真正需要在购买前试用的网站，这样的 3D 购物工具将是一笔巨大的资产。

无论您的 3D 设计有多大或多小。 在网页设计中使用 3D 时要记住的最重要的事情是它可以改善体验。 您希望访问者对他们所看到的东西感到惊叹，而不是想知道为什么他们花了几分钟观看 3D 动画才意识到重要的内容在网站内。

此外，请注意 3D 如何影响您网站的性能。 如果访问者必须等待超过几秒钟才能让网站加载您的所有 3D 作品，他们可能永远看不到它。

也就是说，我们今天在这里看到了一些令人惊叹的 3D 网页设计示例。 从他们所做的事情中汲取一些灵感，您应该能够为您的客户提供真正伟大的东西，并且对他们的访客有用和有趣。