Proximity, Grouping, Hierarchy 

组合，距离与层级组织原则

在设计的呈现中，相关的项应该组织在一起。移动这些项，使得它们的物理位置相互靠近，它们将被看作凝聚为一体的一个组，而不是一堆彼此无关的片段。反之，彼此无关联的项应该给予一定的距离。

例子1-1 名片设计

设计A 你看到多少个单独的元素？你的眼睛需要停下来多少次才能看全信息？（答案：5次） 设计B 现在有两个元素都是粗体，从哪里开始读？（粗体吸引了注意力） 设计C 你现在的阅读顺序是怎样的？（答案：上到下）

设计C 通过合理的距离安排，使得这张名片不论从理解上还是视觉上看都变得更有条理。

例子1-2 卡片设计

设计A 信息堆叠在一起，两颗心非常显眼 设计B 元素重新组合，同时字体做了一些改变

例子1-3 读书会海报

两个设计，右面的设计使信息的层级更加清晰

创建广告传单，宣传册等信息图时，你很清楚其中哪些信息在逻辑上存在关联，知道哪些信息应该强调。你可以通过分组形象地表现这种信息。

例子1-4 清单

两个列表，右边的设计通过增加元素间的空白来形成多个组

上面的例子中，在一个组内的项目行距是相同的而且比组间行距短，这样便体现了组。

例子1-5 读书会宣传

两个设计，左图的每段文字和标题疏离

在左边的设计，每个标题和段落间的间距是一样的，这就使得它们看上去是孤立的，没有关联的项。右边的设计则通过缩小行距和左对齐取消了段落内部的空白，使段落组织更合理，页面看上去有更多的空间。

例子1-6 菜单设计

设计A 在这个设计，所有的信息被堆在了一起 设计B 调整了标题，菜名，正文的字体类型，大小和样式，元素的间距也适当调整 设计C 通过调整缩进，让多出来的空间定义了两个不同的组（开胃小吃和前菜） 设计D 重新选择了菜品描述字体，弱化了其层级。同时价格右对齐使得比较价格更为容易

Proximity, Grouping, Hierarchy 组合，距离与层级原则小结

1） 设计中的元素不应该是孤立的，应该将彼此存在关联的元素组合成一个个视觉单元。

2） 要有意识地注意到用户的阅读顺序：整个过程应该是合理的，有确定的开始，确定的结束。

3） 根本目的是实现组织性，提高可读性和视觉合理性。

参考资料

[1] Robin Williams, The Non-Designer's design book (4th Edition), Chapter 2. Proximity Principle.