bureau 设计原则：视觉重量与方向

网页上的每一个元素都会通过发挥自己的视觉力量来吸引观众的注意力。而且权力越大，吸引力越强。这些力也可以同时作用于其他元素，从而形成一个潜在的视觉运动方向，引导观看者的阅读。

我们把这种力量称为“视觉重量”，我们把视觉力量的感知方向称为视觉方向。理解这两个概念，对于创造层次、过程、节奏、平衡都有重要意义。

注:本文是设计原理系列文章的第四篇。本系列的前三篇文章是:

1.设计原则:视觉感知和完整形式原则

2.设计原则:空与图形背景的关系

3.设计原则:通过比较和相似来连接或分离元素

视觉重量

物理学的重量是对重力作用于物体上的力的度量，但是二维物体(比如网页上的元素)是没有质量的，所以物理范畴没有重量。视觉权重是衡量元素吸引眼球的能力。二维物体可以吸引人的注意力。一个元素越有吸引力，它的视觉权重就越大。

在本系列的最后一篇文章中，我谈到了元素的原始或固有特征，例如它们的大小、颜色和形状。在这篇论文中，我还谈到了如何通过这些特征来表达不同元素之间的对比和相似性。

比如一大一小两个元素，可以形成鲜明的对比。

通过结合这些不同的特征，我们可以控制视觉权重。红色比蓝色更吸引人，大元素比小元素更吸引人。因此，大的红色物体比小的蓝色物体具有更大的视觉权重。

然后元素的视觉权重由这些特征或原始特征的集合决定。需要强调的是，决定一个元素视觉权重的不是单一的特征，而是几个特征的组合。然而，不同的特征组合吸引不同的人。要创建具有不同视觉权重的元素，需要结合不同的原始特征。

如何测量视觉重量？

据我所知，没有办法准确衡量设计元素的视觉权重。但是你可以通过经验和判断分辨出哪些元素重，哪些元素轻。所以你要培养和信任自己的视力。作品中最吸引眼球的区域是视觉权重高的区域。还是那句话，相信自己的眼力。

但这并不是说你可以随意尝试，用眼睛判断什么最吸引人，什么不吸引人。例如，通过分离每个不同的特征，可以看出较大的东西比较小的东西重。同时，你的视力可以帮助你区分不同特征组合的视觉权重。

但幸运的是，一些专家已经分离并测试了各种特征。以下是对几个元素的特性及其对视觉权重的影响的描述。

首先，我们来看看上一篇文章中提到的一些原始特征:大小、颜色、色值、位置、材质、形状、朝向。

大小

较大元素的视觉权重高于较小元素。

颜色

暖色能更好的融入前景，比冷色有更高的权重。冷色倾向于融入背景。红色一般被认为是最重的颜色，而黄色是最轻的。

音调

暗元素视觉权重更高。

位置

在作品中，较高的元素比较低的元素更重。离作品中心或核心区域越远，元素的视觉权重越高。前景元素的权重高于背景元素。

木材组织

有材料的元素比没有材料的物体重。材料可以使元素更加立体，从而表现出一定的质感和物理重量。

形状

形状规则的物体比形状不规则的物体更重。不规则的形状给人的感觉是它们的质量和规则的形状是分开的。

定位

垂直物体比水平物体重。对角放置的元素权重最高。

当然，你不必局限于这些原有的特征，你可以通过其他特征来控制视觉权重。

密度

增加特定空空间中的元素数量可以增加空空间中的视觉权重。在观察者的眼中，高密度的区域会组合成更大更暗的组合元素，而不是一些小的浅色元素。

部分空白

空之间的空格表示空的状态，因此没有任何视觉权重。因此，放置在空白处空的物体相对于周围环境会显得更重。

内在兴趣点

不同的对象有不同的有趣程度。元素越复杂越有趣，吸引注意力的能力越强。在这方面，个人利益也起作用。比如你对汽车比对飞机更感兴趣，那么汽车的图片会比飞机更能吸引你的注意力。

