Web设计师应遵循的高效设计原则之四：亲密性

主要针对酒店行业和联邦政府进行Web开发的Ryan Boudreaux针对四大设计原则写了一系列文章，本文为最后一篇《Effective design principles for web designers: Proximity》的译文，内容如下：

“亲密性”是“Web设计者应遵循的高效设计原则”中的最后一个。引导用户顺利浏览网站，合理使用空白间隔，把相似的内容放在一起，提供清晰的结构是“亲密性”设计标准的所有内容。

间隔与关联

图1

Web设计的亲密性，即把相似或相关的元素组织在一起，对不相关或不相似的元素进行分离。

当元素之间发生重叠或接触，那最上层的元素就会获得主要的注意力。观看图1，你是否首先注意到“Proximity”这一部分？你的眼睛首先会被紫色部分吸引，之后向上移动从左扫描其它部分吗？如果附近的其它元素与之形成鲜明对比，那么重叠的元素就会立刻“黯然失色”。同样，多个元素紧密地靠拢在一起，有鲜明对比的元素就会凸显出来。在亲密和对比之间取得平衡，甚至调整这两个原则可以获得不同的结果。看图2，你的眼睛首先会被哪一部分吸引。你会首先注意到“Repetition”这部分吗？

图2

相对于与其相近的元素，每个元素都有一个“重力极”（gravitational pole），一个元素与另一个元素的亲密程度也会影响到它的权重。正如地球的引力可以影响月球的运转轨迹一样，页面中的元素相对彼此的位置会影响到它及其他元素的权重。

空白区域

另一个“亲密性”元素即Web页面中空白区域。利用“外边距”（margin）来分隔每个元素，内边距用来平衡内容与空白区域。一般来讲，太多的留白，会使网页看起来不正规，给人一种缺少内容的感觉。当然，如果你的设计要求具有艺术效果，突出开放空间，以达到吸引人的目的，那就这样去做吧。

亲密性与排版

上文讨论了太多空白区域所带来的消极影响，但内容过于紧密同样会使网页看起来杂乱而拥挤。一般来讲，恰当的空白区域更具有吸引力，更让人舒服。下面两个案例展示了空白区域的两个极端，图3中的空白区域太多，而图4中的空白区域太少。

图3

图4

直观的内容流会在空白区域与排版元素（由文本内容组成）之间达成一种平衡。图5是一个IT课程列表，我们试着对该列表进行调整，使它更适宜阅读。

图5

现在，看看图6中所展示的相同内容的列表。每个逻辑组之间通过合适的空白进行分隔，每个组都由大标题及无序的列表项组成。

图6

第二个列表将内容划分为几部分，每个子部分包括相应的课程列表；每组课程列表与相关的子部分的标题有亲密关系。

利用间隔、排顺、大小、关联、颜色及空白区域和排版元素的划分，“亲密性”设计原则可以我们帮助组织页面中的内容元素。

原文链接：Effective design principles for web designers: Proximity

CSDN链接：http://www.csdn.net/article/2012-09-05/2809588-effective-design-principles-proximity

相关链接：

Web设计师应遵循的高效设计原则之一：对比

Web设计师应遵循的高效设计原则之二：重复

Web设计师应遵循的高效设计原则之三：对齐