数极客首页

视觉误差会对 UI 造成什么样的影响?(三)

上两篇了解过了视觉误差对UI造成影响的其他两个因素,本文主要讲视觉误差对UI造成影响的最后一个因素——视觉圆角。

视觉误差会对 UI 造成什么样的影响?(三)

 

视觉圆角

什么可以比圆形更圆?我曾经认为没有什么。

但正如我在本文开头所说的那样,我们的眼睛很奇怪,眼睛看到的东西不能全信。那么,下面的图片中的哪个圆圈看起来最圆?

视觉误差会对 UI 造成什么样的影响?(三)

我之前询问的人都是在3号和4号之间进行选择,数字1和2绝对太瘦,5太丰满。如果我们将第3个和第4个圆重叠,实际上3是正圆,4偏胖一些,但是会有很多人认为4才是正圆。

视觉误差会对 UI 造成什么样的影响?(三)

鉴于高品质字体是基于人类视觉感知而建立的,并且使用了复杂的光学构造系统,我认为字体O的圆形看起来比几何形状更圆。

视觉误差会对 UI 造成什么样的影响?(三)

让我们将它们与几何圆圈重叠,即使是最几何的Futura的“o”也有四个突出部分。除此之外,Circe和Geometria都比圆圈宽,但即使它们具有相同的高度和宽度,我们也可以看到这四个“肚子”更胖。

视觉误差会对 UI 造成什么样的影响?(三)

看看下图:左手边的圆是一个正圆,右手边的圆是一个经过“变胖”的圆,但是“变胖”的圆看起来更像正圆。

视觉误差会对 UI 造成什么样的影响?(三)

我们如何规避这种现象?

比如:常见的ios圆角,当然是为了四舍五入!如果使用Photoshop,Illustrator或Sketch中的功能画圆角,视觉看上去,是不能画出准确的圆角的。

视觉误差会对 UI 造成什么样的影响?(三)

人眼可以马上检测到一条直线突然变成曲线,软件做出来的圆角并不自然。

视觉误差会对 UI 造成什么样的影响?(三)

我在考虑到我们的视觉感受的情况下,用非正圆画出来的圆角非常平滑。

视觉误差会对 UI 造成什么样的影响?(三)

正圆之外还增加一点额外的部分,多出来的那点正好给予了一定的过渡,让直线向曲线的改变更加平顺。

视觉误差会对 UI 造成什么样的影响?(三)

比较一下:

视觉误差会对 UI 造成什么样的影响?(三)

现在我们可以将这种方法应用于圆角按钮。

视觉误差会对 UI 造成什么样的影响?(三)

我想你可能已经注意到,右边的按钮有更圆滑的圆角,视觉效果更好。与应用程序图标也是相同的,不会简单地使用标准的圆角来达到完美的效果。

但在我们深入探讨这个话题之前,让我们来看看两种:

视觉误差会对 UI 造成什么样的影响?(三)

第一个是一个圆角矩形,我在Sketch中创建。第二种形状是超椭圆形,也称为 Lamé 曲线。

它是由法国数学家 Gabriel Lamé 发现并命名,根据所使用的公式不同,可能会有所不同,很明显,右边那个更像 iOS 的 icon。

视觉误差会对 UI 造成什么样的影响?(三)

从 iOS7 起,iPhone 所有的 icon 都基于此进行设计。

视觉误差会对 UI 造成什么样的影响?(三)

曲线的方程式

后来,根据黄金分割等理论加上了一些必要的参考线。

视觉误差会对 UI 造成什么样的影响?(三)

重要的是要记住:

  1. 因为您可以很容易地看到直线突然变成曲线的点,因此几何圆角看起来很生硬。
  2. 制做自然的圆角矩形需要特殊的公式或对形状进行一些手动调整。

前两篇:

视觉误差会对 UI 造成什么样的影响?(一)

视觉误差会对 UI 造成什么样的影响?(二)

 

原文作者:Slava Shestopalov

原文链接:https://medium.muz.li/optical-effects-9fca82b4cd9a

本文由 @VisualCC  翻译发布。未经许可,禁止转载

题图来自 Pexels ,基于 CC0 协议

新一代大数据用户行为分析与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合分析用户行为数据和业务数据,可以自动监测网站、APP、小程序等多种渠道推广效果分析,是增长黑客们必备的互联网数据分析软件。数极客支持实时多维分析、漏斗分析、留存分析、路径分析等十大数据分析方法以及APP数据分析网站统计网站分析小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据分析模型,是数据分析软件领域首款应用定量分析与定性分析方法的数据分析产品

发表评论

相关文章