恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
格式塔原理在 UI 设计中的运用
0.0°
2018-11-28 原创文章 经验/观点 举报 3852 48 29 1

感谢海盐社的小伙伴,吐槽了无数次就是不改名字的@小溜Epik;总是能一脸呆萌的问我问题@风筝kk;随时发消息都能立马响应的@角马x,
Image title


格式塔心理学派中的“格式塔”源自德语“Gestalt”,意思即“整体”、“完形”。
他的核心理论是,人的视觉是具有整体化、简化处理图形倾向的,因此,当一个不完整的图形出现在人的视觉当中时,人的视觉思维会倾向于自动将其补全,使其变成一个已知的、完整的、常见的、整体图形,即“完形”。

打个比方说,当你看到一个圆形,但圆形的边上有一个很小的缺口,你的大脑会倾向于将它识别为一个完整的圆形;当你看到天空中的一朵云,你会下意识的把它想成一个动物或一个别的你知道的物体的形象;

Image title

PS:看出来这是什么了么?


往远了说,在神话故事里,那些妖魔鬼怪、神仙菩萨,他们的形象也是由已知的、熟悉的形象组合而成,而不是凭空出现的。

格式塔原理作为一个著名的心理学派,他的理论几乎适用于所有与视觉相关的领域,与UI设计的关系也极其密切,它可以帮助我们,梳理界面的信息结构、层级关系,提升界面的可读性,主要有几个特性,即相似性、接近性、封闭性、连续性、主体与背景关系、均衡原理。


相似性

人的潜意识里会根据形状、大小、颜色、亮点等,将视线内一些相似的元素组成整体,根据我们的潜意识分类,如下方左图,大家会把圆形看成一个整体,菱形看成一个整体,而当我们为其改变颜色的时候,如右图,他所传达出来的意思又发生了改变,人们会把绿色的当成一个整体,橙色的当成一个整体。

Image title


由此可以看出在人们的潜意识里,对于形状和颜色的“比重”不一样,一般来说,在大小一样的情况下,人们更容易把颜色一样的看成一个整体,而忽略掉形状的不同

所以当我们有几个平行的功能点,但又想突出一个的时候,就可以把那一个做成特殊的形状或者是不同的颜色、大小等,这样用户能一眼看到你要突出的那部分,而再细看那部分又和其他部分是一个整体,不突兀,类似于平面设计中的 “特异”

Image title


如下图,美图秀秀和土豆视频,通过放大拍照、拍视频的 icon ,使之与底部标签栏上的其他图标有所不同,但是又能看出来同属于一个整体。


Image title

接近性


元素之间的相对距离会影响到我们视觉感知,通常我们认为互相靠近的元素属于同一组,而那些距离较远的则不属于,和相似性很像,不过相似性强调的是内容;而接近性强调位置,元素之间相对距离会直接影响到他们是不是同属于一组;如下图,我们会把左边9个圆形当成一个整体,而右边则会把第一列3个圆形当成一个整体,二三列当成另外一个整体。

Image title


引起这样的视觉感受主要是因为他们相对距离的不同,左图距离都一样,没有对比,而右图二三列明显靠的近些,自然他们就属于一组,较远的第一列则不属于。


在UI中最常见的就是列表以及文字展示、图文展示了,在列表页信息多的时候,都会把功能趋于相似的放在一起,利用相近原理,使他们在视觉上趋于一个整体,这样既能让界面功能清晰易懂,又不至于杂乱无章。

Image title

在文字展示的时候,标题也会更趋近于自己的正文内容,使得信息层级区分的更明显。

Image title

其实这一点,和《写给大家看的设计中》中作者 Robin Williams 提出的“亲密性”意思一样。


Image title



亲密性主要讲的是彼此有关联的元素在页面上的距离要近些,而没有关联的要离得远些,如果页面上的亲密性一样,那么我们就会把他当成一个整体。


封闭性

人的眼睛在观看时,大脑并不是在一开始就区分各个单一的组成部分,而是将各个部分组合起来,使之成为一个更易于理解的统一体,这个统一体是我们日常生活中常见的形象,如正方形、圆形、三角形、猫、狗等;

Image title

如苹果的LOGO就算被咬了一口,存在缺口,但是我们还是能一眼看出,他就是个苹果的外形;而右边的熊猫头部和背部都没有明显的封闭界限,但是我们还是会把他当成一个完整的熊猫,甚至不会觉得奇怪。

