hp-ux_UX中的格式塔-或-为什么设计师如此讨厌间距

hp-ux

I’ve been lucky so far in my design career to have worked with engineers that seem genuinely interested in learning about design. Perhaps, as mentioned in the title, it’s more about them trying to figure out why it matters so much to us that there is 8 pixels of space between the label and the form field and not 12 pixels. I may never know their true motivation. But one of the ways I’ve found to be most effective in teaching engineers about why we’re so persnickety is going over Gestalt principles with them.

到目前为止,在我的设计生涯中我一直很幸运能与似乎对学习设计感兴趣的工程师一起工作。 也许,正如标题中所提到的,更多的是他们试图弄清为什么它对我们如此重要,以至于标签和表单字段之间有8像素的间距而不是12像素。 我可能永远都不知道他们的真正动机。 但是我发现最有效的方法之一就是教给工程师关于我们为何如此顽强的理由,与他们一起探讨格式塔原理 。

This also allows me to victimize this intolerable (and handsome and smart 🙄) friend of mine by eviscerating his resume design in front of everyone.

这也使我可以通过在所有人面前剔掉他的简历设计来折磨我这个无法忍受的(又英俊又聪明的)朋友。

For me, Gestalt psychology plays an enormous part in the design of information and interactions with that information. I’m going to go over here what I usually go over in my sessions with non-designers, so if you’re a designer reading this, I guess what you can get out of it, if anything, areways to communicate what you already probably know.

对我来说,格式塔心理学在信息设计和与信息的交互中起着巨大的作用。 我要讲的是我通常在与非设计师的会议中讨论的内容,因此,如果您是一位阅读本文的设计师,我想您可以从中学到什么,如果有的话,可以交流您已经拥有的知识大概知道。

格式塔分组原则 (Gestalt Principles of Grouping)

There are 6 principles of grouping as laid out in Gestalt psychology. No wait, 7. Oh shoot, no. There are actually like 12. Or 13. Depending on which article you read about it. And they’re also named differently depending on which one you read. Fun.

格式塔心理学提出了6种分组原则。 不等,7.哦,射击,不。 其实有像12或13取决于其上的文章 您 阅读 关于它。 而且他们根据你读哪一个上也是不同的命名 。 好玩

So I just chose 6 that made sense to me.

所以我只选择了6个对我来说有意义的。

  1. Proximity (which I group with Common Region)

    邻近度 (我将其与“ 公共区域”分组)

  2. Similarity

    相似

  3. Continuation

    延续性

  4. Figure/Ground

    图/地

  5. Closure

    关闭

  6. Common Fate

    共同的命运

The first three are probably the most used in information design/UX. So I save those for last, and start with the less commonly used latter three. Here’s how I break them down.

前三个可能是信息设计/ UX中使用最多的。 因此,我将这些保存到最后,并从不常用的后三个开始。 这是我分解它们的方法。

图/地 (Figure/Ground)

This principle is used more in graphic design than in information design, and when deployed effectively can make for some incredibly clever imagery. “Figure” in this context might be thought of as “foreground” — usually a smaller image on a larger “Ground” (or “background” as we commonly refer to it).

此原则在图形设计中比在信息设计中更多地使用,并且在有效部署时可以生成一些非常聪明的图像。 在这种情况下,“图形”可能被认为是“前景”,通常是在较大的“地面”(或通常称为“背景”)上的较小图像。

Things get interesting when designers create compositions that cause our brains to flip back and forth between what the Figure is and what the Ground is. Here’s a great example from an article on Canva:

当设计师创造出可以使我们的大脑在人物和地面之间来回翻转的构图时,事情变得很有趣。 这是有关Canva的文章中的一个很好的例子:

A film poster for “Peter and the Wolf” where the negative space made by a wolf’s body forms the silhouette of a boy.
You can see a boy’s silhouette (presumably it’s Peter’s) emerge from the negative space, which, in this case, is quite literally the ground.
您会看到一个男孩的轮廓(大概是彼得的轮廓)从负空间出现,在这种情况下,它实际上就是地面。

