4.3 UI设计之邻近原则

4.3 UI设计之邻近原则

本文章属于《跟我学线框图》系列教程，转载请注明出处。

邻近原则是通过把物品放在彼此附近来建立它们之间的关系。

反之亦然。彼此相距遥远的物体被认为是不相关的。

我们从人类心理学中知道我们如何感知相关性。这就是所谓的格式塔分组原则。我们可以在界面设计中利用这一点。

何时使用邻近原则

当您希望使用相似性来帮助用户时，邻近原则可能会有所帮助。对功能相似的项进行分组，可以帮助它们找到相关的操作。

此示例的应用程序在工具栏中创建了一组按钮。这是 Keynote 工具栏的线框图。第一个分组用于文档级别的操作，如查看、缩放和添加新的幻灯片，第二个分组用于展示功能，第三个分组用于插入内容等。以这种方式对它们进行分组可以帮助用户回忆起功能相似的按钮。

当我们希望内容部分清晰时，我们可以将它们分开，以显示它们是不相关的。

在下面的网站线框图中，注意在顶部有一些重要的信息，包括这个网站希望用户采取的一些重要行动的按钮。然后在屏幕底部还有一些更重要但更密集的信息。但是注意中间用边框线分隔的较小的文本。这显然是一个不那么重要的功能，所以网站决定将其与其他部分分开。

在这种情况下，接邻近原则是有用的，因为它给了用户一些帮助。在某些情况下，比如上面的线框图的感言块，它可能有助于让一些东西一目了然，但然后引导他们走向更实质性的信息块。

如何使用邻近原则

我们已经在上面的例子中看到，使用邻近可以帮助组织界面中的信息。

为了有效地使用邻近原则，请确保在组之间使用足够的空白。让我们回到一个更加充实的客户信息表单例子。

通过 启用复选框、提交按钮和帮助提示，表单中的信息更加密集。

我们通过改变标题的字体大小或粗体来加强对比，以帮助区分表单的各个部分。但是还有很多事情要做。

表单填写起来非常单调乏味，所以我们可以做得更好，让用户更容易填写。

这里是邻近原则真正有用的地方。我们可以将相关的表单字段组合在一起，并添加空格来分隔不相关的组。

这样更容易理解，而且用户可以清楚地知道什么时候填写完一组字段，这样他们就可以暂停下来继续下一个字段。

随着时间的推移，你将会看到邻近原则是如何在其他地方使用的。

当你想知道如何判断接近的对象是足够的，尝试眯眼测试。从屏幕上移开，眯着眼睛模糊你的视线观察分组是否明确。

如果您能够检测到在执行此操作时信息集合中的信息是分离的，那么您就知道邻近距离是有效的。如果两个组之间的空间太小以至于无法辨认，可以尝试在两个组之间添加更多的空间。