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

视错觉历史

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

    一.蓬佐错觉-Line

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

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

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

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

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

    二.艾宾浩斯错觉-Space

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

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

    三.卡尼莎三角–Iconography&Texture

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

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

    上图可以看到，在图形的中心有一个实际上并不存在的白色三角形。这是因为大脑在观察的时候自发将线段连接起来形成了完整的图形，而且这个视错觉在各种类似图形上都成立。卡尼莎错觉其实可以在UI的Graphic中运用，当然，每个设计师都要评估这个工具是否与公司品牌与视觉语言相和。在Graphic中，大家也慢慢开始沿用MD的材质表达，之前某厂App升级也在Graphic的材质上做了更加大颗粒全图片材质表达。

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

    提出卡尼莎错觉可以

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

Powered by Froala Editor