猫饼粑粑

in号:不二大叔;公众号:精进自习室!


转载于 ui设计之路

ui设计之路:

视觉的重量

在网页中,每一个要素都发挥着它该有的视觉的力量去吸引用户的眼睛。这个力量越大,它吸引的目光就越多。同时它还作用于其他的视觉要素,传递出潜在的视觉移动方向的信息,并且告诉你接下来该看什么。

我们把这个力称作:视觉重量;把它感知视觉方向的力称作:视觉方向。如果想让你的作品变得流畅、平衡、有节奏感和层次感,那他们就很重要了。

物理重量衡量的是引力发挥在物体上的力,但是二维的物体(比如网页上的元素)没有质量,也就没有物理重量。视觉重量是衡量一个元素吸引眼球的力。二维的物体可以吸引注意力,吸引的注意力越多,它的视觉重量越重。

举个例子,你可以通过一大一小的形状对比让要素变得不同且清晰。

通过调节这些内在特点的组合,你可以控制网页的视觉重量。比如:红色比蓝色更加吸引眼球,更大的要素比更小的要素更加吸引眼球。那么组合起来的话,大面积红色的视觉重量就要比小面积的蓝色要重很多。

这些基本特点的总和才能决定一个要素的视觉重量。并不是其中任何一个。确实一些基本特点的组合可以吸引更多的眼球。因此,为了创造不同的视觉重量,你要使用不同特点的组合。

如何衡量视觉重量?

说实话,没有一个很精确的方法去测量设计要素的视觉重量。用你自己的体验去决定哪一个要素轻哪一个重吧!发挥你眼睛的作用。这个区域中最吸引你眼球的地方就是视觉重量最重的地方!学着相信你的眼睛!

这并不意味着你要很随意的去看什么最吸引你的眼睛。例如,你可以将每一个特点都分离出来,去理解更大的比更小的重,你的眼睛会帮助这些特点相互组合。

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

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

·尺寸

大要素的视觉重量比小要素的重。

·颜色 

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

·色值 

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

·位置 

在一个作品中,处于更高位置的要素一般比更低位置的要素重。位于中心区域或重要区域的元素更重。

·纹理 

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

·形状 

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

·方向 

垂直方向的物体比水平方向的物体重,但最重的是倾斜的物体。

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

·密度 

填充更多的元素到空间中,去增加空间的视觉重量。观者将会感受到更复杂的的组合要素,而非更简单的要素。

·白色空间 

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

·本身的兴趣 

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

·深度 

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

·饱和度 

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

·感知物理重量 

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

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

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

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

 

热度(13)

  1. 猫饼粑粑ui设计之路 转载了此图片
  2. ava__liuui设计之路 转载了此图片
© 猫饼粑粑 | Powered by LOFTER