网页美工设计

网页设计中的栅格系统是什么？

编辑：时间：2016-04-10 10:57:51

　　经常浏览网页、制作网页的同学会发现，许多大站的采用的页面不是950像素就是960像素。还有一些知名站点，虽然首页宽度没什么固定规律，但共同的特点是：功能专一，页面结构相对简单。

　　为什么设计师们都不约而同的采用几乎相同的布局尺寸呢?这不是巧合，而是遵循着一个规律——栅格系统。栅格系统英文为“grid systems”，也有人翻译为“网格系统”，其实是一回事。不过从定义上说，栅格更为准确些，从维基百科查到栅格的定义为：栅格设计系统(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格)，是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。如今，栅格系统也已经被运用到网页中。它以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。栅格系统的原理和应用栅格系统的计算公式：

　　(A×n) - i = W

　　如上图所示： A 一个栅格单元的宽度 a 一个栅格宽度 A=a+i n 正整数 i 栅格与栅格之间的间隙 W 页面/区块宽度这样就可以计算出栅格系统所使用的尺寸。以页面宽度950像素为例，每个区块与区块的间隔为i=10px;如果应用上面的公式，可以推出A=40px，既页面横向版式设计采用的栅格系统为： (40×n) - 10 = W 用栅格系统设计的页面非常直观，有条理性，并且看起来十分舒服。如果你愿意，可以通过上面的启发，衍生出自己的各种栅格系统。网页栅格系统只是参照，具体情况需要具体分析，如果自己有想法，也可以不按照栅格系统进行设计，它只是参照而已。

<< 上一篇：网页设计颜色搭配的三条原则

>> 下一篇：网页设计制作是如何精确还原设计稿的

推荐资讯