为了吸引用户的眼球，网页上很多元素都会增加视觉权重，这种权重越大就越能吸引用户，而且这种权重也会影响到其他元素，形成视觉路径，以判断其潜在的运动趋势，并建议用户接下来应该怎么做？

我们将这种权重称为视觉权重和视觉权重对视线路径感知的影响。这两者很明显，如果想使得作品具有结构层次、流程和节奏以及平衡感，这是一个很重要的概念。

视觉权重

物理上的重量是力的量度，牵引力施加在物体上的一种力，而对于二维的对象（例如web页面上的元素）不具有这种量度，因此就不会具有物体上的重量。而视觉权重是一个元素施加在吸引人眼球的力的量度，在二维的对象中会有感知。通常越是有吸引力的元素，其视觉权重就越大。

在前面的文章中我曾经提到过原始特征，或元素本身固有的属性，如大小、颜色和形状。在这篇文章中我将会提到如何通过这些属性来解释显示元素的差异和共性。例如，通过一个非常大和另一个非常小的元素就能很明确的指出元素之间的不同。

控制这些属性之间的组合就可以知道如何控制视觉权重。通常相比较蓝色，红色的容易吸引眼球，还有就是更大的元素比小的元素更吸引眼球。大而又是红色的物体对于小而蓝色的物体就就更加明显直观。

如何衡量视觉权重？

有没有可以精确的测量这种设计元素的视觉权重的方法呢？我们可以依靠自己的经验来判断并决定哪些元素具有较大或较小的权重，可以利用眼睛然后给予它信任。通常在一些组合元素 中那些拥有更大视觉权重的元素更加吸引我们的眼球，所以请相信自己的眼睛。

这也并不是意味着可以随机的尝试某些情况。来看看什么是吸引眼球多和少。我们会通过这些元素特征然后比较而得到哪个元素更大的视觉元素。所以要使用眼睛和元素属性相结合。

幸运的是这种特性和视觉上重量的判断有人做了很多的研究和测试。下面的一些例子可以通过改变元素属性以及如何改变这些元素在视觉重量的多与少之间的关系。

先让我们从基本特征开始研究：大小、颜色、值、位置、质感、形状、方向。

（1）尺寸：大元素比小元素有更多的视觉权重；

（2）颜色：暖色调比冷色调更加容易进入人眼，通常会作为背景来平衡前面的冷色调。另外红色被认为是最重的颜色而黄色是最轻的；

（3）值：黑色元素的视觉权重要大于其他轻淡元素；

（4）位置：在组合物中位于较高位置元素的视觉权重要大于位置较低的元素。进一步说就是中心的或占据主导位置区域的元素其视觉权重就越大。

（5）质感：有质感的元素视觉权重大于没有质感的元素，这种质感会使元素变成三维的，使得元素在外观上具有物理的重量；

（6）形状：具有一定规则形状元素的视觉权重要大于不规则形状的元素。而凹凸感就好像元素被挖去或补上一块了；

（7）方向：垂直的元素比水平的元素更重，对角线元素最重；

当然，我们也不必限制在这种基本的功能上，还可以使用其他的特征来控制视觉权重；

（8）密度：在固定的空间里面使用更多的元素也可以增加这一区域的视觉权重。这是用户会看到一个更大的组合元素区域。而不是几个较小和较轻的元素；

（9）空白区域：当空白区域没有视觉元素的就是没有视觉权重，但是当周围都是空白时放置在这区域的元素就是看上去很重（类似一种对比）；

（10）内在兴趣点：当有些元素相比较于其他显得更加有趣，或者是更加复杂的轮廓和元素，那么就会使得开发者做出更加有趣复杂的来吸引用户的眼球。因此自己的兴趣点也会影响到我们，如果和飞机相比汽车更加具有吸引力，那么就在平面上的一辆汽车就更有重量；

（11）深度：焦点元素的景深加大，相比较于无焦点的元素就感觉越重；

