设计系统是产品设计团队都需要了解的一种语言,那么你知道在设计系统适合使用哪些网格呢?今天给大家带来一个设计系统中究竟存在几种网格间距的答案。


设计系统


设计系统是整个产品团队共同沟通的一种语言,包含设计原则、设计规范、模式库、模板、动效等。设计系统可以减少设计负担,加快设计迭代过程,提高与开发的沟通效率。

设计系统使用几种网格比较合适

现在很多产品团队都开始构建自己的设计系统,知名的设计系统有 Materials design和Apple、IBM、Spotify、Adobe、Antdesign 等。


设计系统用几种网格


在设计系统中,一般使用两种网格。一个是应用在组件中的网格间距,另一个是布局中的网格。

设计系统使用几种网格比较合适

在布局时通常使用大尺度的间距,而组件网格一般使用比较小的间距。

设计系统使用几种网格比较合适
组件网格间距需要在早期定义组件时使用,而因为组件网格间距比较小,所以可以用来控制组件的密度。在设计组件时,需要使用小尺度的网格间距。
设计系统使用几种网格比较合适
因为一个页面的元素,很多用组件构成,所以布局网格间距通常较大组件和布局网格都基于同一个规则来完成,比如基准单位、数字。
设计系统使用几种网格比较合适

Materials design(组件构成页面)


如何应用


设计系统有两种网格尺度时,可以用小尺度网格间距定义组件,用大尺度网格间距定义页面模块的间距。

设计系统使用几种网格比较合适

下面用小尺度制作的基础组件,里面只使用4个间距,但已经定义好应用与组件间距的网格,方便与设计师之间的合作。

设计系统使用几种网格比较合适

布局间距要在组件与组件之间使用,不涉及组件内部。在布局上,使用网格间距时需要减少使用间距数量。

设计系统使用几种网格比较合适

在创建设计系统时或制作产品规范时,可以尝试定义两种间距尺度来规范设计。