Web Grid Systems

网页栅格系统模板

网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，可以让网页的信息呈现更加美观易读，更具可用性。并且，对于前端开发来说，网页将更加的灵活与规范。（摘自TaobaoUED）

原理

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

W =（a×n）+（n-1）i

由于a+i=A，

可得：(A×n) - i = W

这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系。

实例

Yahoo首页横向版式设计采用的栅格系统为：（40×n）- 10 = W

模板使用与下载：

用Axure RP制作产品原型时，只需要将模板源文件相应的栅格系统复制一份到自己的Axure文件做背景。调整好位置，即可辅助你做出符合栅格系统的页面布局。

下载栅格模板

for Axure

模板介绍

要采用栅格系统考虑网页布局时要先放下对整个网页宽度的界定，而首先考虑根据设计风格确定一下各区块之间的间距及选用栅格单元块的大小。这两项确定之后，让栅格从0-1000px铺开，在900-1000之间选择栅格的最后边界来确定最后的页面整体宽度。以下是一个区块间距的建议：

由矩形区块组成时：

建议采用区块间距10px

由明线划分或内容自然形成的区块时：

建议采用区块间距15px或20px

下面是由30、40、60单元块与块间距10、15、20分别组合成的栅格系统模板。

常用栅格模板预览：

制作：

查看栅格效果图