由设计夹翻译小组成员Color翻译，设计夹校对发布

原文地址：https://www.smashingmagazine.com

网页中每个元素都对吸引眼球发挥着视觉作用力，这种作用力越大，对眼睛的吸引就越大。这些力量也会作用到其他元素上，对它们的潜在运动传递一个视觉方向，并暗示你接下来应该看向哪里。

我们把这种力量称为视觉重量，把这个方向称作视觉方向。如果你想在你的构图中创建层次结构，流程，节奏和平衡，理解这两个概念非常重要。

视觉重量 

物理重量是一种对物体所受重力的度量，但是二维物体（例如网页中的元素）没有质量，因此，没有任何物理重量。视觉重量是一种对元素吸引眼睛的力量的度量。

在之前的文章中，我谈到原始属性，或元素的内在属性，如大小，颜色和形状。在那篇文章中我提到了如何通过这些属性显示元素之间的对比和相似。例如，通过使一个非常大，其他非常小，来形成对比，表明这些元素是不同的。控制这些属性的结合就是控制视觉重量，红色比蓝色更吸引眼球，而较大的元素比小的更吸引眼睛；一个大的红色物体比一个小的蓝色物体带有更多的视觉重量。

这些特征或基本属性的总和，决定了一个元素的视觉重量。不是任何哪一个属性，而是它们的组合，决定了一个元素的视觉重量。一些属性的组合会比别的组合更吸引眼睛，要创建不同视觉重量的元素，你需要用到不同的基本属性的组合。

你如何看待视觉重量？

没有哪种方法可以精确地测量一个设计元素的视觉重量，你可以通过你的经验和判断，确定哪些元素有更大或更小的重量。构图中，吸引你眼睛的区域有更大的视觉重量，学会相信你的眼睛。

这并不意味着你要随机尝试，然后看怎样最吸引你的眼睛。你可以隔离每个特性，然后你会发现，例如大小，一些更大的元素比那些更小的要重。在属性的组合中，你的眼睛会帮助你。

幸运的是，其他人已经分离并测试过这些属性。下面是一些可以任意改变的属性，以及怎样改变它们来增加或减少元素的视觉重量。让我们从上一个帖子中提到的基本属性开始：大小、颜色、明度、位置、纹理、形状和方向。

• 大小

大的元素比小的有更多视觉重量。

• 颜色

温色往往比冷色有更多视觉重量。红色被认为是最重的，黄色是最轻的。

• 明度

深色被认为比浅色有更多视觉重量。

• 位置

构图中，位于更高处的元素重量超过位于较低处的元素。距离构图中心更远的元素，有更大的视觉重量。前景中的元素比背景中的元素更重。

• 纹理

有纹理的元素比无纹理的元素更重。纹理使一个元素呈现出三维，这给出了质量和物理重量的外观。

• 形状

形状规则的物体比形状不规则的物体显得更重。不规则给人的印象是，一部分质量已被从一个规则的形状中删除。

• 方位

垂直的物体比水平的物体更重，斜的元素最重。

 不必局限于基本属性，你可以使用更多的属性来控制视觉重量。

• 密度

在一个给定的空间中增加更多的元素，可以增加空间的视觉重量。观众会看到一个更大或更重的组合元素，而不是几个更小，更轻的元素。

• 放置白色空间

白色空间似乎没有视觉重量，因为它被视为空白。任何放置在该空间内的物体都会看起来更重，由于它周围的空间。

• 固有的兴趣

有些东西比别的更有趣。一个元素越复杂，就越会吸引更多的兴趣，越吸引眼球。你自己的兴趣也起到了作用。如果你对汽车比飞机更感兴趣，那么一辆汽车的形象会吸引你的注意力，而不是一个飞机的形象。

• 深度

一个更大的景深会增加焦点元素的视觉重量，很大一方面是由于聚焦区域和非聚焦区域的对比。

• 饱和度

饱和的颜色看起来比不饱和的颜色更重。

• 可感知的物理重量

