网格可以给网页布局具备稳定的结构,给设计师提供一个建站用的合理模板。
纵观当下一些采用了顶尖设计的大网站,我们会发现他们很有可能运用了一些网格布局。网格可以给网页页面布局带来稳定性和结构性,给设计师提供了一个可在此基础上搭建网站的便利模板。
网格个不意味着你就必须把作品设计的很无趣。一位好的设计师会应用网格布局的基本规则,并知道如何恰当的打破这些规则。
“网格系统是起辅助作用,不是起担保作用。它有许多用途,每个设计师都可以找到一个适合个人风格的运用方式。不过我们先需要学会如何使用网格;网格设计是一门需要大量练习的艺术。”、
——约瑟夫·米勒-布鲁克曼
网格基础知识
先让我们了解一些网格的术语。网格是一种布局划分,它使用横向和纵向引导线将边白(margin),空格和纵列包含进来,从而提供一个内容布局的框架。
网格一般是在出版行业才能看到,不过它也非常适用于网页设计。网格也不是一定是要你把网站搞的像个报纸的布局,但是它确实可以帮你制作出一个可以在此基础上做设计的统一结构。
网格只是一个辅助设计的的工具,而绝不应该成为限制你设计创造性的障碍。
理解并遵循规则
当你开始学习任何特定新技能时,你都应该遵循对应的准则。刚开始学习基础可以确保你能有效的运用这些基本原理。
刚开始网格间的区别不大,你应该按照网格,让所有的设计元素对齐,并放置到位。在你的设计中使用网格可以给你的内容带来结构性。也给你提供了一个起步的地方,但是它绝不应该扼杀你的创造性。
当下有两种创建网格模板的办法。
自己制作一个网格模板
目前有许多不同的理论可以可以帮你设置好你自己的网格,你的选择权无穷无尽,但是最终,你应该改选择一个最适合你手头项目的网格模板来。
你可以将一个空白文档进行分割,创建出偶数或奇数栏来。通常把中缝(栏与栏之间的空白)考虑进你的网格系统会很有帮助的。
你的网格可以很复杂,可以很简单,随你喜欢。你的网格布局越复杂越精巧,网格系统的自由度就越大。而它越简单的话,理解起来就越方便。选择权在你。
下面是几个用PhotoShop参考线(视图>新参考线)创建的网格范例。
下载一个现成的网格模板
现在网络上有许多可以帮助你做网页开发的标准网格模板,它可以帮你省下自己亲自动手所要耗费的时间。
目前最流行的一个网格系统当属960网格系统,这套网格系统由 Nathan Smith制作,你可以选择12栏,16栏或者24栏的网格布局。
这个项目的诞生纯粹是Smith“手痒”,忍不住。
“我发现我过去一年只是因为受到吸引才分享出这套网格布局。如果其他人从中受益,那就在好不过。”Smith这样评论他的960 网格系统。
下载的文件包中包含针对CSS,HTML,Photoshop,Illustrator,Indesign的文件。设计文件包含了若干网格,它对你制作一个结构化的简洁网站非常有帮助。