首发于Ant Design
写给设计师的 Ant Design 栅格指南

写给设计师的 Ant Design 栅格指南

本文适合新手设计师以及不知道如何使用 Ant Design 栅格系统的设计者来阅读。

全文阅读时长约 10 分钟,配合语雀食用,阅读体验更佳~

写给设计师的 Ant Design 栅格指南 · 语雀www.yuque.com图标

关于栅格系统的 5 个基础概念

在介绍 Ant Design 的栅格体系前,我们先来理解关于栅格系统最基础的5个概念:

  • 网格(Grid)
  • 栅格总宽度(Container)
  • 列和槽(Column&Gutter)
  • 边距(Margin)
  • 区块(Col-n)

1. 网格 | Grid

网格是构成页面栅格系统的最小单位。

在 Ant Design 的设计体系中,我们用 8 作为网格的最小基数,在保证偶数的思路同时能够匹配多数主流的显示设备,最大程度避免出现半像素的情况。(更多可参考 8-Point Grid

栅格最小单位

2. 栅格宽度 | Container

栅格宽度是页面栅格系统的总宽度。

在这里要注意一点,为了方便设计师在日常设计环境中的理解,这里的 Container 可以理解为是设计可见区域的总宽度。

栅格总宽度

3. 列和槽 | Column&Gutter

列(Column)

列是栅格的数量单位,当界面设定好总宽度后纵向等分成几列,比如 Ant Design 采用的 24 栅格就是有 24 列。

一列中包含了列宽(Column Width)以及(Gutter)两部分。

槽(Gutter)

槽是相邻两个列宽之间的间隔,通过设定列的左右内边距(padding)来决定槽的大小,列减去槽的部分为列宽。

槽用来规范页面中内容间的间距,槽的值越大,页面中留白部分的面积越多,视觉效果越松散;反之,页面越紧凑。槽通常设为定值。

列、列宽以及槽

4. 边距 | Margin

边距是栅格外边距,与屏宽保持合适的安全距离,让界面左右能保证可读性和美观度。

上下布局的安全边距示例

5. 区块 | Col-n

建立好基础栅格之后,一块内容通常会占用几个列,我们把这个区域理解为内容区块,用于承载一个区域的内容。

划重点:区块从水槽开始到水槽结束

示例为24栅格中,区块内容占据8、6以及4栅格的布局

3 步上手 Ant Design 的栅格系统

在了解栅格的基础构成后,只需以下简单三步,便可在设计中灵活轻松得应用栅格系统:

  • 确定栅格可见区域宽度&安全边距
  • 确定列与槽的定值
  • 计算公式

1. 确定栅格可见区域宽度&安全边距

当我们开始着手做一个界面时,首先应考虑在多大的尺寸范围内做设计,也就是确定栅格可见区域的总宽度(Container)。

基于 Ant Design 的画板规范以及 UI 模度概念,我们在设计中主要有以下两种常用布局宽度:

A UI Design Languageant.design图标

上下布局

栅格可见区域总宽度(Container):1152px

安全边距(Margin):32px

上下布局结构

左右布局

栅格可见区域总宽度(Container):1136px

安全边距(Margin):24px

左右布局结构

2. 确定列与槽的定值

常见的栅格系统通常被划分为 12 栅格或 24 栅格,划分的格子越多,承载的内容越精细。通常,在信息繁杂的中后台系统常用 24 栅格,而一些商业网站、门户网站通常划分成 12 栅格。

我们会给槽设定一个定值,用来确定列宽的大小。在 Ant Design 系统中,我们对 Gutter 数值的设定以 8 为基数,如16px,24px,32px...

Tips:

  • 槽的数值越大,页面留白间隙越多;
  • 槽的区域不可以放置内容,内容区从水槽开始到水槽结束。

3. 计算公式

在 Antd Design 的栅格体系中,我们定义栅格可见区域的总宽度为 C(Container),列数为n。

可得到一个简单的栅格公式:

C(Container)=列(Column)*N-槽(Gutter)

左右两块为两边各多余出来的半个 Gutter,合计一个 Gutter

举个例子

以 Antd Design 的标准上下布局栅格为例:

默认的画板为1440px 的屏宽,首先确定内容区宽度为1152px,使用 24 列栅格,槽的定值为 24px,那么可以得出:

1152px(可见区域总宽度)=列*24-24px(1个 Gutter)

从而得出列为 49px,列宽为 25px(列-槽)。

附:sketch 栅格工具

目前,很多设计软件提供自动栅格设置功能,sketch也提供这样的功能:Layout Settings

  • 总宽:相当于 Container,是设计可见区域的总宽度。
  • 偏置:表示栅格的起始位置。
  • 列数:表示栅格的数量。
  • 外围间距:取消勾选。与前端沟通时注意说明总宽为设计可见区域的宽度。
  • 间距宽度:槽的值,通常是定值。
  • 列宽:栅格内单个可放置内容区的宽度。

栅格布局在项目中的实践

Ant Design Pro - dashboard

上下布局的24栅格页面

Ant Design Pro - Profile

左右布局的24栅格页面

发布于 2019-04-29

文章被以下专栏收录

    Ant Design 是一个致力于提升「用户」和「设计者」使用体验的企业级设计体系,利用统一的设计规范、前端实现、设计/研发工具链对产品研发赋能,全面提升企业级产品的使用体验和研发效率。