最近朋友买了本 Robin Williams 写的《The Non-Designer‘s Design Book》中文版，本书是关于排版设计，主要是在印刷业产品设计原则，不过我觉得其中很多理论完全可以运用到网页设计中，之前有些过什么是好的用户设计，其中很多原则是一致的。
Robin 的亲密性原则是指：将相关的项组织在一起，移动这些项，使他们的物理位置相互靠近，这样一来，相关的项将被看作凝聚为一体的一个组，而不再是一堆无关的段。
如果某些信息项或组彼此之间没有相关性，这些元素就不应该放在一起，这样就能够给用户提供一个直观的提示，使用户马上了解页面的组织和内容。

组织相关元素

亲密原则之一是空白的使用，一个网站可以有很多空白，但是如果这些元素不能很好的组织在一起，那么用户会感觉很混乱，正如下面的对比图片所示。

左边图片中虽然使用的很多空白，但是各个元素在逻辑上并无关联，整个 Card 逻辑上无组织，所以这个设计并不好；再看右边的 Card，其中名字与地址紧密的结合在一起，他们就成为一个视觉单一，给人一种他们之间有所关联的感觉。所以整体来说：把相关的元素分在一组，使他们建立更近的亲密性。

建立视觉层次结构

通过留白和群组是网页层次架构中很重要的因素，当然，网站中的层次结构是也是基本的网页亲密性表现

网页中通过组和子组来说明其层次结构，层次让人知道你所处的位置，以及你想到达的地方，同时也能使网站内容重点突出，从下面的例子我们可以看到层次带来的好处。

图示中左侧一列使用阶层+空白相结合的方式来增加相关元素之间的相关性，用户很容易区分不同的内容；而右边的一列，你能一眼区分它们哪些元素是相关的么？我想应该不容易吧！

页面布局更容易浏览或阅读

通过留白、逻辑分组、层次化结构可以使得页面更易读，这对于 Blog 设计来说是非常重要的一点。

比如，Header 中应该让用户很容易的浏览到重要的内容，而不是杂乱的把各种功能都放置在这里，下面以Los Angeles Times 和 Globe and Mail 对比来看。

总体来看，整个网站通过色彩和布局来实现给人愉悦感官的效果，不仅这样，整个网页布局很好的区分了不同的关联组，比如，Header 中 Logo 以大字体来展示，突出其品牌效应，而相应其下采用黑色背景白色字体的导航栏，遥相呼应，再次其上之信息也采用恰当的分组，不会让用户困惑，不知道这个元素属于哪一个组。再看看下面的网站：

Globe and Mail 网站有一个复杂的 Header，从左到右你可以看到四个组通过竖线来区分，但第一个虚线感觉没有任何意义，如果能够拿掉可能还会更好。而且在内容没有符合设计亲密性原则，让人不知道如何选择。

总结

1. 亲密性的根本目的：实现组织性。尽管其他原则也能达到这个目的，不过利用亲密性原则只需要简单的将相关的元素分组，就能自动的实现条理性和组织性。如果信息很有条理，将更容易阅读，或者记忆，此外，利用亲密性原则，还能够很好的利用空白。

2. 如何实现：微微眯起你的眼睛，统计你的眼睛停顿的次数来数一数页面上有多少个元素。如果页面上的想超过3-5个，就要看看哪些孤立元素可以归在一组建立更近的亲密性，使之成为一个视觉单元。

3.要避免的问题：

• 不要仅仅因为有空白就把元素放在角落或中央
• 避免一个页面上有太多的孤立元素
• 不要在元素中央留出同样大小的空白，除非各组属于同一个子集
• 标题、子标题、图标标题、图片能否归入其相关资料？在这个问题上一定要非常清楚，在有很近亲密性的元素之间建立关联。
• 不属于同一组之间的元素不要建立关系！如果元素彼此无关，把他们分开！

进一步阅读：

• Design Basics: The Proximity Principle
• How C.R.A.P. Is Your Site Design?
• Using Grouping in Web Page Layouts