视错觉与UI元素间能产生什么化学反应？

~

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

第一篇：视错觉历史

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

1.蓬佐错觉-Line

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

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

这一视错觉在UI运用上，第一个让我想到的就是Input、Cell或段落间的分割线。各App的长短不同，大多数App都按照iOS或Android Guideline，在各控件左右留P的距离。也有一些不走寻常路的App。

图1（1.摄影图片分享APP－IOS系统；2.回家吃饭－IOS系统；3.记账软件－ANDROID系统）

图2（1.日志软件－ANDROID系统；2、3.UBER-IOS系统）

图1截取iOS与Android系统上一些App，设计师使用非常规P距离线。图2截取了各平台App左右不留间距的线。从这两张图我们可以看到使用各种长短线的都有，并没有统一标准，最主要是你想要表达什么？在这里蓬佐错觉是否能帮助到你的UI表达。

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

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

2.艾宾浩斯错觉-Space

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

REPRESENTATIONS OF THE (A) EBBINGHAUS-TITCHENER SIZE-CONTRAST ILLUSION AND (B) DELBOEUF ILLUSION.

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

DESSERTS SERVED ON DIFFERENT COLOURED PLATES AT THE INSTITUT PAUL BOCUSE RESEARCH CENTRE IN THE STUDY BY PIQUERAS-FISZMAN

THE STRAWBERRY-FLAVOURED MOUSSE SERVED FROM SQUARE, ROUND AND TRIANGULAR PLATES IN THE STUDY BY PIQUERAS-FISZMAN

THE BALANCED AND UNBALANCED PLATE ARRANGEMENTS UTILIZED BY ZELLNER ET AL. 64. IN THE COLOURED PRESENTATIONS, THE LINES OF TAHINI WERE GREEN AND THE DOTS WERE RED.备注3

在食物与餐具的关系中，已经被证实的结果能否在我们UI界面中运用呢？

上图是根据Google color tool搭配出的两组配色，左右图中空间格局完全相同，但运用不同深浅，色相会给人有左边空间更狭窄，而右边更宽阔的感受。

左右图中的原点大小其实是完全一致，但在左图中感觉较小，而右图较大。艾宾浩斯错觉与德勃夫错觉能在界面空间上起到明显作用，我们可以遵循这个理论工具为我们的设计服务，更好的表达功能重点，在空间中体现结构关系。

3.卡尼莎三角–Iconography Texture

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

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

上图可以看到，在图形的中心有一个实际上并不存在的白色三角形。这是因为大脑在观察的时候自发将线段连接起来形成了完整的图形，而且这个视错觉在各种类似图形上都成立。

卡尼莎不仅作为心理学家取得了巨大的成就，他也是一位活跃的画家。在她的绘画中也不乏利用视觉错创作的作品。

GAETANO KANIZSA,[OMENONE] 1977- OLIO SU TELA.CM50X70

GAETANO KANIZSA,[UOVO] 1975- OLIO SU TELA. CM50X70

卡尼莎错觉其实可以在UI的Graphic中运用，当然，每个设计师都要评估这个工具是否与公司品牌与视觉语言相和。

在市面上暂未看到完全运用卡尼莎错觉的icon作品，但我们时常看到未链接完成的icon设计，但这些未链接完全的icon并不会造成我们认知上困难，这是因为大脑帮助我们自动补全。

而说到材质，我们不得不提到Google推出Material Design（之后简称为MD）后，MD在Graphic明暗交界处使用了颗粒状来表达材质，这是MD纸质表达的延续。

在Graphic中，大家也慢慢开始沿用MD的材质表达，近期某厂App升级也在Graphic的材质上做了更加大颗粒全图片材质表达

从图形、颜色、材质本身来说没有任何问题，在手机上显示也是挺漂亮，但这个颗粒感材质是如何与全局视觉体系联系的？在仔细阅读了他们设计概念／思路中“视觉打法”这一段，并没有找到答案。作为同行，也没能在产品中看出些材质统一性的端倪来，现在看只是为了做材质而做材质，在整体材质上并没有贯通。

