UI设计中的格式塔原则

哈喽,大家好。北京5PLUS UI设计学校为了帮助更多的小伙伴提高设计ui水平和设计意识,会整理一些比较细致且有实际案例的设计知识分享给大家。5PLUS是一所专业ui设计学校ui设计 培训机构,有很多出色的ui设计师学习在这里学有所成。如果觉得好,就分享给更多人吧。

 

你有时候看着天空有没有注意到一些特殊形状的云,酷似熟悉的动物或物体?你有没有想过,为什么会通过观察蓬松的一团气体来建立这种联系?这完全取决于我们的大脑如何运作的。

1 Szt0rc5affgplp Poxj46q我们的大脑总是通过比较以前的经验或视觉模式和连接点来了解世界。它有自己的“怪异”方式来感知形状和形式,分组信息,填补空白以整理出最红画面。

了解我们的大脑如何运作将有助于我们成为一个更聪明的设计师 。它可以帮助我们确定哪些视觉元素在大多数情况下最有效,因此我们可以使用它来影响用户的感知并改变用户行为。在面向目标,解决问题,直观设计方面有更多的解决办法。

“伟大的设计师理解心理学在视觉设计中扮演了重要的角色。当我们的设计创作符合用户视觉时会发生什么?他们的思想如何对你我们作品中展现的信息做出反应?“

 - Autodesk品牌内容策略师Laura Busche

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

格式塔是什么?

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

格式塔原则试图描述人们在特定条件下如何感知视觉元素。它们基于四个关键理念:

发现物体

人们倾向于首先以概括的形式识别元素。我们的大脑会快速地识别出简单,清晰的物体。

1 D4zjn7fxnyrzos0qj8oioa

具体化

人们可以识别物体,即使它们中有部分遗失。我们的大脑与我们在记忆中存储熟悉模式相匹配,并填补其中缺失的空白。

1 Lbpeuxus Chs8ngqnqq0 A

稳定性

人们通常会用不止一种方式来解释模棱两可的事物。我们的大脑会在寻求确定性的选择之间来回跳跃。

1 Yvuzpugpvxhrwytd7xvsfa

不变性

人们可以独立于旋转,缩放和平移来识别简单对象。尽管外观不同,我们的大脑可以从不同的角度感知物体。

1 Hfc M2psenepj23liz5emg

以下格式塔原则可以为今天的UI设计中的一些应用。

接近性

彼此靠近排列的元素被认为与放置得更远的元素相关。这样,不同的元素主要被视为一个组而不是单个元素。

1 Rb6h4rwbjhpjql2qrlntha

接近原则如何应用于UI设计?

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

正如原则所述,相关的物品应该彼此靠近,而不相关的物品应该保持相距较远。白色空间在这里发挥着至关重要的作用,因为它创造了引导用户眼睛朝向预期的方向。白色空间可以增强视觉层次和信息流,有助于易于阅读和扫描布局。它将帮助用户更快地实现他们的目标,并更深入地钻研内容。

1 Hepkszwz04affdqtwrcrnw

从导航,卡片,画廊和横幅到列表,正文和分页,我们几乎可以应用接近原则。

Common Region

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

1 Vxbcezmtiwn6ghzmztcyiw

Common Region原则如何应用于UI设计?

Common Region原则特别有用。它可以帮助进行信息分组和组织内容,也可以实现内容分离或聚焦,也可以增强了设计的层次结构,有助于促进信息识别。

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

1 V8mrsx28je9gfliasdmpgq

比较好示例是卡片UI模式,明确定义一个矩形空间,通过不同的信息组合为成为一个完整的卡片。

相似性

与不具有相似视觉特征的元素相比,具有相似视觉特征的元素之间的关联性更强。

1 Qnr1rww8tn Oufzlur2ggq

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

我们倾向于将彼此相似的元素视为分组或模式。我们也可能认为它们的目的是相同的。相似性可以帮助我们组织和分类组中的对象,并将它们与特定的含义或功能相关联。

有很多细节可以帮我们识别元素是相似的。这些包括颜色、大小、形状、纹理、尺寸和方向的相似性;他们中的一些信息比其他信息更加突出(例如颜色>大小>形状)。当相似性出现时,一个对象可以通过与其他对象不同而得到强调;这被称为“异常”,可用于创建对比度或视觉权重。它可以将用户的注意力吸引到特定的内容块(焦点)上,同时提高可发现性和整体性。

1 J1xjvngjx5gxz0fsjwgdkw

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

封闭性

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

1 Lxcr2o4blgzzzpyp3tptfw

封闭性原则如何应用于UI设计?

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

1 Akm90vz Q4eahmewmnxa3q

我们可以在图标设计中使用封闭性原理,简洁、快速、清晰地传达示意。

对称

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

1 Y9sghhx9q2dg5r6cuzivla

对称原理如何应用于UI设计?

对称元素简单,和谐,视觉上令人愉悦。我们的眼睛寻求这些属性以及秩序和稳定,以了解世界。因此,对称是一种快速有效地传递信息的有用工具。对称感觉很舒服,帮助我们专注于重要的事情。

对称的构图是令人满意的,但它们也会变得有点单调。视觉对称往往更动态,更有趣。在原本对称的设计中加入不对称元素可以帮助吸引注意力,同时给人留下印象;对称,以及适量的不对称在任何设计中都很重要。

1 Eofv3rd9oddikedgxa59ja

最好将对称用于产品展示,列表,导航,横幅等设计中。

连续性

排列在一条直线或一条曲线上的元素比随机排列在线上的元素更有关联性。

1 Qixdoznwm Nfprhecdep8w

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

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

连续性帮助我们通过构图来解释方向和运动。它在对齐元素时发生,它可以帮助我们的眼睛顺利地穿过页面,有助于提高易读性。连续性原则加强了对分组信息的感知,创建了秩序并引导用户通过不同的内容细分。连续性的中断可能标志着一个部分的结束,引起人们对新内容的关注。

1 Rr4akl8rnoo9nshnmytoa

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

共同命运

向同一方向运动的元素比那些向不同方向运动的元素或根本不运动的元素更有关联性。

1 Idl16ietkfamkbiuxn Gaa

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

不管这些元素之间的距离有多远,或者它们看起来有多么不同,如果它们一起移动或变化,它们就会被认为是相关的。这种效果甚至可以在其他视觉元素暗示运动的情况下发生。

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

1 Meprpvh5vepv4fgjsethdg

我们可以在可扩展菜单,工具提示,产品滑块,视差滚动和滑动指示器中使用共同命运原理。

结论

用户界面设计不只是漂亮的像素和闪亮的图形。主要是信息传达、性能和便利性。格式塔原则一直在帮助我们实现这些目标;为用户创造愉快舒适的体验。

作者:Eleana Gkogka

本页面最后更新于 2019年03月22日 12:24