网页页面布局带来稳定性和结构性:网格布局

2010-04-04 12:35:35  来源:网页教学网 

网页制作Webjx文章简介:纵观当下一些采用了顶尖设计的大网站,我们会发现他们很有可能运用了一些网格布局。网格可以给网页页面布局带来稳定性和结构性,给设计师提供了一个可在此基础上搭建网站的便利模板。

网格可以给网页布局具备稳定的结构,给设计师提供一个建站用的合理模板。

A Brief Look at Grid-Based Layouts in Web Design

纵观当下一些采用了顶尖设计的大网站,我们会发现他们很有可能运用了一些网格布局。网格可以给网页页面布局带来稳定性和结构性,给设计师提供了一个可在此基础上搭建网站的便利模板。

网格个不意味着你就必须把作品设计的很无趣。一位好的设计师会应用网格布局的基本规则,并知道如何恰当的打破这些规则。

“网格系统是起辅助作用,不是起担保作用。它有许多用途,每个设计师都可以找到一个适合个人风格的运用方式。不过我们先需要学会如何使用网格;网格设计是一门需要大量练习的艺术。”、

——约瑟夫·米勒-布鲁克曼

网格基础知识

先让我们了解一些网格的术语。网格是一种布局划分,它使用横向和纵向引导线将边白(margin),空格和纵列包含进来,从而提供一个内容布局的框架。

网格一般是在出版行业才能看到,不过它也非常适用于网页设计。网格也不是一定是要你把网站搞的像个报纸的布局,但是它确实可以帮你制作出一个可以在此基础上做设计的统一结构。

网格只是一个辅助设计的的工具,而绝不应该成为限制你设计创造性的障碍。

理解并遵循规则

当你开始学习任何特定新技能时,你都应该遵循对应的准则。刚开始学习基础可以确保你能有效的运用这些基本原理。

刚开始网格间的区别不大,你应该按照网格,让所有的设计元素对齐,并放置到位。在你的设计中使用网格可以给你的内容带来结构性。也给你提供了一个起步的地方,但是它绝不应该扼杀你的创造性。

当下有两种创建网格模板的办法。

自己制作一个网格模板

目前有许多不同的理论可以可以帮你设置好你自己的网格,你的选择权无穷无尽,但是最终,你应该改选择一个最适合你手头项目的网格模板来。

你可以将一个空白文档进行分割,创建出偶数或奇数栏来。通常把中缝(栏与栏之间的空白)考虑进你的网格系统会很有帮助的。

你的网格可以很复杂,可以很简单,随你喜欢。你的网格布局越复杂越精巧,网格系统的自由度就越大。而它越简单的话,理解起来就越方便。选择权在你。

下面是几个用PhotoShop参考线(视图>新参考线)创建的网格范例。

Create your own grid

下载一个现成的网格模板

现在网络上有许多可以帮助你做网页开发的标准网格模板,它可以帮你省下自己亲自动手所要耗费的时间。

目前最流行的一个网格系统当属960网格系统,这套网格系统由 Nathan Smith制作,你可以选择12栏,16栏或者24栏的网格布局。

这个项目的诞生纯粹是Smith“手痒”,忍不住。

“我发现我过去一年只是因为受到吸引才分享出这套网格布局。如果其他人从中受益,那就在好不过。”Smith这样评论他的960 网格系统。

下载的文件包中包含针对CSS,HTML,Photoshop,Illustrator,Indesign的文件。设计文件包含了若干网格,它对你制作一个结构化的简洁网站非常有帮助。

Download a ready-made grid

共5页: 上一页 1 [2] [3] [4] [5] 下一页
更多