格式塔原理

来源:设酷网     作者:日期:2020-08-28     浏览:50    评论:0    
  
核心提示:格式塔原理是 20 世纪早期的德国心理学家研究小组发现的人类视觉工作原理。人类视觉是整体性的,我们会对看到的事物自建结构,并且在神经系统层面上感知形状,图形和物体。而不是单独的互不相关的边,线,区域。「形状、区域」在德语中是 Gestalt,所以这些理论也就叫做

格式塔原理是 20 世纪早期的德国心理学家研究小组发现的人类视觉工作原理。人类视觉是整体性的,我们会对看到的事物自建结构,并且在神经系统层面上感知形状,图形和物体。而不是单独的互不相关的边,线,区域。「形状、区域」在德语中是 Gestalt,所以这些理论也就叫做视觉感知的格式塔原理

格式塔原理的原则

格式塔原理描述的是人类视觉从神经系统对事物的感知方式,它主要包含以下几条原理:

  • 接近性

  • 相似性

  • 连续性

  • 封闭性

  • 对称性

  • 主体/背景

  • 共同命运

1. 接近性

物体之间的相对距离会影响我们感知它们的关系。相互靠近的物体被认为比相互距离较远的物体更有关联性。


如何应用于UI设计?

接近性原理在 WEB 端或者 APP 端的排版布局中有非常广泛的应用。设计师也会应用此原则,调整距离或者用分割线等来分开不同设计模式的构建。

此原理使设计界面层次有序,视觉清晰。减少视觉噪音。

按照原理,我们会将内容相似的元素位置放置得更接近,在 UI 设计中的卡片设计,列表组合等信息整合设计都会应用到此原理。并且不同内容之间我们使用分割线,留白,卡片区分等方式来使不同的内容区分更为明显。


相互关联的控件和内容之间距离越近,用户越能感知它们的相关性。反之,如果距离太远,用户很难感知到它们是相关的,那么产品在体验上就更加难学也不方便记忆。

2. 相似性

格式塔原理中的相似性通常和接近性一起运用在产品设计中。它指出了影响我们感知分组的另外一个原则:有共同视觉元素的物体看起来更有关联性。我们倾向于将看起来相似的对象视为一组或者一个模式,并且将它们与特定含义或者功能联系在一起。


如何应用于UI设计?

那么相似性的视觉元素可以由哪几部分构成呢?比如颜色,形状,大小,方向,以及纹理等视觉元素,组成相近的样式。

UI 设计规范中的控件合成组件,大部分都会使用到相似性原则,统一视觉样式,来表达统一的功能性。

当在相似性的元素中,如果想凸显其中一个元素,那么就用不一样的视觉来呈现,以达到凸显效果的目的。强烈的对比性使其他相似元素显得平庸,而吸引了用户注意力。


3. 连续性

我们的视觉倾向于感知连续的形式,而不是离散的碎片。并且能感知到整个物体的倾向。

连续性通过构图来帮助我们感知事物的形状和运动方向。界面中的设计元素,会引导眼镜在平面中的移动,提高界面的可阅读性。创建顺序并且指导用户浏览不同的内容分组。


如何应用于UI设计?

连续性目前在 APP 产品中应用非常广泛。比如在电商产品Banner 区域的左右滑动交互模块,滑动组件和进度条展示。主要应用范围如下:

  • 导航栏中的连续性设计

  • 卡片模块中的连续性设计

  • 模块的连续性设计

  • 滑动条的连续性设计

4. 封闭性

人们在观察一个物体的时候,视觉系统倾向于把不完整的局部当作一个整体来感知。将不连续的,敞开的图形自动补充,从而感知到它为完整的物体,而不是分散的碎片。

这个原理和人类的心智模型有相关性,当我们在辨识一个物体的时候,我们会将不完整的物体与我们的认知模型中的原型相匹配,从而达成认知。所以封闭性原则的前提之一是,把握局部不完整物体的尺度,如果太零散,太碎片,就会出现认知混乱。

封闭性在图形设计中有非常多著名的案例,比如苹果 logo


如何应用于UI设计?

这个原则也非常适用于图形用户界面图标设计中。运用省略或者减法处理图形,不仅可以节省空间,同时也让用户产生联想,产生趣味性

5. 共同命运

共同命运原理指出我们倾向于将一起运动的物体,感知为一个彼此相关的整体。视觉系统会将运动规则一致的物体感知为一组。这个原则适用于交互设计中,当一些元素的动作一致的时候需要保持相似性,或者有相同的运动倾向。

苹果 mac 的文件夹中我们经常会使用到这种原则。比如当我们选择一些文件夹想要丢入垃圾桶,那么这几个被选中的文件夹拥有一致的运动方向。共同命运是将会被扔进垃圾桶。

如何应用于UI设计?

产品设计中,当我们想要对一些元素操作同样的动作会常常使用到这个原则。比如苹果手机的长按删除 APP交互动作,所有的 APP 都有一致的运动倾向,告知用户界面处于可编辑状态,非常直观。

rame src="https://player.youku.com/embed/XNDQxODgxMTE3Mg==">rame>

6. 主体/背景

我们的大脑将视觉区域分为主体和背景 2 个部分。这个特征有利于我们对重要信息和次要信息的感知。

主体和背景的区别可以从以下两个方面来控制:

  • 场景大小:我们倾向于将处于大场景中的中间小区域部分视为主体,而大场景视为背景;

  • 层级关系:如果在同一个平面中,我们倾向于将处于视觉第一层级的物体视为主体。

如何应用于UI设计?

此原则可以帮助设计师在设计界面的过程中抓住用户注意力,并且让用户优先看到我们想让他们看到的事物。比如重要信息的弹窗提示,以及弱化背景从而突出内容等界面中都有运用到此原则。



本文来源:格式塔原理    http://www.sjschina.com/archives/21346.html
相关评论