布局先于你开口

大脑如何在你解释之前就组织好你的布局

布局先于你开口

要点速览： 格式塔原则意味着用户在阅读内容之前先读取结构。间距、对齐、相似性和分组已经在他们阅读任何文字之前就告诉了他们什么属于一起，什么最重要。

在任何人阅读一个字之前，大脑就已经开始组织屏幕了。它已经在决定什么属于一起、什么最重要、先看什么。不是因为标签文字、文案或字体选择。而是因为事物的位置、它们之间的距离、以及它们看起来是否属于同一组。在你的解释有机会发挥作用之前，结构就已经开始形成了。

许多设计师仍然将布局视为一种视觉偏好，仿佛东西放在一起是因为看起来顺眼，而不是因为亲近感告诉用户它们属于一起。模式被打破，却没有人注意到这里原本存在一个模式。布局最终在做没有人明确分配给它的工作，并传递着没有人意图发送的信号。

我见过设计师花数小时修改文案，而间距早已在讲述错误的故事。

大脑先分组

二十世纪初，一群德国心理学家记录了一个看似显而易见的事实：感知不是被动的。在有意识的注意介入之前，大脑已经在分组、分离和排序了。

马克斯·韦特海默于1923年发表了奠基性的工作。他研究了一个简单的问题：人们如何感知点的分组。他们不是先看到单个点，然后推理出模式。他们立即看到了聚类和关系。点之间的间距改变了哪些点感觉相关。匹配的形状将元素拉入集合。这些都不需要指导。它就这样发生了。韦特海默的观点是，这些分组不是仔细的解释。它们是感知本身的一部分，即使人们知道发生了什么，也无法简单地覆盖它们。

库尔特·科夫卡这样说道：

整体不同于部分之和。 — 库尔特·科夫卡

不是更好，只是不同。感知到的布局与组装出来的布局不是同一回事。被分组在一起的东西会被一起处理。被分开的东西会被分开处理。没有设计师发明了这个。这只是人们组织所见事物的方式。如果你理解这一点，你可以利用它。如果你不理解，这些信号仍然存在。你只是在盲目地发送它们。

间距告诉人们什么适合放在一起

在界面设计中，亲近感通常是首先被感知到的。彼此靠近的元素被感知为一个组，这发生在用户有意识地做出任何决定之前。

将标签和输入框放在一起，用户会将它们视为一个单元。将它们推开，关系就变得不那么明确。当表单中的间距不一致时，用户必须在每一行弄清楚"哪个标签属于哪个字段"。内容没有改变，但工作量增加了。你增加了摩擦，而你改变的只是一点边距。一个混乱的账单表单在技术上没有任何字段出错之前，就可能让人感觉有问题。

相似性与亲近感相配。具有相同颜色、形状、大小或粗细的元素感觉像是同一类别的成员。这就是为什么一致的按钮样式超越美观很重要。当每个主要操作都使用相同的处理方式时，用户学会如何在你的产品中标记该操作。打破一次模式——在这个弹窗中使用不同的颜色，或在那个屏幕上使用不同的大小——这个习得的模式就会随之打破。用户不再确定首先应该关注什么。随之而来的停顿往往来自不一致性，而不是文案。

连续性、闭合性和共同命运也很重要。连续性帮助解释为什么接近对齐可能比刻意的断裂感觉更糟。眼睛沿着一条线走，直到有东西打断它。闭合性帮助解释为什么几乎对齐的按钮可能比明显偏离的按钮花费更多注意力；大脑试图将其对齐到位，并注意到偏差。共同命运解释了为什么动画可以改变分组。一起移动的元素会被视为一个单元，无论你是否有意为之。

谷歌很好地展示了这一点

谷歌搜索页面很有用，因为你可以清楚地看到这些效果。

每个结果由三个元素组成：标题、URL、摘要。它们之间紧密的垂直间距将三者组合成一个感知单元，在用户阅读任何内容之前就已完成。结果之间的间距将每个单元与下一个分开。用户不需要停下来决定"这个标题属于这个摘要"。亲近感已经在处理这个问题了。他们只是在阅读。这是许多设计评审错过的部分。人们在阅读文字之前就已经在阅读分组了。

多年来，对该页面的眼动追踪研究表明，用户能够比阅读标记广告的小标签更快地将广告与自然搜索结果分类。标签仍然重要，但亲近感和相似性已经完成了部分工作。广告聚类的视觉模式与自然聚类不同，人们在能够清晰解释之前就察觉到了这种差异。

页面的左边缘做了一些更安静的事情。标题对齐到一致的垂直轴上。一旦眼睛在第一个结果上找到这个轴，它就会沿着页面向下走，而不需要寻找下一个。去掉对齐，用户就必须独立定位每个结果，而不是流畅地浏览。页面上没有任何东西需要解释这一点。布局已经做到了。

先检查结构

在屏幕发布之前，问一个问题：在任何人阅读任何内容之前，这个布局在说什么？不要问它看起来怎么样。问它说了什么。哪些元素适合放在一起？什么先出现？眼睛接下来看向哪里？遮住文字，问某人这个页面是关于什么的，哪些东西是相关的，首先应该做什么。如果他们仅凭视觉结构无法回答，更多的内容也无法解决这个问题。分组是错误的。当屏幕看起来很精致时，我仍然会发现自己错过这一点。

沃尔夫冈·苛勒、马克斯·韦特海默和库尔特·科夫卡试图理解感知。他们最终描述了设计师每天都在处理的东西。我在我自己的工作中也错过过这一点。屏幕看起来很干净，所以我假设它是清晰的。

你发布的屏幕不完全是用户看到的屏幕。他们看到的是他们的大脑从屏幕上构建的结构。你可以引导那个结构，但你无法选择退出。

参考资料

← 上一篇 下一篇 →