ant-design/docs/spec/proximity.zh-CN.md

38 lines
1.6 KiB
Markdown
Raw Normal View History

2016-03-31 14:17:09 +08:00
---
category: 十大原则
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
## 纵向间距关系
2016-03-14 16:31:42 +08:00
<img class="preview-img" align="right" alt="纵向间距示例" description="在 Ant Design 中这三种规格分别为8px小号间距、16px中号间距、24px大号间距。" src="https://os.alipayobjects.com/rmsportal/blBCqHsUJhKxxAU.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>
<img class="preview-img" align="right" alt="增加元素示例" description="通过增加『分割线』来拉开层次。" src="https://os.alipayobjects.com/rmsportal/EWpTfSlQzueWlbp.png">
2016-03-08 17:45:19 +08:00
2016-03-08 17:02:45 +08:00
在这三种规格不适用的情况下,可以通过加减『基础间距』的倍数,或者增加元素来拉开信息层次。
> 注:在 Ant Design 中,`y=8+8*n`。其中,`n>=0`y 是纵向间距8 是『基础间距』。
2016-03-11 16:00:51 +08:00
---
2016-03-08 17:02:45 +08:00
## 横向间距关系
2016-03-11 16:00:51 +08:00
<img class="preview-img" align="right" alt="组合排布示例" src="https://os.alipayobjects.com/rmsportal/LdomydjSKKlFhiv.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>
2016-03-11 16:00:51 +08:00
<img class="preview-img" align="right" alt="复选框内示例" src="https://os.alipayobjects.com/rmsportal/DxzQXtIEnFcFxGY.png">
2016-03-08 17:45:19 +08:00
2016-03-08 17:02:45 +08:00
在一个组件内部,元素的横向间距也应该有所不同。