Another example that threw me for a bit of a loop was the FedEx logo. Do you see the arrow?

另一个让我有些困惑的例子是FedEx徽标。 你看到箭头了吗?

The FedEx logo, where an arrow is formed by the negative space between the E and the X.
It’s in between the E and the x.
它在E和x之间。

Now you will never be able to unsee it.

现在,您将永远无法看不到它。

关闭 (Closure)

This is another fun one that really gets at the heart of Gestalt psychology: our minds creating something coherent from parts that are objectively incoherent. My favorite example, as an Elder Millennial, is one from my childhood: the Flying V.

这是格式塔心理学真正的另一个乐趣:我们的思想从客观上不连贯的部分中产生出连贯的东西。 作为千禧年长者,我最喜欢的例子是我童年时代的一个例子:飞行V。

A still from the movie “Mighty Ducks” where the hockey players are in a “V” formation.

Did you ever stop and think about why is this called a “flying V”? I know I didn’t. Because obviously they’re in a V shape, right?

您是否曾经停下来考虑过为什么将其称为“飞行V” 我知道我没有 因为显然它们呈V形,对不对?

But really they’re not. They’re a group of five distinct points. Our mind has to fill in the gaps between them to see the “V” emerge. And it does that automatically! Neat.

但实际上不是。 它们是五个不同的点。 我们必须填补它们之间的空白,才能看到“ V”的出现。 它会自动完成! 整齐。

Dots superimposed on the aforementioned movie still where the hockey players were, and an animation connecting them.

You see this principle at work occasionally in forms. Notice that this box is interrupted by a label. But you still know it’s a box, don’t you?

您偶尔会以表格形式看到此原理。 请注意,此框被标签打断。 但是您仍然知道这是一个盒子,不是吗?

A field with a “Full Name” label that interrupts the outline of the field.
That’s not actually my name, despite how smart I must seem.
尽管我看起来多么聪明,但这实际上不是我的名字。

共同的命运 (Common Fate)

I love the emo name of this one. I also love using this kitten gif to explain it. Which of these kittens is not part of the group?

我喜欢这个的emo名称。 我也喜欢用这只小猫gif来解释它。 这些小猫中哪些不属于该组?

An animated GIF of kittens crawling up a man’s leg, except for one that remains on the floor and wanders off.
It’s the one on the ground.
它是地面上的那个。

Common fate is about directionality. We group things that are headed in the same direction or facing the same direction. That’s how we can tell who’s in which gang when we watch Beat It. Otherwise it’s just a bunch of dudes standing around wearing denim and leather and occasionally having sleeves.

共同的命运与方向性有关。 我们将朝着相同方向或朝着相同方向的事物分组。 这就是我们观看Beat It时可以分辨出谁属于哪个帮派的方法。 否则,只是一群呆呆的家伙,穿着牛仔布和皮革站着,偶尔有袖子。

A still from the music video “Beat It” by Michael Jackson, where gang members are facing each other with MJ in the middle

这样做是为了“有趣”的 (That does it for the “fun” ones)

The rest of the principles I cover are the ones that have more serious repercussions. How these are wielded can make or break a design.

我涵盖的其余原则是那些具有较严重影响的原则。 如何使用它们可以设计或破坏设计。

接近 (Proximity)

It’s easier to see when it’s not used correctly. Like maybe in this sign, where the lines of text being adjacent to each other will cause an unwanted association.

如果使用不正确,会更容易看到。 就像在此符号中一样,文本行彼此相邻将导致不必要的关联。

A road sign ad, saying “Wash & Vacuum Senior Citizens $15.95”

Proximity, as a concept, is fairly straightforward. Our brains will group things that are close to each other.

作为一个概念, 接近非常简单。 我们的大脑会将彼此靠近的事物组合在一起。

