视错觉与UI元素间的可能

视错觉与 UI 元素间的可能视觉原理在当代人红火的机械视觉中是必不可少的，那在我们日常其他工作的 UI 产品设计中又有什么可能性的呢？今天，我从“视错觉”这个角度，探索下要如何运用在UI 上。第一篇：视错觉历史黑格尔古希腊哲学家亚里士多德的灵魂论里阐述了人类五感：视觉、触觉、味觉、嗅觉和听觉。我们视觉设计师暂时无法在四方形盒子(泛指各种电子装置)内设计味觉、嗅觉和听觉，而对于触觉，说到底，我们始终在与这个长方形盒子建立关系接触，并无法通过对设计内物体的真实触摸而得到感觉，实际伸出手张口探寻或步行而感受到距离等，去比较大小、距离等进行认知。因为这个客观存在，也更加需要我们视觉设计师运用视觉原理与技法让使用者更容易与机器进行交互。因着这样的认识，我思考了以下这些可能性：1. 蓬佐错觉 -Line蓬佐错觉是有关长短的视错觉。自从意大利精神病学心理学家马里奥 . 蓬佐 (MarioPonzo,18821960) 发表了相关论文后，这一视错觉便被称为蓬佐就先错觉，但在这之前，它就早已被人们所熟知。上图上下并列的两条横线，上面的看上去比下面的长。有一种观 点认为的是因为横线外侧这斜线使大脑觉得有纵深感，认为上面的线 当更远一些。长度相同的线段，位于远处的应该更长一些，因此上面 的横线会让人要说比下面的短。这一视错觉在UI运用上，首个让我想到的就是Input、Cell或段 落间的分割线。各App的长短不同，大多数App都按照iOS或 AndroidGuideline ,在各控件左右留P的距离。也有一些不走太高兴 的App图1 （1.摄影图片分享appiOS系统；2.回家吃饭一iOS系统；3.记账软件一Android系统）尸事也3 Aix弧步胃翼图2 （1.日志软件一Android系统；2、3.Uber-iOS系统）图1截取iOS与Android系统上一些App,设计师使用非常规 P距 离线。图2截取了各平台App左右不留间距的线。从这两张图我们可以看到使用各种察觉到长短线的都有，并没有统一标准，最主要是你 急于表达什么？在这里蓬佐错觉是否能暗中帮助到你的 UI表达。手机屏幕的边界就如蓬佐错觉中外侧斜线，分割线与边界的距离 就能让人对间隔中左右信息产生或长或短的感受，易读性也成为考量 的一点。在App设计中，全局规范考量考虑是非常重要的，满足了单 个页面的视觉需要是远远不够不单是的，前端开发害怕的怕是没有逻 辑规则的不同，只要定义好功能规范，即使在不同使用不同线长短也 不是大问题。简言之，在定义Line长短时，我们可以更多思考为什么要留边距, 留多少合适，为什么推断出这样的长短，是否有逻辑可循，考虑过全 局性了吗，是否与品牌相合，是否能传达出视觉效果故事等等。2. 艾宾浩斯错觉-Space赫尔曼*艾宾浩斯(HermannEbbinghauS)是著名的研究人类记忆 的心理学家，出生于德国，任职波兰布雷斯劳大学教授。他主要研究 人类如何进行持续性记忆梦境的(题外话：艾宾浩斯格外记忆曲线非 常有名)。上图是他发现的视错觉图。位于中间的两个两个橘黄色的 圆体积相同，但是看起来右侧的较为明显偏大。右侧橘黄色圆的四周是小圆，所以看起来比实际的大，而左侧的橘黄色圆周围是大圆，因此它看起来比实际的要略小Representationsofthe(A)Ebbinghaus-Titchenersize- contrastillusionand(B)Delboeufillusion.艾宾浩斯错觉广泛应用在实际应用中非常最广泛，利用我们身边 的东西，进行排列组合，就可以确认发现视错觉。艾宾浩斯错觉加上 德勃夫错觉(JosephDelboeufillusion )和万辛克(Dr.BrianWansink )、薛尔特梵依特森博士(Dr.KoertvanIttersum )的研究证实，人们的进食量会被盘子的个数 与人类颜色所影响，也就是说，我们会被这些视错觉而影响真实这些 行为。DessertsservedondifferentcolouredplatesatthelnstitutPaulBocus eResearchCentreinthestudybyPiqueras-FiszmanThestrawberry-flavouredmousseservedfromsquare,roundandtriangularplatesinthe studybyPiqueras-FiszmanThebalancedandunbalancedplatearrangementsutilizedbyZellnereta l.64.Inthecolouredpresentations,thelinesoftahiniweregreenandt hedotswerered.备注 3在鱼肉与餐具的关系中，已经被推断的结果能否在我们 UI界面中 运用呢？上图是根据Googlecolortool搭配出的两组配色，五六图中空间 格局完全相同，但运用不同深浅，色相会给人有左边色空间更狭窄， 而右边愈来愈宽阔的感受。S口 Q 白。日2=C CHANNEL.Mv Tasks圆心仅约图中的原点大小其实是完全一致，但在左图中感觉较小, 而右图较大。艾宾浩斯错觉与德勃夫错觉能发挥在界面空间上起到明 显作用，我们可以遵循这个理论工具为我们的设计服务，更好的表达 系统重点，在空间中体现结构中关系。3. 卡尼莎三角-IconographyTexture盖塔诺*卡尼莎(GaetanoKanizsa,19131993)是意大利心理学家 搭建他在意大利的里雅斯特建立了 “心理学研究所”，为意大利心理 学研究做出了巨大贡献。在卡尼莎发现的视错觉中，最出名的是发表于1955年大家所熟知的底下的“卡尼莎三角”。这个视错觉表明的的大脑把实际上不存在 我们三角形轮廓线画了出来。我们把根本不存在的轮廓线既然称为“主观轮廓”。上图可以看到，在图形的中心有一个实际上并不存在的白色三角 形。这是因为大脑皮层在观察的时候自发将线段连接起来形成连接起 来了完整的图形，而且这个视错觉在各种类似图形上创设都组建。卡尼莎不仅作为心理学家取得了的成就，他也是一位活跃的画家。 在她的绘画中也不乏错借由视觉错创作的作品。GaetanoKanizsa,Omenone1977-oliosu3阡川一；ifm-r：J!一例，皿皿；3GaetanoKanizsa,Uovo1975-oliosutela.cm50x70卡尼莎错觉也许可以在 UI的Graphic中运用，当然， 都美感要评估这个工具是否与公司品牌与视觉语言相和。每个设计师但我们时常不会并不会在市面上暂未看到完全运用卡尼莎错觉的icon作品, 看到未链接完成的icon设计，但这些未链接完全的icon 引发我们认知上困难，这是因为大脑帮助我们自动补全。SFmpre Icons PSD会回归 E 国口。0 B 恁Q C 0 只 K 国 白01 回 国由只 Rm4只y 等。 G)% 皿 0而说到材质，我们不得不提到 Google推出MaterialDesign （之后 简称为MD后，MDS Graphic明暗交界处使用了颗粒状来表达材质， 这是MD氏质表达的延续。在Graphic中，同学们也慢慢开始沿用 MD勺材质表达，之前某厂 App升级也在Graphic的材质上做了更加大颗粒全图片材质表达.从图形、颜色、玻璃纤维本身来说没有任何问题，在手机上显示 也是挺活泼可爱，但这个颗粒感材质是如何与全局视觉体系联系的？ 在仔细阅读了他们概念设计概念/思路中“视觉打法”这一段，并没 有找到答案。作为同行，也没能未能如愿在产品中看出些材质统一性 的端倪来，现在看只是为了做材质而做材质，在整体材质上并没有贯 通。提出卡尼莎错觉可以尝试运用在icon或graphic设计中，可以更 开阔思维，多做尝试，小小图片也有大大世界。4. 冯*贝措尔德效应-Color在太阳照射的光波中，可见光是非常狭小的，我们只能看到区间在400-700nm的波长在了解色彩视错觉前，我们需要知道什么是色彩。在学习什么是 色彩时，有一个理论让我非常诧异一一色彩是大脑的感觉。感觉？什 么！我看到的花花世界都是即便感觉？接着，我来转述一下为什么说色彩是大脑的感觉。“光照射到苹 果上，而苹果表面只反射特定波长的光，其他光会被吸收，所反射的 特定波长的红光被人收入眼帘，那么感觉就是红色。现代科学表明，由于不同波长对象镜面反射的波长不一样，人类 能否才能感受到各种各样的色彩。而且，映入眼帘的光北细胞转换成 信号，通过神经传达给大脑，至此才第一次有“是红色”的感觉。但 是，有时候对相同波长的光也有不同的色彩感觉，那就是视错觉。”也就是说，在日常生活中，如衣服上看到的色彩，并非色彩本身, 而是吸收波长后再反射的表现手法，染料本身的颜色是最终我们看到 的颜色，其中的原理如同上面那个苹果的光学反应。上图看到1.那里有一条较为明显的几条竖着的亮线，2.那里有一 条明显的竖着的暗线。但是叶唇柱与其他部分相比较，并非更亮或更 暗一点。从1.到2.只是慢慢变暗。这种视错觉被称为马赫带，是大脑 为了清除区分明暗分界线而产生交汇点的。了解了我们大脑是如何认知色彩后，我们再来看一下什么是色彩 同化？上图中左右两边颜色完全一致，但中间颜色被周遭颜色负面影响。当一种颜色被另一种颜色包围，或者另一种颜色颜色作为文化背 景的时候，那么此种颜色就会看起来很接近周围的颜色或者背景，我们把这一现象称之为色彩同化。它属于一种色彩科弓果，又被称作冯*贝措尔德（WilhelmvonBezold ,德国气象学家，1837-1907）效应。通常我们定义 App意象调性有几种常用类型：无色彩、单一主色、 主次色彩搭配。色彩视错觉的色彩搭配让配搭我想到了MD勺色彩Guild-line ,在不同表现手法环境中无论哪种类型，几乎能以至于通 过周围色彩来影响主色，并让周围纯白帮助你表达App的情感。所有的理论工具都是服务与你表达的中心思想，无论这个思想是 为了推品牌，还是只想把单个页面功能做好，我们需要记得要在视觉 各细节中让其贯彻。在此，我只是抛一些砖，一切都只是个开始，希 望能帮助到大家在各自的产品上有更多的尝试。互联网视觉设计总算 刚刚开始，需要有我们一起努力！最后附上彩蛋，让我们一同看看在未意识到有视错觉这一概念的 公元前，人们创造出更的艺术作品。在意大利首都罗马的人民广场(PiazzadelPopolo )上有两座建于 17世纪的双子教堂。右侧的教堂面积大于左侧的，但右侧的教堂屋顶 扁为椭圆形，因此看起来继续保持了平衡。生于16世纪佛兰德地区（现跨越比利时、荷兰、法国的一个区域） 的画家彼得*保罗*鲁本斯（PeterPaulRubens）的耶稣下十字架。 铁板右侧穿黑色衣服的人物所登的梯子，在人物的上方和下方错开了 （下图）。有一种观点认为，鲁本斯注意到如果画成直线的话要出现 波跟多夫错觉（大家自己去查吧），梯子会看似上下错开，因此终 于特意将梯子上下错开画。发表于 1984年。白色线是下面的梯子向上的竖直延伸。原本应该按照这个线画出 来的，但实际上梯子画在蓝色线绳索位置。