Alice

我相信大多数人都听说过栅格系统,但是可能不知道具体的使用方法,以及为什么要使用栅格系统。本篇文章就来给大家讲讲栅格系统。栅格系统是在设计和前端技术中运用比较多的一套规范体系,栅格化系统一开始是用来指导平面设计的,后来慢慢运用到UI设计当中,本篇文章主要就是讲在PC端和移动端应用。

 

栅格系统的基本组成

1、列

列就是内容的容器,所有列加上水槽就是整个内容区域的宽度。

图片

 

2、水槽

水槽就是列与列的间距,水槽越大,页面的排版留白就更多,呼吸感就会更好。

图片

 

3、外边距

外边距又称安全边距,就是内容与屏幕的左右边距。所有列加上水槽再加上左右边距就是整个屏幕的宽度。

图片

 

常用的栅格系统

8点栅格系统

8点栅格系统顾名思义就是以8为最小单位,是现在比较常用的栅格系统,就是将页面里面的间距比如水槽、外边距等都设置成8的倍数,即用8、16、24、32、40……作为间距使用。

因为在移动端考虑到大小屏的适配问题要用到偶数,而8可以向下向上兼容都是偶数,所以更加适用。现在一些前端的开源组件库比如Antdesign也是基于8为最小单位来设计的,所以设计师采用8点栅格可以与开发协作更加方便,减少沟通成本。

图片

 

整数栅格

整数栅格也就是间距都为整数,即使用10、20、30……等作为间距,也是设计中比较常见的分割方式,这样的间距更加方便记忆,也方便计算。

图片

 

如何使用栅格

1、确定内容宽度

如果是PC端就是确定你网页内容的整个宽度,因为考虑到不同分辨率的适配,一般页面的左右外间距是不固定的,会根据不同的适配方式而变化。

如果是移动端,就是确定你的外间距,因为移动端的设计一般是按比例设计,所有的适配都是按比例来的,间距也是按比例固定的。

图片

 

2、确定水槽宽度

水槽的宽度就是内容模块之间的间距,比如设置成12、24或者10、20等等。确定了水槽的宽度之后,相应的在后面的设计过程中遇到间距的问题也要设置相对于的间距。

图片

 

3、确定栅格列数

列数就是将页面内容区域分成多少等份,比较常用的会是12列或者24列,12和24可以被2、3、4、6等分,这样可以最包容的组合出不同的布局,比其他的列数更加实用。12列比较适用于移动端和内容结构比较简单的PC端,24列更加适用于内容较多、信息量大的PC端。

当然你也可以自己选择自己想要的列数,这些都是辅助而已。

图片

 

4、利用工具建立栅格系统

Ps中,在视图-新建参考线版面中,可以自己设定栅格系统,在预设里面可以看到Ps已经与预设了8、12、16、24列,选择自己想要的,或者自定义列数,然后修改自己想要的水槽宽度。

图片

Sketch中,在显示-画布-布局设置中,可以根据自己的需要进行设置。

图片

另外,再推荐一个在线工具,只要你输入你的内容宽度和列数,它会自动给你计算多种方案的间距供你选择,比较灵活,可以在不同场景下使用。

http://grid.guide/

 

5、栅格系统应用

在栅格创建好之后,就开始进行排版布局,内容模块要在列的框架内,水槽就是模块间的间距,模块内的子元素可以自由摆放,但是也要遵循选取的一套准则。

图片

 

栅格系统的优势

1、确保设计规范,提高团队协作力

2、促进开发沟通,保证视觉还原

3、实现布局响应化

 

栅格系统的注意事项

1、模块内容需要在栅格布局上,模块里面的子元素可以不严格的去对齐。

2、如果出现栅格有计算出现小数的情况一般向下取整。

3、栅格系统主要是提高设计的规范性,适用于一些比较有条理、可复用的设计场景,一些比较创意型的设计场景并不适用。

 

以上就是栅格系统的简单介绍,栅格系统除了规范设计以外,在响应式布局方面也有很大的帮助,响应式布局也是一个比较复杂的概念,这里就不详细介绍了。

我们使用栅格系统主要是为了帮助我们的设计、规范我们的设计,上面介绍的一些准则是一些常用的标准,我们可以灵活使用,只要保证一套产品使用一套基本准则就可以。

 

原文地址:Leo设研所(公众号)

作者:设研_仓仓君

转载请注明:学UI网 » 进大厂必须了解的栅格系统,该如何使用?

登录收藏
 
你可能喜欢的:
数据之美:地理空间数据可视化II数据之美:地理空间数据可视化II
如何高效地进行网页设计?重点关注这些要素如何高效地进行网页设计?重点关注这些要素
工作经验| B 端产品组件设计细节及经验分享(三)工作经验| B 端产品组件设计细节及经验分享(三)
iOS 规范与 Material Design 哪里不同?官网总结了这几点iOS 规范与 Material Design 哪里不同?官网总结了这几点
酷家乐优秀设计频道改版酷家乐优秀设计频道改版
工作多年才发现,原来头像这么小的设计细节,也有这么多知识点工作多年才发现,原来头像这么小的设计细节,也有这么多知识点
好的单选框设计具备哪些特质?把握住这些知识点!好的单选框设计具备哪些特质?把握住这些知识点!
B端产品C端化,抱歉我想的太简单!B端产品C端化,抱歉我想的太简单!
测试了新手指引方案,总结下失败经验测试了新手指引方案,总结下失败经验
B端问答|信息密度与易读性B端问答|信息密度与易读性