美文网首页UI/交互设计规范
’格式塔‘视觉原理的运用

’格式塔‘视觉原理的运用

作者: 皮卡小丘 | 来源:发表于2017-05-23 17:17 被阅读0次

格式塔心理学科是认知心理学中的一个重要理论,在视觉设计中已经有较大的影响,了解大众的视觉认知工作原理不仅可以设计出更加符合用户认知的界面,而且还能做到每一个元素、颜色、布局都有严格的理论依据去支撑。

什么是格式塔?

格式塔心理学诞生于1912年,是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的:我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt,因此这些理论也称做视觉感知的格式塔原理

若去深究格式塔原理,可能需要相当长的时间来学习理解,作为交互设计师和界面设计师,其实只要理解这几个原理的含义和使用方法,就可以对自己的设计做出指导和支撑了。

格式塔理论明确地提出:眼脑作用是一个不断组织、简化、统一的过程,正是通过这一过程,才产生出易于理解、协调的整体。由此产生出了格式塔的一些基本原则(适用于布局和界面设计):

格式塔原理——图形与背景、接近、相似、闭合、连续、简单、均衡。


图形与背景原理

——知觉帮助我们把图形从背景中分离出来。图形与背景的对比越大,图形的轮廓越明显,则图形越容易被发觉。这个原理指出,我们在感知事物的时候,总是自动的将视觉区域分为主体和背景,我们可以利用这个原理拉伸整个设计的层次,做到突出我们想要用户看到的,比如,手机应用中常常使用的灯箱,通过将当前的内容变暗,将之转换成为背景,之后弹出灯箱,使用户的视觉焦点转移。

接近原理

——距离(位置)相近的各部分趋于组成整体。这是最简单、也是最常用的原理。


如上图所示,左图为同样大小、间距相同的一组圆。我们只是改变一下某些圆之间间距,那么我们容易看成竖立的四列圆点。

应用

图1:左侧设置区域,右侧操作确定区域。图2:类似功能的按钮组成一组。都是为了方便用户操作,相反如果同一组的控件的摆放距离相隔太远或者横纵接近的方式不对或者没有使用任何的区域分割线的话,人们就很难感知到它们是你预期的那样的相关性,软件就会变得难以学习和使用。

接近性原理是支撑我们对杂乱无章的元素进行组织设计的最基础的原理,小到排版、网页、大到各种软件、程序甚至是生活中家具的摆放、房间的布局,他贯穿我们生活的方方面面。

相似原理

——如果其他因素相同,那么相似的物体看起来归属一组


同样的2副矩阵圆,第二幅矩阵只是更改了两排圆的颜色,马上我们的圆点在视觉上就会按横向去排列了,颜色上的相似会强烈的引导我们的视觉,促使我们改变这些圆点的排列方向。

应用:表单列表,由于横向间距较大,视觉认知很容易去纵向阅读,而我们又期望用户去横向阅读来获取信息,所以加了灰色条之后,我们的视觉认知就很容易去横向阅读了。

闭合原理

——彼此相属、构成封闭实体的各部分趋于组成整体。

人们倾向于将缺损的轮廓加以补充使之成为一个完整的封闭整体


如上左图,没有三角形和圆,但是我们心理模型中习惯填充缺失的信息,创建我们熟知的形状和图形。设计中通过不完整的图形,让浏览者去闭合,可以吸引用户的兴趣和关注。最著名的应用便是苹果公司的logo,咬掉的缺口唤起人们的好奇、疑问,给人巨大想象空间。封闭性在交互上的的扩展,还可以理解为对完整状态的认知倾向,比如“操作的闭环”,运用到流程设计中去,比如:添加购物车后购物车的反馈,删除后的效果等等操作的闭环。

连续原理

——在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线。凡具有连续性或者共同运动方向的物体容易看做一个整体。

图例:知觉上会弱化这些分割所带来的“块”,而依然意识到“直线、圆、曲线”。

箭头的方式、半遮挡的方式,模拟现实叠加的方式,都是通过视觉的连续性的运用,三种方式并没有好坏之分,只不过是根据当前用户的使用场景,或者产品的目的来选择适当的方式而已。

简单原理

——我们的眼睛在观看时,眼脑并不是在一开始就区分一个形象的各个单一的组成部分,

而是将各个部分组合起来,使之成为一个更易于理解的统一体。”

眼脑一直是处于组织-调取之间,简单原理还可以解释为“与过去学习到的规律一样的、相似的对象更容易认知”。认知难度大约是“圆≈方≤星<多边形”,越是简单的图形认知难度越低。

均衡原理(对称性)

——知觉倾向于寻求视觉组合中的秩序或平衡。

左图一个杠杆上两个球,同样质地的两个球,大球被小球翘了起来,是不是感觉怪怪的,因为我们会认为同样颜色质地的两个球,重量必然是大的球的质量会更大,但是重量大的反而被重量小的翘了起来,这必然不符合我们用户的认知模型,但是,如图二,我们将大球的颜色变淡,大球被小球翘了起来,整个都会变得更合理一些了,这是就是视觉重量或者视觉流,根据视觉元素重量的不同,来营造视觉平衡;也可以根据'不平衡‘依靠视觉重量,引导用户视觉流。

总结

以上即是通过格式塔学习后的思考总结,在现实世界的视觉场景中,各种格式塔原理并不是孤立的,而是共同起作用,在工作中用每一条原理来考量各个设计元素之间的关系,减少工作中的主观臆断,并使设计方案更有依据。

相关文章

  • ’格式塔‘视觉原理的运用

    格式塔心理学科是认知心理学中的一个重要理论,在视觉设计中已经有较大的影响,了解大众的视觉认知工作原理不仅可以设计出...

  • 格式塔原理在UI中的运用

    一切设计的背后都是有原理的,今天跟大家分享一下格式塔原理及其在UI中的运用 什么是格式塔原理? 格式塔原理诞生于1...

  • 格式塔原理

    格式塔原理是什么 格式塔心理学诞生于1912年,是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察...

  • 认知心理学与交互设计(3)--格式塔原理

    “格式塔”一词是德语“Gestalt”的音译,意思是“形状”和“图形”。格式塔原理是德国心理学家在研究人类视觉工作...

  • UI设计如何做好排版?你可以学习一下格式塔原理

    今天给大家分享来自UI中国会员-skys的一篇文章,关于格式塔原理与设计排版的关系。 格式塔是一种视觉感知的理论,...

  • 视觉感知和格式塔原理

    在1910年,心理学家 Max Wertheimer就观察发现在一个铁路口一系列灯光闪烁和关闭的现象,就类似于在环...

  • 完形视觉原理(格式塔)

    人们总是先看到整体,然后再去关注局部,人们对事物的整体感受不等于局部感受的加法,人脑的视觉系统总是在不断地试图在感...

  • 视觉感知

    构图中元素的放置对用户感知设计的方式有重大影响。这种视觉感知很大程度上基于心理学的格式塔原理(格式塔的意思是“统一...

  • 格式塔

    格式塔原理

  • 说说都有哪些版式设计知识点

    格式塔原理 http://www.uisdc.com/tag/格式塔原理 黄金比例 http://blog.sin...

网友评论

    本文标题:’格式塔‘视觉原理的运用

    本文链接:https://www.haomeiwen.com/subject/fgydxxtx.html