运用GESTALT原理优化用户界面设计

你是否关注过天上形态各异的云,就像一个熟悉的动物或者别的物体?你是否曾想过,为什么且如何通过一个蓬松的气体建立起联系?其实都是基于大家的大脑运作! 大脑总是试图通过与经验作比较,或者通过视觉模式将点与点之间串联起来,以此来理解世界。它用自己独特的方式去感知物体的形状和组成形式,然后组织信息、填补空白,画出全局。

如果你能够了解自己的大脑是如何运作的,这将会帮助你成为更优秀的设计师。它可以帮你判断哪种视觉元素能最有效地应对各种情况,你可以用它们来影响感知,引起用户关注,最终引起行为改变。当它涉及用户界面设计的目标导向、解决问题、直观的设计问题时,它会成为格外有用的东西。

视觉设计和心理学是相互联系并且相互影响的。而格式塔原则可以帮助我们了解并控制它们的关系。



格式塔(Gestalt) 原理几个关键思想:

1.出现

整体在部分之前被识别

人们首先会根据其一般形式来识别元素。所以我们的大脑识别一个简单的、已被定义的物体比一个复杂的物体要快。

小狗图片的出现体现了小狗的形象,小狗图片描绘了狗在悬崖树荫下嗅探地面。当试图识别它的部分(脚,耳朵,鼻子,尾巴等)并且从这些组成部分推断狗时,狗不被识别。相反,狗被视为一个整体,即可一次识别。



2.具体化

我们的头脑填补了空白

人们甚至可以识别那些某些部分缺失的物体。因为我们的大脑会与记忆中的熟悉模式相匹配,并填补这些空白。

熊猫是不完整的,但是尽管如此,我们的眼睛仍然感觉到整只熊猫。需要一些努力来克服和注意到我们最终能够看到的每一块白色背景上出现的随机黑色形状和斑点。


3.多重稳定

头脑寻求避免不确定性

人们时常用不止一种方法来解释模棱两可的事物。我们的大脑会在各种可替代选择的事物之间来回穿梭,以此来寻找一种确定性。结果是当另一种观点更难被看到的时候,其中一种观点会更占主导地位。

左图中是一个黑色的花瓶,在白色背景上。对称花瓶有一个大号喇叭漏斗顶部,几乎占据了背景顶部的整个宽度,并逐渐缩小到一个狭窄的中间。右图为一个空间异化的立方体。


4.不变性

能识别相识性和差异性

人们可以通过旋转、衡量和转化来识别简单的物体。尽管它们有着不相同的外貌,我们的大脑仍然可以从不同的角度感知物体。

图为一个简单形状,不同角度的形态。



格式塔原理

1.接近性

互相靠近的元素看起来属于一组,相对于其他元素。当元素彼此靠近时,它们被视为一个组的一部分,而不是单独的元素。

案例:


用Proximity原理来分组相似信息,组织内容和整理布局,可以带来相对舒适的用户体验。相关的元素应该彼此靠近,而不相关的元素应该保持一定的距离。白色部分在这里很重要,它会产生一定的颜色对比,同时白色空间可以增强视觉层次,有助于轻松阅读和扫描布局。有助于帮助用户更快发现目标。


2.共同命运

与接近原理类似,在同一区域内的元素视为分组。

案例:


它可以帮助信息分组、组织内容,也可以内分离或作为一个焦点,增加了层次结构,有利于信息推广。共同区域原理可以将许多不同的因素结合在一起,使它们在整体中保持统一。我们可以用线条,颜色,形状或阴影来区分实现它,以保持页面易读性。


3.相似性

共享类似特征的元素,比不具备这些特征元素的看起来跟更相关。

案例:


在相似情况出现时,有一个元素与其他元素不同,则叫异常。可以将它用在需要突出对比度或视觉焦点时,它可以吸引用户注意力,同时可以满足浏览性、可发现性和整体流程。


我们倾向于把相似元素的分组或模式。相似性可以帮我们分类组织中的对象,并将他们的与特定含义、功能元素联系起来。


4.封闭性

一组元素通常被认为是一种可识别的形式或图形,我们的视觉倾向看到整个物体,即使他们是不完整的,闭包也会发生。


案例:


和封闭性原理一样,当提供了对应的的元素,我们大脑会自动填补空白并将它建立为一个整体。这样可以减少传递信息的元素种类,降低复杂度让设计上更舒适。封闭性原理在传达信息时帮我们减少视觉干扰元素,做到了在有限空间内最大限度的减少视觉噪音,在一个小空间里强化概念。


5.对称性

无论元素放置的距离多远,或者他们出现的方式有多不同,对称元素都倾向归属一起,稳固而有序。


案例:


对称元素的视觉效果简洁、和谐、舒适。我们可以快速理解并查找对应板块的内容。对称板块的构图看起来很舒适,但是一般会比较沉闷、平庸。建议可以试试让视觉对称,将不对称的元素与对称元素相结合,不对称的元素给人耳目一行的视觉效果,同时保留部分对称元素来保持页面秩序。


6.连续性

排列在直线或者曲线上的元素比不在这个规则范围内的元素更具有相关性。

案例:


沿着规则延续的元素分组。线段越光滑,越称视为统一的形状。连续性有助于我们通过构图来解释运动的方向和动作。在对齐元素出现时,我们能在页面中直接采用平移清晰阅读。连续性对于分组信息的感知增强了,通过不同的内容分类依次引导用户。连续性中段说明某个部分的内容的结束引起对新内容的注意。


7.共同命运

在同一方向移动的元素比静止不动或不同方向移动的元素更具有相关性。


案例:


元素距离多少或它们可能出现多少差异,如果它们一起移动变化,则它们是相关的,即使是暗示移动也一样。共同命运原理执行时,当元素移动,所有相关的元素在同一方向、同一时间、速度移动。它有利于界面中的信息分组并将结果与行为联系起来。

用自己的理解修改了下~希望能帮助到你,谢谢观看。

原文:https://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965

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

推荐阅读更多精彩内容