设计原理 丨 视觉感知格式塔

爬虫设计小站2019-01-10 14:56:35
点击上方蓝色字关注我们


设计师经常遇到这种情况,作品做出来了,但总感觉不甚满意,到底是哪里出了问题,又说不上来。虽然说设计能力的提高需要参与实际项目不断磨练,但有一些被保留下来的经典的设计原理,还是要了解一下。再遇到“说不出来哪里不好,但就是感觉不好”的情况时,不妨参照下这些设计原则,重新梳理下思路。


本篇来自:

《认知与设计—理解UI设计准则》

格式塔

格式塔学派是心理学重要流派之一,兴起于20世纪初的德国,又称为完形心理学。格式塔是德文Gestalt的译音,意即“模式、形状、形式”等,意思是指“动态的整体”格式塔学派主张人脑的运作原理是整体的,“整体不同于其部件的总和”。例如,我们对一朵花的感知,并非纯粹单单从对花的形状、颜色、大小等感官资讯而来,还包括我们对花过去的经验和印象,加起来才是我们对一朵花的感知.

—维基百科 Wiki


格式塔原理是对人来视觉工作原理的基本归纳,格式塔研究者发现,人类的视觉是整体的:我们的视觉系统会自动对视觉输入重新建构,并在神经系统层面感知形状、图形和物体,不仅仅是互不相连的边、线、区域。在视觉设计中,可用于设计指导的格式塔视觉原理有以下几项。


 1 格式塔原理:接近性 


根据我们的生活习惯,我们常常会把距离相近的物体归为一组。接近性是指,物体之间的相对距离会影响我们感知他们是否及如何组织在一起。相对于其他物体来说,距离较近的物体看起来属于一组,而距离较远的则不属于同一组。


图1 接近性原理


在上图中,我们很容易将左边的圆点归纳成3行,而右边的圆点归纳成4列。这是因为左侧圆点横向距离更近,而右侧圆点纵向距离较近。


接近性原理与软件、网站和电器设备中的控件面板和数据表单的布局明显相关。设计者们经常使用分组框或者分割线将屏幕上的控件和数据分隔开,如图2所示。在图2中,我们会自觉把最左边、中间、最右边文本框的内容区分开,利用距离和边框能够较容易的将内容分组,区分不同类型的信息。

图2  来源:Google


相反,如果控件位置摆放的不合适,比如空间之间的距离太远,人们就很难感知他们是相关的,软件就变得难以学习和记忆。


 2 格式塔原理:相似性 


格式塔相似性原理指出了影响我们感知分组的另一个因素:如果其它因素相同,那么相似的物体看起来属于一组。在下图中,空心圆感觉上属于一组。

图3 相似性原理


我们都知道,常用的控件包含视窗、按钮、文本框、下拉菜单等,将同种类型的控件分布在一起,有利于信息条理性展示,而不会造成用户太多的迷惑。


 3 格式塔原理:连续性 


接近性与相似性与我们试图给对象分组的倾向相关,另外几个格式塔原理则与我们的视觉系统试图解析模糊或者填补遗漏来感知整个物体的倾向性。格式塔的连续性原理指出:我们的视觉倾向于感知连续的形式而不是离散的碎片。


在下图中,我们会自动将文字缺省的部分补齐,自动识别成 “视觉感知”,就像透过百叶窗看到的效果。


图4 连续性原理


滑动条控件是使用了连续性原理的一个用户界面示例。我们从滑动条中看到的是滑动条某个位置上有一个“被控制”滑块,而不是由滑块分割成的两个不同区间,滑块的位置也不会影响我们队滑动条整体连续性的感知,如图5所示。


图5  音量混合器界面滑动条控件

 4 格式塔原理:封闭性 


与连续性原理相似,我们的视觉系统会自动尝试将敞开的图形关闭起来,从而将其感知为完整的物体而不是分散的碎片。比如,我们会将下图分散的弧形感知为一个圆。

图6  封闭性原理


封闭性原理经常用于图形用户界面中(GUI)。例如,GUI经常用叠起来的形式表示对象的集合,例如文档或者消息。仅仅显示一个完整的对象和其背后的一角就足以让用户感知到由一叠对象构成的整体。


 5 格式塔原理:对称性 


格式塔对称性原理则抓住了我们观察物体的第三种倾向性:我们倾向于分解复杂的场景来降低复杂度。我们的视觉区域中的信息有不止一个可能的解析,但我们的视觉会自动组织并解析数据,从而简化这些数据并赋予它们对称性。

图7  对称性原理

在上图中,我们将最左边复杂的形状看成是两个叠加的菱形,而不是两块顶部对接的隅砖或者一个中心为小四方形的细腰八边形。一对叠加的菱形比其他两个解释更简单,它的边更少并且比另外两个解析更对称。


在印刷图片和电脑屏幕上,可以利用视觉系统对对称性原理的依赖,用平面显示来表现三维物体,如图7 Paul Thagard 的著作Coherence in Thought and Action 的封面设计。

图8  Coherence in Thought and Action 的封面设计


 6 格式塔原理:主体与背景 


我们的大脑将视觉区域分为主体和背景,主体包括一个场景中占据我们主要注意力的所有元素,其余的则是背景。


图8  主体与背景


主体/背景原理也说明场景的特点会影响视觉系统对场景中的主体和背景的解析。如上图,当一个小物体或者色块更大的物体或者色块重叠时,我们倾向于认为小的物体是主体而大的物体是背景。

图9 荷兰艺术家M.C.Escher正负形作品


然而,我们对主体与背景的差别的感知并不全部由场景的特点决定,也依赖于观者注意力的焦点。荷兰艺术家M.C.Escher利用这个现象创造了二义性的画作,其中的主体和背景随着我们得注意力的转换而交替变化。


在用户界面设计和网页设计中,主体与背景原理经常用来将主体作为当前的重要信息,而以背景只是当前用户所处的位置,如在目前APP界面设计中,常用到的界面遮罩效果。


图10 埃帕克智能APP界面截图


 7 格式塔原理:共同命运 


涉及运动的物体,共同命运原理与接近性原理和相似性原理相关,都影响我们所感知的物体是否成组,共同命运原理指出一起运动的物体被感知为属于一组或者是彼此相关的。

在许多的四边形中,如果其中7个同步地前后摇摆(绿色箭头标识的),人们将把它们看成相关的一组,即使这些摇摆的五边形互相之间是分离的,而且看起来与其他的也没有不同。


上述7个就是最重要的格式塔原理,包括:接近性原理、相似性原理、连续性原理、封闭性原理、对称性原理、主体/背景原理以及共同命运原理。当然,在现实世界的视觉场景中,这些个格式塔原理并不是孤立的,大多数时候都是共同其作用的。


设计师们,看到这篇整理的《视觉感知的格式塔原理》读书笔记,希望能够帮助大家反思及验证自己的设计,争取设计一稿过!


爬虫设计

设计不止于此


设计|分享|创意|社群