【DDC译文】UI设计中的格式塔原则

你是否曾经观察过天空,注意到一团不同寻常的云,像一个熟悉的动物或物体?你有没有想过,为什么或者如何通过观察一团蓬松的气体来建立这种联系?这都是因为你的大脑运作方式! 你的大脑总是试图通过比较以前的或视觉模式来理解这个世界,并把这些点连接起来。它有自己的“怪异”方式来感知形状和形式,分组信息,填补空白,绘制大图。

了解你的大脑如何工作将有助于你成为一个更聪明的设计师,掌握视觉沟通的操纵者。它可以帮助你确定在任何特定情况下哪些视觉元素是最有效的,因此你可以利用它们来影响用户的感知、引导他们的注意力,并最终引起行为的改变。这个方法对于以完成目标为导向、解决问题、无意识设计、用户界面的设计上都格外有用。

“伟大的设计师理解心理学在视觉感知中的强大作用。当别人的目光与你的设计创作相遇时,会发生什么?他们对你所分享的信息有什么反应?”

– Autodesk品牌内容策划师Laura Busche

现在很清楚,视觉设计和心理是相互联系的,并且可以相互影响。格式塔原则可以帮助我们理解和控制这些联系。

什么是格式塔?

格式塔(德式造型)是20世纪20年代由德国心理学家提出的一组视觉知觉原理。它建立在“一个有组织的整体,被认为大于其各部分之和”的理论基础上。

“整体不是各部分之和。”

– 库尔托夫卡

格式塔原则试图描述当某些条件适用时,人们是如何看待视觉元素的。它们是建立在四个关键思想的基础上的:

出现

人们倾向于通过物体的粗略轮廓来识别它们。相较于一个细节丰富的物体,我们的大脑能更快的识别一个简明清晰的物体。

物化

人们可以识别物体,即使它们有部分缺失。我们的大脑将我们所看到的东西与记忆中的熟悉模式相匹配,并填补空白。

多稳定性

人们常常会用不止一种方式来解释模棱两可的事物。我们的大脑会在寻找确定性的选择之间来回穿梭。因此,一种视角将变得更加主导,而另一种视角将变得更难看到。

不变性

人们在识别简单物体时,不会受到它被旋转、缩放、变形的干扰。我们的大脑可以从不同的角度感知物体,尽管它们的外观不同。

以下是格式塔原则,它可以为今天的UI设计提供参考。

邻近

排列在彼此之间的邻近元素被认为比那些放置得更远的元素更相关。这样,不同的元素主要被看作是一个组,而不是单个的元素。

邻近原则如何适用于UI设计?

我们可以在UI设计中使用邻近原则来分组相似的信息,组织内容和整理布局。它的正确使用将对视觉交流和用户体验产生积极的影响。

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

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

共同区域

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

共同区域原则如何适用于UI设计?

共同区域原则特别有用。它可以帮助信息分组和内容组织,但它也可以实现内容分离或充当焦点。它提升了层次结构,可扫描性,并有助于信息的推广。

共同区域的原则可以将许多不同的因素组合在一起,使它们在更大的群体中保持统一。我们可以通过使用线条,颜色,形状和阴影来实现它。它经常被用来使某个元素突出,表示交互作用或重要性。

一个绝佳的运用公共区域理论的例子就是用户界面上的卡片;一个定义良好的矩形空间,包含不同的信息。横幅广告图跟表格也是很好的例子。

相似

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

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

我们倾向于把相似的元素看作是分组或模式。我们也可能认为,它们的目的是相同的。相似性可以帮助我们组织和分类一个组内的对象,并将它们与特定的意义或功能联系起来。

有很多不同的方法可以让元素们看起来相似,从而被用户认为是彼此关联的。这些特征包括颜色、大小、形状、纹理、尺寸和方向的相似性;其中一些比其他的更具交际力(例如颜色>大小>形状)。当相似发生时,一个物体可以通过与其他物体不同而得到强调,这被称为“异常”,可以用来创造对比或视觉重量。通过增加可浏览性、可发现性和整体信息流,将用户的注意力吸引到某个焦点内容上。

我们可以在导航,链接,按钮,标题,呼叫动作等等中使用相似性原则。

闭合

一组元素通常被认为是单个可识别的形式或图形。闭合也发生在对象不完整或部分不封闭的时候。

闭合原则如何适用于UI设计?

正如闭合原则所指出的,当我们面对适当的信息量时,我们的大脑会通过填补空白并创建一个统一的整体来得出结论。通过这种方式,我们可以减少信息交流所需的元素数量,减少复杂性,使设计更加吸引人。闭合可以帮助我们最小化视觉噪音并传达信息,在一个很小的空间内强化一个概念。

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

对称

