设计教程：视觉的重量和方向

网页上的每个元素都会产生一种视觉力量来吸引观众的注意力。这种视觉力量越大，就越能吸引观众的注意力。这些力量似乎同时也作用于其他视觉元素,传递出他它们潜在的运动和视觉方向，并且暗示你接下来该看什么内容。

我们把这个力称作视觉重量，并且把它感知视觉方向的力称作视觉方向。如果你想创作出的作品有层次感，流畅感，有节奏，有韵律，有平衡感，那么这两个概念就要重点来理解。

注意：这是设计原则系列文章的第四篇，你可以找到之前的三篇文章

第一篇：视知觉和格式塔原则

第二篇：设计留白和图底关系

第三篇：如何通过相似和对比原则区分和联系元素

视觉重量

物理重量衡量的是施加于物体上的重力(地心引力)，但是二维的物体(比如网页上的元素)没有质量，因此也就没有物理重量。视觉重量是衡量一个元素吸引眼球的力。二维的物体可以吸引注意力，一个元素吸引的注意力越多，那么它的视觉重量越重。

在这系列之前的帖子里我说过元素的原始特点或说是一个元素的内在特点。比如尺寸、颜色和形状。在之前的帖子里我提到过如何用这些基本特点去展示两个要素之间的对比和相似统一。

例如，用一个非常大的和另一个非常小的元素做对比，它可以清晰的显示元素的不同。

控制调节这些元素的特点组合，你可以控制网页的视觉重量。比如：红色比蓝色更加吸引注意力，更大的要素比更小的要素更吸引注意力。因此组合起来的话，大的红色的物体视觉重量要比小尺寸的蓝色物体视觉重量重很多。

这些内在特征的总和或者元素的基础特点才能决定一个要素的视觉重量。并不是其中任何一个，而是它们的组合决定了一个元素的视觉重量。一些基本特点的组合相比其它可以吸引更多的注意力。因此，为了创造不同的视觉重量，你应该会使用不同特点的组合。

如何衡量视觉重量?

据我所知没有一个很精确的方法去测量设计要素的视觉重量。用你自己的经验和判断去决定哪一个要素视觉重量轻哪一个重。发挥你眼睛的作用，并且相信它。这个作品区域中最吸引你眼球的地方就是视觉重量最重的地方。学着相信你的眼睛。

这并不意味着你不得不胡乱尝试和随意的去看什么元素是最能吸引你的眼睛。例如，你可以将每一个特点都分离出来，以便知道更大元素视觉重量比更小的重，你的眼睛会帮助你组合这些特点。

幸运的是，有人已经分离和测试了这些特点。下面的这些特点，你可以改变其中任何要素并且说明如何改变他们，改变后会增加或是减少视觉重量。

让我们开始来分析一下我之前提到的几个基本特点：尺寸、颜色、色值、位置、纹理、形状和方向。

尺寸

尺寸大的元素的视觉重量比小要素的重。

颜色

暖色更倾向于前景，一般都比较突出，同时暖色比冷色更重。冷色则往背景方向逐渐远去。红色被认为是最重的颜色，黄色则是最轻的颜色。

色值

深色元素的视觉重量比浅色元素视觉重量重。

位置

在一个作品中，处于更高位置的要素一般比更低位置的要素重。作品中，位于中心区域或重要区域的元素视觉重量更重。前景中的元素比背景中的元素视觉重量更重。

纹理

有纹理叠加的要素比没有纹理的要重。纹理让物体呈现三维的效果，同时给予它质量和视觉重量。

形状

规则的物体比不规则的物体要重，因为不规则的物体就像是规则的物体被切掉一部分后得到的。

方向

垂直方向的物体比水平方向的物体重，但视觉重量最重的是倾斜的元素。

事实上，你完全不用把自己限制在这几个基本特点中，你也可以使用额外的特点去控制视觉重量。

密度

填充更多的元素到空间中，去增加空间的视觉重量。观者将会感受到大的深色(更复杂的)的组合要素，而非一些小的和轻的(更简单)的要素。

留白

纯白的空间看上去没有视觉重量，因为它太空了。任何一个在空白中的物体似乎都更重了，原因是周围的空间都包围着它。

