ant-design/docs/spec/proximity.zh-CN.md
黑雨 2b947d0480
docs: preview images in markdown (#39739)
* feat: site previewImage

* feat: site previewImage

* feat: use image

* feat: update doc

* feat: delete align="right"

* feat: update doc

* feat: delete css

* feat: update doc

* feat: delete align="right"

* feat: update doc
2022-12-24 18:11:43 +08:00

1.6 KiB
Raw Blame History

group type order title
设计模式 原则 1 亲密性

如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元;反之,则它们的距离就应该越远,也越像多个视觉单元。亲密性的根本目的是实现组织性,让用户对页面结构和信息层次一目了然。


纵向间距关系

纵向间距示例

通过「小号间距」、「中号间距」、「大号间距」这三种规格来划分信息层次结构。


增加元素示例

在这三种规格不适用的情况下,可以通过加减「基础间距」的倍数,或者增加元素来拉开信息层次。

注:在 Ant Design 中,y = 8 + 8 * n。其中,n >= 0y 是纵向间距8 是「基础间距」。


横向间距关系

组合排布示例

为了适用不同尺寸的屏幕,在横向采用栅格布局来排布组件,从而保证布局的灵活性。


复选框内示例

在一个组件内部,元素的横向间距也应该有所不同。