今天,给大家带来设计系统中的网格案例。一个设计系统中究竟存在几种网格间距?用来统一规范我们的设计。正好我之前参加过几次设计系统构建,因此把一些经验分享给大家。

分享目录如下:

  • 什么是设计系统?
  • 设计系统中用几种网格?
  • 这两种网格间距如何应用?
  • 总结

什么是设计系统?

80%的设计师都摸不清,设计系统中究竟用几种网格?

设计系统是整个产品团队共同沟通的一种语言,里面包含设计原则、设计规范、模式库、模板、动效和声音等,它是打造跨终端产品一致性与统一产品体验的最佳实践。对外,可以宣传品牌价值观;对内,它减少了设计负担,加速了设计迭代过程,提高与开发的沟通效率。国内外很多产品团队都在开始构建自己一套设计系统,除了 Materials design 和 Apple 的设计系统,还包括 IBM、Spotify、Adobe、Antdesign 等等,设计系统的出现也是产品发展的需要,它为公司的各种产品提供了基石和指导。

设计系统中用几种网格?

80%的设计师都摸不清,设计系统中究竟用几种网格?

从上面图中,我想大家应该可以看出在设计系统中,一般情况下是两种网格来规范我们的设计。一个是应用在组件中的网格间距,另外一个是布局中的网格。

为什么要分两个部分呢?认真思考下,我们在布局时候基本都是大尺度的间距,这样才满足我们的设计要求。而组件网格一般使用比较小的一些间距,因为组件本身就是个体小一些,因此在设计组件时,采用小尺度的网格间距。

80%的设计师都摸不清,设计系统中究竟用几种网格?

上图是组件小尺度网格间距,一般在早期定义组件时使用,用来控制组件的密度。

80%的设计师都摸不清,设计系统中究竟用几种网格?

上图是大尺度布局网格间距,应用在组件与组件之间布局,因为一个页面的元素,可以说都是由组件构成的。当然布局网格和组件网格之间有重叠的数字,其实没关系。组件网格和布局网格他们之间都是基于同一个规则来完成,例如我这边使用 8 为基准单位来定义。当然你可以使用其他基准数字,根据自家产品适配硬件的要求来定义,没有硬性的规定,请大家记住。

80%的设计师都摸不清,设计系统中究竟用几种网格?

△ Materials design(组件构成页面)

这两种网格间距如何应用?

80%的设计师都摸不清,设计系统中究竟用几种网格?

当我们清楚,在一个设计系统中存在两种网格尺度时,那么下面就好办了。用小尺度的网格间距来定义组件,用大尺度网格间距来定义页面模块之间的间距。下面我们来看看案例。

80%的设计师都摸不清,设计系统中究竟用几种网格?

上图,就是我用小尺度完成一些基础组件,有没有发现,我一共就使用了 4 个间距。早期定义好应用与组件间距的网格,为后续设计师之间合作带来更多益处。

80%的设计师都摸不清,设计系统中究竟用几种网格?

布局间距是在组件与组件之间去使用,不会涉及到组件内部的定义。在布局上,使用网格间距也是遵循重复原则,就是减少间距的数量的使用,上面大家也看到了我使用较少的间距完成布局。

总结

在创建一个设计系统时或者做一个产品规范时候,可以尝试去定义两种间距尺度来规范设计,两种尺度可以更好的满足设计需要。这两种尺度规则,都是基于一个基准单位来定义。所以它们之间也会有部分数值重复,其实这并没多大关系,因为重复间距就代表规则的减少,反而更利于规则的简单。今天算是一个开始,设计系统有关的诸多知识,后面会慢慢与大家分享。