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的文章中的一個很好的例子：

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

另一個讓我有些困惑的例子是FedEx徽標。 你看到箭頭了嗎？

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。

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”的出現。 它會自動完成！ 整齊。

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?

您偶爾會以表格形式看到此原理。 請注意，此框被標簽打斷。 但是您仍然知道這是一個盒子，不是嗎？

共同的命運 (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來解釋它。 這些小貓中哪些不屬于該組？

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時可以分辨出誰屬于哪個幫派的方法。 否則，只是一群呆呆的家伙，穿著牛仔布和皮革站著，偶爾有袖子。

這樣做是為了“有趣”的 (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.

如果使用不正確，會更容易看到。 就像在此符號中一樣，文本行彼此相鄰將導致不必要的關聯。

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.

幾乎每個人都看到過這樣的形式。

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.

這就是設計師對間距非常具體的原因。 看看在這種情況下它有多清晰。 零歧義是零，這都是由于幾個像素的偏移。

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

在代碼中，可以看到方便使用的另一個領域。 快速：您想調試哪個？

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?

看一下這個完全正常的籃球比賽。 在所有這些混亂情況下，您如何分辨誰在哪個團隊中？

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.

在信息設計中，它有多種用途，但最重要的是作為識別對象類型的輔助工具。 這可以在“全局”級別和“本地”級別上工作。

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.

在本地級別，設計師可以在自己的產品中建立模式。 例如，在我工作的地方，我們的過濾器當前看起來像這樣。 因此，只要有用戶進入我們的圍墻，他們都將能夠識別出藍色氣泡內的藍色文本，這意味著他們可以過濾東西。

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。 例如，經常使用一些紅色陰影來傳達危險或警告，或者發生了某種錯誤，您需要從那里繼續。

延續性 (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 。 我們的大腦將沿著輪廓的東西組合在一起 。 這也許不太容易理解。 面對此圖像，大多數人會得出結論：有一排點與另一排點相交。

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.

這是工作的延續。 我們假設點組沿著輪廓，即使這也可能是點更像是兩個毛毛蟲撞擊腹部的情況。

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”中找到。 你不忘了嗎

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原理來傳達這些嵌套塊的開始和結束位置。

在實踐中 (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.

通常，我指出的第一個錯誤是最明顯的錯誤，這與鄰近性原則有關。

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.

他的第二個錯誤是相似性 。 在此代碼段中查看日期 。

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.

招聘人員在檢查自己的簡歷時通常會嘗試了解他們的時間表，這有助于將日期識別為日期。 最好的方法是將它們全部格式化。 它們也都應該在同一條線上。 這使我想到了尼克所犯的下一個錯誤：具有連續性的錯誤。

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. 🙏

好吧，我現在讓尼克一個人呆著。 但是，下一次設計人員要煩惱幾個像素的間距或某些文本格式時，請記住此簡歷設計有多糟糕。 我們希望盡可能少地將其投放到世界上，這是設計師工作的一部分。 請忍受我們。 🙏