提出卡尼莎错觉可以尝试运用在icon或graphic设计中，可以更开阔思维，多做尝试，小小图片也有大大世界。

4.冯*贝措尔德效应–Color

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

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

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

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

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

上图看到 1.那里有一条明显的竖着的亮线，2.那里有一条明显的竖着的暗线。但是将线与其他部分相比较，并非更亮或更暗一点。从1.到2.只是慢慢变暗。这种视错觉被称为马赫带，是大脑为了清除区分明暗分界线而产生的。

了解了我们大脑是如何认知色彩后，我们再来看一下什么是色彩同化？

上图中左右两边颜色完全一致，但中间颜色被周遭颜色影响

当一种颜色被另一种颜色包围，或者另一种颜色作为背景的时候，那么这种颜色就会看起来很接近周围的颜色或者背景颜色，我们把这一现象称之为色彩同化。它属于一种色彩视错觉，又被称作冯*贝措尔德（Wilhelm von Bezold，德国气象学家，1837-1907）效应。

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

所有的理论工具都是服务与你想要表达的中心思想，无论这个思想是为了推品牌，还是只想把单个页面功能做好，我们需要记得要在视觉各细节中始终让其贯彻。在此，我只是抛一些砖，一切都只是个开始，希望能帮助到大家在各自的产品上有更多的尝试。互联网视觉设计才刚刚开始，需要我们一起努力！

最后附上彩蛋，让我们一同看看在未意识到有视错觉这一概念的公元前，人们创造出的艺术作品。

在意大利首都罗马的人民广场（Piazza del Popolo）上有两座建于17世纪的双子教堂。右侧的教堂面积大于左侧的，但右侧的教堂屋顶扁为椭圆形，因此看起来保持了平衡。

生于16世纪佛兰德地区（现跨越比利时、荷兰、法国的一个区域）的画家彼得*保罗*鲁本斯（Peter Paul Rubens）的《耶稣下十字架》。右侧穿黑色衣服的人物所登的梯子，在人物的上方和下方错开了（下图）。有一种观点认为，鲁本斯注意到如果画成直线的话就会出现波跟多夫错觉（大家自己去查吧～），梯子会看起来上下错开，因此才特意将梯子上下错开画。这个观点由加拿大温尼伯大学的陶珀（D.R.Topper）发表于1984年。

红色线是下面的梯子向上的竖直延伸。原本应该按照这个线画出来的，但实际上梯子画在蓝色线位置。

注1： 1990年代，整个网络向公众开放。1991年8月，蒂姆·伯纳斯-李在瑞士欧洲核子研究组织创建了HTML、HTTP和最初几个网页之后两年，他开始宣扬其万维网项目。在1993年，MOSAIC网页浏览器被发布了，在1994年晚期，公共利益在前学术和技术的互联网上稳步增长。1996年，“INTERNET”（互联网）一词被广泛的流传，不过是指几乎整个的万维网。文中的21年是从1996年互联网这次名词被广泛传播开始算的。 注2： 最为大家所熟悉的心理学初期的视错觉“弗雷泽错觉”。1908年由詹姆斯*弗雷泽发表。看起来是一个向中心旋转的漩涡，但实际上只是大小不同的圆排列在一起，沿着线并不能走到中心点。 注3: 图片选自论文PLATING MANIFESTO(II):THE ART AND SCIENCE OF PLATING DDC

作者：Kana

---

安远县13292647886： 反同构定义是什么? - ？
繁彦山梨： 同构现象是指视觉美学中的一个概念,就是指某个共同的元素为多个元素所共用的现象,是奇妙的视错觉现象.在现实生活和艺术作品中也多有应用同构现象的地方.谓同构,指的是两个或两个以上的图形组合在一起,共同构成一个新图形,...