我们知道，一所房子的重量超过一只鞋的。在视觉上一个房子的图像将比鞋的图像更重，因为我们会把房子想像得很重。

在系列文章中，之前有一篇关于对比和相似的，我提到了通过对比引起对元素的注意。换句话说，一个与它的环境形成对比的元素会比它周围的东西视觉上更重。例如，在网页中，圆形通常会比矩形更重，因为大多数网页元素都是矩形的。

并非所有的特性对视觉重量有同等的影响，大多数人会在注意到一个元素的形状之前先注意到它的颜色，这表明，颜色更有助于增加视觉重量。你还必须考虑在一个特定组成里的唯一性，因为对比的元素会表现出重于其它与之形成对比的元素。根据你的具体构图情况来决定哪些需要对比，哪些不需要。

请记住，视觉权重是上述属性的组合。虽然大的比小的承载更多的视觉重量，一个小的深色圆形被周围大的白色空间包围并位于该页面的顶部，会看起来比一个更大但不规则且位于页面底部颜色很浅的形状，要重得多。

视觉重量与格式塔

这一系列文章背后的理念之一，是指出格式塔原则如何有助于设计的

• 图形—背景

视觉重量可以用来区分图形和背景。

• 相似

元素之间的空间形成了不同的白色区域和空间内不同密度的元素。

• 相似与对比

你可以用视觉重量表示任何一种，对比会在元素间产生一种更大视觉重量，有相似视觉重量的元素自然会表现出相似度。

• 焦点

构图中吸引眼球的点即为焦点，比其他元素有更多的视觉重量。

• 过去的经验

观察者的过去经验会有助于他们认为元素能包含多少内在的兴趣。

视觉方向

如果视觉重量是把视线吸引到一个特定的位置，那么视觉方向是把视线引领到下一个位置。视觉方向是视觉力量的可感知的方向，把它作为一个，如果元素在运动中你认为元素要移动的方向。

视觉方向与视觉重量有一个类似的作用，就是尝试让你注意到构图中的某些部分。视觉的重量是喊“看我！”，视觉方向是说”看那边！”。与视觉重量一样，你可以改变元素的属性，来暗示不同的方向，尽管与视觉重量相比，你可以改变的属性比较少。

• 元素的形状

元素的形状可能会创建一个穿过自身的轴线，这个轴线可以暗示一个方向，通常被看作是平行于元素的视觉方向。

• 定位元素

视觉重量是一种可以吸引或排斥相邻元素的力量，这种力将在连接两个元素的方向移动。

• 主题元素

一个箭头，一根手指，或眼睛的视线都表示了某个特定的方向。

• 运动

一个元素可以直接穿过你的设计而动，它的运动有一个方向。

• 结构骨架

每一个构图都有一个结构骨架，力量会自然地沿行，通过不同的轴线。这可能需要多一点点的解释。

结构骨架

在他的书中，《艺术与视知觉：一种创造性眼睛的心理》，鲁道夫 · 阿恩海姆提出画布背后结构骨架的观点。这个观点是，每一个画布都有一个结构化的网络力量贯穿它。在下图，即使画布里没有元素，我们的眼睛也会被吸引到画布的某些部分，正是因为这个网络的力量。

鲁道夫 · 阿恩海姆的结构网

长方形画布的中心和四角像磁铁一样的吸引眼睛，最强的磁铁是在中心，虽然不是画布的几何中心。相反，吸引眼球的中心是视觉中心，它位于真正的几何中心的上方。从角落到角落的轴，以及沿着这些轴的中心与角落的中间点，也吸引注意力。然后这些中间点可以与垂直线和水平线相连，这创造了更多的视觉力轴。

现在考虑，在设计的不到位的地方，观众的眼睛会被其骨架中的某些点吸引，并且眼睛将随着不同轴的方向，从一个点看向另一个点。你可以通过把元素放置在可以自然而然地吸引眼球的地方，来利用这结构网，从而增加元素的吸引力。

