栅格布局

栅格系统

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

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) 所有浮层类组件