深度

较高的场景深度可以使聚焦的元素具有更大的视觉权重，这可能是由聚焦和非聚焦区域之间的对比度造成的。

饱和能力

饱和色比不饱和色重。

身体重量感知

我们都知道房子的重量明显大于鞋子的重量。那么，房子的画面在视觉上自然比鞋子的画面更重，因为我们心里知道房子很重。

在本系列关于对比和相似的上一篇文章中，我提到对比可以提高元素的吸引力。换句话说，与周围环境形成强烈对比的元素在视觉上比环境元素更重。例如，在网页上，圆形通常看起来比矩形重，因为大多数网站元素都是矩形。

当然，不是所有的特征对视觉权重的影响都是一样的。大多数人关注的是元素的颜色，而不是元素的形状，这意味着颜色对视觉权重的贡献很大。同时你也要考虑到某个作品的独特性，因为对比元素的权重要高于对比元素的权重。作品的独特性将决定什么可以对比，什么不能。

请记住，视觉权重是上述属性的组合。所以，虽然大物体的视觉权重比小物体高，但是放置在被大量空格空包围的页面顶部的小暗圆形物体的权重很可能比放置在不规则形状的页面底部的大光冷物体的权重高。

视觉重量和完整的形式

这一系列文章背后的一个重要目的是指出完整的形式原则对设计原则的贡献有多大。

图形-背景

通过增加图形相对于背景的视觉权重，我们可以将两者分开。

靠近

不同元素之间的空会在空中形成不同数量的局部空白空和不同密度的对象。

相似和对比

我们可以从视觉权重的角度分别定义它们。对比可以给对比元素带来更高的视觉权重。视觉权重相近的元素自然会表现出相似性。

焦点(本系列下一篇文章的主题)

作品中的吸引点就是它的焦点，焦点自然比其他元素有更多的视觉权重。

过去的经历

观者的个人经历会作用于一个元素在他头脑中的内在兴趣点。

视觉方向

如果说视觉权重的目的是把自己的眼睛吸引到一个特定的位置，那么视觉方向的目的就是把自己的眼睛引到下一个位置。视觉方向是指视觉力量的方向。你可以把它当成你脑海中某个元素的下一个移动方向。

在某种程度上，视觉方向和视觉权重在吸引人们对作品特定部分的注意力方面起到了类似的作用。但两者的区别在于，视觉重量就像在喊“看我！看着我！”视觉方向写着“看这边！”

和视觉权重一样，可以通过修改元素的特征来表现不同的方向，但是在视觉方向上可操作的特征没有权重多。

元素形状

不管一个元素的形状如何，它本身都会有一个轴，这个轴是指示方向的关键。元素的长轴通常被认为平行于元素的视觉方向。

元素位置

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

元素主题

箭头、手指或凝视的眼睛可以指示特定的方向。

运动

可以让元素在设计中移动，移动就指出了方向。

结构骨架

每件作品都有自己的骨架，其中有沿着不同轴线运动的力。这一点可能需要进一步解释。

结构骨架

鲁道夫·阿恩海姆(Rudolf Arnheim)在《艺术与视觉感知:创造性眼心理学》一书中，提出了每件作品背后都有骨架的观点。

观点是每部作品都包含一套结构化的电力网络。即使作品中没有元素，我们的目光也会被其中的某一部分所吸引，原因如下电网图所示。

这个方形画布的中心和四个角像磁铁一样吸引人们的注意力。磁性最强的位置在中心，但这里说的不是画布的几何中心，而是光学中心，位于真实几何中心的上方。

画布中的轴从一个角通向另一个角，沿着轴的点位于中心和角之间的中间，也能吸引人的注意力。如果把这些中间点用纵横线条连接起来，就形成了一个具有一套视觉力量的轴。

关于这个理论，我们将等到系列中关于创作过程的文章。现在，我们可以考虑，在不增加设计的情况下，观察者的眼睛会被吸引到阿恩海姆框架中的每个点，并沿着每个轴的方向从一个点移动到另一个点。