内在的兴趣点

有些事比其他的事物更有趣，更复杂的元素就更有趣，也能吸引更多的眼球。你自己本身的兴趣也扮演了一个角色，如果飞机和汽车相比你更喜欢汽车，那汽车的图片就会比飞机的图片更吸引你的注意力。

深度

较大的景深给了焦点元素更多的视觉重量，原因可能是焦距和未焦距区域的对比度

饱和度

饱和度高的颜色比饱和度低的颜色更重

感知物理重量

我们都知道一栋房子的重量比一双鞋子重吧!一张印着房子图片的视觉重量比一张印着鞋子的照片重。因为我们感觉房子更重。

在之前的这个系列里，我提到了对比的元素会更加吸引眼球。换句话说，与周围环境对比的要素将会比他周围的环境更重。举个例子，网页中的圆形元素视觉重量比矩形元素更重，原因是网页中的大多数元素都是矩形。

并不是所有的特点都会导致相同的视觉重量，大多数人可能最先注意到的是颜色而非形状。这表明颜色的视觉重量更重。你还必须考虑到他们的独特性，因为对比的元素比他们的对比物更重。你作品的具体情况将决定哪些地方有对比，哪些地方没有。

请记住，视觉的重量是上述这些属性的总和。尽管大的元素比小的元素要重，一个小的黑色圆圈周围是大量的白色空间并且在页面顶部，他比一个大的不规则的冷色的在页面底部的物体要重。

视觉重量和格式塔原则

接下来的这个系列指出了格式塔原理对设计原则有多大的贡献。

·图形背景

视觉重量可以通过给予图形更多的负重去把背景和图形元素区分开来。

·距离

元素间的空间导致了不同数量的局部空白和物体内部空间的不同密度

·相似和对比

你可以用视觉重量去表示它们，对比的元素会带来巨大的反差和视觉重量，类似的元素很自然的就会表现出相似性。

·焦点(该系列中的下一个主题)

点元素组成了焦点并且会特别有吸引力，它的视觉重量比其他元素都重

·过去的经验

浏览者过去的体验会很影响他们认为的当前网页中最吸引眼球的元素。

视觉方向

如果说视觉重量是关于吸引眼球到特定的位置，那么视觉方向就是引导眼球到下一个位置。视觉方向是对视觉力量的感知。如果元素正在运动中，那想一下你期望的元素的移动方向。视觉方向和视觉重量有着相似的功能，视觉重量是想让你注意到作品中的某一部分，它在兴奋的对你说“嘿，看我这!”，而视觉方向却在对你说“嘿，看那边!”

当然你也同样可以通过修改元素特点去改变视觉方向，尽管它的元素特点比视觉重量要少很多。

·元素的形状

一个元素的形状可能可以创造一个坐标轴，并且这个坐标轴会提供一个视觉方向。基本轴通常都是平行方向的视觉元素

·元素的位置

视觉重量是一种排斥与吸引并存周围元素的力量，同时这个力量把它们都联系在了一起。

·特定元素

一个箭头、一个手的指向或者一个眼睛的凝视都暗示了一个具体的方向

·元素移动

通过你的设计，元素确实可以移动，并且它的移动是有方向的

·结构骨架

每一个元素都有骨架结构，它们都沿着不同的轴线很自然的移动。这里可能需要更多的解释了。

结构骨架

在鲁道夫·阿恩海姆他的《艺术与视知觉》这本书中，鲁道夫·阿恩海姆提出每张画布后都有结构骨架，每一个画布都有一个结构网格的力量贯穿它的全部。即使这个画布上没有任何元素，我们的眼睛还是会被吸引到画布上的某些特定部分，正如下图中结构网格的力量。

矩形画布的中心和四角就像磁铁一样吸引我们的眼睛。磁力最强的地方在画布的中心，尽管不是画布的几何中心。相反，吸引眼球的中心是光学中心，它位于几何中心的上方。

轴线从中心贯穿四周，这些轴线交点的中心和四角都吸引了注意力。这些中途的交点，把水平线和垂线相互联系起来，创造了一个吸引眼球的坐标轴。

