3种方法创建视觉层次结构（三）

3、分组：邻近区域和公共区域

隐式的和显式分组有助于我们查看页面的骨骼或结构，并促使我们将注意力转移到屏幕上与目标有关的区域。如果没有分

组，将很难理解标准区域（例如导航，内容，广告）在哪里，因此，将很难弄清楚将注意力集中在哪里以及可以安全地忽略

哪些区域。例如，一旦用户识别出一个右栏编组，由于它与广告的关联，他们可能会忽略它。

Spotify：眼睛立即在此屏幕上看到3个不同的分组。组之间有意增加的间距使每个组分离并个性化。同样重

要的是，标题和相关内容之间的有意减少的空白。这种减小的间距在标题和内容之间创建了层次关系。

Shopify结帐表单字段：在良好的表单设计中，接近性原则显而易见。节标题和相关表单字段之间的最小空

白使关系变得清晰—它们属于同一类。每个字段块之间的空间也增加了，这进一步帮助了眼睛看到这种分层

的空间模式。还要注意两个“快速结帐”按钮周围的边界（公共区域原理的一个示例），这使它们与下面的结

帐表格分开。

分组的最佳做法：

• 留白。周围有更多空间的元素将被视为一个组，因此将受到更多关注。（如果组中包含许多元素，则注意力可能会分散在

其中。）考虑通过提供更多留白来强调设计中最重要的方面。

• 使用容器（卡片）。如果仅凭空白不足以创建层次结构的视觉提示，请添加边框或背景之类的额外元素。这些其他元素会

造成视觉混乱，因此请谨慎使用。