当前位置 鱼摆摆网 > 电商资讯 >

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

栏目:电商资讯   时间:2019-06-09 11:44

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

全文阅读时长约 10 分钟


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

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

1. 网格 | Grid

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

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


grid.png

(栅格最小单位)

2. 栅格宽度 | Container

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

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


container.png

(栅格总宽度)

3. 列和槽 | Column&Gutter

列(Column)

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

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

槽(Gutter)

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

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


column.png

(列、列宽以及槽)

4. 边距 | Margin

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


margin.png

(上下布局的安全边距示例)

5. 区块 | Col-n

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

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


con-in.png

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

3 步上手 Ant Design 的栅格系统

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

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

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

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

上下布局

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

安全边距(Margin):32px

上线.png

左右布局

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

安全边距(Margin):24px

左右.png

2. 确定列与槽的定值

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

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

[ 标签:栅格 ]
  • 全部评论(0
说点什么吧