Almost everyone has seen a form like this.

几乎每个人都看到过这样的形式。

A form with labels evenly spaced between the fields

Are the labels labeling the fields below or the fields above? It’s hard to tell. You have to go up to the top and figure out which it is, and that’s unnecessary mental overhead for whoever is filling it out. You don’t want that. People will hate using your product, even if they’re not sure why.

标签是在标记下面的字段还是在上面的字段? 很难说。 您必须爬到顶端并弄清楚它是什么,这对于任何填写它的人都是不必要的。 你不要那样 人们会讨厌使用您的产品,即使他们不确定为什么。

This is why designers get very specific about spacing. Look how much clearer it is in this case. There is zero ambiguity, all because of a few pixels’ shift.

这就是设计师对间距非常具体的原因。 看看在这种情况下它有多清晰。 零歧义是零,这都是由于几个像素的偏移。

A form with labels that are closer to the corresponding field than they are to other fields in the form

Another arena where you see proximity coming in handy is in code. Quick: which would you rather debug?

在代码中,可以看到方便使用的另一个领域。 快速:您想调试哪个?

Two computers with code on the screens. The left one’s code has no spaces in it, while the right one is split up into blocks.
That left one…ouch.
剩下一个……哎呀。

Space between code blocks help humans parse what might otherwise be inscrutable. (There is also some Continuation going on here, which I’ll get to later.)

代码块之间的空间可帮助人们解析本来难以理解的内容。 (这里还有一些延续,我将在以后进行。)

相似 (Similarity)

Look at this completely normal basketball game. How do you tell who’s on what team in all this chaos?

看一下这个完全正常的篮球比赛。 在所有这些混乱情况下,您如何分辨谁在哪个团队中?

A doctored photo of a basketball game where there are around 100 players and basketballs on the court simultaneously.

It’s easy. You look at what they’re wearing. We understand intuitively that one team is wearing dark uniforms and one team is wearing white.

这很容易。 你看看他们穿什么。 我们直观地了解到,一支团队穿着深色制服,而另一支团队穿着白色制服。

Similarity, like Proximity, is a fairly easy concept to grasp: our brains group things that are similar in appearance. This principle can be useful (stop signs being easily recognizable as such) or it can be counterproductive (this is pretty much how racism works).

相似度 ,例如接近度,是一个相当容易掌握的概念:我们的大脑将外观相似的事物归为一类。 该原则可能有用(停车标志很容易识别),也可能适得其反(这在很大程度上是种族主义的工作方式)。

In information design, it serves several purposes, but the most important is as an aid to recognize object type. And this can work at a “global” level and a “local” level.

在信息设计中,它有多种用途,但最重要的是作为识别对象类型的辅助工具。 这可以在“全局”级别和“本地”级别上工作。

Two versions of the text, “Some text” — one black and one blue with an underline.
Which one is a link?
哪个链接?

At the global level, designers can take advantage of established conventions. That is, if a piece of text is blue and underlined, most people who’ve used the internet before are going to recognize it as a link.

在全球范围内,设计人员可以利用已建立的约定 。 也就是说,如果一条文本是蓝色的并带有下划线,则大多数以前使用过互联网的人都将其识别为链接。

At a local level, designers can establish patterns within their own product. For example, where I work, our filters currently look something like this. So everywhere a user goes within our walls, they’ll be able to recognize that blue text inside blue bubbles means they can filter on stuff.

在本地级别,设计师可以在自己的产品中建立模式。 例如,在我工作的地方,我们的过滤器当前看起来像这样。 因此,只要有用户进入我们的围墙,他们都将能够识别出蓝色气泡内的蓝色文本,这意味着他们可以过滤东西。

A set of four filter bubbles (rounded rectangles with text), one active, as indicated by its blue color.
Which filter is active?
哪个过滤器处于活动状态?

