如何利用栅格快速搭建网页结构

在我们平常做网页设计,最常用得到的就是栅格系统,说到栅格系统,

什么是栅格系统?

栅格系统英文为“grid systems”,也有人翻译为“网格系统”,运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一。

栅格系统的设计原理及应用

那么如何设计一个栅格系统?接下来我们将通过实例,详细的介绍一下网页栅格系统的原理与应用:

在网页设计中,我们把宽度为“W”的页面分割成n个网格单元“a”,每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下:

W =(a×n)+(n-1)i

由于a+i=A,

可得:(A×n) – i = W

[1]

栅格系统的使用步骤

  1. 确定内容的总宽度W(常用的1180px、1190px、1200px、1400px)
  2. 确定栅格数目n(如果你的网页结构相对简单,则n=12即可,如果网页结构比较复杂或者具有排版的不确定性,则用n=24。)
  3. 确定水槽的宽度i(水槽宽度常用的6、8、10、15、20px)
  4. 在sketch/ps里设置上面的参数即可得到一套栅格系统

栅格在Sketch软件如何快速搭建:

在工具栏——右侧——显示——布局设置:

这样就可以快速绘制好我们想要固定安全尺寸,也就是我们常说的版心。

栅格在PS软件如何快速搭建:

在PS菜单栏——视图——新建参考线版面

Ω

可以用(总尺寸——版心尺寸)/2 就是左右二边的尺寸,这样中间版心就算出来了。

摘自:
https://zhuanlan.zhihu.com/p/266058748
2020-10-16

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注