在网页设计中使用“参差不齐”的背景来吸引注意力
已发表: 2020-04-15一个好的网站都是关于小事的。 每个细节都很重要，尽管看起来它应该发挥的唯一作用就是留在阴影中。 今天，我们的聚光灯照在背景上。
自从我们谈论趋势方面的背景以来已经有一段时间了。 创意者痴迷于占据前景的事物，因为它们有助于给人留下第一印象。 但是，界面的核心元素始终很重要。 每次我们构建新事物时，它们都会提醒我们自己。 他们再次成为关注的焦点只是时间问题。
所以，终于到了用唯一的背景做一些有趣的事情的时候了。 主要症结在于它为整个项目提供了坚实的基础，因此采取严厉措施具有挑战性。 你需要在实用性和娱乐性部分之间取得平衡，以创造一些奢侈的东西，同时又不破坏一切。
下面的设计师似乎找到了一个完美的解决方案——斑点背景。 它们满足了这两个要求，并且在宣称自己是一个小趋势时看起来像是一股新鲜空气。 让我们仔细看看。
耐心的
这是移动应用程序的标准促销网站。 本质上，这里并没有什么特别之处。 您将找到一组标准技巧来展示产品，例如在自然环境中展示应用程序的 iPhone 模型。 此外，还有几个生动的号召性用语按钮和基本结构。
然而，立即引起注意的是背景。 它看起来像是一个自然将视线推向应用程序的大点。 而且，与此同时，它给整体美学带来了可爱的热情。 由于平滑的曲线和柔和的色彩，它给人一种优雅和精致的感觉，让标准网站看起来不那么琐碎。
请注意，这只是一个很小的细节，但它肯定会在这里有所作为。 它是静态的，仅占屏幕的三分之一，但足以在人群中脱颖而出。
经济
与前面的示例非常相似，这是一个简单的网站。 然而，这一次它代表了一家数字机构。 网站的结构是传统的，设计也是如此。 没有奇特的细节，也没有戏剧性的插图。
这里唯一的亮点是背景。 它具有两个中等大小的白色水滴，从上到下平稳移动。 它们位于侧面，因此不会分散主要标语和 CTA 的注意力。 但他们仍然为界面增添了一些趣味。
更重要的是，您可以在页脚之前的部分和一些内页上看到相同的方法。 这样一来，一切都联系在一起，创造了一个和谐的设计。
动态斑驳的背景完美地融入了网站的商务氛围。 它与项目的基调相匹配，与标识相呼应，也支持品牌标识。
数码熊猫
虽然前面提到的两个示例使用了多个位置，但 The Digital Panda 的创意团队更喜欢只使用一个（但相当大）。 美丽的紫色斑点支持前景元素，同时避免了干净的白色界面看起来过于简单。 它与插图、CTA 和排版完美搭配。
您可能会注意到这个技巧在整个网站上都有追踪。 各个部分都受益于参差不齐的背景，带来了连贯的用户体验。
Art4Web
Art4Web 背后的团队强烈依赖视差方法来打动在线访问者。 它位于英雄区域的核心，将模型粘合在一起。 参差不齐的背景具有几个缓慢移动的斑点，以模仿液体表面。 它还与标识保持一致，将品牌标识带入整体设计。
该解决方案像手套一样合身。 它突出了前景的构图，并为项目增添了一丝活力，使过度使用的视差方法得到了很好的转折。
Bodymovin 解决方案
Bodymovin Solutions 押注于一种图解方法，该方法迫使英雄区域名副其实。 与前面的示例非常相似，参差不齐的背景是部分动画的。 而且由于这些斑点具有类似斑点的形状，它们的行为可以预见地让人想起液体的温和运动。 它为小型人类插图奠定了坚实的基础 - 完美地补充了它们。
请注意，这里的参差不齐的背景被用作启动画面的一部分，以诱人的方式打开网站。 它从一开始就创造了一致的体验。
扩大你的圈子
正如您可能从铭牌中猜到的那样，这里的圆圈是该项目的核心和灵魂。 因此，在主页上看到这种形状也就不足为奇了。 背景也不例外。
背面的画布上有几个大而模糊的圆圈，颜色很漂亮。 与前面的示例非常相似，它们也开始运行。 它们有助于视觉识别并加强品牌识别，更不用说使页面看起来很出色了。
格里弗兰设计
虽然我们通常认为 Blob 运行节目的背景参差不齐，但事实上，没有人能阻止您采用其他形状，就像 Griflan Design 背后的团队所做的那样。
原始的参差不齐的背景标志着他们官方网站的英雄区域。 两个几何形状（一个矩形和半个圆环）以及带有轮廓的小图标为内容创建了基础。 恰如其分，一切都在移动。 虽然大的形状移动缓慢，但小的移动非常快，使画布看起来非常令人兴奋。
发现
当涉及到参差不齐的背景时，首选的形状似乎是一个斑点。 有几个原因。
首先，平滑的曲线不会分散注意力，从而形成完美的背景。 一方面，这样的背景丰富了设计。 另一方面，它不与前台的内容竞争。 其次，blob 非常适合应用当今非常流行的液体行为。
然后，它们也非常适合实验。 您可以强制它们向各个方向移动，或者相反，将它们合并在一起，仍然看起来很有趣。
最后，即使在静态模式下，它们也看起来很棒，给干净的白色表面带来了特殊的味道。