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

网页上的每个元素都会通过发挥自身的视觉力量吸引观者的眼球。而这种力量越大，吸引力也就越强。这些力量同时也能作用于其他元素，从而形成一种潜在的视觉运动方向，引导观者的阅读。

我们把这种力量叫“视觉重量”，把我们所感知到的视觉力量方向，叫做视觉方向。理解这两个概念对于作品中层级、流程、节奏和平衡的打造具有重要的意义。

注：本文是设计原则系列文章第四篇。本系列前三篇为：

1.   设计原则：视觉感知力及完全形态原则

2.   设计原则：空间与图形背景关系

3.   设计原则：通过对比与相似联系或分离元素

视觉重量

物理学的重量是对地心引力施加于物体上的力的度量，但是二维的物体（例如网页上的元素）没有质量，所以也就没有物理范畴的重量可言。视觉重量是对元素吸引人眼球力量的度量。二维的物体都能够吸引人的注意力。一个元素吸引力越强，其视觉重量也就越大。

在本系列的上一篇文章中，我谈到了元素的原始特性或者叫固有特征，例如其尺寸、颜色和形状等等。在文中，我还说到了如何通过这些特性来表现不同元素之间的对比与相似。

举例来说，两个元素一个很大一个很小就能形成鲜明的对比。

而通过组合这些不同的特性，我们就可以控制视觉重量。红色比蓝色更加吸引人，大的元素比小的元素更加吸引人，所以说，一个大的红色物体所具有的视觉重量就要大于小的蓝色物体。

那么这些特征或者说原始特性的集合，就决定了元素的视觉重量高低。要强调的是，决定元素视觉重量的不是单个特性，而是多个特性的组合。但不同的特性组合吸引人的力度也有不同。要打造具有不同视觉重量的元素，就需要结合不同的原始特性。

如何衡量视觉重量？

据我所知，精确衡量设计元素视觉重量的方法是不存在的。但你可以凭借经验和判断力来分辨哪些元素重量大，哪些重量小。所以你要培养并相信自己的眼力。一幅作品中最吸引眼球的区域就是视觉重量比较高的区域。还是那句话，要相信自己的眼力。

但这并不是说你可以随便乱试然后用眼睛判断什么吸引力最强什么吸引力不够强。举个例，你可以通过把每个不同特征分离开来判断出比较大的东西重量要大于比较小的东西。与此同时，你的眼力可以帮助你区分不同特性组合的视觉重量。

不过好在已经有高人把各种不同的特征进行了分离和测试。下面是几个元素特征以及其增减对视觉重量的影响说明。

首先我们来看上一篇文章中提到过的几个原始特性：大小、颜色、色值、位置、材质、形状及朝向。

大小

比较大的元素相比小元素的视觉重量要高。

颜色

暖色能够比较好的融入前景，比冷色重量高。冷色更倾向于融入背景。红色是一般认为是重量最大的颜色，黄色则为最轻。

色值

较暗的元素视觉重量较高。

位置

在作品中所处位置较高的元素重量要大于所处位置较低的元素。距离作品中心或核心区域越远，元素的视觉重量也就越高。前景中的元素所具有的重量要高于背景元素。

材质

有材质的元素重量大于无材质物体。材质能让元素更具三维感，从而更表现出一定的质量和物理重量感。

形状

形状规则的物体比不规则的物体重量较高。不规则形状会让人产生其质量被从规则形状中抽离的感觉。

朝向

垂直的物体重量高于水平物体。呈对角线放置的元素重量最高。

当然，你不一定要局限在上述的这些原始特性之中，大可通过其他的特征来掌控视觉重量。

密度

增加特定空间内元素的数量能够提高空间的视觉重量。在观看者眼中，高密度的区域会结合成为一个较大、较暗的组合元素，而不再是几个小的、淡色的元素。

局部留白

留白的空间呈现出空的状态，因此不具有任何视觉重量。因此，放置在留白空间中的物体就会在周边环境的衬托下显得更具重量。

内在兴趣点

不同的物体有趣程度也不尽相同。元素越复杂、越繁复会让人兴趣越高，从而吸引眼球的能力也就越强。在这一方面，个人的兴趣点也发挥着作用。比方说，你对汽车的兴趣大于飞机，那么汽车的图片相比飞机就更能吸引你的注意力。

深度

较高的景深度能够让位于焦点的元素更具视觉重量，这一点有可能是焦点与非焦点区域之间的对比度造成的。

饱和度

饱和的颜色比不饱和颜色更重。

物理重量感觉

我们都知道房子的重量显然大于鞋子的重量。那么，一所房子的图片在视觉上也就自然比鞋子图片更重，因为我们心里知道房子重。

在本系列上一篇有关于对比与相似的文章中，我提到了对比度能够提高元素的吸引力。换句话说，一个与周边环境对比强烈的元素在视觉上就比环境元素的重量更高。举个例吧，在网页上，圆形一般比矩形看起来更重，因为大部分网站元素都是矩形的。

当然，并不是所有特征对视觉重量的影响程度都相同。大部分人对元素颜色的注意力要先于元素形状，这也就说明颜色对视觉重量的贡献较大。同时你还要考虑特定作品的独特性，因为形成对比的元素的重量要高于用来与之对比的元素。作品的独特性将决定哪些东西能够形成对比，哪些不能。

要牢记，视觉重量是上述各种属性的组合。所以，尽管大的物体视觉重量高于小的物体，但一个周边环绕大量留白空间、放置在页面顶部的深色小圆形物体，其重量很可能会高于放置在页面底部、形状不规则的浅冷色大物体。

视觉重量与完全形态

本系列文章背后的一个重要目的就是指出完全形态原则对设计原则的贡献度有多少。

图形-背景
通过提高图形相对背景的视觉重量，我们可以将这两者进行分离。

邻近

不同元素之间的空间会形成不同的局部留白空间量和不同的空间内物体密度。

相似与对比

我们可以从视觉重量的角度来对这两者分别进行定义。对比可以给形成对比的元素带来较高的视觉重量。而视觉重量差不多的元素则会自然地表现出相似性。

焦点（本系列下一篇的主题）

一幅作品中的吸引点