TOPIC:
UI · UX
—
VISUAL
UI Design UX Design
Article:2022/04/29
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
如果觉得我们做的还不错点个赞和在看吧!:)