第二章 亲密性

1. 将相关项组织在一起，使它们的物理位置相互靠近, 相关的项将被看作一组.
   
2. 某些信息项或组彼此之间并无关联，这些元素就不应靠近
   

这样就能为读者提供一个直观的提示，使读者马上了解页面的组织和内容。

一种很典型的名片布局：

• 在这张名片上你能看到多少个单独的元素？
  
• 你的眼睛要停下来多少次才能看全这张名片上的所有信息？
  

• 你的眼睛是不是停过 5 次？因为名片上放置了 5 项孤立的内容
  
• 你是从哪里开始看这张名片的？可能中间，因为中间的短句字体最粗
  
• 接下来你看向了什么？是不是按从左向右的顺序读？（因为英语是从左向右阅读的。）
  
• 如果已经读完名片。你是不是再巡视一番，确保自己没有遗漏？
  

把这张名片再改得烂一点

• 有两个元素都是粗体，你又该从哪里开始看？左上角？中间？
  

---

现在我们用亲密性原则改造这个名片: 把相关的元素分在一组

布局的时候一定要明确元素和其所属元属是否在一起

将类似的项归为一组来建立亲密性时，有时需要修改，如:

• 调整文本的大小、字体粗细
  
• 改变图片的大小或位置
  
• 正文的字号不一定非得是 12 磅
  
• 期号和新闻简报发行年份等正文的辅助信息，可以占据相当小的位置。
  

这明信片没有任何东西能吸引你来看一看正文，除了那两颗心。可能需要一分钟你才能找到真正重要的信息。

不用改变很多，只要把有关联的元素放在一起，然后在不同单元间增加合适的空间，就让信息变得更直观。

训练你的设计师之眼：找到至少 8 个让修改后的例子看起来更加专业的地方

1. 标题更大。
   
2. 其他部分的字更小。
   
3. 三种服务列在独立的三行。
   
4. 把相关元素集中在一起。
   
5. 把邮箱和网址的字母大写，让它们更易读。
   
6. 去掉多余的心形。
   
7. 把心形颜色变浅，不要让它和文字争夺注意力。
   
8. 去掉 available 这个词。
   
9. 把心形放大，让它和文本重叠融为一体。