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