最专业的八方代购网站源码!

资讯热点
注意细节!如何将视觉错觉应用于UI设计界面?

发布时间:2021-10-9 分类: 行业资讯

在当前的火灾机械视觉中,视觉原理是不可或缺的,那么我们日常工作的UI产品设计的可能性是什么?今天,我从“视觉幻觉”的角度探讨如何在UI中使用它。

视错觉历史

古希腊哲学家亚里士多德《灵魂论》描述了人类的五种感官:视觉,触觉,味觉,嗅觉和听觉。我们的视觉设计师暂时无法在矩形盒子(称为各种电子设备)中设计味道,气味和听觉。毕竟,对于触摸,我们总是与这个矩形框接触,但不能将真实对象传递给设计。触摸得到的感觉,实际伸手去探索或走路,感受距离等,比较大小,距离等来识别。由于这种客观存在,我们还需要我们的视觉设计师使用视觉原理和技术,使用户更容易与机器进行交互。由于这种理解,我想到了以下几种可能性:

 一. 蓬佐错觉-Line

Ponto幻觉是关于长度的视错觉。自从意大利心理学家Mario Pidzo(Mari Ponzo,1882~1960)发表了一篇相关论文以来,这种视觉错觉被称为Ponto错觉,但在此之前,它早已为人所知。

两条水平线在上图中上下并置,上面看起来比底部长。有一种观点认为,这是因为水平线外侧的对角线让大脑感觉更深,并认为上面的线条更进一步。相同长度的线段在距离上应该更长,因此上面的水平线会让人感觉比以下更短。

这种视觉幻觉在UI的使用中,我想到的第一个是输入,细胞或段落之间的分界线。每个应用程序的长度是不同的。大多数应用都遵循iOS或Android指南,在每个控件周围留下P距离。还有一些应用程序没有采用通常的路径。

△1。摄影照片共享App-iOS系统; 2.家庭饮食 - iOS系统; 3.会计软件 - Android系统

△1。日志软件 - Android系统; 2,3。优步-iOS系统

图1捕获了iOS和Android上的一些应用程序,设计人员使用了非常规的P距离线。图2捕获了在平台App周围没有留下间隙的线条。从这两个数字中我们可以看出,有各种各样的长短线,没有统一的标准,最重要的是你要表达什么?这里的错觉是否有助于您的UI表达。

手机屏幕的边界就像幻觉幻觉中的外斜线。分界线与边界之间的距离可以使人们感受到区间中左右信息的长短感,并且还考虑了易读性。在应用程序的设计中,全局规范考虑非常重要,满足单个页面的视觉需求是不够的。前端开发担心逻辑规则没有区别。只要定义了功能规范,即使在不同的接口中使用不同的线路,也不是一个大问题。

简而言之,在定义线的长度时,我们可以更多地思考为什么我们要留下边距,多少是合适的,为什么确定,多长时间,是否有逻辑可循,是否考虑全球,是否与品牌相匹配,是否能传达视觉故事等等。

 二. 艾宾浩斯错觉-Space

Hermann Ebbinghaus是一位研究人类记忆的着名心理学家。他出生于德国,是波兰布雷斯劳大学的教授。他主要研究人类如何执行持久记忆(非主题:艾宾浩斯的记忆曲线非常有名)。上图是他发现的视觉错觉。中间的两个橙色圆圈大小相同,但在右侧看起来要大得多。右边的橙色圆圈周围是一个小圆圈,所以看起来比实际的圆圈大,左边的橙色圆圈被一个大圆圈包围,所以它看起来比实际的圆圈略小。

△(A)Ebbinghaus-Titchener尺寸对比错觉和(B)Delboeuf错觉的表现。

艾宾浩斯幻觉在实际应用中非常广泛。利用我们周围的事物来安排和组合,我们可以确认视觉错觉。 Ebbinghaus幻觉加上对Joseph Delboeuf幻觉的分析以及Brian Wansink博士,Schulte·,Van·,Koert van Ittersum博士,人们的食物摄入量将受到板块大小和颜色的影响,也就是说,我们将受这些视觉幻觉影响并影响真实行为。

△Piqueras-Fiszman研究中保罗·博古斯研究中心不同颜色的盘子上的甜点

△Piqueras-Fiszman研究中的方形,圆形和三角形板状草莓味慕斯

△Zellner等人使用的平衡和不平衡板布置。 64.在彩色演示中,芝麻酱的线条是绿色的,点是红色的。

在食物和餐具之间的关系中,可以在我们的UI界面中使用经过验证的结果吗?

上图是基于Google色彩工具的两种配色方案。左图和右图中的空间图案完全相同,但是使用不同的阴影,色调会给人一个更窄的左侧空间和更宽的左侧。

左图像和右图像中的原点大小完全相同,但左图像感觉较小,右图像较大。 Ebbinghaus错觉和Deboff幻觉可以在界面空间中发挥重要作用。我们可以遵循这一理论工具来服务于我们的设计,更好地表达功能焦点,并体现空间的结构关系。

 三.卡尼莎三角–Iconography & Texture

Gaetano Kanizsa(1913~1993)是意大利心理学家。他在意大利的里雅斯特创立了心理学研究所,为意大利心理学研究做出了巨大贡献。

在Caniza发现的视觉幻觉中,最着名的是下面的“Kanisha三角”,这在1955年是众所周知的。这种视觉错觉表明我们的大脑已绘制出实际上不存在的三角形轮廓。我们将根本不存在的大纲称为“主观大纲”。

