一些大型站點都有著非常**的視覺外觀，它們很可能在設(shè)計時使用了網(wǎng)格系統(tǒng)。網(wǎng)格可以是頁面布局顯得緊湊而且穩(wěn)定，為設(shè)計師在設(shè)計站點時提供一個邏輯嚴謹?shù)哪０濉?/P>
但使用網(wǎng)格并不意味著枯燥的設(shè)計，一個好的設(shè)計師不僅能夠合理地應(yīng)用基于網(wǎng)格布局的規(guī)則，而且還能適時地打破這些規(guī)則。
"The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice."
- Josef Müller-Brockmann
網(wǎng)格基礎(chǔ)
我們來看一些網(wǎng)格的術(shù)語。網(wǎng)格是用豎直或水平分割線將布局進行分塊，把邊界、空白和欄包括在內(nèi)，以提供組織內(nèi)容的框架。
網(wǎng)格常在傳統(tǒng)印刷中使用，但對網(wǎng)頁設(shè)計也是非常合適的。網(wǎng)格設(shè)計不能使一個網(wǎng)站的布局看起來像報紙一樣，但它的確可以輔助我們設(shè)計結(jié)構(gòu)統(tǒng)一的站點。
網(wǎng)格是一個簡單的輔助設(shè)計工具，而不是什么對設(shè)計產(chǎn)生不良影響的東西。
理解并遵循規(guī)則
當你開始學(xué)習(xí)任何一項技能時，都應(yīng)當遵循它的一些指導(dǎo)原則。從一開始就把基礎(chǔ)的東西學(xué)好，能使你**地應(yīng)用這些規(guī)則。
學(xué)習(xí)網(wǎng)格也不例外。你應(yīng)當按照網(wǎng)格來設(shè)計布局，并讓所有設(shè)計元素對齊到它們所在的位置。在設(shè)計中使用網(wǎng)格能結(jié)構(gòu)化內(nèi)容并且給你一個設(shè)計起點，但這不應(yīng)當阻止我們的任何創(chuàng)意靈感。
兩種途徑建立網(wǎng)格模板：
1、自己創(chuàng)建網(wǎng)格系統(tǒng)
對于建立自己的模板系統(tǒng)，盡管有很多不同的理論，但歸根結(jié)底，還是要選擇你手邊用起來更順手的工具。
你可以把一個空文檔按照數(shù)學(xué)原理分割成奇數(shù)欄或偶數(shù)欄，而且通常要把欄之間的空白考慮在內(nèi)。
只要你喜歡，你的網(wǎng)格可以很復(fù)雜或者很簡單。你的網(wǎng)格越復(fù)雜，你就擁有越多的自由發(fā)揮空間；而網(wǎng)格越簡單，留出的空白也越多。這完全取決于你自己的決定。
下面是一些用Photoshop制作的例子，它們可以在Photoshop中用網(wǎng)格來查看。
2、下載現(xiàn)成的網(wǎng)格模板
相比制作自己的網(wǎng)格，從網(wǎng)上下載一些標準的網(wǎng)格同樣可以用來輔助網(wǎng)頁設(shè)計，并且還省了你自己制作網(wǎng)格的很多時間。
當前更流行的網(wǎng)格可能就是960 grid system了。它是nathan smith制作的，允許你制作12、16、和24欄的布局。
這個項目是Smith
smith在談到960grid system時說：”我只是簡單地把這個網(wǎng)格系統(tǒng)分享給大家，如果有人從中獲益，那再好不過了?！?/P>
這個下載包括了CSS ,HTML,Photoshop,Illustrator,InDesign等等文件。設(shè)計文檔包括了很多有用的文檔，它們用來建立整齊而且清爽的站點。
打破規(guī)則
在介紹了網(wǎng)格的基礎(chǔ)知識之后，我們現(xiàn)在來打破這些規(guī)則。網(wǎng)格是把元素對齊的一非常好的方法，它讓你的設(shè)計顯得干凈、整潔，而且用戶友好。
然而，正如前面提到的，我們不能讓網(wǎng)格禁錮了我們的靈感和創(chuàng)新。要勇敢地向網(wǎng)格以外的地方冒險，要創(chuàng)造一個基于網(wǎng)格的作品，不意味著任何東西都要對齊。
越出網(wǎng)格邊界的元素會讓作品看起來更加。。和流暢，而不是像表格那樣死板和枯燥。
看看下面的例子，它們是應(yīng)用960 grid system制作的，展示了網(wǎng)格可以是漂亮而不古板的。
基于網(wǎng)格系統(tǒng)的設(shè)計實例
下面是一些應(yīng)用了網(wǎng)格系統(tǒng)的設(shè)計作品，它們非常整齊而且界面友好。其中一些是嚴格按照網(wǎng)格布局的，另一些則打破了網(wǎng)格的某些邊界。所有這些都說明，應(yīng)用網(wǎng)格系統(tǒng)并不意味著枯燥的外觀設(shè)計。
Help Your Habitat
Digital Podge 2009
Vegas Uncork’d
Anton Peck
Brite Revolution
Kiki and Bree
Arvorecer
Simon Collison
使用網(wǎng)格進行設(shè)計的一些工具
下面是一些用來設(shè)計基于網(wǎng)格布局的工具。
Grid Designer
A fun tool to help set up a grid.
Grid System Generator
Just as the name of the tool says: it helps generate a grid for you.
Grid Calculator
Another fun tool to help set up grids.
jQuery Masonry
A jQuery tool that arranges items vertically and horizontally according to a grid.
結(jié)語：
網(wǎng)格并不是一切設(shè)計問題的解決方案，也不一定適用于所有人。但網(wǎng)格的確為那些需要結(jié)構(gòu)感和平衡感，而且需要穩(wěn)定和清爽設(shè)計的站點提供了很好的切入點。在你的作品中嘗試網(wǎng)格吧，你一定能體會到網(wǎng)格結(jié)構(gòu)給你帶來漂亮而且前幾特的設(shè)計。
網(wǎng)格的網(wǎng)頁設(shè)計概念及實際應(yīng)用案例，一點見解，望見笑。