我们后面要谈到这一个系列关于创作流的时候在回来讨论一下结构网络的。现在，一个缺乏设计眼光的浏览者会被吸引到阿恩海姆结构网络的中心，并且沿着不同的轴线一点一点往下看。

因此，你可以利用这个结构网络去放置元素，调整它们的位置。它们会很自然的吸引眼球，并且吸引力会增强。

视觉的方向和格式塔

你可以想象一个元素到另一个不同却相互联系的元素的方向，用一条真实或想象出来的线条。这条线可以是不可见的。

·统一连通

这根线连接的元素是有方向的，眼睛凝视元素的地方会出现一条线。

·连续

这条原则相关于元素被安排成直线还是曲线，就好像他们正在沿着曲线或直线运动

·共同命运

元素之间似乎有朝着一个方向移动和呈现的共同命运。

·并行

为了使元素看上去是并行的，它们的内部轴线(相同的指引方向)必须建立起来。

作品的总体方向

视觉方向更多的一个概念就是，每个作品都有一个主导方向，不管是垂线、水平线还是对角线。

·水平方向会让作品表现出冷静和稳定的感觉

·垂直方向会让作品表现出危险、形式感和平衡感

·对角方向代表位移和运动。

作品的主导方向是由大多数元素或者几个关键元素来确定的，这个方向会帮助建立一个总体氛围，这个总体氛围的建立是根据不同的线型来决定的。

有可能作品中没有主导方向，垂直线和水平线的数量是相等的。举个例子，在这种情形下，浏览者可以决定哪个方向是主导方向

例子

接下来的一些例子，我拿了一些网页的截图。我会跟你分享我的想法以及我看到的视觉重量。当然，你看到的可能和我不一样，这是很正常的。

不同的眼睛会被不同的事物吸引，我也知道没有一种确定的方法去衡量元素的视觉重量。此外，两个人会很容易的看到作品的不同区域，因为他们的兴趣不一样。这一点是具有主观性的。

这里有一个很简单的方法去测试元素的视觉重量，眯起眼睛或者斜视看哪些元素会渐渐淡去，相比那些淡去的元素那仍然有元素较重。

信息局

我浏览器截取信息局的网页宽度是1280像素的，如果不这样的话，设计可能会崩溃。而不是下面看到的两个单独栏目

这上面这个信息局网页的文章显示了几乎全部的文本，很明显，标题的视觉重量最重。第二个就是文章那一片，因为周围有很多白色空间围绕着它。这可以说是一个来访者应该看到的网页中的最重要的信息，因此它具有较重的视觉重量。

链接通过与周围文本的对比也得到了一些视觉重量，尽管在我看来冷色减轻了一些重量。

视觉重量最少的地方是右列的文本，这不是没有道理的。因为，重点最应该是文章而不是侧边栏。

请注意右侧上方的红色小点点，这个链接是到网站的首页的。虽然它很小，但是红色却给了它一些额外的视觉重量，帮助它从其他元素中脱颖而出。当你直接看这个网页的时候一切都很大，因此红色在这个地方显得不是很那么小。

当你用斜眼测试看这个网页的时候，右边的侧边栏全部消失，留下的就是一个很大的标题和标题下边一整块文字内容。

这张作品的视觉方向是垂直方向，因为网页一共就分了垂直的两栏。背景不同的颜色创造了一个垂直的线条引导你往下看，并且还给了作品一个垂直的视觉主导方向。

创建数字媒体

当加载到数字媒体的主页，丰富的色彩以及恰到好处的动画，都为他们吸引了大量的注意力。即使你没有看到它的动画，你也会觉得这个元素有很重的视觉重量，因为它有着饱和度很高的粉色、黄色和蓝色。这些元素也占据相同的空间，它们创造出了一个密集区域在一片空白背景下。

这篇文章还在出版和写作之间，创建数字媒体网站已经关门了。想知道为什么，就看看下面的主页吧。

对我来说，视觉重量第二种的就是下面的三个图形按钮。它们看起来又黑又大而且复杂。它们把你拉到三个部分，并且去看下一个最显眼的元素(即每个部分的标题)主标题在网页中显得黑暗和巨大，直接和它下面的文本产生对比。其他项目对我来说都很耀眼，这要归因于它们很重的视觉重量(即公司的名字在头部，而logo和按钮在下方)。