视觉方向与格式塔

你可以把方向想象为一个或一个从一个元素到另一个元素或连接不同元素的实线或虚线，这些线条不需要是可见的。

• 统一的连通性

连接元素的线有方向，眼睛的视线在眼睛和被注视的物体之间连接了一条虚构的线。

• 延续

这个原则讲的是沿着一条线或一条曲线排列的元素，好像它们在直线或曲线的方向上移动。

•  联结

被视为有共同的“命运”的元素是那些在同一个方向移动，或看起来移动。

• 并行

为了被看作是平行的元素，元素的内部轴（同一个方向的方向）必须建立。

一个构图的主导方向

视觉方向的另一个概念是，每一个组成将被视为有一个主导方向，无论是横向的，垂直的或对角线的。

水平方向使构图显得平静和稳定。 垂直方向增添了一种形式感，警觉性和平衡。 对角线方向暗示运动和行动。

一个结构的主导方向将由大多数元素或者几个关键元素的方向决定。主导方向有助于根据不同类型线条所产生的整体意义来设定一个整体的感觉。一个结构也可能没有主导方向，比如，垂直元素与水平元素数量相等。在这种情况下，观看者可以决定哪一个方向是占主导地位的。

例子

下面的例子中，我抓取了一些页面的截图，分享一些我是怎样看视觉重量在页面中的使用。你可能会有不一样的看法，这很好。不同的眼睛被不同的东西吸引，同样，我发现没有办法来测量一个元素携带多少视觉重量。此外，两个人很可能会看向同一构图的不同区域，因为他们有不同的兴趣，带有一些主观性是预料之内的。

一个很简单的分辨哪些元素最重的办法是眯起眼睛，把你的眼睛轻微的闭合一点，直到一些元素消失。那些留在视线中的元素比那些消失的有更多的重量。

BUREAU

注意：这张Bureau的截图是在我设置宽度大于1280像素的浏览器上截取的，如果小于1280像素，整个页面的设计将会变成一个单一的列，而不是这里看到的两列。

Bureau网站的文章截图

上面Bureau所显示的文章，几乎是纯文本。主标题进行最直观的重量，它是最大的一段文字，并且，它周围有一些局部的白色空间。这可以说是登陆后应该被看到最重要的信息，因此它在视觉上很重。

通过与周围的文本对比，链接获得了一些重量，尽管在我看来，冷色减少了这种获得。视觉重量最小的元素是右列中的文本，这是因为重点可能是主要聚焦在本文，而不是在侧边栏中的内容。注意右栏顶部的红色文字，这是一个到网站主页的连接。就像它这么小的，红色给文本增加了一些重量，帮助它从栏中的其他文本中脱颖而出。当你直接查看网站的时候，你的图片看起来更大，所以小的红色文本并不像它在这里显示的那么小。

当你运用眯眼测试，整个右栏会消失，留下的是文章上面的主标题，和标题下的一大块文本。该构图的主导方向是垂直的，因为它的两个长列向下延伸。在两列的不同背景颜色之间创建一条垂直线，引导你向下浏览页面，并为构图中的垂直方向做了加法。

Create  Digital  Media 

当Create Digital Media 主页加载彩色元素动画化，引起了很多的关注。即使你错过了动画，你也会看到这些元素因为它们承载最重，也由于其饱和的粉红色，黄色和蓝色。这些元素也占据了相同的空间，在空旷的空间中创建了一个密集的区域。注意：在这篇文章的撰写和发布期间，该网站已经关闭了它的各个入口，如果你想知道怎么可以访问它的主页。

1. 

2. Create Digital Media的主页截图
   

对我来说，底部的图形是第二重要的。它们是黑色，面积大，且复杂的形状。它们把你拉到这三部分中的其中一个，一个包含下一个视觉上最突出的元素，部分的标题。页面上的主标题与下面的文本相比，是大的，黑色的。其他凸显出来的条目，对我而言，是由于它们的视觉重量更大，也就是顶部的公司名称和底部的Logo。

