为什么有些应用程序的界面使用起来如此高效?
为什么有些海报乍一看看起来很舒服?
为什么有些标志设计得如此巧妙?
其背后隐藏着全部的“格式塔心理学”。
这是每个平面设计师的必备品!
它似乎很深刻,
事实上,它的应用在生活中随处可见。
格式塔共有 7 个基本原则
......
一 |接近
物体之间的相对距离会影响我们对它们组织在一起的感知。彼此靠近的物体似乎属于一个组,而距离较远的物体则不属于一个组。
下面是一个非常简单的例子:
当您阅读上面的文字时,很容易理解它的含义。
那么,如果结果是这样的呢?
物体之间的相对距离会影响我们对它们组合在一起的感知,彼此靠近的物体似乎属于一个群体,而距离较远的物体则不属于一个群体
你不想马上读吗?
不注意生活中的接近性有时会导致笑话
邻近性有助于我们快速获取信息
避免使信息模棱两可
综上所述,在平面设计中,一般遵循:
字距<行距<组距<模块间距<页边距
II |相似
具有相同属性的元素比那些看起来完全不同的元素更相关,这就是相似性原则,我们的大脑倾向于将相似的元素视为一个群体。
按颜色分组
在互联网产品中使用相似性原则进行分组的例子也很多,例如:
在网页中,“图片+标题+标签+作者”是一个模块,因此在视觉上我们将界面划分为几组类别。
在UI设计中,相似性还有助于使界面中相同功能的组件保持一致。
保持相同风格、相同功能、含义、层次结构的组件,可以让用户快速了解组件的运行方式,降低用户学习成本。
QQ音乐与网易云界面对比
在同一个应用中,相似性可以保持风格统一
应用(或网站)风格的统一性是UI设计中一个非常重要的话题,统一的风格可以让用户清晰地感知到自己在同一个应用(或网站)中,而不是觉得点击一下就跳进了别人的领地,这不仅是用户体验的要求,也是视觉的要求。
B站标志粉红色和二维图标
特异性使视觉焦点更容易
反过来想,如果一个相似的元素中突然出现完全不同的东西,你会立即被它吸引,这实际上是一种颠倒相似性原则应用的方法。例如,许多应用程序的选项卡选择状态将更加突出。
三 |连续性
我們的視覺傾向於感知連續的形式,而不是離散的片段,這就是連續性的原則。
比如左边的图,当我们视觉感知它时,很可能不会按照中间的三阶段分解,而是会被视为一条连续的蛇,但底部被其他物体遮挡住了。
许多徽标在其设计中使用连续性原则。
IBM的标志是连续性设计的典型例子,虽然所有的线条都是分开的,但我们的愿景还是会把它解析成连续的线条,并将它们组合成简单的字母。
可口可乐的横幅广告也是拆分的,虽然它被拆分为三个完全独立的广告牌,但我们的连续感仍然会将它们连接起来,共同构建可口可乐典型的弧形身份。
在UI中,当用户看到图像或图标的右半部分时,根据视觉感知连续性的原则,他们会知道右侧还有一些未显示的图像,这些未显示的图片和一些已经一起显示的图片构成了一个完整的图片。
使用连续性原则引导用户向左滑动。
四 |关闭
当人们观察一个物体时,视觉系统倾向于将不完整的部分视为一个整体。不连续的、开放的图形会自动补充,从而将其视为一个完整的物体,而不是分散的碎片。
在互联网产品中,断点字体和图标的设计利用了闭合原理,打破了常规,让人们可以忽略专门设计的断点,将它们连接成线条,而不影响视觉认知。
闭包的类型大致可分为3类,即形状闭包、负闭包和经验闭包。
例如,第一个是更常见的形状闭合,即我们组成一个白色闭合三角形,想象它覆盖一个三角形和三个圆圈,而不是将其分解为三个独立的吃豆人和箭头,因为前者构成了一个更简单的整体。
第二种是典型的负闭包,看似只有一头大象+一个点,但一个点的意义太不明确,我们更愿意把点周围的负空间包括进去,理解为两头大象,一大一小,这样认知就简单了。
第三种是典型的体验封闭,这有点超出了原生的视觉感知。标签的设计,在初始是一条清晰的边界线,采用边界线的定义,让用户将其作为一个整体来识别,但随着扁平化设计的发展,到最后已经省略成一个完全自由的边界线标签设计,这是用户最初接入互联网产品, 有一定的理解门槛,需要一定的经验积累,所以叫做经验闭合。
五 |单纯
在人眼的认知过程中,大脑会倾向于将一个复杂的物体解析成一个相对简单的物体来理解,从而减轻大脑的认知负荷,这就是简单原则。
拆解左边的图的方法有很多种,但大多数正常的大脑会把它拆解成右图,而不是中间的图,这是简单原理的体现。
根据这个简单的规则,我们的大脑会将其解析成许多大小相同、近远且被遮挡的独立图像,而不是几个不同大小且不完整的图像。
关于简单的规则,我们提到最终目标是减少大脑的负荷。如今,徽标和图标的设计趋势正在扁平化。
六 |主题和背景
大脑将视觉区域划分为主体和背景,主体包括场景中占据我们注意力的所有元素,其余的就是背景。
值得一提的是,在我们的设计中,主题和背景不是一成不变的。
例如,在上图中,当使用灰色背景作为背景时,整个卡片就是主体。当图像被视为背景时,叠加在图像上的文本将成为主体。当您按住叠加层的顶部时,叠加层将成为页面的主体,整个卡片将成为背景。
在设计页面时,需要充分考虑元素的优先级,突出核心元素以使其成为主题,次要元素以使其成为背景。
七 |共同的命运
我们倾向于将物体视为一个相互关联的整体。视觉系统将具有一致运动规则的物体视为一个整体。
例如,我们在做加载设计时,如果只有加载图标在移动,动态图标和静态文本会让人觉得他们不在同一层次上,这样原本表达相同含义的两个元素就分开了
为了减少这种分离感,让两者在用户眼中始终作为一个群体存在,我们可以采用共同命运的原则,让两者以相同的频率移动。
同样的原理是B站一键三连的原理
你掌握了格式塔心理学的理论知识吗?
想精通应用,
评论列表