对称的元素往往被认为是归属在一起的,而不管它们之间的距离,都给我们一种牢固和有序的感觉。

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

对称的元素简单、和谐、美观。我们的眼睛寻求这些属性,以及秩序和稳定,以了解世界。因此,对称是快速有效地交流信息的有用工具。对称让人感觉舒服,有助于我们专注于重要的东西。

对称的构图是令人满意的,但它们也会变得有点沉闷和静态。视觉对称往往更具动态性和趣味性。在任意一种对称设计中加入不对称的元素都能让用户对这个元素印象深刻从而吸引到用户的注意力,这种方法非常好用,比如当你希望吸引用户兴趣、或者像促进用户做出操作的时候。

对于作品集、图库、产品展示、列表、导航、横幅和任何内容丰富的页面,使用对称性都是很好的。

延续

排列在一条线或一条细曲线中的元素被认为比那些随机排列或排列在一条粗线中的元素更相关。

连续性原则在UI设计中如何应用?

连续线之后的元素被认为是分组的。线段越光滑,我们就越把它们视为统一的形状;我们的头脑更喜欢阻力最小的道路。

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

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

共同的命运

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

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

无论元素有多远或者它们可能出现的差异多少,如果它们一起移动或变化,它们都被认为是相关的。即使隐藏元素本身的真实运动,它的移动效果也可以通过其它视觉元素来反衬出来。

当元素移动同步时,共同命运原则更有效; 在同一个方向,同一时间和速度。它可以帮助将相关信息分组并将结果与行为联系起来。同步运动的中断可以吸引用户的注意力并将其引导至特定的元素或特征。它还可以建立不同分组或状态之间的关系。

我们可以把命运共同原则用在可扩展菜单、折叠条目、小提示、滑块、滚动条和手势操作提示等。

结论

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

MEDIUM.

译文地址:点融设计中心DDC

作者:板板

(0)

相关推荐

  • 如何在UI设计中使用格式塔原则

    你是否抬头看天的时候,经常会看到如下图所示的这种形状奇特的云,你是否都会觉得像熟悉的动物或事物?那么你是否曾想过,为什么仅仅通过一团毛绒绒的气体你就能在脑中建立起这种特殊联系呢? 因为你的大脑总是试图 ...

  • 格式塔原理在 UI 设计中的运用[升级版]

    又是改的之前的文章,新加了很多内容,毕竟去年的文章已经配不上今年的自己了. 格式塔心理学派中的"格式塔"源自德语"Gestalt",意思即"整体&qu ...

  • 【译】UI设计中使用插图的十大理由

    在过去的几年里,UI插图一直是最流行,最持久的设计趋势之一.一起来讨论下在网站和移动UI设计中运用插图的原因. 插画是什么? 基本上,插图是对特定概念.文字或过程的视觉解释,旨在支持.澄清甚至扩展人们 ...

  • UI设计中妙用无穷的深色系背景

    又是一篇来自Tubik Studio 的文章,丰富的设计项目使得这家资深设计机构对于设计的每一个细节都有着独特而系统的见解.今天的文章聊的就是深色系背景在设计中的运用,这当中有什么门道呢?看下去~ 黑 ...

  • UI设计中的布局编排原理

    @IOI.@麦子如果说色彩和图片是人的外在,那么版式编排就是人的骨骼,从基础上决定了一个人的内在.今天就带着大家一起从以下六个方面来探究下UI设计中的版式编排. UI界面设计中,信息能被有效的传达,离 ...

  • UI设计中的“黑与白”

    小编:UI设计中的配色是非常重要的一项,它不仅代表着产品的定位还决定着产品的风格.好的配色可以提升产品的用户体验,使得我们在竞品中有属于自己的风格特色.今天我们就来讨论一下影响配色的几种因素吧. 我们 ...

  • 【配色指南】UI设计中使用明亮色彩的利与弊,你知多少?

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 合理运用色彩是每个设计师都应必须具备的技能,特别是插画师和UI设计师.随着扁平化设计和Materia ...

  • 设计沉思录|UI设计中的『小套路』

    如果你还在为界面不精致,层次乱糟糟,反复修改浪费时间,开发还原度很差等问题而烦恼,不妨静下心来听我唠叨几句. UI设计是一个年轻的职业,起步较晚变化飞快.新的创意和玩法层出不穷,去年流行的风格,今年可 ...

  • 【译】UI设计中亮色的优点和缺点

    这篇文章展示了丰富多彩的UI的优缺点,描述了明亮的颜色如何提高用户体验,以及在选择亮色时应该考虑有哪些缺陷. 有效的颜色应用技巧是每个从事视觉合成相关工作的,包括插画家和UI设计师,都必须具备的.随着 ...