UX Pedia Presents
本文约3695字,阅读需要10分钟
视觉感知能力的重要性
我们的眼睛很奇怪,常常误导我们。但是,如果你了解了人类视觉特殊性的话,就能灵活运用在设计上了。字型设计师利用视觉技巧创造了很多可读性、平衡性俱佳的字体,而此技巧也同样适用于交互设计。
1920年代,格式塔的视觉感知理论出现了。它解释了我们的眼睛如何处理不同的图像,以及大脑怎样去判断处理。你可能已经对“接近性”或“共同命运规则”等理论有基本了解,本文会重点举例说明,设计师在他们的实际工作中该如何使用感知力。
 01 实际测量和视觉感知 
对比下哪个更大:是400px的正方形还是400px的圆圈?从几何学上讲,它们的宽度和高度是相等的,但下面的图片,我们的眼睛却认为正方形是大于圆形的。
我们来实际测量下大小。
再来看一张正方形和圆形的对比图片,就视觉重量而言,它们是否一样?
由于增加了圆型的直径,好像不能快速分辨孰大孰小了,在视觉上会认为两个形状的大小是接近的。
将两组对比过的图形重叠,左侧是同样为400px的形状,正方形的面积大于圆形,这也是为什么我们在视觉上认为方形更大的原因;而右侧我们无法快速分辨,是因为圆和正方形是平衡的且它们的面积相似,只是宽度和高度不同。
菱形或三角形也有相同的效果,为了在视觉上与正方形保持平衡,它们应该更宽更高,以使它们的面积相似。
如何在界面中运用?在创建一组图标时,使它们都具有良好的平衡性非常重要,过于突出或是变小都会影响界面。如果我们直接把图标规矩地摆放在正方线框内,那些近似于正方形的图标,视觉上会变的更大。
比较建议将看着比较小的图标放大至线框外,而大图标则可以与线框间留有些空隙,这样整体来看4个图形的大小是相近的。
图标在视觉上达到了平衡
为什么图标区域会比图标本身大,现在清楚原因了吧?这么做是为了让非方形的图标与方形图标相似,还有一个检查视觉平衡的超简单方法,就是把图标们模糊处理,面积大的图标是最突出的。
有时我们会使用现有图形元素,例如用作共享按钮的社交网络徽标。Facebook和Instagram图标是正方形的,而Twitter是鸟的轮廓,Pinterest则用带圆圈的“ P”表示。仔细观察,会发现Twitter和Pinterest的图标更大,以便它们与Facebook、Instagram的Logo保持平衡。
再举一个例子,将文本框与圆形按钮放置在一起。如果按钮的直径等于文本框的高度,那按钮看起来会更小。当直径由80扩到90px时,整个结构变得更平衡了。
如果更改按钮的样式,则不需要放大。在下图中,按钮和文本框的高度为80px,但是由于黑色填充感强烈,右侧的按钮看着并不失衡。
要点
视觉感知是人眼判断物体尺寸的一种重要方式,物体的像素尺寸或面积不一定是严格相等的;
圆形、菱形、三角形和其他非正方形状需要更高、更宽才能与方形在视觉上保持平衡(调整一组图标时亦是如此)。
 02 不规则形状的对齐 
视觉对准是视觉平衡主题的逻辑延续,看下面的条纹,它们看起来像一样长吗?
以像素为单位,答案肯定是一样长的,但乍一看,视觉上觉得第二条线更短。现在将第二条线段拉长20px,使他们在视觉上进行对齐,虽没有按像素长度对齐,但也不显突兀。
那么如何对齐纯文本和有背景的段落?这取决于背景的视觉密度。如果是浅色的,你可以将高亮的段落与文本的其他部分对齐。
虽然背景较浅,但不会打断整体的文字阅读体验。
而黑色背景段落在视觉上很闷重,可以将背景框与其他段落整体对齐,内部白色文本缩进位置,按照图中方式来对齐调整
相同原理也适用于按钮和输入字段。这并不是死板的规则,在实际应用中,设计师需要基于自身的视觉感知去判断呈现方式。
左侧输入字段的浅色背景可以超出输入标签和用户输入范围。“发送”按钮的右边缘未与输入背景的右侧完全对齐,因为该按钮较暗且从视觉角度看也比较重。
在右边,因为输入区域是实心边框,可以与实心框对齐。“发送”按钮有一个三角形的边。按钮向右移动了一点,以便与上面的矩形输入框保持平衡。
再来看文本和图标按钮的对齐,图中的按钮,是不是都居中?
右侧按钮的边缘是三角形,可以将单词向左位移,使两个按钮在视觉上看起来大小相等。
文本按钮不仅具有水平对齐方式,还有单词和背景的垂直对齐方式,经常在各种操作系统、站点和应用程序的界面中使用,是基于字体大写字母高度的对齐方式。
基本上,大写字母上下的空间和按钮边缘是相等的,因为命令名称通常以标题大小写,并且英文字母具有更多的上升角,上伸出部分(l,t,d,b,k,h)比下垂部分(y,j,g, p)多。另一种方法是使用字体的小写字母的高度来对齐。这种方法也很有意义,因为文本的主要视觉重量集中在放置小写字母的区域中。
这些方法之间有什么区别吗?图中的两种大小写字母对齐方式,有差别但是没有很大。
图标按钮的情况与文本按钮略有不同,在圆形按钮背景里放一个“发送”图标,哪个看起来更加视觉平衡?
左边的图标是有问题的,发生这种情况的原因是对齐方法不同;右边图标的放置方式,使其所有尖锐边缘至圆形按钮背景的距离相等。
如果为开发人员准备文件,则需要保留一些区域说明,以便他们使图标在背景上正确居中。
左侧“播放”按钮也是同样问题,如果圆角矩形和三角形直接对齐,它们看起来会很奇怪。
如果要使三角形的视觉平衡,则在锐角外画出圆形,并使其与按钮背景对齐。
要点
带有尖锐边缘的形状应增大或增长,才能与相邻的矩形对象保持平衡;
带文字的按钮,以大写字母的形式对齐是比较有效的方法。
 03 视觉圆角 
