相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

视觉感知在UI设计中的应用

MAYA发布于:2020-2-22 13:30 |原作者: CC_OO|
MAYA
安徽省 蚌埠市 
发私信 + 关注
简介: 我们的眼睛很奇怪,经常误导我们,这是因为我们的视觉系统是由暴露在外的眼球,视神经和视觉皮层所组成。我们的眼睛是外部图像进入视觉系统的第一个环节,光学信号在视网膜上被转换成电信号,通过视神经传入视皮层的神经元海洋之中。眼球是一部全自动聚焦成像图像采集系统,在性 ...

版权申明:本教程出自"CC_OO"原创,感谢"CC_OO"的原创教程分享!

视觉感知在UI设计中的应用 飞特网 UI设计教程

FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/

我们的眼睛很奇怪,经常误导我们,这是因为我们的视觉系统是由暴露在外的眼球,视神经和视觉皮层所组成。我们的眼睛是外部图像进入视觉系统的第一个环节,光学信号在视网膜上被转换成电信号,通过视神经传入视皮层的神经元海洋之中。眼球是一部全自动聚焦成像图像采集系统,在性能上超越目前世界上任何一部数码相机。眼球上即使很小的损伤都会引起严重的视力问题,最普遍的就是近视眼、老花眼。还有些类似错觉感觉的疾病,如有些人眼睛由于玻璃体浑浊而出现「飞蚊症」,还有些人由于视网膜上缺乏相应的感光色素细胞而出现「色盲」或者「色弱」。这些病理性的异常都会对患者的正常生活产生严重的影响。

除了有眼部问题的人,绝大多数人的眼睛都是正常的。之所以会产生视觉错觉,是因为人们的主观感觉与图形的物理参数出现了不匹配的现象。那么为什么在错觉图形的条件下我们无法真实地感知外部图像呢?难道这是我们的视觉皮层在进化中出现的漏洞?关于这个问题,目前还没有一个统一的解释。

我们已知外部世界的图像通过眼睛的折光系统投射到视网膜上这一步骤是十分忠实于光学原理的。但是当外部图像在视网膜上被转换成电信号并进入大脑之后,皮层对于图像信息进行了进一步的解读。这种解读模式,在经过了亿万年的进化之后,必然是以一种最「接地气」、最「懂」这个世界的方式进行的。

视觉感知在UI设计中的应用 飞特网 UI设计教程视觉感知在UI设计中的应用 飞特网 UI设计教程视觉感知在UI设计中的应用 飞特网 UI设计教程

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

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

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

视觉感知在UI设计中的应用 飞特网 UI设计教程视觉感知在UI设计中的应用

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

有什么能比圆角更圆?我曾经也以为没有。但如同我最开始说的,我们的眼睛是是非常不可思议的,有时候它不会像我们所以为的那样传递信息。所以,下面那张图看起来更圆?


视觉感知在UI设计中的应用 飞特网 UI设计教程

我之前问过的人大多会选择3或者4。1和2明显太瘦,5则显得太丰满,如果将3和4重叠在一起——会发现一个是几何意义上的圆形一个是优化过得圆形,第二个比第一个视觉上会稍微重一点,因此也看上去更圆一点。

视觉感知在UI设计中的应用 飞特网 UI设计教程

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


视觉感知在UI设计中的应用 飞特网 UI设计教程

如果在它们上面叠加一个几何圆形,即使是最接近几何圆的Futura也有四块超出几何圆形的地方。此外,Circe和Geometria的字母则在宽度上也比几何圆形更宽,及时他萌和真正的几何圆形有同样的高度和宽度,也能看到有四块炒出来的"小肚腩",看上去像吃多了一样。


视觉感知在UI设计中的应用 飞特网 UI设计教程

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

视觉感知在UI设计中的应用 飞特网 UI设计教程

那我们能怎么利用这一现象呢?当然是用在圆角中!如果直接用软件中默认的圆角工具—PS,AI,Sketch等…结果可能在视觉感知上不来说并不太好。 

视觉感知在UI设计中的应用 飞特网 UI设计教程

人的眼睛能立马看出来直线在哪里突然转成曲线,这样的圆角看上去并不太自然。

视觉感知在UI设计中的应用 飞特网 UI设计教程

 考虑到我们的视觉感知能力,我修复了这个问题。

视觉感知在UI设计中的应用 飞特网 UI设计教程

12下一页
33

好评
27

差评

刚表态过的朋友 (60 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

MAYA
安徽省 蚌埠市 
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计