网页设计之栅格系统及应用

什么是栅格系统

栅格系统英文为 Grid Systems，也有翻译为网格系统。

定义：运用固定的格子，遵循一定的规则，进行页面的布局设计，使布局规范简洁有规则。

1. 栅格

栅格最早起源于平面设计。1692年法国为提高印刷水平，以方格为设计基础，将一个印刷版面分成上千个小格，这就是最早的栅格雏形。再后来，慢慢演变成运用固定的格子设计版面的平面设计风格。

 

 

 

2. 网页栅格

包括网页端和移动端，是以规则的网格阵列来指导规范界面中的版面布局以及信息分布。

3. 为什么要使用栅格

通过栅格的使用，可以用逻辑解释商业设计的细节问题。

设计内容都应该有所依据，当其他人质疑时，可以系统有底气的解释设计内容。设计师可以利用栅格让画面更有调性，让内容更具可读性；可以快速校准元素的位置，让画面更平衡；可以模块化地管理元素，让版面更有层次感。

4. 栅格基础七要素

最小单位

需要先定好界面的单位基础，后续内容元素和布局规则都是基于它整数倍递增。

网页端最小单位：10

移动端最小单位：3、4、5

 

 

 

总宽度/W

总宽度：对整体布局进行规范，且还可以保证设计尺寸的统一性。

界面设计要有具体尺寸，由于内容多少不确定，所以高度没有办法定死，但内容区的宽度是可以定的。