作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
卡梅伦·查普曼的头像

卡梅伦查普曼

卡梅隆有设计背景,是两本网页设计书籍的作者:《欧博体育app下载》和《欧博体育app下载》.

分享

听听这篇文章的音频版本

长期以来,负空间一直是优秀设计的主要元素. 留白 设计的要素 你首先想到的是什么. 但也有一些设计利用空白来推断一个实际上并不存在的元素(联邦快递标志中隐藏在E和X之间的箭头就是一个例子)。.

负空间是设计的关键元素和原则之一

人类的大脑特别擅长填补图像中的空白,并创造出一个大于各部分之和的整体. 这就是为什么我们会在树叶或人行道裂缝中看到面孔.

这个原则是格式塔感知原则背后最重要的潜在思想之一. 马克斯·韦特海默(Max Wertheimer)在1923年发表了关于该理论的最具影响力的早期建议 知觉组织的格式塔法则,虽然沃尔夫冈Köhler 1920年的讨论 物理Gestalten 也包含了许多关于这个主题的有影响力的想法.

不管 谁首先提出这些想法的 (早在1890年就有相关文章), 格式塔理论原则是一套重要的思想 设计师 学习, 它们的实现不仅可以极大地改善设计的美学效果, 还有它的功能和用户友好性.

用最简单的话来说, 格式塔理论是基于这样一种观点,即人类的大脑会试图简化和组织复杂的图像或图像 设计 它由许多元素组成, 通过潜意识地将各个部分安排成一个有组织的系统,从而创造一个整体, 而不仅仅是一系列不同的元素. 我们的大脑生来就是为了看到结构和模式,以便我们更好地理解我们所生活的环境.

格式塔理论通常有六个单独的原则: Similarity, continuation, Closure, Proximity, 图/地面, 对称 & 订单 (也称为 pragnanz). 还有一些附加的,更新的原则有时与格式塔有关,比如 共同的命运.

Similarity

把Similarity的东西放在一起是人类的天性. 在格式塔中,Similarity的元素在视觉上分组,而不考虑它们彼此的Proximity程度. 它们可以按颜色、形状或大小分组. Similarity 可以用来将设计中可能不相邻的元素联系在一起吗.

格式塔Similarity原理的例子

当然,如果你想让它们从人群中脱颖而出,你可以做一些不同的东西. 这就是为什么号召行动的按钮通常被设计成与页面其他部分不同的颜色——这样他们就会脱颖而出,把访问者的注意力吸引到想要的行动上.

在用户体验设计中,使用Similarity性可以让访问者清楚地知道哪些项目是Similarity的. 例如, 在使用重复设计元素的功能列表中(如带有3-4行文本的图标), Similarity原理可以让我们很容易地浏览它们. 与此形成鲜明对比的是, 改变你想要突出的特征的设计元素,使它们在访问者的感知中更加突出.

即使是像确保整个设计中的链接以相同的方式格式化这样简单的事情也依赖于 Similarity原理 在你的访问者将感知你的网站的组织和结构的方式.

延续

连续性定律 假定人眼在观察线条时将沿着最平滑的路径, 不管这些线是怎么画的.

格式塔连续性原则的一个例子

当目标是将访问者的眼睛引导到某个方向时,这种continuation可以是一个有价值的工具. 他们会沿着页面上最简单的路径走, 所以要确保他们应该看到的最重要的部分在这条路径上.

因为眼睛自然地沿着一条线, 将物品排成一行,自然会把人们的目光从一件物品吸引到下一件物品. 水平滑块就是这样一个例子,亚马逊等网站上的相关产品列表也是如此.

Closure

Closure 是最酷的格式塔设计原则之一,我在这篇文章的开头已经提到过了. 这是一种想法,你的大脑会填补设计或图像中缺失的部分,以创造一个整体.

最简单的形式, 闭合原理允许你的眼睛沿着虚线一直走到终点. 但更复杂的应用通常出现在商标上,比如世界野生动物基金会的商标. 熊猫的大部分轮廓都不见了, 但是,你的大脑完全可以填补缺失的部分,从而看到整个动物.

世界野生动物基金会的标志是封闭的格式塔原则的一个例子

闭包在标志设计中经常使用, 其他的例子包括美国网络, 美国全国广播公司, 太阳微系统公司, 甚至Adobe.

另一个非常重要的闭包在UX和 用户界面设计 当你在用户的屏幕上显示部分图像时,是为了向他们展示,如果他们向左或向右滑动,有更多的东西可以找到吗. 如果没有部分图像,i.e., 如果只显示完整的图像, 大脑不会立即理解可能还有更多的东西要看, 因此,您的用户不太可能滚动(因为Closure已经很明显).

招聘美国全职自由UI设计师

Proximity

