如何将视错觉运用到UI设计界面中？

好酷屋

发布于2023-02-10

好酷屋教程网小编为您收集和整理了如何将视错觉运用到UI设计界面中？的相关教程：视觉原理在当下红火的机械视觉中是必不可少的，那么在我们日常工作的UI产品设计中又有什么可能性的呢？今天，小编从「视错觉」这个角度，探索下如何运用在UI上。　　　　视错觉历史　　　　古希腊哲学家亚里士多

　　视觉原理在当下红火的机械视觉中是必不可少的，那么在我们日常工作的UI产品设计中又有什么可能性的呢？今天，小编从「视错觉」这个角度，探索下如何运用在UI上。

　　视错觉历史

　　古希腊哲学家亚里士多德的《灵魂论》里阐述了人类五感：视觉、触觉、味觉、嗅觉和听觉。我们视觉设计师暂时无法在长方形盒子（泛指各种电子设备）内设计味觉、嗅觉和听觉，而对于触觉，说到底，我们始终在与这个长方形盒子接触，但是无法通过对设计内物体的真实触摸而得到感觉，实际伸出手探寻或步行而感受到距离等，去比较大小、距离等进行认知。因为这个客观存在，也更加需要我们视觉设计师运用视觉原理与技法让用户更容易与机器进行交互。因为这样的认识，我思考了以下这些可能性：

　　一. 蓬佐错觉-Line

　　蓬佐错觉是有关长短的视错觉。自从意大利心理学家马里奥·蓬佐(Mario Ponzo,1882~1960)发表了相关论文后，这一视错觉便被称为蓬佐错觉，但在这之前，它就早已被人们所熟知。

　　上图上下并列的两条横线，上面的看起来比下面的长。有一种观点认为这是因为横线外侧的斜线使大脑觉得有纵深感，认为上面的线更远一些。长度相同的线段，位于远处的应该更长一些，因此上面的横线会让人觉得比下面的短。

　　手机屏幕的边界就如蓬佐错觉中外侧斜线，分割线与边界的距离就能让人对间隔中左右信息产生或长或短的感受，易读性也成为考量的一点。在App设计中，全局规范考虑是非常重要的，满足了单个页面的视觉需要是远远不够的。前端开发害怕的是没有逻辑规则的不同，只要定义好功能规范，即使在不同界面使用不同线长短也不是大问题。

　　简言之，在定义Line长短时，我们可以更多思考为什么要留边距、留多少合适、为什么确定这样的长短、是否有逻辑可循、考虑过全局性了吗、是否与品牌相合、是否能传达出视觉故事等等。

　　二. 艾宾浩斯错觉-Space

　　赫尔曼·艾宾浩斯（Hermann Ebbinghaus）是著名的研究人类记忆的心理学家，出生于德国，任职波兰布雷斯劳大学教授。他主要研究人类如何进行持续性记忆的（题外话：艾宾浩斯记忆曲线非常有名）。上图是他发现的视错觉图。位于中间的两个橘黄色的圆大小相同，但是看起来右侧的明显偏大。右侧橘黄色圆的四周是小圆，所以看起来比实际的大，而左侧的橘黄色圆周围是大圆，因此它看起来比实际的要略小。

　　艾宾浩斯错觉在实际应用中非常广泛，利用我们身边的东西，进行排列组合，就可以确认发现视错觉。艾宾浩斯错觉加上德勃夫错觉（Joseph Delboeuf illusion）和万辛克（Dr.Brian Wansink）、薛尔特·梵·依特森博士（Dr.Koert van Ittersum）的研究证实，人们的进食量会被盘子的大小与颜色所影响，也就是说，我们会被这些视错觉而影响真实行为。

　　三.卡尼莎三角–Iconography & Texture

　　盖塔诺·卡尼莎（Gaetano Kanizsa,1913~1993）是意大利心理学家。他在意大利的里雅斯特建立了「心理学研究所」，为意大利心理学研究做出了巨大贡献。

　　在卡尼莎发现的视错觉中，最有名的是发表于1955年大家所熟知的下面的「卡尼莎三角」。这个视错觉表明我们的大脑把实际上不存在的三角形轮廓线画了出来。我们把根本不存在的轮廓线称为「主观轮廓」。

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

　　在太阳照射的光波中，可见光是非常狭小的，我们只能看到区间在400-700nm的波长。

　　在了解色彩视错觉前，我们需要知道什么是色彩。在学习什么是色彩时，有一个理论让我非常诧异——色彩是大脑的感觉。感觉？什么！我看到的花花世界都是感觉？

　　接着，我来转述一下为什么说色彩是大脑的感觉。光照射到苹果上，而苹果表面只反射特定波长的光，其他光会被吸收，所反射的特定波长的红光被人收入眼帘，那么感觉就是红色。

　　现代科学表明，由于不同对象反射光的波长不一样，人类才能感受到各种各样的色彩。而且，映入眼帘的光北视网膜细胞转换成信号，通过神经传达给大脑，至此才第一次有「是红色」的感觉。但是，有时候对相同波长的光也会有不同的色彩感觉，那就是视错觉。

　　也就是说，在日常生活中，如衣服上看到的色彩，并非色彩本身，而是吸收波长后再反射的色彩，染料本身的颜色未必是最终我们看到的颜色，其中的原理如同上面那个苹果的光学反应。

　　通常我们定义App色彩调性有几种常用类型：无色彩、单一主色、主次色彩搭配。色彩视错觉的色彩搭配让我想到了MD的色彩Guild-line，在不同色彩环境中无论哪种类型，都能通过周围色彩来影响主色，并让周围色帮助你表达App的情感。

以上就是好酷屋教程网小编为您收集和整理的平面设计,设计师,标签,简介相关内容，如果对您有帮助，请帮忙分享这篇文章^_^

本文来源： https://www.haoku5.com/shenghuo/63e551f2705f06c1720e3981.html