You’ll also notice that one of those filters is not like the others. There are a lot of aspects that are similar (size, shape) but the colors are inverted. This dissimilarity gives people a clue that there is something special about this filter. (In this case, it’s applied.) But it’s similar enough that they can also still tell it’s a filter.

您还会注意到,这些过滤器之一与其他过滤器不同。 许多方面都相似(大小,形状),但颜色却相反。 这种差异为人们提供了一个线索,表明此过滤器有一些特殊之处。 (在这种情况下,它已被应用。)但是它非常相似,他们仍然可以说它是一个过滤器。

Similarity is used offline as well for…similar purposes 😬. Some shades of red, for example, are frequently employed to communicate danger, or warnings, or that some sort of error has happened and you’ll want to back on out of there.

相似度也用于…相似目的offline。 例如,经常使用一些红色阴影来传达危险或警告,或者发生了某种错误,您需要从那里继续。

A collage of images with red in them: a stop light, red curb, Danger sign, YouTube error screen, and the Ohio State logo
Go Blue.
变蓝。

延续性 (Continuation)

And finally, we come to our last principle: Continuation. Our brains group things that are along a contour. This is perhaps not quite as easy to understand. When faced with this image, most people will conclude that there is a line of dots intersecting another line of dots.

最后,我们得出最后一个原则: Continuation 。 我们的大脑将沿着轮廓的东西组合在一起 。 这也许不太容易理解。 面对此图像,大多数人会得出结论:有一排点与另一排点相交。

What appears to be two intersecting lines of dots, all the same color
Intersecting?
相交?

This is Continuation at work. We assume that the groups of dots are along the contours, even when it could also be the case that the dots are more like two caterpillars bumping bellies.

这是工作的延续。 我们假设点组沿着轮廓,即使这也可能是点更像是两个毛毛虫撞击腹部的情况。

Two lines of dots, some colored darker, indicating the the groupings are above/below as opposed to along the contours
Caterpillars can be bros too.
毛毛虫也可以是兄弟。

User interfaces apply this principle by keeping related things on the same contours (which are usually straight lines). This is how tables work, for example. We know that all the items on the left are song titles, and we also know that all the items on a row are related. Here, we can see that “Shorty (Got Her Eyes on Me)” is a song performed by Donell Jones, and can be found on the Album “Where I Wanna Be”. Don’t you forget it.

用户界面通过将相关内容保持在相同的轮廓(通常是直线)上来应用此原理。 例如,表就是这样工作的。 我们知道左侧的所有项目都是歌曲标题,而且我们知道一行中的所有项目都是相关的。 在这里,我们可以看到“ Shorty(让她注视我)”是Donell Jones演唱的歌曲,可以在专辑“ Where I Wanna Be”中找到。 你不忘了吗

A screenshot of a Spotify playlist, with columns of Titles, Artists, and Albums. One row is highlighted.

This principle also often appears in the coding realm. Code often contains nested blocks, and developers will use the Continuation principle to communicate where those nested blocks begin and end.

这个原理也经常出现在编码领域。 代码通常包含嵌套块,开发人员将使用Continuation原理来传达这些嵌套块的开始和结束位置。

A screenshot of some code with vertical lines drawn on it to indicate the opening and closing of nested blocks of code.

在实践中 (In practice)

This is usually where I get to make fun of my friend (we’ll call him Nick), which is my favorite part. However, to protect his privacy, I’ll have to isolate bits of his resume.

通常,这是我取笑我的朋友(我们称他为尼克)的地方,这是我最喜欢的部分。 但是,为了保护他的隐私,我必须隔离他的简历中的一些内容。

Usually the first mistake I point out is the most noticeable one, which has to do with the principle of Proximity.

通常,我指出的第一个错误是最明显的错误,这与邻近性原则有关

A section of the top of a resume, where one of the schools listed is very close to a horizontal divider line below it

What Nick did here was put his second education listing too close to the divider line, which most people would infer to mean that everything below that line has to do with his experience at that school. With even spacing around that line, it would be correctly read as a divider with no affiliation to the above or below.

