网页设计中的网格系统

最近一段时间，网页设计方面最热门的话题，不外乎网格系统的使用了，当然了，你可能会问为什么这样，那是因为网格系统使用固定的结构创建了一个强壮的可视化布局，不仅如此，网格系统的使用还可以使某个网站更有可用性。下面我们将要讨论下网格布局的入门以及我们将会得到什么。

我们将会看到一些实际的例子，以及为什么和怎样将它们用在网页的布局当中，同样，我们也会带来很多好的资源使你更好的学习，比如一些非常优秀的基于网格系统的网站。

网格设计系统的介绍

网格设计的历史要比你想象中的长得多，还记得 Leonardo’s Golden Ratio吗?或许是摄影的第三条规则，你可能会问过去用网格系统做什么呢，它们都是基于比例的和结构化的固定的基础的基本系统，知道你网站的比例将决定一个网站是好的网站还是伟大的网站，当构建和设计一个网页的时候，不仅仅要考虑到美学，而且要考虑到比例和网格可以更好的帮你组织你的图像，文字等。

网格设计系统来自哪里

当你真正认识到网格系统的时候，它已经存在很长时间了，在 Leonardo Da Vinci 基本工作中的黄金法则比例，网格等，这些都为基于结构和格式的设计带来了一条途径。

然后一个起源于俄罗斯的叫做 Constructivist Art 的艺术运动，重新确定和调整了网格系统，此运动也带来了更多的打破原始网格系统的几何主题，在这时候，网格有了一个更大的艺术空间，通过给大家一个更容易理解和构建的比例，来影响排版和商业设计。

网格设计的有效使用–为什么使用为什么这么好？

当网格系统通过印刷网被有效的使用在印刷上之后，网页设计师和开发者还挣扎在设计和代码不一致的沼泽之中，在这种情况之下，网格系统越来越明显的提升了我们的技巧。当前，网格系统也越来越多的被建议使用在网页设计中。

你可能会感觉到，网格系统不带来什么，但却可以明显的提升我们设计过程的速度，并且也可以帮助你决定此列需要多宽，或者一个图标应该放在哪里。

为什么使用网格设计系统

一些人可能回想，网格系统限制了他们的设计能力，使他们在创新方面没有了自由，当然，这是可能的，但是你很可能是看错了，网格系统的使用，是当你创造审美结构的时候帮助你创造逻辑结构，它是一种可以使你平衡结构和创造的框架。

网格可以使用在任何一种设计上，从图像到排版，甚至剪切薄，网格通过在给设计师提供便利的基础上，以扩大其在发展过程中的创造力，网格系统在设计网页领域已经变成一个巨大的运动，例如 BlueprintCSS 和960 Grid system 的CSS框架，它们减少了开发时间，并且可以协助设计者创建一个更健康，平衡和美观的网站框架。

对设计者来说，网格系统为可以通过建立在元素和一切与美观有关的分布之间的平衡，来帮助我们组织我们的元素，网格系统也帮助我们为一个成长中的不断更新的站点增加新的设计，同时也允许我们组织更好的流体设计的部分。

对浏览者来说，网格也是一种简单的能够区分内容和消息的结构，其可以使网站更易用，许多网站有很多内容，特别是受益于网格的新闻网站，例如：BBC  和纽约时报。

网格设计系统的资源

这里有很多资源可供设计者和开发者使用网格系统和模板，例如：

1. The Grid System
2. 960 Grid system
3. BlueprintCSS
4. Golden Grid CSS
5. 1kb Grid

这些网站提供信息，模板和 CSS 框架，它们都可以轻松的在网格系统基础上工作，让我解释一些其中的资源，以使你能够把握他们中每一个的特点。

现在在上面列表主要的差别就是，其可以分为CSS框架、一般资源和网格模板，一个主要的事情是每个服务都举例说明了网格系统可以帮助你创建一个完整的网站，其不仅可以使你的设计和创造更加强大，并且以其作为基础，可以极大的扩展你的工作。

一个很棒的资源就是TheGridsystem.org，在这里你不仅可以看到很多超级好的建议，文章，并且里面有大量的可以直接下载并在Photoshop、Illustrator或者Indesign中使用的模板，我认为此网站非常的有用，它是我在使用网格设计上更加熟练。

如果你实际工作中使用960px的话，960 Grid Systems 是一个非常棒的网站，它提供模板、CSS框架、一般的HTML布局，以及非常有用的建议来帮你建立网站，来自此网站的一句话可以体现其目的所在：“本系统的前提是完美的适应飞速发展的网站原型，但是当它们被整合进生产环境的时候，其仍旧可以工作的非常好”。

Blueprint 是一个CSS框架，其主要的目的是减少开发时间，类似于960.gs，对于那些只是想要一种快速又简单的并且可以立即使用的CSS框架的人们来说，它非常易于使用。

Golden Grid CSS 是一个简单的，基于网格的易于使用的CSS网站工具，其被设计为960px、6或者12列的网格系统，重要的是，这个工具非常易于使用。

最后是1kb grid，想必你已经猜到了它是一个非常轻量级（1KB）的，但是又拥有全面功能的网格系统，他强大的功能可以容易的调整列的宽度，列的多少等，而且你可以简单的改变其代码然后改变其宽度。

基于网格系统的优秀网站实例

在你继续使用网格系统来开始布局你下一个网站之前，我们收集了一些优秀的基于网格系统的网站，以使你更有灵感，不过，最好好好的留意下他们是如何布局网站的元素的。

Bunton

Converge SE 2010

Creative Sessions

Dribbble

Eric Steuten Design and Concept

G 1

Mark Boulton

RVLT 2010

Snagly

Sohtanaka

The Import

Typographic Posters

你的想法？

你也有一些基于网格系统的很优秀的网站吗？如果我们有什么东西不全的话，马上留言补充！

原文：http://www.brusheezy.com/blog/14-grid-systems-in-design