设计干货栅格系统素材 | UI设计师应用好帮手

 

UI中的栅格

我们将网页端的栅格和移动端的栅格都称为UI中的栅格，定义为以规则的网格陈列来指导规范界面中的版面布局以及信息分布，通俗一点讲，就是根据一定逻辑，在界面中绘制出一个一个的小格子，然后将内容摆在这一个一个小格子里组合起来的一种设计形式。

 

响应PSD和FIGMA网格

看看搜UI(SOOUI) 带来的优秀应用案例。

 

栅格化的优势

 

1、逻辑性

很多时候自己做的设计越细小的地方越没有办法解释它为何这么做，不能有理有据的阐述自己的设计，但是商业设计是逻辑性解决问题的设计方式，通过栅格化的使用，这些界面中的尺寸细节问题就能完美的解释了。

引导4网格系统

递归和响应布局网格

 

2、便捷性

设计师除了本身的视觉设计工作外，还需要跟进对接开发，对是否可落地、实现方式、实现的规范性，复用性的高低、性价比是否合适，这些问题都是现实存在的，而栅格化设计方式可以间接的推动和解决这些问题。

 

响应网格

 

3、条理性

设计师可以利用栅格让界面更加有条理性，让内容可读性变高，快速校准元素在界面内的位置，让界面更加稳定平衡，让版面更加有层次感、模块化的管理元素。

 

递归和响应完美布局草图

 

 

免费的东西：12柱网（PSD）

 

二、栅格的基本要素

 

栅格系统的基础要素主要有：最小单位、屏幕总宽度、列数、列宽、水槽、安全边距、内容区域。