用户注意力是一种宝贵的资源。在视觉设计方面，每一元素都很重要。如何确保访问者会看到您希望他们看到的内容？如何引起对特定元素的注意？答案很简单——玩转视觉重量。

更多设计秘密，请加 | 微信Callen_0304

欢迎加入公众号：月亮体验设计坊 ，第一时间获取设计干货。

文末有设计小彩蛋哦

  视觉重量的概念  

物理学的重量是对地心引力施加于物体上的力的度量，但是平面世界当中没有质量，所以也就没有物理范畴的重量可言。此文讨论的视觉重量概念是元素对人眼球吸引力的度量能力。

  如何测量视觉重量  

因为视觉重量只能被感知，实际测量会非常的麻烦。但是从定性角度来分析，可以使用简单的测试方法来了解页面上的哪个对象比其他对象具有更大的视觉重量。比如看一下页面或者屏幕几秒钟，然后闭上眼睛，尝试记住页面中的哪个（或多个）对象能够留在您的记忆中。那么这些物体将比其他物体具有更多的视觉重量。

  影响视觉重量的因素  

在平面设计当中影响视觉重量的因素会有很多维度，比如颜色、尺寸、纹理、对比度、轮廓、与用户之间的距离等等。本文仅选择一些比较重要的维度来剖析一下。

颜色影响视觉重量  

人们看到一个物体时，会根据物体的大小、形状和质感来判断它是重还是轻。但实际上，从最直观的角度来看，还是来源于物体颜色。如下图所示，显而易见黑色比灰色更加吸引用户眼球，所以让用户感受到黑色更重。那么我们可以得出了第一个因素：物体颜色会影响视觉重量。

提示：有一个实验结果表明，如果同一个盒子涂上不同的颜色，那么给用户视觉带来的视觉重量依次为：“白色<黄色<蓝色<灰色<红色<紫色<黑色”。

环境影响视觉重量

现在我们来调整下物体所处画面的背景色，在没有改变两个正方形颜色的情况下，仅仅调整了画面背景色后，明显发现白色比黑色更能吸引用户的眼球，也就是说白色更重了。那么我们可以得出了第二个因素：环境色与物体色之间的对比程度会影响视觉重量。

轮廓影响视觉重量

让我们回到第一个例子所处状态，把右边的灰色矩形颜色换成与左边同等的白色，然后在外轮廓上加上一层边框，发现右边白色矩形的视觉权重明显大于左边那个没有边框的白色矩形。那么我们可以得出了第三个因素：物体色的外轮廓也会影响视觉重量。

  利用视觉重量的例子  

Antdesign里视觉重量的应用

antdesign里关于按钮设计规则有一条是当在一个区域里存在多个按钮时，建议选取一个按钮作为主召唤按钮。这个做法交互层面上是为了驱动引导用户进行正确的选择，视觉上的做法就是通过增加主按钮视觉比重，从而让其在一个按钮组当中脱引而出。

图片处理中视觉重量的应用

我们在做电商商品图设计的时候经常会碰到商品底图是白色的情况，当碰到这种情况的时候如果设计师简单粗暴将商品图底色变成灰色，往往视觉效果上会感觉十分突兀，呈现出的效果也不够精致。那么我们就利用边框增加视觉重量的方法在商品图外添加上1px的灰色描边，这样商品图跟产品底色就很好的区分开，视觉上也比较平衡精致。

文字排版中视觉重量的应用

我们在做文字排版的时候往往会通过改变文字与背景之间的色差来突出想要突出的对象，弱化想要弱化的对象。比如下面例子，我加粗标题的字重，同时将正文的白色调整了透明度，降低正文与背景色的色差，从而在视觉层面拉开标题与正文视觉比重。（这个案例也是「环境影响视觉重量」反向应用的一个效果）。

图标设计中视觉重量的应用

线性图标与面形图标是视觉重量最好的一种应用案例，在不同的使用场景当中各自发挥了不同的作用。线性图标一般起到表意、装饰、辅助等一些次要级别的功能，而面性图标在具有线性图标相同作用的情况下，还会在界面设计当中会起到一些号召发起，重要功能承载等等功能。就因为他的视觉比重很大，能够成为某个区域当中的视觉重量之王。

  文末小技巧介绍  

通常我们在处理黑灰对象的视觉重量时，会对不同的对象元素采用不同透明度，这种技巧做出来的视觉效果会比直接取颜色来的自然，同时在不同底色之下的适应能力也很高。如下图所示，第二列正文是使用透明度做出来的效果，而第三列是采用灰色做出来的效果。效果显而易见。

觉得本文不错相与小编偶遇，请加小编微信Callen_0304（月亮与六便士）

为什么我做的图总是很“没重点”？微信公众号：月亮体验设计坊

Powered by Froala Editor