安远县13292647886： 视错觉的视错觉的原理 - ？
繁彦山梨： 视错觉就是当人或动物观察物体时,基于经验主义或不当的参照形成的错误的判断和感知.我们日常生活中,所遇到的视错觉的例子有很多: 右上图A与B是同样大小的,右下图中间的圆圈也是同样大的,但看到的却是一大一小,这是不争的事...

安远县13292647886： 已知电流电压怎么算功率 电压380V电流60A功率是多少kw - ？
繁彦山梨： 电压380V电流60A功率是kw. P=UI=380V*60A=22800W=2.28kw. 电功率计算公式:P=W/t =UI; 在纯电阻电路中,根据欧姆定律U=IR代入P=UI中还可以得到:P=I2R=(U2)/R; 在动力学中:功率计算公式:1.P=W/t(平均功率)2.P=FV;P=...

安远县13292647886： 请物理高手正确回答.请问W=UIt W=I²Rt Q=I²Rt W=U²/t Q=U²/t这些公式,的适用范围! - ？
繁彦山梨： 电功电功率部分 12.P=UI (经验式,适合于任何电路) 13.P=W/t (定义式,适合于任何电路) 14.Q=I2Rt (焦耳定律,适合于任何电路) 15.P=P1+P2+…+Pn (适合于任何电路) 16.W=UIt (经验式,适合于任何电路) 17. P=I2R (复合公式...

安远县13292647886： 视错觉在设计中的作用和意义 - ？
繁彦山梨： 视觉是人类获取外界信息最重要的手段之一.视错觉是在环境及条件的共同作用下,由于人心理或生理因素的原因产生的错误的视觉影像,是人们在长期实践中发现的一种不可避免的特殊视觉感受. 本文探讨视错觉在环境空间设计中的研究与应...

安远县13292647886： 视错觉的原理 - ？
繁彦山梨： 视错觉就是当人观察物体时,基于经验主义或不当的参照形成的错误的判断和感知,是指观察者在客观因素干扰下或者自身的心理因素支配下,对图形产生的与客观事实不相符的错误的感觉.我们日常生活中,所遇到的视错觉的例子有很多....

安远县13292647886： 化反是什么意思 - ？
繁彦山梨： 化反是什么意思 所谓“化反”,在任何现代汉语词典里都查不到.根据原文,说者想表达的是一个看似新颖实则晦涩生硬的概念—“生态化学聚变(请注意聚变这个词)反应”. 可以检索到的信息显示,该词汇由乐视贾某某“首创”,并作为其商业构想进行推广. 这种生造并反复炒作的概念有无实质新意不得而知,但难逃故作高深之嫌,使一般受众不能立即明白似乎是说者想达到的效果之一. 让我们来看看其某一次发言—“下一代UI只有真正打通app与app,app与UI系统,通过生态化反让UI成为生态与终端的交互枢纽,让体验不再向硬件和平台所妥协,才能把简单还给用户.” 试问,这么一段缩写和术语满天飞、俨然出自专业人士而非企业家之口的话

安远县13292647886： 什么是设计中的视错觉现象 - ？
繁彦山梨： 两可图形,形态错觉 错觉轮廓 不可能图形 恒常性造成的错觉 似动和主观颜色

安远县13292647886： 人机交互设计中需要考虑哪些交叉学科? - ？
繁彦山梨： 交互2113设计是一门交叉学科,广义5261的交互设计涉及人机工程学、心理学、社会4102学、设计学等等知识,从狭1653义的角度看,交互设计主要指人机界面交互.涉及到用户研究能力、需求分析能力、信息架构设计能力、流程逻辑设计能...

安远县13292647886： 初二到初三所有物理公式 - ？
繁彦山梨： 1、速度:V=S/t 2、重力:G=mg 3、密度:ρ=m/V 4、压强:p=F/S 5、液体压强:p=ρgh 6、浮力: (1)、F浮=F'-F (压力差) (2)、F浮=G-F (视重力) (3)、F浮=G (漂浮、...