辞典精译 | 眼见不一定为实!巧用视觉感知提升交互体验

10天前发布

翻译文章 / 多领域 / 观点
UX辞典 翻译,如需商业用途或转载请与UX辞典联系,谢谢配合。

本文约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遮罩,就像苹果为其应用程序图标所做的那样。


至于设计过程本身,有一个简单的圆角修复方法:将圆形效果转换为轮廓,进入形状编辑模式,并手动将曲线手柄移动靠近。



与锐圆角相比,椭圆角更加生动,这对于绘制道路或地铁是非常重要的。



要点

几何圆角看起来很不自然,能轻易地看出直线突然变成曲线;

视觉上看起来舒适的圆角,需要特殊的公式或手动调整形状。



相关引用

-翻译自原文

https://medium.muz.li/optical-effects-9fca82b4cd9

欢迎关注作者微信公众号:UX辞典,获得更多UX设计干货

24
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    没有新消息