布局

产品布局是产品设计的骨架和基础，直接影响产品空间疏密度、实用性和美观度。合理优秀的布局结构，不仅可以使用户希望留在页面上，同时在信息浏览上有很好的引导作用，极大的减少用户的认知负荷。

画板尺寸

为了减少布局设定时的沟通与拆分计算成本，基于主流屏幕尺寸，我们建议设计师按照如下尺寸进行界面的设计。

	PC端	移动端
默认	1440 px	375 px（2倍图：750px）
有通栏Banner页面	1920 px	-

栅格系统

栅格是以规则的网格阵列来指导和规范网页中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。我们建议通过基础的 24 分栏，迅速简便地创建布局。

• 列（column）：列是假象的垂直块，用于对齐内容。通常使用百分比(%)或固定值定义列的宽度。列的宽度不是一个固定值时，如果栅格的宽度发生变化，则列的宽度也会相应地增大或缩小。
• 槽（gutter）：槽是列之间的间隔。槽用来分隔内容。通常槽的宽度为固定值，默认为 16px。
• 安全边距（margin）：安全边距是内容和屏幕边缘之间的间隔。通常为固定宽度，用来定义在所有尺寸屏幕下最小的呼吸空间。中侧边距的默认值为 24px，也可根据实际情况确定取值，建议使用 8 的倍数。

8、12、16 和 24是响应式布局中最常见的列结构。在栅格中放置内容区块时，内容区块的位置应该从列开始，到列结束。

间距

为了页面布局的一致性，在不同区域中放置内容元素时，应当保持间距的规律性。我们推荐了一组具有韵律的间距值，在遵循 8 倍数原则的基础上，增加了 4、12 两档小间距，以灵活满足不同的应用场景。

响应式布局

断点系统

在栅格中，如果只使用一种内容布局方式，有时无法较好地适配各种尺寸的显示设备。此时可以使用响应式栅格，通过设置一系列断点（即布局变化的临界点）实现布局的切换。

基于不同显示设备，我们通常建议设置 3 个断点，可同时兼顾PC及平板端设备的需要，并考虑不同浏览器的特性差异，使栅格系统更好地适配主流的电脑显示器和浏览器。实际使用中，可依据业务需求选取其中的部分断点，也可以适当使用自定义断点。

注意：在 Safari 浏览器中，纵向滚动条的出现和消失，会导致相应式判断所依据的宽度值发生变化，如果此时宽度值恰好在断点附近，可能会导致布局出现非预期的改变。因此，对于 PC 端，并没有直接将主流的屏幕宽度用作断点值，而是下调了一定宽度，以规避滚动条的影响。