这样我们就可以根据这个结构网把元素放在一个可以自然吸引注意力的位置，从而增强元素的吸引力。

视觉方向和完整的形式

你可以把方向想象成一条从一个元素指向另一个元素的真实或想象的线，或者连接不同的元素。这些台词不必真的表现出来。

一致连通性

连接元素的线有方向。眼睛的焦点可以在眼睛和所关心的物体之间形成一条假想的线。

连续

这个原理可以与沿直线或曲线排列的元素联系起来，就好像这些元素会沿直线或曲线移动一样。

集体性

可视为具有共性的元素，通常是指在想象中沿着或向同一方向运动的元素。

平行的

为了使不同的元素看起来平行，需要建立它们的内部轴(即形成方向的轴)。

工作的总体方向

还有一个关于视觉方向的概念:每一个作品都有一个主方向，可以是水平的，垂直的，也可以是对角的。

1.横向可以让工作更稳定，更从容。

2.纵向的作品可以带来严谨，警惕，平衡。

3.对角线方向可以表现运动和动感。

整个工作的主要方向可以通过大部分要素或者几个关键要素的方向来确立。根据不同线型的一般含义，方向有助于奠定作品的整体基调。

当然，一部作品可能没有主攻方向。例如，水平和垂直元素的数量可以相同。在这种情况下，观察者可以确定主方向是什么。

例子

关于下面的例子，我拍了几个页面截图，和大家分享一下这些作品在我眼中的视觉权重分布。当然，你可能有不同的看法，

毕竟不同的人关注的东西不一样。但还是那句话，我个人不知道有什么准确的方法来衡量元素的视觉权重。另外，两个兴趣不同的人，可能看的是不同领域的同一个作品。所以，存在主观性是必然的。

判断哪些元素更重的一个简单方法是使用斜视测试。具体方法是一点一点闭上眼睛，直到某些元素逐渐消失。那么剩余元素的视觉权重高于消失元素的视觉权重。

局

注意:我截图Bureau的时候，我的浏览器把宽度设置为1280像素以上。如果您的宽度小于1280，它的设计将被折叠成一列，而不是屏幕截图中显示的两列。

上面显示的局的文章基本都是写的。其中，主标题的视觉权重最大。是最大的一段文字，周围有一定的局部空白空。这个标题可以说是每个登录页面的人应该看到的最重要的信息，所以视觉权重高是很自然的。

图中的链接与周围的人物相比也增加了一定的权重，但我个人认为较冷的颜色削弱了它们的权重。

视觉权重最低的元素是右列中的文本。考虑到人们的注意力应该主要集中在文章上而不是侧栏上，这也是合理的。

另外，请注意右栏顶部的红色小文本。它是网站主页的链接。虽然体积小，但红色也给它增加了一定的重量，使它可以与列中的其他字符区分开来。如果直接去网站，图片显示的内容都不小，所以这个红色文字不会像截图那么小。

在这里，如果使用眯眼测试，你会发现右栏会完全消失，只留下文章上方的主标题和下方的一大段文字。

这部作品从上到下包含两个长柱，所以主要方向是垂直的。两栏背景颜色的不同形成了一条垂直线，引导大家浏览到页面底部，进一步给作品增添了垂直方向感。

创建数字媒体

当Create Digital Media的首页加载后，丰富多彩的元素会以动画效果跳入页面，这本身就会吸引很多注意力。如果错过了动画效果，这些元素饱和的粉、黄、蓝也能表现出极大的视觉权重。此外，这些元素在空之间占据相同的空间，从而在空白色空中间形成高密度区域。

注:“创建数字媒体”在从编写到出版期间关闭。如果你想知道为什么，请访问它的主页。

底部的数字是我认为第二重的。这些图形是黑色的，尺寸很大，形状很复杂。他们可以把你的注意力吸引到三个部分，每个部分都包含第二个最突出的视觉元素，即部分标题。

