探索网页设计中体积背景的美感和力量

已发表: 2020-08-24

作为设计师创造力和卓越开发技能的巧妙产品,数字化动画已经连续数年在展会上大放异彩。 你还记得那些可以在多个维度上探索的场景吗? 好吧,似乎主流不会放慢脚步,也不会消失。 体积背景就是证明。 这是一个真正鼓舞人心且越来越技术化的新浪潮。

通常,此类动画用于在 Web 界面中占据主导地位。 但是,这不是这些情况之一。 在这种方法中,它们被移到了后面——让位于界面的其他组成部分,如标语、导航或标识。

这可能看起来不合逻辑,而且无疑是大胆的。 尽管如此,它也有自己的优点。 3D 动画与内容平等共存,有助于创造平衡的设计和和谐的体验。

艺术与科学

Art and Science 是日本品牌相关设计公司的官方网站。 实践表明,来自朝阳之地的网站将以其令人难以置信的魅力、错综复杂的设计、非凡的功能,当然还有对一切先进事物的热爱,在竞争中脱颖而出。 这个也不例外。

在这里,一个围绕其轴旋转的华丽多边形球体标志着英雄区域。 尽管它大得令人难以置信,拥有亮丽的紫色,几乎占据了屏幕的一半,但左侧的标语仍然吸引了我们的注意力。 该团队设法在体积背景和内容之间实现了完美平衡。

更重要的是,他们还在网站上添加了时尚的细节,如垂直字体、细线和角落导航。 这表明并非所有东西都依赖于基于体积的、基于地球的背景。

艺术与科学的例子

德佳数码

Deca Digital 是另一个利用这一趋势的绝妙例子。 与前作不同的是,该团队以美丽的黑暗美学赢得了观众的青睐,黑色毫不费力地设定了一种复杂的基调。 在这里您可以看到另一个 3D 形状。

这一次它是一个金字塔,虽然不是通常的。 它是由用颗粒调味的玻璃状和有光泽的表面制成的。 就像艺术与科学中的多边形球体一样,它也充满了运动。

再次请注意,左侧的标语与动画背景形成鲜明对比。 团队之所以能做到这一点,要归功于两件事。 首先,他们在设计中使用了一些久经考验的技巧,例如黑白着色、大量空白,当然还有作为读者自然起点的左侧位置。 其次,他们为金字塔使用了透明的刻面,从而减轻了它的视觉重量。

德佳数码的例子

旋转工作室

就像 Deca Digital 一样,Revolve Studio 具有美丽的黑暗美学。 背景具有变形的多边形球体和数字生成的山峰。 然而,多亏了灰色阴影和白色字体,这两个 3D 对象发挥了纯粹的装饰作用,仍然作为支持资产。

Revolve Studio 向我们展示了如何通过使用与前景元素形成对比的 3D 对象来实现体积背景和内容之间的折衷。

旋转工作室示例

取消移位

Unshift 是另一个例子,其中背景的无缝外观使 3D 动画不那么大胆和压倒性。 再次,该团队将赌注押在传统的黑白配色上,这种配色以其在各方之间创造完美对比的能力而闻名。

因此,尽管坐在屏幕的中心并朝各个方向移动,3D 立方体并没有抓住整个注意力。 标识和导航很容易从流程中脱颖而出,从一开始就引人注目。

取消移位示例

思考? 节日

思考? Festival 在整个首页都使用立体背景。 英雄区域演示了一个动画,该动画显示了从上到下延伸的各种大小的平行四边形组合。 页面的其余部分填充了 3D 多边形的草图变体。

通过这种方式,团队为设计增加了多样性,同时将所有内容联系在一起,从而在各个部分之间保持一致性。

思考的例子?节日

优先持有/加密

还有一些其他很棒的例子,例如 Prior Holdings 和 Encry。

第一个示例具有优雅的美感,带有中性色彩和大量空白,产生商务感。 然而,由于巧妙的后台解决方案,该网站看起来既不乏味也不琐碎。

它有一条长长的 3D 丝带,可以在参观者探索项目的过程中跟随他们。 它有助于创造持续的体验并建立适当的情绪。 请注意,尽管背面的条纹起着至关重要的作用,但内容仍然是节目的明星。

先前持有的例子

Encry 背后的团队证明,你不需要突破界限就能创造出值得注意的东西。 背景中的小型 3D 动画足以做出声明。

在他们的案例中,背景是一个简单的白色帆布,上面有一个受 Minecraft 启发的小立方体。 它是支持网站背后的主题和想法的工具。 它完美地象征了区块链技术,为英雄区增添了现代气息。

加密示例

阿库芬

这种趋势不仅可以用作背景的装饰部分,还可以用作品牌标识的一部分。 看看阿库芬。

该网站以其精致、高端的外观在人群中脱颖而出。 它有一个令人惊叹的因素,从一开始就赢得了在线观众。 在这里,体积背景是标识的基础。 请注意,它不仅始终保持运动状态,而且您还可以稍微玩一下。 简直出类拔萃。

阿库芬的例子

完美音量

尽管体积场景值得成为英雄区域的中心舞台,但它们可以完美地作为“后备舞者”。 更重要的是,由于在线观众被奢侈的解决方案、错综复杂的想法和交互式用户体验所宠坏,这种方法受到热烈欢迎。

用户已准备好将 3D 动画视为一种支持性资产,它可以增强总体印象,同时让内容在阳光下占据一席之地。

因此,如果您想添加一些大而有维度的东西,但仍然保持内容为王,请不要犹豫。 上面的例子展示了如何在实践中做到这一点。 从他们那里获得一些有效的观点,并将您的想法变为现实。