向UI对象添加更多视觉权重的11种方法

用户关注是一种宝贵的资源。对于网页设计,每一秒都很重要。如何确保访问者看到你想让他们看到的东西?如何引起对特定元素的注意?答案很简单-使用视觉重量。

什么是视觉重量?

视觉重量是一种吸引观众眼球的力量。页面上的每个对象都有自己的重量。一个物体的重量越重,它吸引的眼睛就越多。视觉重量使我们可以创建焦点(也称为吸引力点)–这样的物体比其他物体具有更大的视觉重量。

如何测量视觉体重?

视觉重量是衡量事物吸引观众眼球的量的一种方法,与可以测量的物理重量不同,视觉重量只能被感知。但是,可以使用简单的测试来了解页面上哪个对象比其他对象具有更大的视觉效果。看看页面/屏幕几秒钟。闭上你的眼睛。尝试记住页面中哪些对象保留在你的记忆中。这些对象将比其他对象具有更大的视觉重量。

以下是确定特定物体重量的一些基本特征:

 

尺寸

较大的物体比较小的物体更吸引眼球。在物理世界中,当我们有两个相同类型的对象时,更大的对象自然会较重。

Aa

较大的物体比较小的物体更吸引眼球。

 

形状

具有规则形状的对象看起来比具有不规则形状的对象重。之所以会发生这种情况,是因为不规则的形状给人留下了物体某些部分被移除的印象。

Aa

具有规则形状(圆形)的对象看起来比具有不规则形状(星形)的对象重。

 

方向

垂直对象比水平对象重。

Aa

垂直对象比水平对象重。

 

对角线取向比水平或垂直方向产生更多的视觉重量。

Aa

对角线取向比水平或垂直方向产生更多的视觉重量。

 

颜色

颜色是设计师工具箱中最强大的工具之一。这个工具可以帮助我们发挥视觉重量。这是使用颜色时要记住的一些重要事项:

  • 有些颜色比其他颜色重。以下是一些颜色,从最重到最浅:红色,蓝色,绿色,橙色,黄色。

Aa

红色比蓝色吸引人的眼球。蓝色比绿色更能吸引眼球。

 

  • 与不饱和颜色相比,更多的饱和颜色将引起更多关注。

Aa

饱和色与静音色。饱和的红色比柔和的红色更容易吸引眼球。

 

  • 淡淡的中性色调可以帮助您为特定对象带来更多视觉效果。

Aa

明亮的黄色号召性用语按钮立即引起观众的注意。图片来自Basecamp

 

对比

对比度自然会引起人们对元素的关注。当一个元素与其周围环境形成对比时,视觉上会显得更重。

Aa

对比元素(右)比非对比元素(左)具有更大的视觉权重。

 

纹理

与非纹理化元素相比,具有纹理的元素被认为较重。纹理为对象提供了伪3D效果,并且该效果使对象感觉更重。

Cc

与无纹理的元素相比,具有纹理的元素被认为较重。

 

空白

空白空间本身的视觉权重为零(这是因为它不包含任何元素)。但是,空白可以用作为特定对象创建更多视觉空间的工具。通常,某个对象附近的空白越多,它受到的关注就越多。

Dd

MailChimp主页上的空白使关键消息和号召性用语更加突出。

 

深度

前景中的元素比背景中的元素具有更大的权重。

Ww

浮动操作按钮和底部导航栏受到更多关注,因为它们位于离观看者“更近”的位置。图片由Material Design设计

 

123

汽车比背景图像更具吸引力。图片来自特斯拉

 

个人兴趣

观众的个人兴趣会影响他们对设计的理解。有些事情对我们来说比其他事情更有趣。例如,当我们看到两个对象(汽车和火车)时,如果我们对火车更感兴趣,那么火车的图像将引起我们的注意。这就是为什么当两个人查看同一页面时,由于他们的兴趣不同,他们可以轻松地查看不同的对象。

0174fa5f57761411013e31878fe04b

有些事情对我们来说比其他事情更有趣。图片由Vectorstock

 

人脸

眼睛和面部被认为是视觉重物。带有人脸的照片将始终具有更大的视觉重量。

222

用户的注意力将集中在手持电话的人的图片上,然后才是“您的成功就是我们的事业”的信息。图片由BestBuy提供

 

运动

移动的物体自然会吸引我们的注意力,并向访问者建议下一个应该看的地方。

微信图片 20201105130442

移动的物体自然会吸引观看者的注意力。图片由您的计划,您的星球组成。

 

结论

当涉及视觉设计时,上述特征不能孤立地起作用。视觉重量是上述特征的总和。虽然大物体通常比小物体具有更大的视觉重量,但被大量空白空间包围的小红色圆圈会比包围它的大蓝色圆圈重。

333

UI培训|UI设计培训|北京UI设计培训|UI设计培训哪里好|北京有哪些UI设计培训班|北京最好的UI设计培训班|

原文链接:https://uxplanet.org/11-ways-to-add-more-visual-weight-to-ui-object-6aca19c7bc97

本页面最后更新于 2020年11月24日 16:27