2016-03-31 14:17:09 +08:00
---
2022-11-09 12:28:04 +08:00
group: 设计模式
2019-12-26 15:27:52 +08:00
type: 原则
2016-03-31 14:17:09 +08:00
order: 1
2016-09-21 11:28:38 +08:00
title: 亲密性
2016-03-31 14:17:09 +08:00
---
2016-03-08 17:02:45 +08:00
2016-03-14 15:01:00 +08:00
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
2016-03-08 17:02:45 +08:00
2016-03-11 16:00:51 +08:00
---
2016-03-08 17:02:45 +08:00
## 纵向间距关系
2018-01-02 22:22:14 +08:00
< img class = "preview-img" align = "right" alt = "纵向间距示例" description = "在 Ant Design 中， ： （ ） （ ） （ ） src = "https://gw.alipayobjects.com/zos/rmsportal/goazWUHPXsGEDFIGsNlm.png" >
2016-03-08 17:45:19 +08:00
2021-01-21 10:52:00 +08:00
通过「小号间距」、「中号间距」、「大号间距」这三种规格来划分信息层次结构。
2016-03-08 17:02:45 +08:00
2016-03-08 21:03:05 +08:00
< br >
2019-12-28 11:57:41 +08:00
< img class = "preview-img" align = "right" alt = "增加元素示例" description = "通过增加「分割线」来拉开层次。" src = "https://gw.alipayobjects.com/zos/rmsportal/XNFCsupiYDBTJFQkmOmv.png" >
2016-03-08 17:45:19 +08:00
2019-12-28 11:57:41 +08:00
在这三种规格不适用的情况下，可以通过加减「基础间距」的倍数，或者增加元素来拉开信息层次。
2016-03-08 17:02:45 +08:00
2019-12-28 11:57:41 +08:00
> 注：在 Ant Design 中，`y = 8 + 8 * n`。其中，`n >= 0`， ，
2016-03-08 17:02:45 +08:00
2016-03-11 16:00:51 +08:00
---
2016-03-08 17:02:45 +08:00
## 横向间距关系
2018-01-02 22:22:14 +08:00
< img class = "preview-img" align = "right" alt = "组合排布示例" src = "https://gw.alipayobjects.com/zos/rmsportal/uYvsqAUXNaqURGIhZhxz.png" >
2016-03-08 17:45:19 +08:00
2016-03-08 17:02:45 +08:00
为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。
2016-03-08 21:03:05 +08:00
< br >
2018-01-02 22:22:14 +08:00
< img class = "preview-img" align = "right" alt = "复选框内示例" src = "https://gw.alipayobjects.com/zos/rmsportal/ysXfdKqmdDRAimBiKVGS.png" >
2016-03-08 17:45:19 +08:00
2016-03-08 17:02:45 +08:00
在一个组件内部，元素的横向间距也应该有所不同。
