# 布局

# 画板

通过参考报告数据及分析实际场景，约定奇点云内部相关产品画板的合理使用规范，并且为了尽可能减少沟通与理解的成本，有必要在组织内部统一设计板的尺寸。

基于目前大部分用户的电脑分辨率数据分析结果以及公司产品的实际使用场景，我们将画板尺寸规范定义如下：

• 1440px 作为 Web 端标准使用场景；
• 1920px 则用于大屏的使用场景；
• 1280px 作为可兼容的最小的使用场景；

# 适配

在设计过程中，设计师还需要建立适配的概念，并且降低跟前端团队的沟通与协作成本，设计师根据具体情况判断系统是否需要进行适配，以及哪些区块需要考虑动态布局。据统计，使用中台系统的用户的主流分辨率主要为 1920px、1440px 和 1366px，个别系统还存在 1280px 的显示设备。

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

常被用于左右布局的设计方案中，常见的做法是将左边的导航栏固定，对右边的工作区域进行动态缩放。

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

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

# 栅格

栅格（Grid）一种自适应布局，能根据不同终端自动伸缩容器的宽高。Flex是根据轴线（Axis）根据布局，看起来像是一维布局；而栅格（Grid）是针对网格线（Grid Line）布局，看起来更像是二维布局。

栅格系统是对界面元素进行横向排布时需要遵循的模式，不适用于类似图标与文字间隔的小型元素安排，主要用于大型区块间距的排列的。

SandUI 采用 24 栅格体系。24 列的栅格提供了更多的布局组合空间，灵活度也更高，栅格的整体宽度可以通过统计目标用户群的屏幕分辨率来确认，而列间距 Gutter、页边距 Gutter 可根据页面的基准单位（比如2px）倍数计算出来，比如16px、24px。

以上下布局的结构为例，对内容区域进行 24 栅格的划分设置，如下图所示。我们为页面中栅格的 Gutter（间隔） 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column（列宽） 宽度会随之扩大或缩小，但 Gutter（间隔） 的宽度值固定不变。

奇点云的设计师会基于 4 点原则与下游开发同事进行沟通：

• 清晰的定义动态布局范围
• 尽量保持偶数思维
• 关键数据的交付（画布总宽、Gutter、Column）
• 区块的定义要从 Column 开始到 Column 结束

# 布局模式

# 全边布局

全边布局的内容区占据了 24 栏网格的宽度，并响应视窗宽度变化。适用于表格、列表等场景。

# 表单布局

表单布局占据了 12 列宽（Column）宽度，并响应视窗宽度变化。当视窗宽度小于 768（S）时，变为占据全部 12 列宽（Column）。该模式由表单页面总结而来，也适用于如正文阅读等其他不需要太宽的页面场景。

# 卡片布局

卡片布局整体占据了 24 列宽（Column）的宽度，单个卡片宽度依据每行所需数量来安排，并响应视窗宽度变化。单个卡片为动态容器。常见于数据图表、工作台等场景。

# 侧栏布局

适用于页面需要左/右侧栏的场景（以下使用左侧栏举例）。适用于表格、列表等场景。侧栏可分为悬浮侧栏、固定侧栏、动态侧栏，会有不同的布局表现。根据实际的业务场景划分侧栏与主内容的列宽（Column）。

# 局部栅格

当在某个局部区域内，处理长短不一的的组合结构时，可以通过「局部栅格」的排版方式来确保我们版式的适配效果。

通过「局部栅格」的方式可以动态把所展现的信息自适应的进行排布，确保 SandUI 设计师的排版理念得到充分还原。

SandUI 的设计师需通过 4 点原则来跟下游开发同事进行沟通：

• 清晰的定义动态布局范围
• 尽量保持偶数思维
• 关键数据的交付（画布总宽、Gutter、Column）
• 区块的定义要从 Column 开始到 Column 结束

「局部栅格」布局的灵活性：

• 每一组 Grid 可以根据 SandUI 设计师自身的需求进行划分（如：9:8:7）
• 同一个画布内可以制定多个不同「局部栅格」的布局范围