WIXOO

Digest

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

作者:网页教学网 发布时间 11/07/01 来源 网页教学网

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

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

打破规则

现在我们已经讲完了网格的一些基本规则,现在让我们打破这些规则。网格对于排列元素非常有好处,可以让你的设计作品保持简洁干净,用户友好,以及组织性。

不过,也正如我之间提到过的,你不能让网格限制你的创造性,让你觉得被这些线线框框限制住了。大胆的突破这些引导线;要获得一个网格作品也并不是需要所有的东西都整整齐齐的排列起来。
 

打破网格的元素可以让元素看起来更自然和流畅,而不是像table布局一样无聊。
 

你可以看看960网站上列出的一些设计上使用了网格的网站实例。这些例子表明网格也可以很漂亮,也不应该有一个呆板的结构。
 

Break the Rules

Break the Rules

基于网格的设计实例

下面这几实例作品会向你展示一些优秀的设计以及结构明细,对用户友好的界面。

其中一些严格遵循网格布局,其他一些作品则让让一些标识突破基本的网格,游离在网格之外。
 

所有这些作品都强调这样一个事实,使用网格并不意味着会作出一些外观无趣的网站来。
 

Help Your Habitat

Help Your Habitat

Digital Podge 2009

Digital Podge 2009

 

Vegas Uncork’d

Vegas Uncork'd

Anton Peck

Anton Peck

Brite Revolution

Brite Revolution

Kiki and Bree

Kiki and Bree

Arvorecer

Kiki and Bree

Simon Collison

Simon Collison

一些网格类的设计工具

下面这些工具可以帮你试用一下基于网格网页布局。
 

网格设计器

这个有意思的工具可以帮你设置好网格。

Grid Designer

网格系统生成器

正如其名:它可以帮你生成一个网格。
 

Grid System Generator

网格计算器

这是另一款可以帮你设置网格的有趣工具。

Grid Calculator

jQuery Masonry

这款jQuery工具可以根据网格来水平和垂直排列元素。
 

jQuery Masonry

Slammer

这是一款网格布局的应用,网格的影子无处不在。

Slammer

网格使用教程

其他更多资料

网格并是不所有设计问题的灵丹妙药,它并不适合所有人。

不过它的确为你提供了一个很好的起点,让你设计出一个简洁,一致的设计作品来。我希望你喜欢这些网格方面的资料和例子。在你的设计中运用网格,也希望提你能了解到网格所提供的结构性可以给你漂亮独特的设计提供结构支撑。