一个奇怪的器官,我们的眼睛。一方面,他们经常对我们撒谎。另一方面,通过了解视觉感知的特殊性,我们将能够创建更清洁、更易于使用的设计。字体设计师经常使用光学技巧来创建可读和平衡的字体。但是界面设计师也需要这些东西。
1920年代,出现了视觉感知的格式塔理论。它解释了我们的眼睛如何感知不同的图像以及我们的大脑如何解释它们以及这与界面设计中的视错觉有何关系。也许您已经听说过“邻近法则”或“命运共同体”?在本文中,我们将涉及格式塔理论的某些方面,更多地关注其实际应用而不是科学研究。
一个 400px 的正方形还是一个 400px 的圆形?从几何的角度来看,这些图形的高度和宽度是相同的。但是看图。眼睛立即注意到正方形超过了圆形。
我将第一个和第二个示例中的形状叠加在一起。在左边,我们可以看到一个400像素的正方形的面积大于一个半径相同的圆的面积。因此,在我们看来,它在视觉上更重。右边的圆形和方形看起来很平衡。事实上,通过增加圆的直径,我使它们的面积相等。
在菱形和三角形中可以看到相同的效果。为了实现与正方形的视觉平衡,您需要使它们更宽更高,以使图形的面积相等。这种方法适用于简单的表单这如何在界面中应用?例如,如果您正在创建一组图标,那么它们的平衡非常重要:它们不会吸引眼球,但不会在其他人的背景下迷失方向。如果您只是将每个图标放入一个方形框架中,那么方形图标自然会显得更重。
但有时我们会使用已经存在的图形:例如,使用“分享”和“喜欢”按钮的社交媒体图标。Facebook 和 Instagram 的图标都是方形的,但 Pinterest 是字母 P 刻在一个圆圈中,而 Twitter 一般是鸟的剪影。因此,Twitter 和 Pinterest 图标需要放大一点,以使其视觉重量与 Facebook 和 Instagram 相匹配。
设置图标区域时,为形状的光学平衡留出一些空间。如果您正在创建一个所有内容都需要保持一致的图标集,这一点尤其重要。