小纽扣

格式塔心理学诞生于20世纪初,指出人们的视觉感知具有整体性,并且总体大于个体的总和。

也就是说,我们不会只看局部或者个体,也是需要重新组织所看到的视觉信息来理解世界。如果不这样做的话,我们的大脑就会不堪重负。就像下图我们看到的是一个笑脸,而不会说是31个点。格式塔心理学家将组织信息的方法抽象为格式塔原则。

图片

格式塔原则是非常重要的设计理论,因为信息的组织也就意味着信息的接收和理解,而信息易理解正是设计师的核心任务。

其中,格式塔原则中的接近原则是最常见的原则之一,下面我将提供一些例子来帮助大家理解这个原则。

 

01.接近原则

接近原则是指:将相关物体的物理位置靠近,这样一来,相关的物体就会被看作凝聚为一体的一个组,而不是一堆彼此无关的片段。
在左侧的图片中,你会看到一组圆圈;在右侧的图片中,你会看到三组圆圈。而它们唯一的区别就是圆圈之间的距离(接近度)。
图片
接近原则比其他的格式塔原则更强。即使物体的形状和颜色都不相同,只要距离更近,他们仍然会被认为是一组。因此,接近性原则至少是比相似性原则更强。
图片
接近原则还能够直接影响用户的视觉动线,因为元素的物理距离不同,你会在左图纵向浏览,看到的是列,右图横向浏览,看到的是行。
图片

 

02.接近原则的重要性

接近原则对许多设计师而言,绝对算一个没有专门了解,但却经常使用的原则。我认为,了解接近原则背后的原理总是有帮助的。
比如,我们可以更好地进行设计推理并向其他人解释设计问题。通过接近原则,可以快速地帮助开发同学理解,为什么卡片之间的水平距离是5px,而垂直距离是15px。
并且当我们感觉设计稿奇怪却不清楚原因时,格式塔原则也是一个很好的自查清单。

 

03.印刷品案例

字体与段落

接近原则能够直接影响文本阅读,使用好接近原则可以帮助用户更快速地理解文本。
比如,标题前后需要设置更大的空间,哪一边的内容距离标题更近,则会认为该内容和标题联系紧密。
行高是另一个例子,行与行之间的空隙必须大于单词与单词之间的空隙,并且空隙要足够小才能形成一个紧密的段落。英文字母之间的间距也是如此,字母之间的间距要足够宽,才可以区分出字母,但也要足够窄,字母们才能够形成单词。
图片

 

杂志布局

尽管如今是电子信息的时代,但我们先来看看印刷品的布局仍是有意义的。印刷品的布局是我们进行网页设计的基础,它能够帮助我们更轻松地理解这些原则。
在杂志版面中,图片分布在页面的不同位置,我们只需要判断文本距离哪一个图片更近,便可以知道文本在描述哪一个图片。
图片

 

名片布局

我们来看一下这两个名片,左侧名片上的每一项看上去都与其他项没有任何关联。这样一来,我们不知道从哪里开始阅读名片,也不知道何时才算结束。
如果对名片的距离做一点调整,便形成了一个个组。我们会清楚的知道信息的阅读顺序,能够更容易更快速地找到信息。另外,信息之间的空白也会变得更有组织。
图片

 

04.网站案例

现在的网站信息非常丰富,组织信息也变得更加重要。

 

菜单

菜单通常位于网页的左侧或者顶部。在顶部菜单中,菜单之间保证充分的留白更加符合现代审美。但一定要注意的是,要确保菜单与下方内容的距离,否则,很难辨别内容和菜单本身。

 

项目组

一个项目组通常是由图片、标题和文本内容等不同部分组成,为了让他们看起来是一个项目组,元素之间的距离不能太大。

 

卡片

卡片在如今的网页中是一个常见元素,当有页面中存在不同的卡片组时,一定要确保组内卡片的空间小于卡片组之间的空间。
图片

 

表单

表单同样是一个常见页面,比如注册或登录等都需要表单,针对表单我专门写过两篇文章,分别是组织内容和标签细节。
比如,在顶对齐表单中,我们可以通过调整元素之间的距离,明确那个标签/描述属于哪一个字段,这将会让表单更易于使用。
图片

 

列表

每个app总会有一些列表相关的页面,因此学习如何设计好它们是非常有价值的。
列表设计的其中一个关键点就是,如何区分各项目。我们可以使用空间距离取代项目间的线条进行区分,这样做可以减少视觉噪音。我们需要注意的是,确保项目之间的空间明显大于组成元素的空间。
图片
接近原则是一个非常棒的设计原则,可以帮助设计师组织信息。
虽然许多设计师已经在无意识地使用着接近原则,但是如果进一步了解它,它或许是一个更加强大的设计工具。尤其是在复杂的屏幕中,我们更加需要接近原则帮助我们组织信息,减少其他元素的视觉干扰。

 

原文地址:Medium

译文地址:栗子设计喵 (公众号)

作者:Lukas Oppermann

译者:栗子

转载请注明:学UI网 » 格式塔之接近原则,如何帮助信息易理解?

登录收藏
 
你可能喜欢的:
业务想大多全,用户要精准简,首页设计该如何破局?业务想大多全,用户要精准简,首页设计该如何破局?
最近访谈了海外用户,总结几点意外收获最近访谈了海外用户,总结几点意外收获
案例锦囊|交互设计中「情感化」设计优秀案例(二)案例锦囊|交互设计中「情感化」设计优秀案例(二)
如何高效地进行网页设计?重点关注这些要素如何高效地进行网页设计?重点关注这些要素
工作经验| B 端产品组件设计细节及经验分享(三)工作经验| B 端产品组件设计细节及经验分享(三)
作品集别用这几个设计目标了,太老套作品集别用这几个设计目标了,太老套
iOS 规范与 Material Design 哪里不同?官网总结了这几点iOS 规范与 Material Design 哪里不同?官网总结了这几点
项目总结|红包设计测试,驱动裂变数翻三倍项目总结|红包设计测试,驱动裂变数翻三倍
设计师如何高效沟通需求设计师如何高效沟通需求
如何基于业务思考设计B端的IP活动如何基于业务思考设计B端的IP活动