布局 #

空间布局是体系化视觉设计的起点，和传统的平面设计的不同之处在于，UI 界面的布局空间要基于「动态、体系化」的角度出发展开。我们受到建筑界大师柯布西耶的模度思想的启发，基于「秩序之美」的原则，探索 UI 设计中的动态空间秩序，形成了 TPower Design 的界面布局方式，为设计者构筑具备理性之美的布局空间创造了条件。

在中后台视觉体系中定义布局系统，我们建议从 5 个方面出发：

1. 画板尺寸
2. 适配方案
3. 栅格
4. 响应式断点

画板尺寸 #

为了减少布局设定时的沟通与拆分计算成本，基于主流屏幕尺寸，我们将设计团队的标准画板宽度定为 1280px 或 1920px。

适配方案 #

在设计过程中，设计师还需要建立适配的概念，根据具体情况判断系统是否需要进行适配，以及哪些区块需要考虑动态布局。据统计，使用中台系统的用户的主流分辨率主要为 1920、1440 和 1360，个别系统还存在 1280 的显示设备。

一、左右布局的适配方案 #

在中后台系统中，我们通过Flex来实现左右布局的方式。左右布局的设计方式，能够让用户在不同的屏幕尺寸下，都能正常地浏览和操作系统。

二、上下布局的适配方案 #

常被用于上下布局的设计方案中，做法是对两边留白区域进行最小值的定义，当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。

这里提及的只是非常简单的两种适配的思路，实际设计中一套完美的适配方案需要设计师具备前端视角、平面构图视角以及交互视角。

栅格 #

网格基数 #

网格基数是栅格系统中的基本网格单位。栅格化之前先定义网格基数尤其重要，一方面规范设计，指导版式设计与内容布局，辅助规范页面元素对齐和间距设定；另一方面节省设计开发沟通的时间。目前栅格系统中以 8 点为网格基数，粒度大小合适，且能够匹配多数主流屏幕。在 TPower Design 中，网格基数为 8px。 栅格由列（column）、槽（gutter）、安全边距（margin）组成。

关于栅格 #

列

列是假象的垂直块，用于对齐内容。通常使用百分比(%)或固定值定义列的宽度。列的宽度不是一个固定值时，如果栅格的宽度发生变化，则列的宽度也会相应地增大或缩小。

槽

槽是列之间的间隔。槽用来分隔内容。通常槽的宽度为固定值。TPower Design 中默认为 16px。

安全边距

安全边距是内容和屏幕边缘之间的间隔。通常为固定宽度，用来定义在所有尺寸屏幕下最小的呼吸空间。侧边距的默认值为 16px，也可根据实际情况确定取值，建议使用 8 的倍数。

响应式断点 #

断点详细规范 #

断点可视化示例 #