提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
作者:毛毛,蚂蚁集团设计师
本文适合新手设计师以及不知道如何使用 Ant Design 栅格系统的设计者来阅读
全文阅读时长约 10 分钟
网格是构成页面栅格系统的最小单位。
在 Ant Design 的设计体系中,我们用【 8 】作为网格的最小基数,在保证偶数的思路同时能够匹配多数主流的显示设备,最大程度避免出现半像素的情况。
栅格宽度是页面栅格系统的总宽度。
在这里要注意一点,为了方便设计师在日常设计环境中的理解,这里的 Container 可以理解为是设计可见区域的总宽度。
列(Column)
列是栅格的数量单位,当界面设定好总宽度后纵向等分成几列,比如 Ant Design 采用的 24 栅格就是有 24 列。
一列中包含了列宽(Column Width)以及槽(Gutter)两部分。
槽(Gutter)
槽是相邻两个列宽之间的间隔,通过设定列的左右内边距(padding)来决定槽的大小,列减去槽的部分为列宽。
槽用来规范页面中内容间的间距,槽的值越大,页面中留白部分的面积越多,视觉效果越松散;反之,页面越紧凑。槽通常设为定值。
边距是栅格外边距,与屏宽保持合适的安全距离,让界面左右能保证可读性和美观度。
建立好基础栅格之后,一块内容通常会占用几个列,我们把这个区域理解为内容区块,用于承载一个区域的内容。
划重点:区块从水槽开始到水槽结束
当我们开始着手做一个界面时,首先应考虑在多大的尺寸范围内做设计,也就是确定栅格可见区域的总宽度(Container)。
基于 Ant Design 的画板规范以及 UI 模度的概念,我们在设计中主要有以下两种常用布局宽度:
上下布局
栅格可见区域总宽度(Container):1152px
安全边距(Margin):32px
左右布局
栅格可见区域总宽度(Container):1136px
安全边距(Margin):24px
常见的栅格系统通常被划分为 12 栅格或 24 栅格,划分的格子越多,承载的内容越精细。通常,在信息繁杂的中后台系统常用 24 栅格,而一些商业网站、门户网站通常划分成 12 栅格。
我们会给槽设定一个定值,用来确定列宽的大小。在 Ant Design 系统中,我们对 Gutter 数值的设定以 8 为基数,如16px,24px,32px...
Tips:
在 Antd Design 的栅格体系中,我们定义栅格可见区域的总宽度为 C(Container),列数为n。
可得到一个简单的栅格公式:
C(Container)=列(Column)*N-槽(Gutter)
以 Antd Design 的标准上下布局栅格为例:
默认的画板为1440px 的屏宽,首先确定内容区宽度为1152px,使用 24 列栅格,槽的定值为 24px
那么可以得出:
1152px(可见区域总宽度)=列*24-24px(1个 Gutter),从而得出列为 49px,列宽为 25px(列-槽)。
目前,很多设计软件提供自动栅格设置功能,sketch也提供这样的功能:Layout Settings。
Ant Design Pro - dashboard
Ant Design Pro - Profile
语雀 - 团队首页
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册