设计原则：视觉重量和方向

网页上的每个元素都会产生吸引观众眼球的视觉力量。力越大，吸引的目光越多。这些力量似乎也会作用于其他元素，为其潜在的运动赋予视觉方向，并暗示你应该在哪里看下一步。我们将这种力称为视觉重量，并将视觉力的感知方向称为视觉方向。如果你想在构图中创建层次结构，流程，节奏和平衡，这两个都是重要的概念。

视觉重量

物理重量是重力施加在物体上的力的量度，但是二维物体（例如网页上的元素）没有质量，因此没有任何物理重量。视觉重量是元素施加吸引眼睛的力的量度。二维物体可以引起注意。吸引眼球的元素越多，其视觉重量就越大。

控制这些功能的组合是你如何控制视觉重量。红色比蓝色更容易吸引眼球，较大的元素比较小的元素吸引眼球。大的红色物体比小的蓝色物体承载更多的视觉重量。

这些特征或原始特征的总和决定了元素的视觉权重。它不是任何一个特征，而是它们的组合决定了元素的视觉重量。某些功能组合比其他组合更能吸引眼球。要创建不同视觉权重的元素，你可以使用原始要素的不同组合。

你如何测量视觉重量？

我无法精确测量设计元素的视觉重量。你可以根据自己的经验和判断来确定哪些元素具有更大或更小的权重。睁大眼睛，然后相信它。吸引眼球的成分区域是具有更大视觉重量的区域。学会相信你的眼睛。

这并不意味着你必须随意尝试，看看最吸引你的眼睛是什么。例如，你可以隔离每个特征，以便知道更大的东西比更小的东西更重。这是你的眼睛将帮助的功能组合。

幸运的是，其他人已经隔离并测试了这些特征。以下是你可以更改任何元素的一些特征，以及如何更改它们将增加或减少元素的视觉权重的描述。

● 尺寸

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

● 颜色

暖色调进入前景，往往比冷色调更重，后退到背景中。红色被认为是最重的颜色，黄色是最轻的颜色。

● 价值

暗元素比亮元素具有更多的视觉重量。

● 位置

在组合物中较高位置的元素被认为比组合物中较低位置的元素重量更大。离组合物的中心或主要区域越远，元件将承载的视觉重量越大。前景中的元素比背景中的元素更重要。

● 纹理

纹理元素看起来比非纹理对象重。纹理使元素看起来是三维的，这给出了质量和物理重量的外观。

● 形状

具有规则形状的对象看起来比具有不规则形状的对象更重。不规则性给人的印象是质量已从常规形状中移除。

● 方向

垂直对象看起来比水平对象重。对角线元素承载最重。

● 密度

更多元素打包到给定空间中会增加空间的视觉重量。观察者将感知更大或更暗的组合元素，而不是几个更小和更轻的元素。

● 局部白色空间

白色空间似乎没有视觉重量，因为它被视为空白。放置在该空间内的任何物体由于其周围的空间而显得更重。

● 内在的兴趣

有些事情比其他事情更有趣。元素越复杂，它就会越吸引人，它吸引眼球的次数就越多。你的利益也发挥了作用。如果你对汽车比对飞机更感兴趣，那么汽车的图像会比飞机的图像更吸引你的注意力。

● 深度

较大的景深使焦点元素增加视觉重量，可能是由于焦点和未聚焦区域之间的对比。

● 饱和度

饱和色显得比不饱和色更重。

● 感知到的体重

我们知道房子的重量超过鞋子。房子的图像比鞋子的图像更重视，因为我们希望房子的重量更大。

你不必将自己限制在上面的原始功能。你可以使用其他特征来控制视觉重量。

请记住，视觉重量是上述属性的组合。虽然大的视觉重量比小的大，但是一个小的黑色圆圈被大量的白色空间所包围并且位于页面的顶部可能看起来比一个更大但不规则形状的物体更重，底部是浅色的冷色的页面。

视觉方向

如果视觉重量是将眼睛吸引到特定位置，则视觉方向是将眼睛引导到下一个位置。视觉方向是视觉力的感知方向。可以把它想象成一个元素在运动时移动的方向。

视觉方向与视觉重量具有相似的功能，因为它试图让你注意到构图的某些部分。虽然视觉重量在喊“看着我！”，但视觉方向却在说“看那边！”

与视觉重量一样，你可以修改元素的特征以建议不同的方向，尽管你可以使用的特征比重量更少。

● 元素的形状