这一原则在很多地方都会用到,比如在一屏幕页面的时候,我们总会露出下一个模块的边角,或者是可滑动的 banner 图,都会外露下一模块的内容,这本质上就是利用了这一原则,人的眼睛的自动补全功能,不用看到全部,就能脑补出下一模块会出现什么。

Image title


连续性

人的视觉具备一种运动的惯性,会追随一个方向的延伸,以便把元素链接在一起成一个整体,如下图,你是会把它当成两个大的圆形,还是当成无数个小圆呢?毋庸置疑,第一眼看到的时候,肯定是两个大的圆形,而不是无数个小圆。

Image title


主体与背景关系

我们在看一个页面的时候,总是不自觉的将视觉区域分为主体和背景,而且会习惯把小的、突出的那个看成是背景之上的主体。主体越小,与背景的对比关系越明显,主体越大则关系越模糊。

Image title


而在UI设计中,最常见的区分背景和主体的方式就是,蒙版遮罩以及毛玻璃效果,这两种都能起到弱化背景,突出主体的作用,是他们的对比关系更明显。

Image title


当主体达到最大值的——全屏的时候,也就不需要突出主体了,因为只有主体,背景已经看不见了。而这个时候的页面会让人觉得是一个新的页面,但其实它很多时候只是一个全屏的弹窗

Image title


均衡原理

我们的视觉在观察一个物体的时候,会下意识的去寻找他们的平衡点,元素在页面上处于一种平衡状态,会让人心情舒缓愉悦。而在 app 界面设计中这一点尤为重要,可能你都没意识到这一点,但却在设计的时候会不自觉的注意这一点。

比如得到,专栏订阅的人物图片都保持着一样的大小,都是半身像,人物主体在图片上所占的比例也趋于一致,这样就能让人在知觉上觉得页面很平衡、很统一;

Image title


京东金融和支付宝的图标在视觉上也保持着一样的大小;

Image title


网易云页面上的元素也保持着左右均衡,给人传达一种很平稳的视觉感受

Image title


PS:视觉大小≠物理大小,比如尺寸相同的一个正方形和圆形,在视觉上我们会觉得他们不是一样大的;

Image title



当我们要让其 变的“一样大” 的时候,就可以选择圆形调大一点,或者把正方形调小一点,让它们在视觉上保持一样的大小,而不是物理大小一样;

Image title



这点在实际工作中要尤为注意,很多时候物理大小是一样的时候,并不表示视觉大小是一样的。而我们的输出物最终是以视觉呈现的,所以我们必须保证视觉大小一样

Image title


总结

相似性:人的潜意识里会根据形状、大小、颜色、亮点等,将视线内一些相似的元素组成整体;


接近性:元素之间的相对距离会影响到我们视觉感知,通常人们会认为互相靠近的元素属于同一组,而那些距离较远的则不属于;


封闭性:人的大脑在看一个物体的时候,会更趋近于把他当做一个整体,而不是单个部分;


主题与背景关系:我们在看一个页面的时候,习惯于把小的、突出的那个看成是背景之上的主体。主体越小的时候,主体与背景的对比关系越明显,主体越大则关系越模糊;


均衡:人们在观察一个物体的时候,会下意识的去寻找他们的平衡点,元素在页面上处于一种平衡状态,会让人心情舒缓愉悦。


其实实际中,格式塔的各个特性一般都不会孤立存在,他们都是相互影响,比如均衡性里说到的图标元素在视觉上保持统一,里面也涉及到了相似性,人们更容易把相似的物体当成一组。所以我们不要孤立的去想它、用它。




更新:2018-11-28

收藏

48人已收藏

  • 19

    作品

  • 2448

    粉丝

  • 38

    关注

  • 10分钟教你做组件,效率翻倍
  • 如何用 OKR 工作法激励自我成长
  • Windows 10 设计指南之UWP
  • 设计师必须要学会的自查技巧

    猜你喜欢

      2018-11-28 原创文章 经验/观点 举报 3852 48 29 1

      格式塔原理在 UI 设计中的运用

      0.0°

      你确定要举报格式塔原理在 UI 设计中的运用

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年07月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      29
      48
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录