前言:
先啰嗦几句,视觉上的对齐与平衡一直没有找到比较规范的方法,完全凭感觉,前几天在Medium上翻看文章,刚好看到一篇系统的讲解视觉技巧的文章,所以决定试着翻译一下,这篇文章对UI设计师规范化icon很有帮助,希望大家阅读后能掌握其中的技巧。
阅读这篇文章之前,我先提出三个问题:
1. 如何做出视觉平衡的icon?
2. 如何让不同的形状视觉对齐?
3. 怎样才算是“完美”的圆角?
这篇文章将针对这三个问题做出解答。
我们的眼睛是一种奇怪的东西,经常对我们说谎。但是,如果你了解了人类视觉感知的特殊性,就可以做出更加符合用户体验的设计。运用视觉上的技巧不仅可以帮助字体设计师来创建可读和均衡的字体,而且对于UI设计师规范化icon也是有所帮助的。
一. 同样的尺寸,为什么视觉感知上大小不一样?
长宽为400px的正方形与直径400px的圆,哪一个更大?毋庸置疑,在几何学上,它们的宽度和高度都是相等的,但是请看下面的图片,我们的眼睛会理所当然觉得正方形要比圆大一点。
如果你不相信这些形状是相同尺寸的,这是带有参考线和尺寸的版本。
让我们来看下图中的两个形状。在视觉重量方面,你觉得他们是否相等?
对我来说,是相等的。至少很难立马分辨出哪一个视觉上更重一些。这不奇怪,因为我将圆的直径增加了50px。
为了说明发生这种情况的原因,我们将第一个例子中(长宽为400px的正方形和直径400px的圆)与第二个例子中(长宽为400px的正方形和直径450px的圆)的形状分别重叠。如下图,这时,你就会注意到,在“a”区域中,正方形的重量超过了圆形,而圆形在“b”区域中超过了正方形。左图中,正方形完全覆盖了圆,就像从四面包围着一样。而在右图中,圆和正方形视觉感知上平衡,没有发生一个完全覆盖另一个的情况,它们每个形状都有四个间隙。
同样,我们也可以用菱形和三角形来验证。为了在视觉上与正方形保持平衡,它们应该更大一些。