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设计中的各种地图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274516.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JetBrains下一代IDE:Fleet 公共预览版发布

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系…

善用工具_如何善用色彩心理学

善用工具There’s a problem with my movement. Most of us in the profession of trying to change the world have little skills or training in the actual craft of influencing human beings to do stuff — especially stuff that is new to them such as composting, p…

看源码的第一步,我猜很多人搞错了~

大家好,我是若川。今天在江西人的前端群里,有个小伙伴问,vueuse 的 vitepress (也就是官方文档仓库)怎么搭建的,怎么都没有 index.json(引用的一个文件)。本文简单记录下流程&#x…

1.1编写目的_1.目的

1.1编写目的A friend of mine recently founded Secta Leagues. A company that organises sports leagues for working professionals, where companies play sports against one another in the same industry. The vision is to provide an app that allows interested comp…

Web 应用架构的下一个转变

Web 技术大概 25 年前开始萌芽,HTTP、HTML、CSS 和 JS 都是在九十年代中期首次被标准化的。直到如今,Web 演变成一个无处不在的应用平台。随着 Web 的发展,Web 应用程序的开发架构也在不断发展。现在有许多用于构建 Web 应用程序的核心架构&a…

ux和ui_设计社交餐厅策展应用程序— UX / UI案例研究

ux和uiSabor, which translates from “taste” or “flavor” in Spanish, is a concept for an iOS app designed to provide users with honest, reliable and relatable restaurant recommendations from friends and family. It is a social restaurant curation applicat…

你不知道的 script 标签的 defer 与 async 属性

我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外:目前建…

我是怎么调试 Element UI 源码的

我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外:目前建…

模板缓冲_模板缓冲以及如何使用它可视化体积相交

模板缓冲介绍 (Introduction) The trendy thing in real-time rendering these days is ray-tracing. However, traditional rasterization hasn’t disappeared, and it won’t in the near future. I recommend this blog post on the subject: A hybrid rendering pipeline …

重磅!哈啰 Quark Design 正式开源,下一代跨技术栈前端组件库

大家好,我是若川。我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

b端 ux 设计思维_借助系统思维从视觉设计过渡到UX

b端 ux 设计思维“How can I switch to UX?” This is a common question from visual designers because there’s a lot of overlap on the surface. But it can also be a difficult transition since UX encompasses much more below the surface.“如何切换到UX&#xff…

三面面试官:运行 npm run xxx 的时候发生了什么?

大家好,我是若川。近期发现好些小伙伴工作有2-3年了,基本不会写脚手架,或者说没学过脚手架。对脚手架大致是如何执行的基本不太知道。其实这类学习资料真的挺多的。而且我们基本天天 npm run dev,应该学习内部实现。不知道的小伙伴…

figma下载_Figma的自动版式实用

figma下载Figma’s Auto Layout has been around for a while, but not everyone’s aware of the benefits it brings. It doesn’t replace constraints, they’re still very much needed. The trick is to use the right feature where necessary. I want to show you how …

Qt通过ODBC读取excel文件

之前替学校考试科用C Builder做过一个小的数据库工具,处理excel表格用的,现在想转换到Qt平台下来,在网上搜了搜有一些利用OBDC读取xls文件的教程: http://hi.baidu.com/kxw102/item/770c496d5736470ca0cf0f1d http://blog.sina.co…

真 · 三面面试官:运行 npm run xxx 的时候发生了什么?

昨晚没权限我只放了链接,今天联系开了白名单。昨天推文主要是为了投票,表明 Node.js 的重要性,有人评论是水文。今天重新转载下。欢迎继续点此去投票。投票显示有高达近80% 表示不太会开发脚手架,看来大多数人确实没有应用场景。可…

ovo svm_反思我在OVO担任远程产品设计实习生的时间

ovo svmIn a quiet bedroom accompanied only by the low humming of my laptop fan, I sat before a Google Hangouts meeting, and got to know my colleagues for the first time, unaware of the joy of a ride that was waiting for me at OVO Design.在一个安静的卧室里&…

最受读者喜爱的前端书 Top 15【留言送书】

最受读者喜爱的前端书Top 15JavaScript高级程序设计(第4版)| 中文版累计销量32万册,JavaScript“红宝书”全新升级 | 涵盖ECMAScript 2019,全面深入,入门和进阶俱佳 | 结合视频讲解配套编程环境,助你轻松掌…

图文结合简单易学的 npm 包的发布流程

大家好,我是若川。我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

拟态防御_拟态从未消失。 这就是为什么。

拟态防御Looking back on design languages, what Apple’s WWDC 2020 Keynote means for the future of design languages, and how we move on from here.回顾设计语言,Apple的WWDC 2020主题演讲对设计语言的未来意味着什么,以及我们如何从这里继续前进…

经常开发后台管理系统,如何提升自己?推荐~【留言送书】

大家好,我是若川。之前送过N次书,可以点此查看回馈粉丝,现在又和博文视点合作再次争取了几本书,具体送书规则看文末。Vue.js是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是,它可以自底向上逐层应用。Vue…