眼见不一定为实：UI交互设计师要向字体设计师学习的6个视觉技巧

Hi~，欢迎来到「交互设计新视觉系」技法专栏的第五期！

你好，设计师们！在处理视觉效果时，你是否曾经有过这样的感受：“有哪里不对劲！” 

如果是这样，你并不是一个人（你并不孤单~

本文将带来UX和字体设计师阿希什·库马尔(Ashish Kumar)针对这个常困扰设计师的问题分享的经验。

这将会对UI和视觉设计的初学者很有帮助，对于已经是专家的设计师来说也是一个很好的回顾~ 阿希什·库马尔归纳了可以向字体设计师学习的6个视觉技巧，可能会很有用：

想想看，为什么相同大小的圆形看起来比正方形更小呢？

字体设计师不会以相同的高度绘制所有的字符。他们意识到了人类视觉的特殊性，因此他们使用视觉技巧来创造出和谐、可读、平衡的字体。

上图中，正方形、三角形和圆形在几何上相等。然而，我们的眼睛会感觉到三角形和圆形的重量不足。这是因为这三种形状的面积不同，从排版上讲，黑色的面积分布不均。

有两种方法可以使它们在视觉上相等：

A. 计算两个形状的面积并保持相等

仅适用于三角形、圆形和菱形等简单的形状，此方法对复杂的视觉对象无效。

B. 使视觉对象变大、超出范围和模糊形状是测试视觉重量最简单的方法

● 使非方形的形状更大（如三角形，箭头、破折号、线性图标等）。
● 超出圆形形状范围。
● 如果形状在模糊时是相似的斑点大小，则它们具有相同的视觉或光学重量。

现在，您了解了为什么非方形形状或图标看起来比方形更小。

让我们看看如何使用此视觉技巧更好地呈现真正的图标和UI元素：

在创建一系列图标时，至关重要的是要使它们保持平衡，以确保没有图标太突出或太微不足道。要创建平衡，请在方形图标和图标区域之间留出额外的空间；并允许非方形图标超出图标区域。

另一个示例是与圆形按钮放在一起的矩形 UI 元素。如果圆形按钮的高度与矩形 UI 元素的高度相同，则圆形按钮看起来会显得更小。对于视觉校正，您需要以不同的方式对待这两种元素。

请看下图的WhatsApp，Samsung消息传递和Swiggy支持聊天的示例。您认为哪一个更正确呢？

想想看 有什么比正方形更方正呢？

我们的眼睛有古怪的视觉感知，我们看到的事物其实与现实不同。下图是一个关于相同的小测试。您觉得哪个圆形和正方形更准确？

将正确的圆形和正方形修改过后，它们看起来更加对称。这是因为垂直-水平错觉。

大多数几何字体并不是几何的。字体设计师通过遵循人类的视觉感知来制作高质量的字体。他们几乎在每个字母中都使用视觉技巧来使字体平衡良好。

要进一步理解，请看下图：几何字体Futura中的字母“O”放在一个完美的圆形旁边。觉得哪一个看起来更对称？

你甚至在看图片之前就猜到了，对吧？字体Futura的字母“O”比完美的圆圈更宽，但看起来更对称。原因是，我们的眼睛倾向于看到看起来比水平线更长的垂直线，即使它们是相同的。

一起来看看这种错觉是如何出现在字母“T”中的：

在上图中，水平笔画的粗细小于垂直笔画的粗细，以避免视错觉。您可以在设计方形图标、方形背景或头像框等时使用此技巧。

想想看 如何才能尽可能平稳地驾驶？

绘制字体就像驾车一样。在驾驶汽车时，当我们已经处于弯道的起点时，我们不会转动方向盘；我们在到达弯道之前会自然地转弯，以避免事故。同样的逻辑也用于地铁和火车轨道工程的平稳过渡曲线。

字体设计师不依赖于图形编辑软件的圆角过渡功能。他们调整曲线以使其平滑，因为他们知道人眼可以立即检测到直线突然变成曲线的点。

让我们来看看这两种圆角过渡：纯几何和微调。试着观察哪个在困扰你的眼睛，哪个是光滑的。

