Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。此文摘录了设计或编码时最常遇见和易犯错的点，帮助设计者在使用 Ant Design 前了解重点信息，在使用过程中提醒备忘之用。

01.布局和栅格

常见页面布局

为了产品间的系列感和页面间的可复用性，我们统一了设计稿的页面宽度和栅格比例，设计师在设计时可按 页面总宽 1440px，内容区 1208px 来设定页面宽度，也可以在 Ant Design Component Template 的 sketch 模板 中找到合适的模板拖拽使用，工程师则在 常用布局 里直接调取。

自适应界面-居中式

代码实现时应注意：

当浏览器宽度 ≥1440px 时，内容区不再扩大； 当浏览器宽度 ≤1440px，≥1024px 时，内容区缩小，外留白 72px； 当浏览器宽度 ＜1208px 时，去除外留白，浏览器底部出现滚动条；

自适应界面-撑满式

侧边导航宽度视具体业务而定，右边内容区宽度则随浏览器宽度而改变。 当内容区宽度不足 1024px 时，浏览器底部出现滚动条；

容器

容器是用来收纳和组织对象的贮存器，理论上信息不应超出容器范围。为保持设计的一致性，我们为页面设定了统一的容器区域，让信息能保持在固定的位置，防止在页面跳转的时候出现内容闪动。

栅格

栅格通常会在卡片式布局、多列表单中使用到。栅格有助于界面的版面布局和信息分布，及屏幕响应的灵活性。

栅格公式：

我们为页面栅格的 Gutter 设定了间隔定值为 16px 和 24px 两种，即 浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 间隔不变。