用眯眼测试，彩色图形和文字以及底部的图形在大多数元素已消失的时候依然存在。在我看来，主标题淡出，虽然我仍然可以识别出它在那里。我也还可以注意到一点左下角的Logo，尽管它比它旁边的图形消失地更快。

这里，我认为主方向是水平的。线条在水平方向延伸，像主标题和导航那样。另一个更突出的视觉元素，突出的文本，也是水平的。三个齿轮可以看作一个三角形，形状弯曲，因此建立了对角线方向。但是它们不沿着这些方向运动，而且它们是网页上仅有的对角线。

JAVIER MARTA

在Javier Marta主页，三要素的竞争是视觉上最重要的。图形，部分之间的绿色分隔符，以及顶部的菜单项都需要注意。

 Javier Marta的主页截图

• 图形

这些都是大的，黑暗的，被白色的空间包围着，每一个图形本质上都有自己的兴趣。

• 绿色分离器

这些有颜色，是更大的，像图形一样，被白色的空间包围着

• 菜单项

这些都是黑暗的，大的，又一次被白色的空间包围着。

Javie的Logo的视觉重量比它周围的菜单项目小，虽然它仍然是非常突出的其中之一。它比文本携带更多的重量，但没有在我的脑海里的菜单项目的重量多 ，你可能不同意。

斜视使菜单项和标志融合成一个单一的单位。图形和分隔符仍然是视觉上的重量，文本仍然可见。你还可以在眯着眼睛看到的一切，即使你不懂它想表达什么。

在我的屏幕上，只有顶部和“El evento”部分是可见的，使页面水平方向。然而，共有四个部分在页面上，当部分被查看一次，绿色分隔线的对齐给组成一个垂直方向。当然，从整个页面看，再一次改变画布从水平到垂直。

STANFORD ARTS

在Stanford Art 主页顶部的图像带有最大的视觉重量，它是页面上最大的元素，而且作为一个图像，它有很多内在的兴趣。它也位于结构的顶部，事实上，它占据了我大部分的屏幕。

Stanford Arts 的主页截图

注意：这个网站在页面的顶部旋转图像，以及旋转的图像随时间而改变。如果你访问这个网站，你可能不会看到这个特定的图像，因此，你对设计中的视觉重量地评估可能会不同于我这里。

我认为三角形图像而不是角容器是第二重要的元素，之后，是组成页面头部和尾部的大红色块。当我完成眯眼测试，所有的元素的可见度都明显比我预期的更长久。元素对浅色和深色的对比有很好的处理，这有助于它们突出显示。最后，唯一留下的东西仍然是图像，虽然细节不完整。我可以识别顶部的大图，但下面的三角形图像就只能看到形状了。

设计的有趣之处，也在于它的视觉方向。斜线是主宰，因为大多数网页都不是斜线方向为主，所以它们这里会捕捉到更多的关注，颠覆了你的期望。

上面我截取的这张图还展示了一个斜角的东西，虽然某些部分有点弯曲，由一个人群的移动的线创建。那女人（在右边的三角形图像）和摄影师（中间三角形）都有一个指向右边的方向。更好的情况可能是使女子脸面向内，并将相机移到左边向内对焦。当然，当你的鼠标悬停在块中的任何一个链接时，图像都会改变。然而，图像往往会导致向外，而不是向内。

总结

元素的视觉重量是对一个元素吸引观众眼球多少的衡量，视觉上重的元素会吸引眼球。视觉方向是作用于元素以及由由元素施加的力的感知方向，方向是一个提示观众的视线移到其他地方的线索。

许多内在特性的修改，可以使元素在视觉上更重或者更轻。一些能够用来建立一个元素的视觉方向，比如画布本身。在本系列剩下的文章中，我们将看到视觉重量和视觉方向是怎样产生一些设计规则，如优势和层级，流动和节奏以及最终的构图平衡。

更多精彩翻译文章，请扫二维码，欢迎交流拍砖~~