You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.6 KiB
39 lines
1.6 KiB
9 years ago
|
---
|
||
|
|
category: 十大原则
|
||
|
|
order: 1
|
||
|
|
subtitle: Proximity
|
||
|
|
english: 亲密性
|
||
|
|
---
|
||
9 years ago
|
|
||
|
9 years ago
|
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
|
||
|
9 years ago
|
|
||
|
9 years ago
|
---
|
||
|
|
|
||
|
9 years ago
|
## 纵向间距关系
|
||
|
|
|
||
|
9 years ago
|
<img class="preview-img" align="right" alt="纵向间距示例" description="在 Ant Design 中，这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。" src="https://os.alipayobjects.com/rmsportal/blBCqHsUJhKxxAU.png">
|
||
|
9 years ago
|
|
||
|
9 years ago
|
通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。
|
||
|
|
|
||
|
9 years ago
|
<br>
|
||
|
|
|
||
|
|
<img class="preview-img" align="right" alt="增加元素示例" description="通过增加『分割线』来拉开层次。" src="https://os.alipayobjects.com/rmsportal/EWpTfSlQzueWlbp.png">
|
||
|
9 years ago
|
|
||
|
9 years ago
|
在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。
|
||
|
|
|
||
|
|
> 注：在 Ant Design 中，`y=8+8*n`。其中，`n>=0`，y 是纵向间距，8 是『基础间距』。
|
||
|
|
|
||
|
9 years ago
|
---
|
||
|
|
|
||
|
9 years ago
|
## 横向间距关系
|
||
|
|
|
||
|
9 years ago
|
<img class="preview-img" align="right" alt="组合排布示例" src="https://os.alipayobjects.com/rmsportal/LdomydjSKKlFhiv.png">
|
||
|
9 years ago
|
|
||
|
9 years ago
|
为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。
|
||
|
|
|
||
|
9 years ago
|
<br>
|
||
|
|
|
||
|
9 years ago
|
<img class="preview-img" align="right" alt="复选框内示例" src="https://os.alipayobjects.com/rmsportal/DxzQXtIEnFcFxGY.png">
|
||
|
9 years ago
|
|
||
|
9 years ago
|
在一个组件内部，元素的横向间距也应该有所不同。
|