（12）饱和度：饱和度高的元素比低的元素更加的重；

（13）元素自身表达的重量：例如房子的重量一般会超过一只鞋子。因此房子的在图片上视觉感觉更重。

在以前的帖子中有一系列的关于对比度和相似性的讨论。我也重点提到对比对元素的影响。换句话说就是元素的视觉权重会随着周围的环境对比，从而受到影响。例如，在网页中圆形比矩形看起来似乎更重，所以大多数的网站选择使用矩形以减轻这种重的感觉。

当然并不是所有的元素能帮助我们控制视觉权重。例如大多数人在看到元素时会优先读取颜色信息，说明元素受颜色的影响要大于形状。另外我们也要考虑一些其他的元素的独特属性，因为通过对比会发现元素比对比元素更加的重一些。而在构图细节上将会决定什么样的对比。

请记住控制视觉权重是上面属性的一系列组合。虽然大的元素比小的更加重些，但是在白色空白中，一个小点的黑色圆圈似乎更加的突显。而位于顶部颜色很重的元素可能会超过底部很炫的浅色较大的不规则的元素。

格式塔原则：视觉权重

这里一系列的背后的理念都是在指出格式塔原则如何有助于设计原则。

（1）图形和背景：视觉加权的方法可以使图形和背景分离出来并平衡与背景的视觉重量。

（2）接近：一定区域的元素之间会留下一些空白区域，从而导致元素或对象之间的不同密度来控制视觉权重。

（3）相似性和对比度：这是控制视觉权重中很重要的一点，在对比鲜明的元素中会导致大的视觉权重，另外类似于视觉元素的叠加，就表现出相似性。

（4）焦点：在组合物中吸引人的焦点所在，而这些焦点元素会携带更多的视觉权重。

（5）以往经验：根据用户的经验有助于来确定，还有内在的兴趣点吸引。

视觉导向

如果是视觉权重是吸引眼球到特定的位置，那么视觉导向就是关于引导眼球落在下一个位置的方法。视觉权重会引导视觉导向的感知方向，如果它在运动方向，就它看成自己所期望的方向来回移动。

而视觉导向就是提供类似功能的并结合视觉权重，这样就会作为设计中的一种组成部分。就好比：“视觉权重”说：“看我”，而“视觉导向”会说：“看那边”。

和视觉权重一样也可以控制元素的属性，尽管相对于视觉权重有些少。

（1）元素形状：将元素的形状创建一个轴心，沿着一个方向，这样从轴心出到指向就会引导我们的视线。

（2）元素位置：视觉权重可以增加或减少视觉权重的吸引力影响。利用这种效果的力，可以作为连接两者之间的移动方向。

（3）元件的标的物：使用箭头、手指或是建议眼睛视线指向某个方向；

（4）运动趋势：元素中可以设计一种运动方向来指引用户视线；

（5）结构骨架：每一个组合物都有结构骨架，并都沿着不同的轴运行的力，这里还需要好好研究一下。

结构骨架

鲁道夫·阿恩海姆在其书《Art and Visual Perception》中提到对每个画布的背后基本架构的想法。想象一下每个画布都有一定运行规律的结构性网络。在画布里面即使没有任何元素，但是我们的眼球还是会吸引在画布上，就像下面画布的结构一样。

在这个四角正方形画布的中心处就像磁铁一样吸引着眼球。而中心是磁铁最强的，哪怕中心不是画布中心也是一样的。相反，吸引眼球的中心就是光学中心，并且位于正上方真实的几何中心。

另外这四条对称的轴，沿着轴之间的中心和角落处都是非常吸引注意力。而轴中间的点和垂直的水平线会继续创造视觉冲击力。

我们可以回过头来想，发现当视线到达一个地方后，还会随着这些元素进行流动（尽管这些感觉似乎很微弱），现在我们要考虑的是在没有设计时，观察者的的视线还是会集中到上图的某些点，并且视线也遵循一些移动的规律，因此可以利用这种结构将主要元素放在这些点上从而吸引用户眼球。

