关于后台网站

发工具与关键技术：后台网站

作者：成东平

撰写时间：2019年4月28日

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

1.纵向间距关系：通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。

纵向间距示例：在Ant
Design - A UI Design Language中，这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。

在这三种规格不合适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。注：在Ant Design中，y=8+8*n。其中，n＞=0，y是纵向间距，8是『基础间距』。

增加元素示例：通过增加『分割线』来拉开层次。

2.横向间距关系：为了适用不同尺寸的屏幕，在横向采用栅格化布局来排布组件，从而保证布局的灵活性。

组合排布示例。

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