在你的设计中使用视觉重量

WebFX总裁。Bill在互联网营销行业有超过25年的经验,擅长SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

在设计中,视觉权重是指设计元素具有不同的权重;也就是说,一些物体,即使在二维介质上,也会显得比其他物体重。视觉权重是一个强大的概念,它允许我们在设计中创造视觉层次、对称、平衡和和谐。当有策略地应用时,视觉权重的概念可以帮助我们引导观众的注意力到设计中我们想要的地方。

这篇文章涵盖了视觉权重的概念和影响它的因素。为你的网站元素选择颜色比仅仅使用颜色有更多的科学依据随机颜色发生器

什么是视觉权重?

视觉重量围绕着设计中不同的元素彼此之间具有不同的重量这一理念。

有时视觉上的重量是明显的,比如较大的物体看起来比较小的物体重,因为它们占据了更多的空间。在某些情况下,它不是那么固定的,比如在颜色的情况下。有些颜色看起来似乎比其他颜色更重、更占优势。

例如,在白色背景上,比较纯黑色和浅蓝色:本能地,哪一个对你来说在视觉上看起来更重?我们将讨论的主要视觉权重因素有:

  • 颜色
  • 对比
  • 光明/黑暗
  • 大小
  • 密度
  • 复杂性

视觉重量与对称紧密相关。为了在设计中实现对称和平衡,我们希望让物体在视觉重量上看起来相等。

为了将注意力吸引到某些对象上(或弱化其他对象),我们会有意地打破平衡,创建一个视觉层次,这样焦点就会转移到我们想要的区域。现在让我们来看看影响视觉重量的一些主要因素。

颜色

色彩是设计的重要组成部分,即使在纯黑、白或灰的设计中,缺乏色彩本身就是一种声明。

在设计中,颜色有许多属性可以影响对象相对于其他对象的视觉权重,例如饱和度、亮度/暗度和色调。我们对颜色权重的直觉大部分都是正确的;人们似乎本能地知道一种颜色比另一种颜色重。例如,饱和度更高的颜色会比不饱和的颜色获得更多的关注。

在浅色背景下,深色也比浅色更能表明立场。色相是一种颜色属性,心理学家最近才开始意识到它具有不同的视觉权重。即使在完全饱和和亮度相同的情况下,两种颜色,如红色和蓝色(如上图所示),也可能具有不同的视觉权重。

然而,根据文章中讨论的研究,红色和蓝色红色比蓝色重吗它们在视觉重量上非常接近,而关于哪个实际更重的研究也各不相同。然而,除了色调,还有一些颜色属性对视觉重量的影响要明显得多。例如,红色比饱和度低的黄色或橙色更重,会吸引更多的注意力。

在下面的例子中,我们可以看到如何利用视觉复杂度和尺寸等其他因素来平衡元素的视觉权重。左边的红色心形更有分量,因为它更大,颜色也更鲜艳。为了平衡整体,我们可以放置一些物体来创造一个视觉上更加复杂的区域。

以下是一些通常被认为具有不同视觉权重的颜色,从重到轻排列:

  1. 红色(最大)
  2. 蓝色的
  3. 绿色
  4. 橙色
  5. 黄色(轻)

对比

对比是设计的重要组成部分,它可以帮助某些功能比其他功能更突出。与背景对比较大的元素会比与背景颜色对比较小的元素更加突出。使用对比可以保持视觉层次和可读性。

在下面的例子中,我们可以看到左边比右边更突出/更重,因为它有更高的前景/背景对比度。为了创造视觉平衡,让两边的重量相等,我们可以使用其他因素,如颜色、大小、复杂性等。

光明/黑暗

深色比浅色更有分量。

明暗是平衡设计的有力工具。心理学家不确定为什么我们认为颜色越深越重。在一项研究中,他们发现,许多人认为图片底部颜色较深时更自然。

较重的物体应该在底部,较轻的物体应该在顶部,这种本能模仿了物理世界中重力将较重的物体拉到底部的情况。

大小

尺寸是一个明显的视觉重量因素,因为在物理世界中,一个比另一个大的物体(如果它们是同一类型的物体)自然会更重,会占用更多的物理空间。你能做些什么来平衡在尺寸上的视觉权重呢?

例如,你可以用几个较小的元素来平衡一个较大的设计元素,或者给较小的元素更重的颜色和/或对比。如果一个对象应该是设计的主要焦点,那么把它做大是好的。这就是为什么我们经常看到超大的呼叫行动按钮比周围的元素更大;它们是为了提高转化率而吸引用户注意的尝试。

比例与密度

在物理世界中,密度更大(或更紧凑)的物体比密度更小、更分散的物体重。通过在对象之间使用更少的空白,我们可以在图形表示中实现这一概念。注意,虽然在一组对象中过多的空白会使该区域在视觉上显得更轻,但周围有大量空白仍然会引起注意,因为其位置周围的对比。

复杂性

与简单的形状相比,更复杂的形状或图案在视觉上看起来更重。一个简单的物体,就像下图中右边的物体,几乎可以立即被接收和理解,而它左边的元素则需要更多的时间来处理。因为一个元素需要更多的时间来处理,我们必须看它更久,因此,它占据了我们更多的注意力。

在设计中,视觉复杂性可以来自于表面纹理、摄影图像和重复的模式。

总结

视觉重量是一个非常依赖设计师直觉的概念。它受到我们在物质世界中所接触到的东西的影响,在物质世界中,重量是用大小和密度来表示的,颜色会引起特定的情感反应(通常与文化因素有关)。

获得视觉层次、对称和设计和谐取决于我们如何利用视觉权重因素相互协调。我的一个建议是,在选择颜色时要小心,尽管一些品牌或大学有品牌的颜色,他们使用的一切!在大多数情况下,向客户解释这样的事情可以让你收取一笔费用更高的价格为您的网页设计因为这表明你是这个领域的专家。

相关内容

WebFX职业

加入我们的使命,为全球的企业提供业界领先的数字营销服务,同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!