章节 20

布局比你先开口

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

还没读一个字，大脑就已经开始组织屏幕上的东西。它已经在决定哪些属于一组，什么最重要，以及先看哪里。不是因为标签文字、文案或字体选择。而是因为东西放在哪里，彼此相隔多远，以及看起来是不是属于同一组。你的解释还没机会出场，结构就已经开始形成。

很多设计师仍然把布局当作视觉偏好，好像东西放得近是因为这样好看，而不是因为接近本身就在告诉用户，它们属于一组。模式被打破了，却没人注意到那里原本就有模式。结果，布局做起了没人明确交给它的工作，发出了原本没人打算传达的信号。

我见过设计师花好几个小时修改文案，可间距早就在讲一个错误的故事。

大脑先分组

20 世纪初，一群德国心理学家记录下了一件一旦看到就觉得显而易见的事：知觉并不是被动的。有意识的注意还没介入，头脑就已经开始分组、分隔和排序。

Max Wertheimer在 1923 年发表了奠基性的研究。他观察的是很简单的东西：人们如何感知点的分组。他们不是先看到一个个独立的点，再推理出模式。他们立刻就看到了群组和关系。点之间的间距，会改变哪些点让人觉得相关。相同的形状，会把元素归成一组。这一切都不需要指导。它就这么发生了。Wertheimer 想说的是，这些分组并不是仔细解读后的结果。它们就是知觉本身的一部分，即使人们知道发生了什么，也不能轻易把它推翻。

Kurt Koffka是这样说的：

整体不同于各部分之和。
— Kurt Koffka · 译自英语

不是更好。只是不同。人们感知到的布局，与拼装出来的布局，并不是同一个东西。被归为一组的，会被一起处理。分开的，会被分开处理。这不是哪个设计师发明的。这就是人们组织所见之物的方式。理解了，就能顺着它设计。不理解，线索也仍然在那里。你只是在盲目地发送它们。

间距告诉人们什么属于一组

在界面设计里，接近性通常是你最先感受到的原则。彼此靠近的元素会被看作一组，而这发生在用户有意识地作出任何决定之前。

把标签和输入框放近一点，用户就会把它们看作一个单元。拉开距离，关系就没那么清楚了。当一张表单的间距不一致，用户每看一行，都得弄明白“哪个标签对应哪个字段”。内容没变，付出的努力却变了。你只是改了一点外边距，就增加了阻力。一张杂乱的账单表单，即使技术上没有任何字段出错，也会先让人觉得它坏了。

相似性和接近性相互配合。颜色、形状、大小或视觉重量相同的元素，会让人觉得属于同一类别。所以，一致的按钮样式不只是审美问题。每个主要操作都采用相同处理，用户就会学会你的产品如何标记这类操作。只要打破一次模式，在这个模态窗口里换一种颜色，或在那个界面里换一个大小，学会的模式也会跟着断掉。用户不再确定先该点什么。接下来的停顿，往往来自不一致，而不是文案。

连续性、闭合性和共同命运也很重要。连续性有助于解释，为什么差一点对齐有时比刻意错开更让人难受。视线会沿着一条线移动，直到被某个东西打断。闭合性有助于解释，为什么一个差一点对齐的按钮，会比明显偏离轴线的按钮消耗更多注意力：大脑试着把它归位，却注意到了偏差。共同命运解释了为什么动画能改变分组。一起移动的元素会被视作一个单元，无论你是不是这个意思。

Google 展示得很清楚

Google 搜索页面是个有用的例子，因为你能清楚看到这些效果。

每条结果都有三个元素：标题、URL、摘要。它们之间紧凑的垂直间距，让人还没读任何内容，就已经把三者感知为一个单元。结果之间的间隔，又把每个单元和下一个分开。用户不会停下来判断“这个标题对应这段摘要”。接近性已经在处理这件事了。他们直接读就好。很多设计评审忽略的就是这一点。人们读文字之前，就已经在读分组。

多年来，对这个页面的眼动追踪研究表明，用户区分广告和自然搜索结果的速度，可能比读出那个标明广告的小标签还快。标签仍然重要，但接近性和相似性已经完成了一部分工作。一组广告和一组自然搜索结果的视觉模式不同，而人们在能清楚解释差异之前，就已经捕捉到了它。

页面左侧做了一件更安静的事。标题沿着一条一致的垂直轴线对齐。视线在第一条结果上找到这条轴线后，就会顺着它向下，而不用逐个寻找下一条。去掉对齐，用户就得单独定位每条结果，而不是顺畅地看过去。页面上不需要再加任何解释。布局已经说清楚了。

先检查结构

在一个界面发布之前，问一个问题：还没人读任何内容时，这个布局已经在说什么？不要问它看起来怎样。问它在表达什么。哪些元素属于一组？什么排在前面？视线接下来去哪里？遮住文字，问一个人：这个页面在讲什么，哪些东西互相关联，首先该做什么？如果只凭视觉结构答不上来，再多内容也修不好。分组出了问题。一个界面看起来很精致时，我仍然会发现自己忽略了这一点。

Wolfgang Köhler、Max Wertheimer和 Kurt Koffka当时想理解的是知觉。最终，他们描述了设计师每天都在处理的事情。我在自己的工作中也漏看过这一点。一个界面看起来干净，我就以为它很清楚。

你发布的界面，并不完全是用户看到的界面。他们看到的，是大脑据此建立的结构。你可以引导这个结构，但你无法选择不参与。