数极客首页

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

上文主要讲的是视觉尺寸和物理尺寸造成的视觉误差,那本文主要谈谈不同形状的视觉对齐造成的视觉误差。

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

不同形状的视觉对齐

视觉对齐是视觉尺寸现象的一种逻辑延续,看看下面的图形,他们看起来是相同的长度吗?

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

视觉上,上面那一条是不是看起来比下面那一条长一点?然而,做一条辅助线,这两个形状是一样长的。

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

我们做一些修改,再看一下?

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

允许下面超出上面形状长度20个像素,作为补偿尖峰之间的间隙并使两个形状在视觉上是相等对齐。

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

还有一些更复杂的不同形状的例子。

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

因此,如果您正在制作一张折叠条纹和文字的海报,使其视觉对齐、利用上面知识,有意识超出形状的其余部分,才能对齐。

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

那么如何对齐带有背景的纯文本段落呢?这取决于背景的深浅,如果颜色浅,可以将突出显示的段落与文本的其余部分对齐。

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

由于背景颜色浅,不会造成不好的阅读影响。

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

如果是深色背景的话,让黑色背景与文本的其余部分对齐的话,使其内部的白色文本与缩进部分放在一起。才能视觉对齐。

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

与浅色背景的情况不同,黑色背景具有相当大的视觉重量,如果目标是插入段落不突兀,最好按下图​​所示方式对齐。

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

相同的原理:将与按钮和输入框放一起。

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

左边的浅色背景输入框框体不会与标签文字对齐,框内文本才会与标签对齐。“发送”按钮:右边缘与输入背景的右边缘不完全对齐,为了达成视觉对齐故意地做短了一点点。

右侧的深色边框的输入框的框体,就要与标签文字对齐,而框内容无需与标签文字对齐。“发送”按钮:有一个三角形边,形状的缘故被故意地做长了一点,达成视觉对齐。

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

下面文本和图标按钮的对齐方式,看看下面的按钮,文字看起来居中吗?

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

下面看起来是对齐的,但实际不是,因为右边是三角形的。这种形状的按钮文字必须靠左一些,视觉才对齐。

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

文本按钮不仅具有水平对齐,而且还要具有垂直居中,以首位大写字母算起,它是基于字体大写字母高度的对齐方式,并且要注意行距调整。

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

基本上,大写字母和按钮边缘上方和下方的空间是相等的。这很有意义,因为通常标题大写,英文字母有更多的上升部字母(l,t,d,b,k,h),多余降部字母(y,j,g, p)。

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

icon按钮的情况稍有不同,哪一个按钮看起来对齐得比较好?

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

希望你已经注意到左边的按钮有问题,它是由于不同的对齐方式而对齐错误的。第一个选项将该图标默认为为矩形来对齐,那么就是错误的,右边的对齐方式是对的。因为是三角形,所以不应该当作正方形来看。

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

如果您为开发人员准备文件,则需要预留一些区域,以便他们可以将图标置于背景上,视觉上保持一致。

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

“播放”按钮也是如此。如果你直接对齐这些形状,一个圆角矩形和一个三角形,他们会看起来很奇怪。

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

保证三个角到对应边的距离相等,并将此圆形与按钮背景对齐。

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

重要的是要记住:

  1. 带有角边缘的形状应该拉长一些,在视觉上与矩形物体保持对齐。
  2. 文字按钮制作调整行距对齐是最有效和广泛使用的方法。
  3. 在按钮上正确定位三角形图标的有效方法之一是——保证每个角到边的距离相等并将圆与背景对齐。

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

 

原文作者:Slava Shestopalov

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

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

题图来自 Pexels ,基于 CC0 协议

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

发表评论

评论已关闭。

相关文章