Proximity 指元素之间的距离. 最强的Proximity关系是在重叠的科目之间, 但将物体分组到一个区域也会产生强烈的Proximity效应.

当然,反过来也是正确的. 通过在元素之间放置空格, 即使它们的其他特征相同,您也可以添加分离.

以这组圆圈为例:

用一组圆来说明Proximity的格式塔原理


Proximity格式塔原理影响用户体验的例子

在UX设计中, 邻近性最常用于让用户将某些东西分组在一起,而不使用硬边界之类的东西. 通过使用格式塔分组原则,把类似的东西放在一起, 每组之间都有空间, 观看者会立即注意到你想让他们看到的组织和结构.

图/地面

图/地面原理 是否与封闭原理Similarity,因为它利用了大脑处理负空间的方式. 你可能在社交媒体上的表情包中看到过这一原则的例子, 或作为标志的一部分(如联邦快递的标志已经提到).

你的大脑会区分出它认为在图像前景(图形)中的物体, 或焦点)和背景(人物所在的区域). 当前景和背景实际上包含两个不同的图像时,事情就变得有趣了, 是这样的:

图地关系的一个例子,构成设计的要素和原则


图形-背景格式塔原理的好例子

下面是一个更简单的例子, 两张脸之间形成烛台或花瓶的:

一个简单的例子,图形-背景原则,格式塔设计原则

一般来说, 你的大脑会将图像中较大的区域理解为地面,较小的区域理解为人物. 如上图所示, 虽然, 你可以看到,较浅和较深的颜色会影响被视为人物的颜色和被视为地面的颜色.

图/地原则可以非常方便,当 产品设计师 想要突出一个焦点, 特别是当它是活跃的或在使用时,例如, 当一个模态窗口弹出,网站的其余部分逐渐消失在背景中, 或者当一个搜索栏被点击,它和网站的其他部分之间的对比增加.

订阅Toptal设计博客并接收我们的电子书

对称与秩序

对称和秩序法则也被称为 pragnanz在德语中是“好身材”的意思.“这个原理说的是,你的大脑会以尽可能简单的方式感知模糊的形状. 例如, 单色版的奥运会会徽被看作是一系列重叠的圆圈,而不是曲线的集合.

另一个格式塔设计原则, 奥林匹克会徽说明了务实原则

这是另一个格式塔设计原则的好例子。”pragnanz”:

pragnanz原则的一个复杂例子,另一个格式塔原则

你的大脑会把左边的图像理解为一个矩形, 圆, 和三角形, 即使每个轮廓都不完整,因为它们是比整体图像更简单的形状.

共同的命运

共同的命运 格式塔理论最初并没有包括它,但后来被加入了. 在用户体验设计中,它的有用性不容忽视. 这一原则指出,人们会把指向或朝着同一方向运动的事物组合在一起.

在自然界中,我们可以在鸟群或鱼群中看到这种现象. 它们是由一堆独立的元素组成的, 而是因为它们看起来像一个整体, 我们的大脑将它们组合在一起,并认为它们是单一的刺激.

一群鸟说明了共同命运的原则

这在用户体验中非常有用,因为动画效果在游戏中变得越来越普遍 现代设计. 请注意,为了从这个原则中受益,元素实际上并不一定要移动, 但是他们必须给 印象 的运动.

UX设计中的格式塔原则

就像任何心理学原理一样, 学习将格式塔的视觉感知原理融入到你的设计工作中可以极大地改善用户体验. 了解人类大脑是如何工作的,然后利用一个人的自然倾向,创造出更无缝的交互,让用户在网站上感到舒适, 即使这是他们第一次来.

格式塔法则相对容易融入到任何设计中,并且可以迅速将看似随意的设计或看起来像是在争夺用户注意力的设计提升到提供无缝连接的设计, 引导用户进行您希望他们采取的操作的自然交互.

了解基本知识

  • 什么是完形设计原则?

    视觉知觉的格式塔理论的经典原则包括Similarity性, continuation, Closure, Proximity, 图/地面, 和对称性 & 订单(也称为pragnanz). 还有一些词,比如“共同命运”,是近年来加入的.

  • 格式塔理论为什么重要?

    格式塔原则可以迅速提升一个看起来杂乱无章或像在争夺用户注意力的设计,使其成为一个提供无缝连接的设计, 自然的交互,使你的网站感觉熟悉,同时引导用户采取你想要他们采取的行动.

  • 什么是设计中的视觉层次?

    在设计, 视觉层次是不同设计元素的排列或定位,以赋予它们或大或小的重要性. 各种格式塔原则严重影响视觉层次.

  • 什么是知觉的格式塔理论?

    感知的格式塔理论试图解释人类大脑如何根据距离等视觉线索来解释设计或图像中的关系和层次信息, Similarity, 和闭包.

就这一主题咨询作者或专家.
预约电话

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® 社区.