24H免费课程咨询  TEL:13401595960   QQ:1870218756  微信:13401595960(李老师)

东方博宜

网站首页 > 软件开发资讯

【常州UI设计培训班】UI设计中的视觉平衡

2018-05-13 21:38:33 东方博宜 阅读

1.物理尺寸和视觉尺寸


一个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的图标达成视觉上的平衡。

常州东方博宜是一家专注IT,互联网,电脑方面的顶尖培训机构,欢迎社会及院校有志互联网营销,搜索引擎营销的人士,来东方博宜报名学习,互相交流。

常州东方博宜地址:常州天宁区延陵西路2号工人文化宫5号楼

 2.新北区太湖东路9-4号常州创意园E12


Powered by 东方博宜教育咨询江苏有限公司  ©2008-2018 www.czos.cn