正如您在上图中所看到的,图形中心有一个实际上不存在的白色三角形。这是因为在观察时,大脑自发地连接线段以形成完整的图形,并且这种视觉错觉建立在各种类似的图案上。

Kanisa不仅作为心理学家取得了巨大成就,他还是一位活跃的画家。在她的画作中也有使用视觉错误创作的作品。

△Gaetano Kanizsa,[Omenone] 1977- olio su tela。 cm50x70

△Gaetano Kanizsa,[Uovo] 1975- olio su tela。 cm50x70

Kanisa的幻觉实际上可以在UI的Graphic中使用。当然,每个设计师都必须评估该工具是否与公司的品牌和视觉语言兼容。

我没有看到任何在市场上使用Kanisa错觉的标志性作品,但我们经常看到未连接的图标设计,但这些未连接的图标不会因为大脑而导致我们的认知困难。帮助我们自动完成。

在材料方面,我们不得不提到谷歌推出Material Design(以下简称MD)之后,MD使用粒状来表达Graphic和Dark交叉处的材料,这是MD纸张表达的延续。

在Graphic中,每个人都在慢慢开始使用MD材质表达式,之后工厂App升级也在Graphic材质上制作了更大的粒子全图片材质表达式。

图形,颜色和材料本身没有问题。手机也很漂亮,但这种颗粒状材料与全球视觉系统有什么关系呢?阅读他们的设计概念中的视觉游戏/仔细思考。并没有找到答案。作为同行,我无法看到产品中的某些材料均匀性。现在我只想制作材料的材料,并且整体材料没有渗透。

Cannesa幻觉可以在图标或图形设计中尝试,这可以打开更多的想法,尝试更多,并在小图片中有一个大的图片。

  四. 冯·贝措尔德效应–Color

在被太阳照射的光波中,可见光非常窄,我们只能看到400-700nm范围内的波长。

在我们理解颜色错觉之前,我们需要知道颜色是什么。在学习什么颜色时,有一种理论让我非常惊讶——颜色是大脑的感觉。感觉?什么!我看到的鲜花世界是一种感觉?

接下来,让我谈谈为什么颜色是大脑的感觉。光线照射在苹果上,苹果表面只反射特定波长的光线,其他光线被吸收,反射出的特定波长的红光被眼睛接收,所以感觉是红色的。

现代科学已经表明人类可以感受到各种颜色,因为不同物体反射的光的波长是不同的。此外,在眼睛中反射的浅凹视网膜细胞被转换成信号并通过神经传递到大脑,并且只是第一次感觉到“红色”。然而,有时相同波长的光将具有不同的颜色感知,即视错觉。

也就是说,在日常生活中,例如衣服上看到的颜色,不是颜色本身,而是吸收波长然后反射它的颜色。染料本身的颜色不一定是我们最终看到的颜色。原理如上所述。苹果的光学反应。

上图显示1.有一条明显的垂直亮线,2。有一条清晰的垂直暗线。但是将线与其他部分进行比较并不是更亮或更暗。从1到2.慢慢调光。这种视觉错觉被称为马赫带,它是由大脑产生的,以便清除明暗之间的区别。

在了解了我们的大脑如何识别颜色之后,让我们来看看颜色同化是什么?

在上图中,左侧和右侧的颜色完全相同,但中间颜色受周围颜色的影响。

当一种颜色被另一种颜色包围,或者另一种颜色用作背景时,颜色将看起来非常接近周围的颜色或背景颜色。我们把这种现象称为颜色同化。它属于彩色视错觉,也称为von· Wilhelm von Bezold(德国气象学家,1837-1907)的影响。

通常我们定义几种常见类型的App颜色色调:无颜色,单主色,主要和次要颜色匹配。颜色搭配的颜色错觉让我想起了MD的行会线的颜色。在任何颜色环境中,无论何种类型,主色都会受到周围色彩的影响,周围的色彩可以帮助您表达应用的情感。

所有理论工具都是服务和您想要表达的核心理念。无论想要推动品牌,还是只想做单页功能,我们都需要记住始终在视觉细节中实现它。在这里,我只是扔了一些砖块,一切都只是一个开始,我希望能帮助每个人对他们的产品有更多的尝试。互联网视觉设计刚刚开始,我们需要共同努力!

最后,附上鸡蛋,让我们看看BC省人们在实现视觉幻觉概念之前创作的艺术作品。

在意大利罗马的Piazza del Popolo广场,有一座建于17世纪的两座双人教堂。右边的教堂比左边的教堂大,但右边的教堂屋顶是扁平的,椭圆形的,所以看起来很平衡。

出生于16世纪的佛兰芒地区(现在横跨比利时,荷兰,法国地区)画家彼得·保罗·彼得保罗鲁本斯《耶稣下十字架》。黑色礼服角色右侧的梯子在角色的上方和下方交错(如图)。有一种观点认为,鲁本斯注意到,如果你画一条直线,就会出现波浪和波浪的错觉(你自己检查一下),梯子会向上和向下看,所以它是故意在梯子上上下交错。该观点于1984年由D.R.出版。加拿大温尼伯大学的礼帽。

红线是下面梯子的垂直延伸。最初它应该根据这条线绘制,但实际上梯子是在蓝线位置绘制的。

« 广告系统设计:个性化推荐 | 有效且易于使用的表单设计应遵循哪些原则? »