在UI设计中，我们可以如何结合：

你可能已经注意到，右侧的按钮、图标和框架看起来更平滑更赏心悦目。而左侧的有一个从直线到曲线的不舒服的过渡。

我们要如何修正曲线？在设计时，可以进入形状编辑模式并手动调整曲线手柄的大小，如下图所示。

为什么眼睛判断比算术参数更重要？

间距是设计字体最关键的部分。字体设计师根据字母的形状配对字母，并以不同的方式间隔它们。例如，字母 A 和 V 是三角形的，包含更多的外部空白，因此，如果它们一起出现，会缩紧它们之间的间距，以减少空白量。这有助于制作和谐的字体。

如何在视觉设计的其他方面运用：

您可能已经注意到，在圆形或矩形容器中放置三角形图标（播放和发送图标）可能会使图标显得格格不入。这仅仅是因为当在容器中以数学方式居中时，三角形与整个空间两侧的面积不相等。可看下图，通过视觉解释来理解。

为了使三角形在其容器内视觉居中，我们需要平衡两侧的重量。对于三角形，可以找到形心，并将其与容器的中心对齐。如今，如果三角形是使用形状工具创建的，Adobe Illustrator会提供形心提示。

如果您没有看到形心提示，请不要担心！只需从任意两边的中心到其相反顶点绘制线条即可定位形心。

可通过下图更好地理解。

此方法仅适用于几何形状。对于其他有机和更复杂的形状，您需要依靠眼睛的判断而不是算术参数。

要点：如果您为开发人员准备了一个素材，则需要在图标周围保留一些区域，以便他们可以在视觉上将图标正确居中于背景上（绕图标中心画一个圆圈，以在其周围留下额外的区域）。

你有仔细观察过字母“B”吗？如何平衡？

它的下半部分比上半部分更大。如果我们在数学上统一大小，它看起来会不平衡（见上边左图）。这是因为我们已进化到从“透视”的概念来处理物理世界，在这个概念中，远处的物体看起来比近处的物体小。

在排版中，这意味着要使字符同样平衡，需要让底部更重。

让我们通过翻转几个字符来看看明显的区别：

同样的概念也适用于水平对称的其他字母形式，甚至在字母“H”中，横杆也放置在实际中心的上方，以使其看起来更对称。

因此，下次您在设计水平对称的图标或徽标时，请注意使用这种底部更重的技巧使其在视觉上保持平衡。

这种错觉也被称为波根多夫错觉，这是一种奇怪的现象，它扭曲了我们对形状在非90°的角度相交时的感知。由于某种原因，我们的大脑很难推断出一条部分被其他形状覆盖的线，从而导致连续性中断。为了实际理解它，请先看下面的示例中的左图，并尝试观察是哪条线在继续，A还是B？然后看右图验证。

在拉丁字体中，“X”或“x”是这种错觉的受害者，需要特殊处理才能使其看起来更自然。字体设计师会通过稍微偏移对角线以视觉校正 X 或 x。

如果在为其他语言设计字体或为应用设计图标集时遇到类似的问题，可以尝试像在字母“X”中那样偏移对角线。

感谢阅读：）

希望这些设计技巧能帮助您

优化视觉效果，提升用户体验

参考来源：https://medium.com/design-bootcamp/5-things-to-learn-from-type-designers-while-dealing-with-visuals-5e4f4762159d

（部分图文来自网络，若有侵权，请联系删除。）

福利时刻

扫码添加小助手微信

转发+截图领取书籍福利~

帮助大家做出更好的设计~

加入社群，解锁更多惊喜！

往期推荐 | READ MORE

UI设计中的视觉层次结构：如何有效地组织UI内容，提升用户体验？（文末领取UI版式书籍福利）

UI中的色彩设计（二）：正确地选择颜色和使用颜色配比！（文末领取实用色彩工具和精美色卡）

UI设计中的色彩学（一）：如何使用色彩提升用户体验？（文末领取精选配色）

文字丨Jelly

编辑丨Jelly

如果觉得我们做的还不错点个赞和在看吧！：）