发现趋势

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您的旅程各个阶段提供云产品。立即开始使用 200 美元的免费积分!

网络上充斥着各种火爆的网站,以及数量相当或更多的才华横溢的设计师和开发者,他们共同创造了这些网站。网络就是这样令人惊叹,它鼓励这种创造力。

尽管如此,我仍然对某些特征如何出现在各种事物中感到惊讶。我的意思是,这很合理。我们许多人使用相同的 UI 框架,并从我们欣赏的网站中汲取灵感。但偶尔,我的目光会开始捕捉到时代精神以及随之而来的共性。

最新的趋势是什么?Blob 形状。这是一种有趣的点缀,可以增添一丝风情,特别是对于需要一抹色彩或引人注目的焦点来引导视线从一个地方转移到另一个地方的扁平化设计而言。我确信您已经见过它了。我花了一周时间收集了我在浏览过程中遇到的使用 Blob 形状的网站的屏幕截图。我当然不是在刻意寻找这些示例,它们只是在我日常浏览中突然出现。

如果您觉得我在批评某些人,我深感抱歉,因为那并非我的本意。我实际上非常喜欢这个概念——事实上,我正在考虑将它应用到我的一个项目中!图库中的一些示例简直美不胜收。

在多次发现这些 Blob 形状后,我开始注意到在使用它们时需要考虑的一些因素。例如

  • 注意文本位于 Blob 上方时的对比度。有很多情况下,文档背景是白色的,而 Blob 是深色的。如果文本穿过它们,将很难找到符合 WCAG 2.1 AA 可读性标准 的字体颜色。
  • 混合和匹配颜色时要谨慎。在卡片组件后面放置一个热粉色 Blob 没什么大不了,但如果你添加黄色、橙色和其他鲜艳的颜色与之并排,那么设计将开始分散注意力,掩盖内容。此外,五彩缤纷的 Blob 形状会引发可访问性问题。点缀就是点缀:一种微妙而有效的美感。
  • Blob 不仅适用于颜色。我看到的一些最有趣的示例将图像裁剪成有趣的形状。我们可以将图像直接嵌入 SVG 中,然后用路径对其进行蒙版,这真是太酷了。
  • Blob 也不仅适用于背景。您注意到 Topcoder 网站 的屏幕截图了吗?它们将 Blob 用作标签,非常时尚酷炫。

所有这些都让我思考,今天的网站将如何被明天的开发者看待。还记得大约 15 年前,许多网站采用 Apple 的反光图像吗?我可能仍然保留了一些 Photoshop 的肌肉记忆,因为它多次复制了这种效果。

Photo of three iPhone 3 models next to one another. The first shows the home screen, the other two show the back, one in black and one in white. All three phones sport a reflection beneath them.
请注意拟物化的图标——它们也很流行!

拟物化、斜面、动画 GIF 背景、长阴影、英雄、渐变、散景背景……所有这些以及许多其他视觉效果都曾风靡一时。或许 Blob 将来会加入这个行列。或许它们在那之后会再次流行起来。谁知道呢!我觉得回顾过去 30 年激励我们的事物,并想象我们今天所做的事情将如何在时间的长河中被审视,这很有意思。

如果能看到其他 Blob 形状的示例会很棒——如果您有,请分享出来!