网格系统(grid systems)为网站的设计带来了可视结构化的平衡.网格(grid)对于是如何组织和展现信息来说是一个很有用的工具.对于网站设计者来说,它是系统布局和优化的一个科学方法，能为用户带来更好的体验。一个没有网格的网页是噩梦,相反的,一个拥有网格的结构良好的站点是富有生命力且充满活力的。

什么是基于网格的设计?
网格式设计是是一种和谐的可靠的，用来更好展现信息的网页设计方式。它为网站整体布局和设计者与使用者之间的良好对话提供了一种有效的方法。为了更好的构建网站的布局，我们必须知道平衡和对称，如何把重点内容展示给用户。这里给出了一些相关的资源信息:


网格能清晰有效的交流信息.Khoi Vinh的《重新设计一个复杂的新闻网站》证实了这一点。

以下是六个基于网格的网页设计样例,很好的展示了如何利用网格(Grid)来让你的页面更富有创意。

1.非对称
非对称是对称的反义词，不过，这些混沌、随机而嘈杂的元素却能让页面显得更生动。


2.增加变数
访问者往往厌倦看到一些雷同的垂直式设计，不如增加更多的列,在水平方向上能让用户关注更多的信息。



3.倾角的使用
在第四准则:间距是好朋友文中,给出了一个印刷设计的例子,但是在网页设计中却不太适用，因为网页中的文字一般都不是倾斜的。但是，合理的让某些图片文字倾斜，却能让页面看上去更有意思。


4.离逸的边界
网格是很好的，适当的打破格子的边界,模糊的边界也是有效果的。可以参照《思考在边界之外》


拉开注释:


在格子内的注释：


5.图片区域
用一些插图来打破的文字区域间的分割也是一种创造效果的办法。


6.空间的平衡
非对称平衡也是很重要的。下面的效果就显得很平衡，不失重心。


学习好的行列网站设计：

Satsu.co.uk

侧栏成功地重叠，并打破僵化的布局网格，很有视觉趣味。

Edgepoint Church

拥有强大的网格和两栏的布局。头部有一个自由流动的设计，主页上脱颖而出。