亿元级IT行业生态链
一站式解决方案提供商

24小时免费咨询电话
010-52725243

新闻资讯

AJIA NEWS

UI设计中的视觉平衡之物理尺寸与视觉尺寸

来源:行业资讯 发布日期:2018-03-22

“眼见为实”并不是绝对的真理,由于人类视觉的特殊性,眼睛经常会对我们说谎,设计师在进行设计时也要深刻了解“眼见”和“脑见”的差异,阿甲科技全案设计团队的网站设计师在为客户提供视觉解决方案时,就针对这一特点,做出更具亲和力和清晰的设计,更好的构建人机交流的界面!今天我们先从物理尺寸与视觉尺寸入手!

一个400px的正方形和400px的圆形哪个看上去更大?从几何尺寸上看,他们的宽度和高度是相等的,但是从下图中的两个图形可以看出,400px的正方形要比400px的圆形更大一点。这里用与重量有关的词语描述视觉感知的差异会更合适,即400px的正方形要比400px的圆形在视觉感知上更重一些。

阿甲 科技 400px的正方形要比400px的圆形更大

为了证明尺寸的正确性,下图给出了辅助线和数值。

阿甲 科技 辅助线和数值证明了尺寸的正确性

我们继续看下图中的正方形和圆形,在视觉重量上,他们是否相等?

阿甲 科技 正方形和圆形,在视觉重量上,他们是否相等

答案是肯定的,至少很难立即分辨出哪个更重,这是因为圆形的直径增加了50px。

阿甲 科技 很难立即分辨出哪个更重

为什么会这样?我们把上面两个案例进行了重叠。左图(400px的正方形与400px的圆形),圆形完全被包含进了正方形里面,正方形超过了圆形4个a区域,正是造成视觉误差的原因。右图(400px的正方形与450px的圆形),正方形超过了圆形4个a区域,而圆形也超过了正方形4个b区域,两个区域相互抵消。虽然他们的尺寸不同,但却有着相似的面积,所以圆形和正方形在视觉上达到了平衡。

阿甲 科技 圆形和正方形在视觉上达到了平衡

相同的原理也作用在菱形和三角形上,为了达到与正方形在视觉上的平衡,他们应该变得更宽和更高,以达到面积上的相似。

阿甲 科技 相同的原理也作用在菱形和三角形上

那么,如何在界面设计中运用这些原理呢?当我们创建一组图标时,重要的是彼此之间保持视觉平衡,让一组图标看起来不会有过大或者过小的。如下图所示,如果在相同的正方形框中绘制图标,那么面积越大的图标则看起来越大。

阿甲 科技 面积越大的图标则看起来越大

所以这种情况之下,就要放大那些看上去较小的图标,缩小那些看上去较大的图标,来达到视觉重量上的平衡。

阿甲 科技 放大那些看上去较小的图标,缩小那些看上去较大的图标

下图是一些实现了视觉平衡的图标示例。

阿甲 科技 视觉平衡的图标

现在我们清楚了为什么一个图标的背景区域总是大于这个图标的主体,是让了能让非方形的图标去调整大小,让他们看起来不会小于其他方形的图标。

阿甲 科技 一个图标的背景区域总是大于这个图标的主体

通过一个简单的方法可以检查视觉平衡,即模糊,模糊后的图标能变成大小相似的点,就说明这些图标具有相同的视觉重量。

阿甲 科技 通过一个简单的方法可以检查视觉平衡

但有时我们会用到已有的图标组合,例如比较常见的“分享”图标,Instagram和Facebook是方形的,Twitter则是一个异形,Pinterest是一个圆形。这里Twitter和Pinterest的图标就需要稍做放大,是为了能与Instagram和Facebook的图标达成视觉上的平衡。

阿甲 科技 有时我们会用到已有的图标组合

还有一个在视觉平衡上总是处理的不好的地方,是文字输入框配合圆形的按钮。如果这个圆形按钮的直径和输入框的高度一样,视觉上看起来就会觉得有些小,而稍稍放大之后,整个结构就会变得平衡。

阿甲 科技 文字输入框配合圆形的按钮

但是如果改变了按钮的样式,则不需要放大。在下图中,圆形按钮和输入框的高度是一致的,将按钮填充成黑色,圆形实心按钮跟输入框就能达到一个较好的重量平衡。

阿甲 科技 圆形按钮和输入框的高度是一致的

划重点:

· 视觉重量是眼睛所接收到的物体的形状和感受,并不一定等于它的像素大小;

· 圆形、菱形、三角形等形状,设计时应稍大一些,以便跟正方形能达到视觉平衡;

· 图标四周要为视觉平衡留有一定空间,对于成组的图标来说,这点尤为重要。

免责声明:本文由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。

阿甲科技

欢迎访问阿甲科技集团官方网站!