UI设计中的视觉表现技巧(2)

来源:网络   作者:热心网友   发布时间:2017-10-08    浏览次数:562

那么如何在界面中运用这个技巧呢?例如,当你创建一组图标时,最重要的是,使它们视觉平衡,因此图标不可以太大,当然也不可以太小。如果我们直接将图标约束在正方形区域里,则更像正方形的图标会看起来更大。



我建议通过允许视觉上较小的图标超出矩形区域,并在视觉上较重的图标和图标之间留下一些空间来填充不同形状图标的视觉重量。



现在来看一些真实项目中的视觉平衡的图标。



明白了吧,为什么一个图标的显示范围总是要大于图标本身,这是为了能够让非正方形的图标在一个安全区域内微调,达到与正方形图标视觉平衡的效果。



检验视觉是否平衡,最简单的方法就是模糊对象。如果你的图标变成了一个个相似的斑点,它们具有相同的视觉重量,那就证明是视觉平衡的。



但有时我们也可以使用现有的图形,例如直接将产品logo做成分享和点赞的按钮。Facebook和Instagram的图标是圆角矩形的,而Twitter的图标是一个小鸟的剪影,Pinterest则直接用首字母“P”设计icon。因此Twitter和Pinterest的图标要设计的大一些,这样他们就能与Facebook和Instagram的图标保持平衡。



视觉平衡问题的另一个例子是与按钮一起放置的文本框。如果按钮直径等于文本框的高度,那么按钮对于我们的眼睛来说,就会显得小一些;但是如果你把按钮放大一点,整个结构将会变得更加平衡。



如果只更改按钮的样式,则不需要放大。在下图中,按钮和文本框的高度都为80px,但由于按钮填充了黑色,视觉上更重一些,所以右侧的按钮与相邻的文本框能更好地平衡。



划重点:

1. 视觉重量是人眼如何察觉物体的大小和意义,并不一定等于其实际像素大小。

2.圆形,菱形,三角形和其他非正方形的形状要设计的更大一些,以便与正方形的形状实现视觉平衡。

3. 图标区域应该为视觉平衡保留一定的空间,对于一组图标来说,这一点至关重要。


123456789共9页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:ui干货

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/6713.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通