页面的主标题行比它正下方的文本更大更暗。其他突出的内容对我来说，从视觉权重来看，应该是最上面的公司名称和最下面的logo。

通过眯着眼测试，大部分元素消失后，依然是五颜六色的形状和文字，还有底图。眯着眼看不到主标题，但还是能感觉到它的位置。另外，虽然左下角的logo比附近的图形消失的早很多，但还是引起了我的注意。

我觉得这幅画的方向是水平的。页面上的行是水平分布的，主标题和导航栏也是如此。另一个视觉上突出的元素，突出显示的文本，也是水平方向。

三档可以看作是曲线和转弯的组合三角形，从而表现出对角线方向。但是这些齿轮分布不广，是页面上仅有的对角线元素。

JAVIER MARTA

哈维尔·玛尔塔的主页上有三个元素争夺最高的视觉权重。图形、板块之间的绿色屏障、页面顶部的菜单项都在争夺人们的注意力。

图表

大，深色，周围白色空。每个图形本身都有自己的兴趣点。

绿色壁垒

大，彩色，周围是白色空状图形。

菜单项

大，深色，周围也是白色空。

个人认为，哈维尔的logo比周围的菜单项略轻，但依然显眼。它的权重高于文字，但不如菜单项。但是你也可以有不同的看法。

通过斜眼测试，菜单项和logo会被整合。但是图形和壁垒还是会凸显出来，文字还是会看得见，但是会一个个变成。眯着眼还是能看清一切，但是看不清具体的字。

在我的屏幕上，只能看到标题和“El evento”，从而确立了整个页面的水平方向。然而，整个四个部分仍然在页面上。如果你扫一眼所有的盘子，绿色栅栏的对齐会使整个作品呈现出垂直的方向。所以，如果从整体的角度来看整个页面，它的方向会从横向变成纵向。

不知道截图中显示的两个图形放在相反的方向会不会更好。上图中，摄像头正对着右边，所以我的眼睛也在看右边。如果它能把目光投向文字，那就更好了。

下图中，女士的伞是朝右边的，但她是向左走的，所以我忍不住向左看。如果这两张图能把方向引向文字，而不是引离文字，那就更好了。

斯坦福艺术

斯坦福艺术主页顶部的图像具有最大的视觉权重。是页面上最大的元素，作为一张图片，也包含了很多内部的兴趣点。同时，它位于作品的顶端。其实光这张图就占了我屏幕上空的大部分。

注意:网站页面顶部的图片会偶尔滚动更新。所以你在访问网站的时候可能看不到截图里的图片，所以你对设计中视觉权重的评价会和我的不一样。

接下来，我觉得放在方块里的三角形图片的视觉权重是第二高的。然后就是组成标题和脚注的大红盘。

当我参加斜睨测试时，我发现所有的元素持续的时间都比我预期的要长。页面元素明暗对比挺好的，有助于他们突出自己。

测试结束，只剩下图片，比较模糊。我能看清楚的是上图，下面的三角图只剩下轮廓。

其设计在视觉方向的处理也很有意思。占主导地位的方向是对角线，之所以吸引人们的注意力，是因为大多数网页不使用对角线方向。这是相当颠覆人的预期的。

我截图里的照片，虽然有些部分比较曲折，是从人流中画出来的，但也表现出一定的对角线方向。

图中的女子(最右边的三角图)和摄影师(中间的三角图)都是向右的。所以如果能把女士的脸向内转，把相机放在左边的盘子里，效果会更好。

当然，当你悬停在面板中的任何链接上时，这些图片都会切换，但一般来说，图片是向外而不是向内的。

总结

元素的视觉权重是衡量其对观众吸引力的指标。视觉权重高的元素可以吸引更多眼球。

视觉方向是指不同元素所施加的视觉力量作用于其他元素时，人们所感知的方向。这里的方向是对观者眼球运动的即时引导。

元素的视觉权重可以通过修改许多内在特征来改变。有些甚至可以起到建立视觉方向的作用。