网页设计 » 视觉设计 » 视觉错觉:对称的UI并非看上去的那样

视觉错觉:对称的UI并非看上去的那样

发表于: 视觉设计. 评论
Sponsor

我们在UI设计中经常会遇到图形理论和视觉偏好上的冲突,这时候应该以视觉偏好为标准去决定方案的输出,即便它不符合理论,但只要符合人眼的视觉偏好,这就是好的方案。视觉错觉是人眼奇妙的生理特征。大家在设计领域的精进中,对视觉错觉的了解是非常有必要的,这能够让我们了解视觉的特征,从而做出符合视觉偏好的设计。

视觉错觉:对称的UI并非看上去的那样

我拥有被馈赠的礼物——可疑的超能力,能够一眼就发现设计作品在视觉上的缺陷。对于这种缺陷我就像拥有蜘蛛侠的蜘蛛感应,每当我看见不对齐、扭曲、或者不美观的东西时,我的后脑勺就会发出刺痛感。

当我看到人们的时候蜘蛛感应就会发作(看那些硕大的手掌!她的头很小!我的天哪那指甲!它们看上去像是痣!)我尝试着去阻止这种感觉,然而我不能抗衡我自己这种超能力。

当我看到UI的时候,也会出现蜘蛛感应:无论是在开发新产品、为他人提供建议抑或只是在使用软件,我一看到UI就立即发现设计上的问题。

因此,为了摆脱这种负担,我决定整理出一个由视觉错觉和其他设计原因引起的常见的UI视觉错觉案例集,并附上我的改正建议,希望这能帮助这个世界创造出更好看的UI(也帮助我摆脱这种不想要的“礼物”)

享受怪胎的表演!(我知道我不会)

01. 说明文本过浅

你有没有注意到放置在填充形状旁边的文本颜色看起来更浅亮?

这是字体平滑效果,使得文本看起来比原始颜色更浅,字体越小,这种视觉效果越强。

下面是示例:

视觉错觉:对称的UI并非看上去的那样

左边的绿色说明文本看上去比绿色按钮更亮;

右边通过使用略深的绿色,带有一点儿欺骗般,神奇地解决了这个问题。

02. 小字体,更纤细

在某些字体家族中,使用更小的字号会导致文本更加纤细和半透明化(字体平滑效果使然)。

如果你坚持要用小字号(有时候这会营造某种感觉),那就按你想要的来,但请务必加粗:

视觉错觉:对称的UI并非看上去的那样

使用粗体,你的设计仍保持整洁,说明文本依旧纤细,但更加引人注目,而且清晰易读。

03. 背景图片上难以阅读的文本

在背景图片上放置文本是一种常见的做法,但如果图片是动态变化的,你要确保无论背景颜色如何,文本都保持可读性。

这可以通过足够的对比度和渐变底色来实现:

视觉错觉:对称的UI并非看上去的那样

半透明渐变图层是一种好方法,即便是放置在浅色背景图片上也可以确保文本保持可读性。

本文提供几种增加对比度而不影响设计整体美感的方法。

顺便说一句,我在观看演讲中经常看到这个问题,所以在设计幻灯片时也可以用这种方法。

04. 行距错误

说起文本,这是一个重要的内容,处理大字体时,行距可能会成为一个问题:

视觉错觉:对称的UI并非看上去的那样

一个好的经验法则是,根据字体的不同,将行距设置为比字体大小2pt-5pt。

处理形状:

彼此相邻放置不同的形状会导致一些意外的视觉错觉。

这是一个著名的米勒-莱尔错觉示例:

视觉错觉:对称的UI并非看上去的那样

上面2个形状感觉没对齐,尽管它们实际上完美对齐。

感觉2个箭头的长度不一样,尽管线条实际上是相同的(我知道,我复制/粘贴它们)。

有时,这些视觉错觉会使你的设计不准确,考虑到你努力使它100%准确,这太可惜了。

在这种情况下,你可能需要一点儿欺骗,微调一些元素,使其中一条线条比另一条线更长,尽一切努力消除视觉错觉使其看起来对齐:

视觉错觉:对称的UI并非看上去的那样

让我们深入研究一些真实的UI示例。

05. 元素不对齐

这是一个经典:

视觉错觉:对称的UI并非看上去的那样

左边 —— 按钮的圆形边缘引起的视觉不对齐效果。

右边 —— 解决这种问题的方法:一种称为”视觉补正“的技术(通常用在字体中),通过将按钮往左侧微移来修正不对齐的错觉。

06. 表单对齐的不一致

当表单使用不同元素时(不同形状、边框或者水平对齐方式),可能会发生视觉错觉,使得表单看上去似乎没有对齐:

视觉错觉:对称的UI并非看上去的那样

左边 —— 每种元素的设计都略有不同(有些边框是椭圆形的,有些不是),尽管有明确的对齐策略,但结果让人感觉完全扭曲。

有许多可能的解决方法 —— 我选择将所有的圆角改成方角,并将所有的说明文本和边框对齐。

元素类型更加一致,左对齐的效果就愈加明显,整个表单变得更加整洁和设计良好。

使用图标

你是否有过使用的图标感觉上不对齐的经历?

下面这些图标全部来自同一个系列,有同样的大小和对齐方式。由于每个图标的性质(和视觉重量)不同,这个系列的图标在对齐上的表现不太理想。

视觉错觉:对称的UI并非看上去的那样

07. 不对齐的图标

有时你要做一点儿欺骗,移动/调整某些图标的大小使其视觉上的对齐:

视觉错觉:对称的UI并非看上去的那样

左边 —— 一些图标感觉很大(电话、音频),而有些图标则因其设计和物理中心的不同而感觉没有对齐。

