设计与大脑有毛关系?

用户头像
北京/设计爱好者/6年前/150浏览
设计与大脑有毛关系?

作为专业的设计师都十分的清楚,心理学在视觉感知中所起到的重要性,当用户对你的创作作品产生兴趣会出现怎样一个反应?

   作为专业的设计师都十分的清楚,心理学在视觉感知中所起到的重要性,当用户对你的创作作品产生兴趣会出现怎样一个反应,同时得到怎样的反馈呢?这终究是我们一直所探索的。而想要掌握着所有的信息就要去了解我们人类的“大脑” 众所周知我们人类所有接收到的信息都是通过大脑所传输给我们的,但是总要先看到东西才能判断呀,好!那么我们就先从最根源的地方说起“眼睛”。其实我们的眼睛很特殊,时常会误导我们,这是因为眼球是由视神经和视觉皮层所构成,我们的眼睛是外部图像进入视觉系统的第一个环节,外界事物在视网膜上成像,而视网膜上存在着密密麻麻的小光感受器。这些小感受器往后传递的信息就可以包括颜色,亮度。另外我们再考虑他们是一个矩阵,同时还可以在时间上变化。于是后面得到的信息就包括了空间,时间,颜色亮度这些信息。准确的来说我们的眼球可以称作是一部全自动聚焦成像图像采集系统,在性能上来说是无法被市场上任何一台数码相机所代替的,但是人类的眼球是十分的脆弱的,即使再小的损害都会引起严重的视力问题,例如我们常见的近视、远视、老花眼等等包括我们身边多多少少会碰见那些所谓“色盲”的朋友吧。排除这些眼部有问题的人,其实绝大多数人的眼睛是正常的,之所以会产生错误的视觉传达,是因为人们的主观感觉与图像物理的参数出现了不匹配的现象,那难道是我们在视觉皮层的进化过程中出现了纰漏?其实关于这个问题,科学并没有给出统一的解释

  我们的视觉系统作为一种进化的产物,初次遇到这样的图形会用它固有的方式去理解,就会出现类似「理解偏差」的现象,是我们的大脑进化不够完美而出现的bug。

比如由于红绿拮抗神经元的存在,导致红花衬托在绿叶上面格外鲜艳、红橙色的果实在自然界中占据大多数;由于我们的大脑会存在「填补效应」,一个人的身体被遮挡住了一部分,我们并不会认为这个人的身体少了一块;由于大脑中存在专门负责面部识别的脑区,人们对于脸部识别更加敏感。

  图形背景理论格式塔心理学的另一项原理。它是由丹麦现象学家Edgar Rubin(1886-1951)首次提出的。下面是一个案例


基本上,我们似乎有一种天生的倾向,将图像的一个方面视为人物或前景,而将另一方面视为地面或背景。这里只有一幅图像,但是,通过改变我们的视点,我们可以看到两种不同的事物。似乎甚至无法同时看到它们!但是,格式塔原则绝不限于感知-这就是它们最初被注意到的地方。

  那大家认为有什么能比圆角更圆的吗?其实在此之前我也是靠着曾经的认知来判断“没有”其实就像开始我说的一样,人类的眼睛是非常不可思议的,有时候它并不会传达给我们“原本”的信息,那么我们看一下下面这张图片哪个看起来更圆?

我调查过身边的朋友们,大多都会选择第3和第4个,首先圆1和圆5直接就pass四边的棱角都十分明显,而圆2稍比前面两个略显收敛一些,最纠结的就是3与4了 ,但如果将3和4重叠在一起—我们就会发现一个是几何意义上的圆形一个是优化过得圆形

为了进一步的说说明这是怎么回事,我排列了字母O在三种著名的的几何字体的情况——Futura,Circe和Geometria。这样高质量的字体是基于人类的视知觉优化的,并且运用了复杂的系统来优化视觉上的感受,希望它们的圆看上去比几何圆形更圆。这些字母有让你的眼睛更愉悦么?

为了进一步的说说明这是怎么回事,我排列了字母O在三种著名的的几何字体的情况——Futura,Circe和Geometria。这样高质量的字体是基于人类的视知觉优化的,并且运用了复杂的系统来优化视觉上的感受,希望它们的圆看上去比几何圆形更圆。这些字母有让你的眼睛更愉悦么?

所以从视觉感知上来说,经过优化的圆形(右边的)会比一个几何圆形看上去更圆。

    

  我们再分析一组案例:一个400px的正方形或者是一个400像素的圆形。几何学上来说,它们的宽度和高度是一样的。但是观察一下下面的图片,我们的眼睛能立即识别出正方形比圆形更重。顺便说一下,“重量”相关的词语更适合描述视觉效果。

以防你不相信我的话,下面是加上参考线和数值的版本。

现在让我们再看一张图片,在视觉重量上,它们是一样的么?

undefined

对我来说,绝对是的。最起码很难立即说出哪一个更重。因为我把圆的直径增加了50px

  为了说明缘由,我把两张图重叠在一起。如下图,可以看出来,在“a”区域正方形比圆形更重,然而“b”区域圆形比正方形更重。左边的图中正方形能完全包裹圆形,右边的图中圆形和正方形是平衡的,没有谁能包裹谁,圆形和正方形都有四小片内容。

 


  那…重点来了。这和界面设计有什么关系?

当你设计一组icon的时候,所有的icon看起来视觉平衡是非常重要的,以确保没有icon太突出或者太小。如果直接将icon放入正方形中,越接近正方形的icon会看起来更大。

我推荐把视觉重量比较轻的icon稍微超过icon区域的边界,而视觉较重的icon则在区域中留下一部分空白区域。

以下是一些视觉平衡的icon案例

图中很清楚的标明了为什么一个icon区域通常会比icon本身要大了—为了能让非方形的icon看上去更合适,看上去不比方形的icon小。

最简单的检查方式是将icon模糊掉,如果模糊掉之后看上去或多或少是相似的斑点的话,它们就具有相同的视觉重量。

所以设计不单单是对齐像素这么机械,往往许多细节是我们所需要关注的,不让自己的设计变得枯燥与呆板。



-          

参考文献:知乎-蔡菜菜菜谱

 


8
举报
|
2
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
登录注册