尼克在这里所做的就是将他的第二次教育列表过于靠近分界线,大多数人认为这意味着该分界线以下的所有内容都与他在那所学校的经历有关。 如果在该行周围有均匀的间距,则可以正确地将其理解为分隔线,而与上方或下方无关。

His second mistake was a Similarity one. Check out the dates in this snippet.

他的第二个错误是相似性 。 在此代码段中查看日期

Another section of a resume, showing dates formatted in different ways, one in bold, one in italics

It’s possible you won’t even see the other two at first. They’re in italics and in parentheses in the middle of a text block, while the one you probably saw first is isolated and in bold, non-italics text in the upper right.

您一开始可能甚至看不到其他两个。 它们用斜体和括号括在一个文本块的中间,而您可能首先看到的是孤立的,并在右上角使用粗体非斜体文本。

Recruiters will often try to get a sense of someone’s timeline when examining their resume, and it helps to be able to recognize dates as dates. The best way to do this is to format them all the same. They should also all be on the same line. Which brings me to the next mistake Nick made: the one with Continuity.

招聘人员在检查自己的简历时通常会尝试了解他们的时间表,这有助于将日期识别为日期。 最好的方法是将它们全部格式化。 它们也都应该在同一条线上。 这使我想到了尼克所犯的下一个错误:具有连续性的错误。

A tall, narrow section of a resume, showing a list of organization names and a bulleted list of more org. names below it.

This one is nit-picky, I admit. But the organizations he worked for are listed nicely down the left edge — and even formatted all the same! — until we get to the bottom section, where they are needlessly indented, inhibiting the reader’s ability to scan the resume quickly.

我承认,这是挑剔的。 但是他工作的组织在列表的左下角很好地列出了,甚至格式都一样! —直到我们到达不必要的缩进的底部为止,这限制了读者快速扫描简历的能力。

Perhaps he wanted recruiters to spend some time parsing his resume. Perhaps he was going for the IKEA Effect. The world may never know.

也许他希望招聘人员花一些时间来分析他的简历。 也许他是为了宜家效果 。 世界可能永远不会知道。

Okay I’ll leave Nick alone now. But next time a designer is being annoying about a few pixels’ worth of spacing or some text formatting, remember how bad this resume design was. We want as little of that put out into the world as possible, and that is part of a designer’s job. Please bear with us. 🙏

好吧,我现在让尼克一个人呆着。 但是,下一次设计人员要烦恼几个像素的间距或某些文本格式时,请记住此简历设计有多糟糕。 我们希望尽可能少地将其投放到世界上,这是设计师工作的一部分。 请忍受我们。 🙏

翻译自: https://uxdesign.cc/gestalt-in-ux-or-why-designers-are-so-annoying-about-spacing-a4f06a6e255e

hp-ux

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

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

相关文章

JavaScript 数组新增 4 个非破坏性方法!

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

自行车改装电动车怎么样_电动车听起来应该是什么样?

自行车改装电动车怎么样The sound of an all-electric car accelerating doesn’t have to sound like a standard combustion engine, It could sound like anything.全电动汽车加速的声音不必听起来像是标准的内燃机,它可以听起来像任何东西。 These were the wor…

谷歌pay破解_Google Pay缺少Google闻名的一件事-UX案例研究

谷歌pay破解Disclaimer: The views expressed in the blog post is purely based on personal experience. It was not influenced by any external factor.When Google launched Tez (now Google Pay) in India during 2017, their primary goal was to design a simple payme…

进阶高级前端,这位大前端架构师一定不能错过

今天给大家介绍一位好朋友:这波能反杀:一位拥有十年工作经验,对学习方法有独到理解的资深大前端架构师。一、博客早在 2017 年初,波神在简书平台以《前端基础进阶》为名,更新了一系列优质文章,获得大量认可…

memcached应用策略(转)

