ux设计中的各种地图_UX设计中的格式塔原理

ux设计中的各种地图

Gestalt Theory is the theory of visual perception and how our brain pieces together reality. The theory sheds light on how cognition factors into the way viewers read a piece of design. In the German language “Gestalt” means form or shape. According to Gestalt Theory, an organized whole is not the same as the sum of its parts.

格式塔理论是一种视觉感知理论,也是我们的大脑如何将现实拼凑在一起的理论。 该理论揭示了认知因素如何影响观看者阅读设计的方式。 在德语中,“格式塔”是指形状或形状。 根据格式塔理论,一个有组织的整体与其部分的总和并不相同。

Elements of Gestalt Theory: Proximity, Similarity, Continuity, Closure, Figure/ Ground, and Prägnanz.

格式塔理论的要素:接近性,相似性,连续性,闭合性,图形/地面和Prägnanz。

Image for post
Law of Proximity
邻近法则
Image for post
Example of Proximity
邻近示例

Proximity: Objects are grouped together according to their distance from one another.

接近度:对象根据彼此之间的距离分组在一起。

In this example items that are close together appear to be more related than items that are spaced apart.

在此示例中,靠近的项目似乎比隔开的项目更相关。

Image for post
Law of Similarity
相似定律
Image for post
Example of Similarity
相似的例子

Similarity: Objects, perceived by the user to be similar, group together.

相似性:用户感知为相似的对象组合在一起。

In this example visual nomenclature helps the user identify items that are similar or different.

在此示例中,视觉术语有助于用户识别相似或不同的项目。

Image for post
Law of Continuity
连续法则
Example of Continuity
Example of Continuity
连续性的例子

Continuity: Visual perception groups continuous forms.

连续性:视觉感知将连续形式分组。

In this example continuity occurs when the user is guided to move from one object to another.

在该示例中,当引导用户从一个对象移动到另一对象时,发生连续性。

Image for post
Law of Closure
封闭法
Position of the Spots Appear to be a Dalmatian Dog
Example of Closure
关闭范例

Closure: Visual perception unconsciously completes incomplete objects.

封闭:视觉感知会无意识地完成不完整的对象。

Closure is at the heart of Gestalt psychology: our minds create something coherent from parts that are objectively incoherent. My favorite example, the moving dots look like a dog.

封闭是格式塔心理学的核心:我们的思想从客观上不连贯的部分中创造出连贯的东西。 我最喜欢的示例是,移动的点看起来像狗。

Image for post
Example of Figue/Ground
菲格/地面的例子

Figure/ground: The separation between figure (foreground) and ground (background).

图形/地面:图形(前景)与地面(背景)之间的分隔。

Things get interesting when designers create compositions that cause our brains to flip back and forth between the figure and ground. In this example the figure is a vase and the ground contains two faces.

当设计师创造出使我们的大脑在图形和地面之间来回翻转的构图时,事情就会变得很有趣。 在此示例中,该图是一个花瓶,地面上有两个面。

Image for post
Example of Prägnanz
Prägnanz的例子

Prägnanz: We tend to reduce reality to its simplest form.

Prägnanz:我们倾向于将现实简化为最简单的形式。

When we see complex shapes in a design, the eye simplifies these by transforming them into a single, unified shape (by removing detail from these shapes).

当我们在设计中看到复杂的形状时,眼睛会通过将它们转换为单个统一的形状(通过从这些形状中删除细节)来简化它们。

We can use Prägnanz to when wireframing a website. Our eyes assemble the extraneous details of content blocks into a single webpage.

在对网站进行线框构建时,我们可以使用Prägnanz。 我们的目光将内容块的多余细节组合到一个网页中。

翻译自: https://uxplanet.org/gestalt-principles-in-ux-design-2e0f423bfcb5

ux设计中的各种地图

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值