还有什么比圆形更圆?我以前认为是不存在的,但正如在本文开头所说的那样,人们的眼睛很奇怪,有时感知的东西并不是我们所期望的。下面图片中哪个圆圈看起来最平滑?
很多被问及的人在3和4之间徘徊,觉得1和2太瘦了,5又太胖了。如果把3和4重叠,我们会发现后者比前者更钝一些,我们看着也觉的更平滑。
为了说明我的意思,我从Futura,Circe和Geometria这3种著名的几何字体中选取了字母“ o”。鉴于高质量字体是基于人类的视觉感知构建的,并且使用了复杂的光学构造系统,因此我认为它们的圆形看起来比几何形状更圆。
将它们与几何圆重叠,即使是最靠近几何圆的Futura的“ o”,也有四个突出部分。此外,Circe和Geometria的字母比几何圆宽,虽然它们的高度和宽度都相等,我们也可以看到这四个“肚子”好像吃撑鼓了起来。
因此,从光学角度而言,修改后的圆(右侧)看起来比几何圆(左侧)更“圆形”。
我们如何利用这种现象?当然要进行圆角处理!如果直接将几何圆与直角嵌套,效果并不理想。
人眼会立即察觉出异样——直线突然变成了曲线,而且这种圆形看起来也不自然。
考虑到我们的视觉感知,从标记的这两点去一点点调整。改正后的圆角,使得直线与曲线相交的点没有那么明显了。
几何圆(左)与调整过的圆角对比(右)
我们可以将这种方法应用于圆形按钮设计上,右侧的按钮具有更平滑的转角圆角,同时也让眼睛更加舒适。
应用程序图标也是如此,我们不能光用标准的圆角去做设计。
左边是我在Sketch中创建的圆角矩形,右边是椭圆形,也被称为Lamé曲线。它是由法国数学家加布里埃尔·拉梅(GabrielLamé)发现的,根据公式的不同,它的形状可以从四角星逐渐变成圆角的方形。
马克·爱德华兹(Marc Edwards)提出了Lamé曲线的公式,该公式衍生出了最平滑且视觉上也无可挑剔的形状,从iOS 7开始,苹果便将此形状的图标应用在icon上。
再后来,又添加了黄金比例和网格用来指导设计师更规范地应用。
使用超椭圆等形状的主要好处是它们光滑的外观。另一方面,这些非标准形状很难插入到真实的接口中。你可以组合多个svg,在代码中加入特殊的公式或脚本,或者使用PNG遮罩,就像苹果为其应用程序图标所做的那样。
至于设计过程本身,有一个简单的圆角修复方法:将圆形效果转换为轮廓,进入形状编辑模式,并手动将曲线手柄移动靠近。
与锐圆角相比,椭圆角更加生动,这对于绘制道路或地铁是非常重要的。
要点
几何圆角看起来很不自然,能轻易地看出直线突然变成曲线;
视觉上看起来舒适的圆角,需要特殊的公式或手动调整形状。
/End. 
相关引用
-翻译自原文
https://medium.muz.li/optical-effects-9fca82b4cd9
-图片、GIF来自网络;封面动图 by ILLO
-未经UX Pedia允许不得转载
往期推荐:
辞典精译|怎么做响应页面?栅格系统来帮忙!
辞典精译 | 最迅速上手Figma指南!
辞典说 | 这些设计系统比Material Design还好!快来学习!
辞典精译 | 我见过总结最好的UI动效设计法则!
  UX 辞典  
策划│雪诗
翻译│梦奇
编辑│梦奇
• 扫码加辞典酱 •
• 成为学习交流小队一员吧 
形象理解用户体验,时刻关注设计趋势
Powered by Canopy Institute of Design
2020©UX Pedia. All Rights Reserved
「喜欢UX辞典的推送,请设置个 星标☆ 
「下次就能 第一时间 看到惹」
 赞了吗  在看吗 
 戳下这里呗  别害羞 :  ) 
继续阅读
阅读原文