格式塔原则：视觉导向

我们可以认为视线是指向一个元素到另一个元素，而这个线是不可见的。

（1）统一连贯：连接元素之间的线路是有方向的，眼睛会产生一个假想线，停留在一点上。

（2）延展：这一个原则涉及到直线或曲线的排列元素，就仿佛我们朝着直线或曲线的方向。

（3）共性：视为那些具有共性的元素会在同一个方向上移动，或出现在同一方向上。

（4）平行：为了使元素保持平行状态就需要将它们内部的轴赋予相同的方向。

总体方向的组成

视觉导向的另一个概念是每个组合物可能会成为一个主导方向，无论是水平的还是垂直或对角线。

（1）在水平方向会使得组合成分显得平静和稳定；

（2）垂直方向增加一种形式会使得产生警觉性和均衡感；

（3）对角线方向会显示运动和运动趋势。

将多个元素和几个关键的元件组合建立占有主导方向，这种方向上将会有根据不同的意义表现出不同的视线引导线。也可能组合物没有主导方向，水平和垂直界面的数目是相等的，那么在这种情况下就取决于用户。

案例

对于下面的例子中我会选择一些截图来分享我对于视觉权重的各个想法，当然你也可以有不同的想法。

不同的东西会吸引不同的目光。另外，我也没有很好的方法来确定视觉权重的多少，还有就是两个人会根据自身不同的价值观在组合物中看到不同的区域，主观性是可以预期的。

有一个很简单的方法来判断视觉上的权重，那就是：眯眼测试。具体是闭上你的眼睛直到看到一个元素快消失的时候，如果其他的元素还存在，那么它们的权重就更多。

Bureau

截图为Bureau的一个页面，由于浏览器设置的原因宽度只有1280px，如果 是单个列估计会被这种设计崩溃。

从截图中可以看到所有的内容就是文字，而主标题使用加粗黑体最为直观。文字占比是最大的一块，而其周围全部是空白，也可以说是设计者希望用户可以看到页面上最重要的信息而不受到干扰。这样做就是很有原因的，这也就是视觉权重。

还有链接处于周围的文字有一个很明显的颜色对比，虽然使用少量冷色系，可是我们依然很明显看到。

在右边的列表中只有少量的元素是明显的，这也是有道理的。因为焦点的位置是文章内容部分，设计师希望我们可以忽视右边的侧栏，从而减少其他元素的干扰。

另外我们还会注意到在右侧列表的顶部有一个小区域使用了红色文字，而这一个链接就是整个网站的主页，尽管它很小但是被赋予了额外的权重，来帮助这个元素从其他元素中脱颖而出。当我们看到整个页面时，会明显感觉这个元素很小也很吸引注意。

当我们使用眯眼测试法，就会发现整个右列慢慢消失，只留下主标题和文章内容区域。由于这个页面是两个纵向的列表，所以主要的方向就是垂直的，在这两个列表之间由于背景颜色的不同，使得视线的流向是垂直的方向。

Create Digital Media

Create Digital Media的首页在加载时，有很丰富颜色的元素，来吸引用户更多的注意力。即使错过加载动画，也会看到很显眼的颜色，这里使用了饱和度很高的粉红色、黄色和蓝色。它们之间占有的空间也是相同的。而且在一片很大的空白区域，它们是很密集的。

在底部的图形中，也给人很重的感觉。还是黑色很复杂较大的形状。会分离开为三个部分，其次就是它们各个的标题。

页面中主标题使用很大文字，相比较于下面的文字，颜色也较深。这个网站从我的角度来看，顶部的logo和正标题以及底部的图形是有较高的视觉权重。

