栅格布局 Grid Layout
栅格系统
栅格系统是对界面元素进行横向排布时需要遵循的模式，不适用于类似图标与文字间隔的小型元素安排，而是用于大型区块间距的安排
24 栏栅格适用于网页设计
| 分辨率 | 总计 | 断点应用 |
|---|---|---|
| 1440px | 114.15 | 设计基准 |
| 1920px | 80.25 | 大屏场景 |
| 1366px | 17.31 | |
| 1536px | 14 | |
| 1280px | 11.54 |
基于实际分辨率数据，我们判断大多数用户都是在大于 1280px 宽度的屏幕中使用我们的界面，因此我们需要保证 1280～2560px 的屏幕范围内有一套统一的栅格来支撑一致的界面体验。以下是在屏幕宽度大于等于 1280px 时所使用的 24 栏栅格系统：
-
栏间距始终是 16px
-
我们使用 1440px 作为设计基准，1920px 则用于大屏场景，1280px 作为最小的兼容值
-
栅格最大宽度为 2560px 下的宽度，即 2480px
-
单侧页边距在小于 1920px 时固定为 16px，大于等于 1920px 时，人眼会与屏幕保持更远的距离，为保证视觉比例相近，页边距也相应扩大为固定 24px
-
综合考虑性能问题，仅列宽是动态计算的，即 (vw-368-Margin*2)/24
| 视窗宽度 vw | 栅格全宽 Width | 列宽 Column Width | 栏间距 Gutter | 单侧页边距 Margin |
|---|---|---|---|---|
| vw >= 1280px | (vw-368-Margin*2)/24 | |||
| 2560px | 2512px（最大） | ≈89px | 16px | 24px |
| 1920px（大屏场景） | 1872px | ≈50px | 16px | 24px |
| 1440px（设计基准） | 1408px | ≈43px | 16px | 16px |
| 1536px | 1504px | ≈47px | 16px | 16px |
| 1366px | 1334px | ≈40px | 16px | 16px |
| 1280px | 1248px | ≈37px | 16px | 16px |
下图基于 1440px 屏幕宽度演示：
在 Sketch 中对画板的布局设置：
为了在设计师在 Sketch 中对齐方便，我们使用 1432px 的画板宽度来设计。
12 栏栅格 适用于平板设备设计
小于 1280px 的场景往往是平板设备及移动设备，虽然不是我们的主流应用场景但也需要保证基本的可用性，因此我们使用另一套 12 栏栅格来保证体验:
- 栏间距始终是 16px
| 视窗宽度 | 栅格全宽 | 栏宽 | 页边距 |
|---|---|---|---|
| < 1280px | 176+vw*6.25%*12 | 6.25% | （vw-栅格全宽）/ 2 |
| 断点 | |||
| 768px | 752px | 48px | 8px |
| 576px | 560px | 36px | 8px |
下图基于 768px 屏幕宽度演示：
布局模式
全边布局
全边布局的内容区占据了 24 栏网格的宽度，并响应视窗宽度变化。适用于表格、列表等场景。
表单布局
表单布局占据了 12 栏宽度，并响应视窗宽度变化。当视窗宽度小于 768（S）时，变为占据全部 12 栏。该模式由表单页面总结而来，也适用于如正文阅读等其他不需要太宽的页面场景。
卡片布局
卡片布局整体占据了 24 栏网格的宽度，单个卡片宽度依据每行所需数量来安排，并响应视窗宽度变化。单个卡片为动态容器。常见于数据图表、工作台等场景
非对称卡片布局
非对称卡片布局整体占据了 18 栏网格的宽度，左侧卡片堆栈的宽度占据了 12 栏，右侧卡片占据了 6 栏，并响应视窗宽度变化。目前仅用于项目概览页面
侧栏布局
适用于页面需要左/右侧栏的场景（以下使用左侧栏举例）。侧栏占据 6 栏，内容区占据 18 栏的布局。适用于表格、列表等场景。侧栏可分为悬浮侧栏、固定侧栏、动态侧栏，会有不同的布局表现，详见侧栏组件文档
TB 首页布局
由 Teambition 和 thoughts 首页总结而来，带有左侧导航的卡片布局模式。其他产品首页若由同样的结构可以参考该模式
容器
| 案例 | 宽度 | 高度 |
|---|---|---|
| 顶栏、二级导航 | 动态 | 固定 |
| 侧栏 | 动态/固定 | 动态 |
| 表格视图 | 动态 | 动态 |
**固定容器：**容器的宽度固定，只会在达到断点时调整为对应宽度。例如侧栏导航，侧边工具栏等。
**动态容器：**容器的宽度时刻响应视窗宽度的变化。例如照片/图像网格，视频，数据可视化图表等。
比例
调整图片元素的初始尺寸时，请将默认初始比例约束为下列宽高比，尽量减少随意定义，提高产品之间的统一感：
| 比例 | 实践案例 |
|---|---|
| 16：9 | 视频 |
| 4：3 | 文件缩略图 |
| 3：2 | 应用预览图 |
| 2：1 | 宣传推广图 |
| 1：1 | 用户头像、项目封面、应用图标 |
浮层尺寸
我们对「Select 选择器」「Dropdown Menu 下拉菜单」「Ballon 气泡」「Dialog 弹窗」等 「Overlay 浮层」 类型组件的尺寸进行规范。
宽度
-
内边距（Padding）是用于自定义业务组件/模块时可参考的内容与容器边缘间距。
-
「Dialog 弹窗」类参考了栅格比例。
| 尺寸（px） | 适用组件 |
|---|---|
| 200 | 「Select 选择器」「Ballon 气泡」「Dropdown Menu 下拉菜单」「自定义业务组件」 |
| 240 | 「Select 选择器」「Ballon 气泡」「Dropdown Menu 下拉菜单」「自定义业务组件」 |
| 280 | 「Select 选择器」「Ballon 气泡」「Dropdown Menu 下拉菜单」「自定义业务组件」 |
| 320 | 「Select 选择器」「Ballon 气泡」「Dropdown Menu 下拉菜单」「Dialog 弹窗」 XS「自定义业务组件」 |
| 360 | 「Ballon 气泡」L「自定义业务组件」 |
| 400 | 「自定义业务组件」 |
| 440（约8栅格） | 「Dialog 弹窗」 S |
| 680（约12栅格） | 「Dialog 弹窗」 M |
| 920（约16栅格） | 「Dialog 弹窗」 L |
| 1200（约20栅格） | 「Dialog 弹窗」 XL |
高度
-
我们以790px为页面默认高度（MacBook pro 15-inch/Chrome浏览器/全屏显示）
-
高度只限定最大和最小的尺寸，具体高度请根据内容自适应。
-
原则上，如果内容可在最大高度之内呈现，请不要使用滚动条。
| 尺寸（px） | 适用组件 |
|---|---|
| Min 200 | 所有浮层类组件 |
| Max 710（上下减40px） | 所有浮层类组件 |