元素的形状可以通过它创建一个轴，该轴可以提出一个方向。主轴通常被视为与元素的视觉方向平行。

● 元素的位置

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

● 元素

主题箭头，指向手指或眼睛的凝视都建议朝某个方向看。

● 运动

一个元素可以从字面上移动你的设计，它的运动将有一个方向。

● 结构骨架

每个构图都有一个结构骨架，其力量自然地沿着不同的轴线延伸。这可能需要更多解释。

结构骨架

这个想法是每个画布都有一个贯穿它的力量结构网络。即使画布内没有元素，我们的眼睛也会被绘制到画布的某些部分，因为下图中显示了这种力的网络。

长方形帆布的中心和四个角落就像磁铁一样。最强的磁铁位于中心，但不是帆布的几何中心。相反，吸引眼球的中心是光学中心，它位于真正的几何中心的正上方。

轴从一个角到另一个角，沿着这些轴的中心和角落之间的点也引起了注意。然后，这些中间点可以与垂直和水平线连接，从而产生额外的视觉力轴。

现在，考虑到在没有设计的情况下，观察者的眼睛将被吸引到阿恩海姆结构骨架中的某些点，并且眼睛将通过遵循不同轴的方向从一点移动到另一点。

你可以通过将元素放置在自然吸引眼睛的位置来利用结构网，从而增加其吸引力。

视觉方向和格式塔

你可以将方向视为从一个元素指向另一个元素或连接不同元素的实线或虚线。线条不需要是可见的。

● 均匀连通性

连接元素的线条具有方向。眼睛凝视在眼睛和眼睛注视的任何东西之间产生一条想象线。

● 延续

该原理涉及沿直线或曲线排列的元素，就好像它们沿着直线或曲线的方向移动一样。

● 常见的命运

被视为具有共同命运的元素是那些移动或看起来朝着相同方向移动的元素。

● 平行性

为了使元素看起来是平行的，必须建立它们的内轴（传递方向的相同轴）。

例子

对于以下示例，我已经抓住了一些页面的截图，并将分享一些关于如何在每个页面中分布视觉权重的想法。你可能会以不同的方式看到它，这没关系。

不同的眼睛被不同的东西所吸引。同样，我意识到无法测量元素承载的视觉重量。此外，由于他们的兴趣不同，两个人可以很容易地看到内容的不同区域。可以预期一点主观性。

判断哪些元素最重要的简单方法是使用斜视测试。闭上眼睛，直到一些元素消失。那些仍然比那些消失的人具有更多的视觉重量。

上面是来自Bureau的网站，几乎都是文字。主标题具有最大的视觉重量。它是最大的文本片段，它周围也有一些局部空白区域。它可以说是登陆页面的人应该看到的最重要的信息，因此它在视觉上很重要。

链接通过与周围文本的对比获得了一些重量，使用冷色调以获取更多的视觉权重。

视觉权重最小的元素是右列中的文本。这是有道理的，因为焦点最有可能被赋予文章，而不是侧边栏中的内容。

注意右列顶部的一小段红色文字。它是指向该网站主页的链接。尽管它很小，但红色为文本增加了一些额外的重量，有助于它从列中的其他文本中脱颖而出。当你直接查看网站时，图像中的所有内容都会显得更大，因此小红色文本并不像此处那么小。

当你应用斜视测试时，整个右侧列将消失，并且你将留下文章上方的主标题以及其下方的大块文本。

底部的图形对我来说是最重要的。它们是黑暗的，大而复杂的形状。他们将你拉到三个部分中的每个部分，其中包含下一个最具视觉突出的元素，部分标题。

页面上的主要标题是大而暗; 将它与它正下方的文本进行比较。由于其较高的视觉重量，其他突出的项目是顶部的公司名称和底部的徽标。

通过斜视测试，在大多数元素消失之后，彩色形状和文本以及底部的图形仍然存在。主要标题对我来说消失了，虽然我仍然可以告诉它。我也有点注意到左下角的标识，虽然它比它附近的图形大得多。

在这里，我认为主要方向是横向的。这些线条水平延伸，主标题和导航也是如此。另一个视觉上突出的元素，突出显示的文本，也是水平的。

三个齿轮可以被视为单个三角形，虽然是弯曲的形状，因此建立了对角线方向。但它们并不长，而且它们是页面上唯一的对角线。

总结

对于网页设计而言，视觉重量和视觉方向决定了浏览者对于你设计的网页的理解和认知，充分体现视觉权重，让重点突出，弱化边缘内容，是给浏览者了解网页最好的方式。