使用眯眼测试法会发现除顶部的logo和标题以及底部的图形没有消失，其他元素都消失了。继续眯眼就会发现主标题也会消失，尽管依稀可见。另外还会注意到左下方logo处的文本消失的速度要快于其附近的其它图形。

在这个页面中最主要的方向应该是水平的，和主标题与导航栏分割水平线是一致的，另外要突出显示的元素以及文字也是水平的。

三个齿轮可以近似看成一个三角形，虽然有一些弯曲的但是是从整个页面对角线方向建立起来的。虽然它们并不是很长，却是页面中唯一使用对角线的元素。

Javier Marta

在Javier Marta页面上有三个最主要元素，分别是导航栏、文章中插图以及章节之间的分割线。

（1）图片：这两张都是很大而且是偏暗，被较白色空白区域包围。每张图片都展示自己要表达的信息。

（2）绿色的分割线：使用了颜色和更加大的空白区域，还有间断的分割。

（3）导航菜单：使用了大片黑色，另外周围是留白突出。

网站的logo相比较于导航菜单栏更加的轻，但是仍然十分突出，它们承载更多的内容相比较于文本，但是似乎并不像菜单栏，不知道这点你是否同意。

眯眼测试会发现导航栏和logo会融合在一起形成一个单独区域，并以水平线的形式显示。另外图片和章节的分割线仍然十分的显眼，并且文字内容区域呈现较大一块。即使看不清文字区域具体讲了什么。

在我的屏幕上，水平方向只有导航栏和章节分割线可见，而且四个导航栏总是在最上面，还有就是绿色的分隔线开始就使得页面也是从水平到垂直的方向转变。

在第二张图片中可以看到女人的伞指向很明确，却并没有离开，这是视觉权重在于看，如果两张图片中的某种方向指引是指向文章内容，就可以使得图片更好的服务设计。

Stanford Arts

在Stanford Arts 的顶部，是页面中最重也是最明显的地方，另外顶部使用很大的一张图片作为元素的集合，有很多有趣的地方。这个benner也占据了我整个屏幕。

仔细注意这个网站顶部的图像是旋转的，并且会随着时间的变化而变化，如果不访问网站可能不会看到这种效果，另外你也可以不同于我的方法来评估这个网站中的视觉权重。

我认为大图片下面等三角形图片是第二重的元素，之后就是在页眉和页脚处的大红色块。

当我做着眯眼测试时候，元素消失的时间速度和我预测的一样。另外三角形的图片很好的平衡了光亮和黑暗之间的对比。这可以帮助它们脱颖而出。

最终唯一存在的图像仍然是顶部的banner，虽然看不清较多的细节，但是还是可以看到大图，其次是下面的三角形图片。

这里的设计在视觉导向上很有趣。对角线占据主导地位，因为我们见过的大多数网站都不会使用大量对角线，而这个网站的正是因为这个得到很多关注，它颠覆了我们的期望。

另外我截图的banner图片上也使用了对角线，虽然有些弯曲的部分和人为建造的区域，但是并不影响整体的对角线布局。

其次是三角形图片中从左到右三张，依次指向右边。其实如果第三张的女人头像如果朝向页面或许会更加完美了。

当然，对于图像部分当我们悬停时也会发生改变。但是图片的变化还是向外而不是指向内。

总结

元素的视觉权重在于能吸引用户有多少的注意力在这些元素上的量度，所以视觉感觉较重的元素更加吸引眼球。视觉方向是作用在于由元素施加的力的感知方向。方向是给观众的视线一种移到别处的提示。

许多固有特征可以通过修改，使一个元件在视觉上或许减轻。另外一些也可用于建立一个元素的视觉方向，如可以在画布本身建立。在本系列的后续文章中，我们将看到的视觉权重和视觉导向，导致的主要地位和层次结构、流程和节奏，并对最终的平衡组合原则产生怎样的效果。

作者：Steven Bradley

https://www.smashingmagazine.com/2014/12/design-principles-visual-weight-direction/