用斜眼测试该网页，有颜色的齿轮、文本和图形按钮仍然较重，其他的元素都渐渐淡去。主标题对我来说也模糊了，尽管我还能看到它。我还看到了左下角的logo，尽管它模糊速度的比图形按钮快得多。

呃，我认为他的视觉主导方向是水平方向。它的主标题和导航都是呈一条水平线。另一个显眼的元素，突出的文本也是水平方向的。那三个齿轮可以看成三个单独的三角形，虽然它形状上有些弯曲。所以它是对角线方向。它们不长，是页面上唯一的对角线方向的元素

贾维尔·玛尔塔

三个要素的对比给了玛尔塔主页视觉重量。图像、板块间的绿色分割元素和顶部的菜单栏都吸引了注意力。

·图形

这些图形都是大的、颜色深的并且被周围的白色空间包围。每一个图形都有自己本质的意义。

·绿色分割点

它们较大，并且有颜色，就像图形一样。并且它们被白色空间包围着

·菜单栏

与前面元素一样，菜单栏很大，颜色很深并且被白色空间包围。

对我来说，网站的logo也有一些视觉重量跟它旁边的菜单栏相比，尽管没有菜单栏那么显眼，但也比正文板块要重一点。可能你会反对我，但这不重要。

斜眼测试使菜单栏和logo混为一体，绿色分割点和图形元素仍然很明显，正文板块看起来就像一整个色块。你可以看到任何东西当你眯起眼睛的时候，即使你不知道它具体说的什么。

在我的屏幕上，只有头部和“EL evento”这两个部分是看得见的，它们给了网页一个水平方向。然而四个部分全在这个页面上，当你一次性看上去，绿色分割点会给作品一个垂直方向。呃，当然，你会看到整个页面从水平方向转变成垂直方向。我想知道如果两个图形都在上方而不是在对立的两端是不是会更好。在第一个图形，摄像头右侧一点，就是我眼睛看到的地方。没有更好的将视线引导到正文板块。在底部的图片中，女士的伞朝右侧打，人却往左侧走，这就是我视线的趋向。如果这两张图片能互相配合好，就能将视线引导到正文上而不是远离它。

斯坦福艺术

这张斯坦福艺术的主页是视觉重量最重的网页，它有一张大图在首屏，并且有本质的兴趣。它也位于网页的顶部，它几乎占了我的整个屏幕。

注意：这个网页的图片轮播在顶部，并且它随时间的变化而变化。你可能不会看到特定的一张照片，当你进入这个网页的时候。正因为如此。你评估它的视觉重量可能和我在这评估的不一样。三角形的照片可能是视觉重量第二重的了。之后就是大红色块的页眉和页脚了。

当我进行斜眼测试的时候，所有元素可见的时间比我预想的要长。这些元素很好的处理了光影效果，让他们脱颖而出。最后，剩下的就是一些图片了，虽然没有全部的细节。我只能认出顶部的大图，却看不清下面三角的图片。

这个网页的视觉方向也很有意思。以对角线方向为主导，大多数网页都不会用对角线作为主导视觉方向，它抓捕了更多的吸引力。它们颠覆了你的期望。

我截取下来的这个网页有特殊的大图并提供了一些对角线元素。尽管也有一些曲线。

在最右边的图片的女人和中心图片的摄影师给了一个向右的视觉方向。也可以把女人的面部转向内部，将摄像机转向左边。

诚然，当你鼠标悬停在图片上的时候它可能会发生改变。尽管如此，图像往往会导致向外而不是向内。

总结

一个元素的视觉重量是元素对观众眼睛的吸引力的多少来衡量。元素视觉重量越重越吸引观者的眼球。

视觉方向是施加在元素上的一种方向的感知力。方向是来提示浏览者眼睛移动的方向。

许多内在的特性可以被修改，使得元素的视觉重量重或者轻。同样也有一些可以建立视觉方向。

在本文剩余部分中，我们将看到视觉重量和视觉方向是如何引导设计原则，像主导地位和结构层次，流量和节奏，从而使作品平衡。