![]()
全国优秀设计师社群回复:进群
---------------------------------------------------------
↓关注我们 · 打造你的知识武器库↓
20 世纪初,格式塔心理学家制定了一套原则,旨在描述人们如何在视觉上感知和组织世界。这些原则通常被称为格式塔定律或格式塔原则。一些最流行的原则包括邻近性、相似性、公共区域和封闭性。作为设计师,我们可以应用这些原则来创建可用的界面。
定义:闭合原理 指出,当外部刺激与该对象部分匹配时,人们将填补空白以感知完整的对象。即使我们缺少信息,我们也倾向于通过填补空白以查看完整对象来理解我们的环境。这种识别是自动发生的。
![]()
不完整的对象,如开放的圆形和正方形,被视为闭合的形状,如闭合原理所述。
闭合原则描述了我们将分段的视觉元素视为完整或整个对象的倾向,即使我们缺少信息。该原则经常与徽标设计相关联,但它会影响与图标和各种页面元素相关的其他视觉设计决策。
公司标志
这个原则通常在标志设计中实现。例如,公共广播服务 (PBS) 和美国职业棒球大联盟都将封闭原则应用于其标志设计。
在这些例子中的每一个中,我们的大脑都会填补空白以感知完整的形状。所描绘的形状和物体是可识别的(分别是面孔和棒球运动员),虽然每个都可以用更大的视觉复杂度来描绘,但闭合原理的应用创造了简单而有趣的设计。
![]()
公共广播服务 (PBS) 的标志应用封闭原则来传达 3 个头(2 个在正空间,1 个在负空间)。
![]()
美国职业棒球大联盟将封闭原则应用于其标志设计。该设计表明棒球运动员准备在接近的球上挥杆。
大多数用户体验从业者对我们公司的标志设计没有太多控制权。然而,图标是封闭原则的另一种载体。例如,谷歌幻灯片将封闭原则应用于其图标之一。该图标通过极简主义的视觉设计传达功能。![]()
Google Slides 的形状图标使用了闭合原理。该图标描绘了一个覆盖在我们头脑中认为是正方形的物体上的圆圈。尽管形状不完整,但我们可以轻松填补空白。
虽然使用闭包原则可以简化你图标的视觉复杂度,但你仍然必须测试用户是否理解图标代表什么,并用清晰的标签来增强图标。如果用户不理解图标的含义,那么它是简约的还是美观的都没有关系。
设计者可以使用闭合原则来 1) 表明存在额外的内容,以及 2) 鼓励与所述内容的交互。许多轮播设计在轮播中仅显示项目的一部分时利用了闭合原则。尽管用户可能无法猜出部分显示项目的确切细节,但不完整的项目向他们发出信号,表明垂直折叠之外还有更多项目,他们应该滑动以到达它们。![]()
Lucid 的分段对象表明垂直折叠之外还存在其他内容,并邀请用户通过水平滑动来发现它。另一方面,如果页面对用户来说是完整的,我们就会遇到所谓的完整性错觉。应用闭合原则来防止完整性的错觉意味着在折叠上方分割页面元素,使它们看起来不完整并鼓励交互(滚动或滑动)。这种技术适用于具有可预测视口大小的上下文,但在可能的窗口大小范围很广的情况下实现起来要困难得多。 例如,冥想应用程序 Headspace 中的睡眠页面看起来是完整的,尽管下面还有其他几个冥想产品。可以通过显示分段元素(如后续查看所有最近按钮的一半)来传达以下附加内容来改进此设计。![]()
Headspace 面临着完整性的错觉,因为折叠上方的信息似乎是完整的。
并非封闭原理的所有应用都是有效的。在切断内容和页面元素时,请考虑该元素有多少会出现在屏幕上,以及是否足以传达价值和功能。提供的信息太少会使用户难以填空。
![]()
这两个图形中哪个更容易理解?我们大多数人可能会说在左边的图形中看到完整的圆圈更容易。
当我们从界面中切断页面元素和内容时,我们需要提供足够的上下文来传达有更多内容可供查看。HelloFresh 是一种订餐服务,它使用关闭原则向其用户发送一个轮播信号。然而,分段元素很小,很容易遗漏。
![]()
HelloFresh 表示通过切断轮播项目可以获得额外的内容。但是,由于提供的部分相对较小,因此设计很麻烦。相比之下,Target 应用程序成功地应用了关闭原则来指示额外的页面元素。该设计在Shop your store下提供了 3 个按钮选项;第三个选择被切断了。这第三个元素的大小约为其他两个元素的 40%,并提供了足够的内容来传达信息。![]()
Target 应用程序成功地将关闭原理应用于一组商店购物选项中的第三个按钮。
当呈现不完整的对象和信息时,人类倾向于填补空白。作为设计师,我们可以应用闭合原则来简化视觉元素并交流(并鼓励与之交互)附加信息。本期分享结束了,建议可以收藏并转发以备需要之日调用。同时欢迎加入10000+全国优秀设计师社群。
![]()
------------------------------------------------
点个在看,升职加薪 ↓↓