UI设计中的格式塔原则

如何成为视觉传达的主操纵者

图片来源于网络

你有没有看到过天空中有一不同形状的云，像熟悉的动物或物体?你有没有想过，为什么或者怎样通过观察一团蓬松的气体来建立这种联系?这都是因为你的大脑是怎样工作的!你的大脑总是试图通过比较以前的经验或视觉模式和连接点来理解世界。它有自己的“奇怪”的方式来感知形状和形式，分组信息，填补空白，画出大局。

了解你的大脑是如何工作的会帮助你成为一个更聪明的设计师，掌握视觉传达的机械手。它可以帮助你确定哪些视觉元素在任何给定的情况下都是最有效的，所以你可以使用它们来影响感知，直接关注并引起行为改变。当涉及面向目标、解决问题、直觉设计时，特别有用的是：用户界面设计。

“伟大的设计师理解心理学在视觉感知中扮演的重要角色。当某人的眼睛符合您的设计创作时会发生什么？他们的思想如何对你的作品分享的信息做出反应？“——Laura Busche, Autodesk品牌内容策略师。

现在很明显，视觉设计和心理学是联系在一起的，可以相互影响。格式塔原则可以帮助我们理解和控制这些联系。

格式塔是什么？

格式塔（形式，德语形状）是德国心理学家在20世纪20年代开发的一组视觉感知原则。它建立在“有组织的整体，被认为大于其各部分之和”的理论之上。

“整体不是各部分的总和。”—— 库尔特·考夫卡

格式塔原则试图描述人们在某些条件适用时如何看待视觉元素。它们建立在四个关键想法上：

紧急情况

人们倾向于首先确定元素的总体轮廓形式。我们的大脑识别一个简单、明确的物体比识别一个详细的物体要快。

物化

即使有部分缺失，人们也能识别物体。我们的大脑与我们记忆中熟悉的模式相匹配，并填补了空白。

多稳定性

人们通常会用不止一种方法来解释模棱两可的东西。我们的大脑会在寻求确定性的替代方案之间来回跳动。因此，一种观点将变得更加主导，而另一种观点将变得更加难以理解。

不变性

人们可以独立于旋转、缩放和翻译来识别简单的物体。我们的大脑可以从不同的角度感知物体，尽管它们的外表不同。

这是格式塔原则，它可以为今天的UI设计提供信息。

接近

排列在一起的元素被认为与相距较远的元素更相关。这样，不同的元素主要被视为一个组而不是单个的元素。

Proximity原理如何应用于UI设计？

我们可以在UI设计中使用Proximity原则来分组类似的信息，组织内容和整理布局。正确使用将对视觉传达和用户体验产生积极影响。

如原则所述，相关的项目应该保持紧密的联系，而不相关的项目应该彼此分开。白色的空间在这里起着至关重要的作用，因为它创造了对比，引导用户的眼睛朝着预期的方向看。空白可以增强视觉层次结构和信息流，便于阅读和浏览布局。它将帮助用户更快地实现他们的目标，并深入到内容中。

我们几乎可以在任何地方应用接近原则，从导航、卡片、画廊和横幅到列表、正文和分页。

公共区域

与接近原则类似，放置在同一区域内的元素被视为分组。

公共区域原则如何应用于UI设计?

Common Region原则如何应用于UI设计？共同区域原则特别有用。它可以帮助进行信息分组和内容组织，但它也可以实现内容分离或充当焦点。它增强了层次结构，可扫描性并有助于促进信息。

公共区域原则可以将许多不同的元素结合在一起，使它们在更大的组中统一。我们可以通过使用线条，颜色，形状和阴影来实现它。它通常可用于将元素带入前景，指示交互或重要性。

一个好的公共区域示例是卡片UI模式;一个明确定义的矩形空间，其中不同的信息位表示为一个。横幅和表格也是很好的例子。

相似

与不具有相似视觉特征的元素相比，具有相似视觉特征的元素被认为更加相关。

相似原则如何应用于UI设计?

我们倾向于把彼此相似的元素归类或模式。我们也可能认为它们有相同的目的。相似可以帮助我们组织和分类一个组中的对象，并将它们与特定的意义或功能联系起来。