memcached应用策略(转)(2012-04-05 11:10:02) 转载▼标签: memcached 应用策略 it分类: linux_c memcached应用策略memcached 主要的作用是为减轻大访问量对数据库的冲击,所以一般的逻辑是首先从memcached中读取数据&a…

突然讨厌做前端,讨厌代码_为什么用户讨厌重新设计

突然讨厌做前端,讨厌代码重点 (Top highlight)The core of design thinking is to only design something that will bring value and fill the gap in consumer needs. Right? Why else would one design something that no one asked for? While that may be true to some …

那些年我面过的「六年经验」的初级工程师

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

更多信息请关注微信公众号_为什么我们更多地关注表面异常?

更多信息请关注微信公众号Don’t you feel lucky to find a single seasoned curly fry in your bunch of plain old boring french fries? Do you remember highlighting important texts of your study materials before the exams? Both situations might seem irrelevant…

eclipse中的汉字极小的解决方案(转载)

eclipse中的汉字极小的解决方案(转载) 可能新装了eclipse后,写java代码的时候发现,写注释的时候发现,汉字小的可怜,网上搜一下,又是改字体又是设置字体大小,试用后发现都不是针对这个的方法。 无奈在自己摸…

面试官经常问的观察者模式如何实现~

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

旅行者 问题_门槛项目:没有旅行者回到他的原籍城市。

旅行者 问题Sohini Mukherjee| MFA| Spring 2020Sohini Mukherjee | 外交部| 2020年Spring Artivive app to see the full Artivive应用程序可查看完整的#AR experience.#AR体验。 Prompt:提示: As second semester, first year graduate students, you are at a …

产品经理懂技术=流氓会武术(zz)

最近七年,我都在做互联网产品,其中前五年分别在创业公司和上市公司里,做别人的产品;近两年在创业,做自己的产品。 我的体会是:产品经理需要懂技术,创业者尤其需要。但前提是你总觉得有股憋不住的…

技术人的七大必备特质

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

figma下载_在Figma中进行原型制作的技巧和窍门

figma下载自定义过渡和微交互 (Custom transitions and micro-interactions) Yep, I know that there are a lot of useful built-in transition effects in Figma already, but here I want to talk about custom micro-interactions, complicated transitions and show you h…

不想当全栈的设计师不是_但我不想成为产品设计师

不想当全栈的设计师不是重点 (Top highlight)I’ve made a huge mistake, I thought to myself, as a realization washed over me in the middle of an interview for a product design role.我对自己想,我犯了一个巨大的错误,因为在接受产品设计职务的…

学习 WCF (6)--学习调用WCF服务的各种方法

来自:http://www.cnblogs.com/gaoweipeng/archive/2009/07/26/1528263.html 根据不同的情况,我们可以用不同的方法调用WCF服务,本文简单总结了一下调用WCF的一些方法(代理类,Ajax...),分享给大家。开发工具调用WCF 这中…

[科普文] Vue3 到底更新了什么?

Vue3 已经发布一段时间了,这个版本从底层实现到上层 API 设计都发生了非常大的变化,但具体改变了些什么呢?一起简单盘点下:一、Composition API使用传统的option配置方法写组件的时候问题,随着业务复杂度越来越高&…

ipados_如何设计具有最新iPadOS 14功能的出色iPad应用

ipadosWe all know that iPad Pro already has a seriously powerful computing power and that it’s possible to create meaningful stuff with Apple Pen.我们都知道iPad Pro已经具有强大的计算能力,并且可以使用Apple Pen创建有意义的东西。 But do we really…

67行JS代码实现队列取代数组,面试官刮目相看

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

ux和ui_我怎么知道UI / UX是否适合我?

ux和ui重点 (Top highlight)I’m super excited to be writing this as it’s the first official issue of Visual Q’s! If you don’t already know, this will be a monthly advice column for designers. If you join the newsletter, you’ll receive this before it goe…