一个可选的解决方案是选择外观一致的图标使其看上去一致(比如一组圆形图标)。

另一个解决方案(前文介绍过)是微调每个图标,使其并排放置时的效果更符合人眼视觉偏好。

这意味着你可能要将图标放置在实际设计中,对其进行修改,重复试错几次,直到设计看上去完美为止。

08. 不对称的图形

我们在元素中心位置使用非对称图形(比如三角形)时,几何中心会造成视觉上的错误,使人感觉图形放错位置。

下面是关于”播放“按钮的经典示例:

视觉错觉:对称的UI并非看上去的那样

左边的示例是完美的居中(几何意义上),但右边的示例看上去更好。

解决方案是微调不对称对象,直到视觉上的对齐为止。

09. 不同的图标主题

如果你使用一些现成的图标,最重要的是选择看上去像是来自同一系列的图标。

通常,我们会陷入漫长的寻找过程中,寻找那些最好看的图标,却忽略了不同图标之间的视觉差异。

这是可能发生的情况:

视觉错觉:对称的UI并非看上去的那样

从上面的示例中你可以看出:使用不同主题的图标(不同形状、不同重量)使得UI给人的感受是不专业的。

用户可能经验不足以说出问题所在,但他们会注意到问题出现在哪里……

确保选择的是共享相同的调色板、主题形状、重量和线条宽度的图标。

10. 按钮说明文本多行显示

有时候设计会比复制更好。

下面是示例:

视觉错觉:对称的UI并非看上去的那样

当然,”添加到收藏“比”收藏夹“更好地解释了按钮的作用,但是按钮下方有两行文本是不可接受的,不仅内容看起来没有对齐,而且还可能使得放置在这些按钮下方的所有内容复杂化。

发生这种情况时,设计应该占据上风,修改副本以符合设计规范:要么将所有的按钮改成两行内容;要么将“添加到收藏夹”说明文本缩写成“收藏夹”。

11. 长文本

用户体验写作应该是设计流程中的一环。一些设计考虑因素将决定文本的长度,而某些文本考虑因素将决定设计。

根据经验,文本应该简洁明了:

视觉错觉:对称的UI并非看上去的那样

正如他们所说:“写作很容易,你要做的就是消除错误单词……”。

12. 点击对象太小

12年后,设计师(和开发者)仍然在创建这些太小而无法点击的按钮:

视觉错觉:对称的UI并非看上去的那样

根据尼尔森·诺曼的说法:交互元素必须满足1cm x 1cm(0.4in x 0.4in)以支持足够的选择空间并防止胖手指的点击错误。

苹果公司在12年前就说过,但找到不容易点击的按钮仍然非常容易。解决方法也很明显:按钮的尺寸要大于视觉内容的大小(无论是图标还是文本)。

13. 烦人的边框半径

听说过加斯特罗错觉吗?(又名:片段错觉)

视觉错觉:对称的UI并非看上去的那样

诚然,里面那个形状的半径看起来更大,但这只是视觉上的错误。实际上,两个半径是相同的,但眼睛无法捕捉它们的一致性。

将圆形按钮放在圆形框架中,会发生相同的事情:

视觉错觉:对称的UI并非看上去的那样

在上面的示例中,框架和按钮都是一样的圆角边框,但它们看起来就是不一样。

在这种情况下,“欺骗”是通过在框架中使用完全不同的曲率,以消除视觉错觉。

14. 恼人的边框(一般而言)

说起边框,太多的线条会让你的设计显得拥挤。

设计师经常讨论留白,但随着产品的演化和新特征的引入(有时没有经过适当的设计流程),框架和边框不知不觉间出现:

视觉错觉:对称的UI并非看上去的那样

摆脱便捷,改用空格分隔每组元素,就不会造成不必要的混乱。

15. 使用灰色而不是透明度

许多设计师在标题中使用不同的灰色阴影,从而在标题、副标题和正文之间建立层次结构。

不幸的是,当文本放在彩色元素(例如背景图像)上时,灰色往往失效了。因此,我们应该使用一定透明度的白色来让元素吸收背景色:

视觉错觉:对称的UI并非看上去的那样

使用透明度来代替纯灰色,这会让你的半透明元素融合背景颜色,使其感觉上更自然。

这是一个很小的设计技巧,可以带来更好的结果。

附赠内容:讨厌的深色模式

我实际上是在几个月前就写好这篇文章,自开始写作以来,iOS 13 已经发布,深色模式也已经引入。

苹果公司声称它“经过精心设计,让屏幕上的每个元素都更容易被您的眼睛看到”。但如果你使用过一段时间的深色模式,你就会注意到情况并非如此。这是有原因的:iOS的深色模式使用纯黑色作为背景,而纯黑色会导致眼睛疲劳。

根据UX Movemen的说法:白色具有100%的颜色亮度,黑色具有0%的颜色亮度。如此大的颜色对比度导致用户看到截然不同的亮度级别,这会在他们阅读的时候使他们的眼睛更加努力地适应这种亮度差异。

这个问题的解决方案是用深灰色而不是纯黑色作为背景:

视觉错觉:对称的UI并非看上去的那样

不幸的是,苹果自带App和目前为止我所尝试的大多数App都是用纯黑色作为背景,这会导致对眼睛的过度刺激。

有两个App使用深灰色背景来实现深色模式,Slack和Notion。希望会有更多的App采用这种替代方案来实现实际上更适合人眼的深色主题。

以上就是今日份的分享。感谢阅读!

参考阅读:

UX Movement(https://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/)

原文作者:Gil Bouhnick
原文地址:https://www.mobilespoon.net/2019/08/visually-distorted-when-ui-looks-all.html
翻译作者:Poto | UI设计师
编辑整理:铅笔头 | 设计达人编辑组

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }