最近突然发现在网页设计中”栅格”或者说”网格”这个词特别火。原因我分析主要是源自淘宝ued团队的4片文章。同时呢还有腾讯的前端开发部门也发出了声音。

栅格还是网格？
对于这个问题是在腾讯那篇文章中作者特别强调是网格不是栅格，甚至还把《超越css》和《平面设计导论》拿出来说，还说如果说成是栅格不尊重作者等等啦。其实首先一点是，无论是栅格或者是网格，英文都是grid，这和作者的并没有太大关系和核心思想也没有太大关系，把这个东西拿出来说事我猜可能是因为，文章开头写了一段为和老大要福利啥的后来被老大说了，就是因为这个栅格系统。所以特别拿出来这个说事，还因为是可能他们老大是看了淘宝的文章才提到这个事等等啦。

其实归根到底就是grid应该翻译成什么，有些地方翻译成栅格，有些地方翻译成网格。其实这和设计没啥关系，就是一个语文问题而已。

网格很容易理解，就是网络组成的格子。那栅格呢？我么来查一些字典关于栅的解释：栅其实是一个多音字，读shan 四声或者读栅zha四声。都zha四声的时候，一般的词就是栅栏，用竹木铁条等做成的阻碍物。读shan四声的时候，就是栅极，由金属丝组成的筛装网状或螺旋状电极。其实从解释上就可以看出栅格和网格根本就是一个意思，只不过栅格更加正式一些，而网格更加口语化一些仅此而已。

960，950，黄金比例？
淘宝的文章大篇幅的介绍了960，950网格系统，解释的也很写详细，而腾讯的那篇文章却很痛的抨击YUI抨击淘宝UED那种方式的问题，并且给出了自认为很NB的”新”理论。其实首先淘宝UED说的介绍的一点问题没有，只不过因为大篇幅介绍了960，950所以可能让很多人误解只有这种才叫栅格设计，至于腾讯的哥们说的也没有啥问题，只不过太针对淘宝而且也过于片面了。 为了让大家更清新的理解一下我这里做一些基本的澄清和补充。

什么是栅格系统？
栅格系统是一种框架（Framework），是一种可以被用来搭建”组合（Compositions）”的系统。栅格系统无处不在：城市布局、杂志、报纸和大网格厦的外观等等。栅格系统可以用”黄金分割（Golden Section）”，一种几个世纪以来一直被认为是具有美感的”比率”，来设计。

栅格的历史：
二战以前的栅格系统是非常简单和公式化的构建在基准（诸如Villard图表）中的，各个区域四周的矩形结构。他们一般受限与制作他们的技术，也包括偶尔点缀一张图片的文字纵栏。那一时期的栅格系统很少使用空白（whitespace）作为设计装饰。这种状态一直持续到几位著名的设计师（包括Josef Muller-Brockmann）打破了当时的设计习惯。他们提议了一个新的系统，一个更灵活的，能给予设计师更多开发工具的系统：模块栅格（modular grid）

其实我们可以看出，栅格设计只是一种设计方式，分为黄金比例和等比例两种方式，至于960，950只是一种等比例法的实现框架而已。其实我们大多数设计的时候已经有这种栅格的概念在设计中了，只不过没有把这种思想提炼出来变成一种规范框架而已。

我们真的需要栅格设计吗？
初看栅格设计被很多设计师认为是锁死的，没有可发挥空间等等。其实不然，首先大家要明确一点，设计和艺术是有区别的，其中最大的区别就是设计是为了满足某种具体需求，而艺术是源于艺术家对于某种事物的理解而创作。就拿最早的工业设计来说，是建立在工业产品基础之上的。同样网页设计也是如此，对于网页设计来说，艺术只是其中的一个部分而已，流程标准化生产也是其中重要的一个部分，满足用户实际需求也是重要的一个部分，而流程标准化生产比较重要的一点就是参数化和模块化，栅格设计就是流程标准化一种手段。
我们真的需要栅格设计吗？其实这一点在淘宝UED的第一篇已经做了简单的描述：当搭建页面结构复杂的门户型网站时。我来补充一下，当你要设计多页面并且信息结构复杂的站点时候就需要一套栅格系统来规范、统一、美观的输出（这一点和css framework一样），而当你设计但或者少页，信息结构简单的时候则无所谓。

为什么栅格设计在前几年在网页设计中没有被十分的重视?但是在其他行业譬如说报纸，书刊等都已经广泛应用呢？我猜原因可能是第一网页设计对于其他行业还是属于崭新的，第二互联网的普及程度和广大用户的接受程度相对来说还不是很高。但是随之最近互联网的普及加强，用户需求的增多，网页设计也将要进入到一个全新的工业化时代。

相关链接：

TaobaoUED
网页栅格系统研究（1）：960的秘密
网页栅格系统研究（2）：蛋糕的切法
网页栅格系统研究（3）：粒度问题
网页栅格系统研究（4）：技术实现

腾讯
网格(UED所谓栅格化)方案生成器