file

你有没有注意到天空中有一种异常形状的云,类似于熟悉的动物或物体?你有没有想过,为什么或如何通过看一个蓬松的气体块来建立这种联系?这都是因为你的大脑是如何工作的!

file

你的大脑总是试图通过比较以前的经验或视觉模式和连接点来理解世界。它有自己的“奇怪”的方式来感知形状和形式,分组信息,填补空白,画出大局。

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

“伟大的设计师理解心理学在视觉感知中的强大作用。当某人的眼睛满足你的设计创意时会发生什么?他们的思想如何反应你的作品分享的信息?“——Autodesk品牌内容策划师Laura Busche

很显然,视觉设计和心理学是相互联系的,可以相互影响。格式塔原理有助于我们理解和控制这些联系。

格式塔原理是什么?

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

“整体不是部分的总和。”—— — Kurt Koffka

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

1.出现

人们倾向于以一般概括的形式来识别元素。我们的大脑识别一个简单、明确的对象比一个详细的对象要快。

file

2.物化

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

file

3.多重稳定性

人们通常会用不止一种方式解释不明确的对象。我们的大脑会在寻求确定性的替代品之间来回跳动。结果,一个观点将变得更占主导地位,而另一个观点将变得更加难以理解。

file

4.不变性

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

file

下面是格式塔原理,我们可以运用它来UI设计。

接近

彼此靠近放置的元素比分开放置的元素更会被感知。这样,不同的元素主要被视为一个组,而不是作为单个元素。

file

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

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

原则上,相关的项目应该保持密切的联系,而无关的项目应该进一步分开。留白在这里起着至关重要的作用,因为它产生对比度,引导用户的眼睛在预期的方向。留白可以提升视觉层次和信息流,有助于易于阅读和扫描布局。它将帮助用户更快地实现目标并深入研究内容。

file

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

公共区域

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

file

通用区域原理如何应用于UI设计?

公共区域原则特别有用。它可以帮助信息分组和内容组织,但它也可以实现内容分离或作为焦点。它增强了层次性,可扫描性,并有助于促进信息。

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

file

一个很好的公共区域例子是UI模式;一个定义良好的矩形空间,具有不同的信息位。banner和列表也是很好的例子。

相似性

有相似的视觉特征的元素被认为比那些没有相似特征的元素更被人感知。

file

相似原理在UI设计中如何应用?

我们倾向于感知彼此相似的元素分组。我们也可能认为它们有同样的用途。相似性可以帮助我们组织和分类一个组内的对象,并将它们与特定的含义或功能联系起来。

有不同的方式使元素被认为是相似的,因而是相关的。它们包括颜色、大小、形状、质地、尺寸和取向的相似性,其中一些颜色比其他颜色更为强烈(颜色>大小>形状)。当相似性发生时,物体可以通过与其他物体不同而被强调;这被称为“异常”,并且可以用来产生对比度或视觉重量。它可以吸引用户对特定内容(焦点)的注意,同时协助可扫描性、可发现性和整体流程。

file

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

闭合

一组元素通常被认为是单个可识别的形式或图形。闭合也发生在物体不完整或部分不被封闭的情况下。

file

闭合原理如何应用于UI设计?

当闭合原理陈述时,当我们提出正确的信息量时,我们的大脑会通过填补空白和创建一个统一的整体而得出结论。通过这种方式,我们可以减少沟通信息所需的元素数量,减少复杂性,使设计更具吸引力。闭合可以帮助我们最小化视觉噪声和传达信息,加强概念在一个相当小的空间内。

file

我们可以在logo中使用闭合原理,有助于快速、清晰地传达意义。

对称性

对称元素往往被认为是归属在一起,不管它们的距离,给我们一种坚定和秩序的感觉。

file

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

对称元素简单、和谐、视觉愉悦。我们的眼睛寻求这些属性以及秩序和稳定性。因此,对称性是快速有效地传递信息的有用工具。对称感让我们专注于什么是重要的。

对称的组合物是令人满意的,但它们也会变得有点钝和静态。视觉对称往往更具动态性和趣味性。将不对称元素添加到另一个对称的设计中,有助于吸引注意力,同时也能产生印象;例如,可以用于对于任何兴趣点或调用动作都有用的东西。

file

在画廊、产品展示、列表、导航、横幅和任何内容重页中使用对称性是很好的。

延伸

在直线或曲线中排列的元素被认为比随机排列或在苛刻线中更吸引人。

file

连续性原理在UI设计中的应用?

连续性的元素被认为是分组的。线段越平滑,我们越能看到它们是一个统一的形状;我们的思维更倾向于阻力最小的路径。

连续性帮助我们通过构图来解释方向和运动。它发生在对齐元素,它可以帮助我们的眼睛顺利通过页面,协助易读性。连续性原则增强了分组信息的感知、创建顺序和引导用户通过不同的内容片段。连续性的中断可以指示一个部分的结束,注意一个新的内容。

file

行和列的线性排列是连续性的好例子。我们可以在菜单和子菜单、列表、产品配置、转盘、服务或进度条显示中使用它们。

共同命运

朝向同一方向移动的元素比在不同方向移动或者根本不移动的更被感知。、

file

共同命运原则在UI设计中怎么应用?

不管元素的相距有多远,或者它们看起来不一样,如果它们移动或改变在一起,它们被认为是相关的。这种影响甚至可以在其他视觉元素的运动暗示时发生。

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

file

我们可以使用共同的命运原则在可扩展菜单,工具提示,产品轮播,视差差异和指示按钮中运用。

结论:

用户界面设计并不是关于漂亮的元素和闪闪发光的图形。主要是沟通,性能和便利性。格式塔原理帮助了我们实现这些目标,为用户创造一个愉快的体验,为企业带来巨大的成功。

如果你想学习更多关于网页前端设计的技巧,网页排版的知识可以去学习一下《欧美范网页设计实战课程》,你将会有更多的收获~ 如果你喜欢这篇文章或发现它有用,可以打赏,点❤,也可以点击分享它,这样更多的人可以从中受益~