• 百图网免费素材千人群

百图网 > 设计教程 > 设计技巧 > 视错觉与UI元素间能产生什么化学反应?

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

2017-08-03

评论 0

浏览

收藏

@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搭配出的两组配色,左右图中空间格局完全相同,但运用不同深浅,色相会给人有左边空间更狭窄,而右边更宽阔的感受。

 

 

左右图中的原点大小其实是完全一致,但在左图中感觉较小,而右图较大。艾宾浩斯错觉与德勃夫错觉能在界面空间上起到明显作用,我们