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

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

什么是格式塔?

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

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

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

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


图形与背景原理

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


接近原理

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


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

应用

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


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


相似原理

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



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


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

闭合原理

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

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



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

连续原理

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


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

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

简单原理

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

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

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

均衡原理(对称性)

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


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

总结

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容