有不同的方式使元素被认为是相似的，因此是相关的。这些特征包括颜色、大小、形状、纹理、尺寸和方向的相似性;有些人的交际能力比其他人强(例如，颜色为>大小的>形状)。当相似性发生时，一个物体可以通过与其他物体不同而得到强调;这被称为“异常”，可用于创建对比或视觉重量。它可以将用户的注意力吸引到特定的内容(焦点)上，同时还可以帮助用户进行可扫描性、可发现性和整体流程。

我们可以在导航、链接、按钮、标题、动作调用等方面使用相似原则。

关闭

一组元素通常被认为是单一可识别的形式或图形。当对象不完整或者未封闭部分对象时，也会发生关闭。

Closure原则如何应用于UI设计？

正如Closure原则所述，当提供适量的信息时，我们的大脑将通过填补空白并创建一个统一的整体来得出结论。通过这种方式，我们可以减少传递信息所需的元素数量，降低复杂性并使设计更具吸引力。闭合可以帮助我们最小化视觉噪音并传达信息，在相当小的空间内强化概念。

我们可以在图像学中使用闭合原则，在这种情况下，简单有助于迅速而清晰地传达意义。

对称

无论距离如何，对称元素都会被认为属于一体，给我们一种坚固和有序的感觉。

对称原则在UI设计中如何应用?

对称的元素简单、和谐、美观。我们的眼睛寻求这些属性，以及秩序和稳定，以了解世界。由于这个原因，对称是快速有效地传递信息的有用工具。对称让我们专注于重要的事情。

对称的构图是令人满意的，但它们也会变得有点沉闷和静态。视觉对称往往更具动态性和趣味性。在对称的设计中加入不对称的元素可以在给人留下印象的同时吸引注意力;对任何兴趣点或行动号召都有用的东西，例如。对称，以及适度的不对称在任何设计中都很重要。

对于投资组合、画廊、产品展示、列表、导航、横幅和任何内容丰富的页面，使用对称是很好的。

延续

排列成直线或柔和曲线的元素被认为与随机排列或粗糙线排列的元素相关。

连续性原则如何应用于UI设计？

连续线后面的元素被视为分组。线段越平滑，我们就越看到它们的统一形状;我们更喜欢阻力最小的道路。

连续性帮助我们通过构图来解释方向和运动。它发生在对齐元素的时候，它可以帮助我们的眼睛在页面中流畅地移动，帮助我们的眼睛清晰。连续性原则加强了对分组信息的感知，创造了秩序，并通过不同的内容片段引导用户。中断连续性可以标志着一段内容的结束，让人注意到新的内容。

行和列的线性排列是连续性的良好示例。我们可以在菜单和子菜单，列表，产品安排，轮播，服务或流程/进度显示中使用它们。

共同的命运

向同一方向移动的元素被认为比向不同方向移动或根本不移动的元素更相关。

共同命运原则如何应用于UI设计?

无论元素之间的距离有多远，或者它们看起来有多不同，如果它们一起运动或变化，它们都被认为是相关的。这种效果可以在其他视觉元素暗示动作时发生。

当元素同步移动时，共同的命运原则更为有效;在相同的方向，相同的时间和速度。它可以帮助对相关信息进行分组，并将操作与结果联系起来。同步运动的中断可以抓住用户的注意力，并将其指向特定的元素或特性。它也可以建立不同群体或国家之间的关系。

我们可以在可扩展的菜单、手风琴、工具提示、产品滑块、视差卷轴和滑动指示器中使用共同的命运原则。

结论

用户界面设计并不全是关于漂亮的像素和闪亮的图形。它主要是关于沟通、性能和便利性。格式塔原则总是帮助我们实现这些目标;为用户创造愉快的体验，为企业创造巨大的成功。

三米工作室“TF三缺一与他们的经纪人”小组的每周优质设计文章汉化计划13篇--《Gestalt principles in UI design.（UI设计中的格式塔原则）》。

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

作者：Artsolder

链接：https://www.jianshu.com/p/ebb9af0b4f79

來源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。