11月的一個深夜，我飛臨我的故鄉(xiāng)亞利桑那 Tucson 的上空，我為這個城市網(wǎng)格式的布局所打動，Tucson 是美國通過規(guī)劃而建造的城市之一，從上空看，這個城市的所有東西都被設(shè)計者精心布局（圖1），我剛從倫敦回來，倫敦正好相反，倫敦的城市布局（圖2）曲里拐彎，看上去更像是出之天然。

圖 1：亞利桑那的 Tucson

圖 2：倫敦

我構(gòu)想這篇文章已久，這兩個城市的俯瞰圖讓我聯(lián)想到 Web 設(shè)計，當(dāng)今的技術(shù)可以讓我們自由實(shí)現(xiàn)網(wǎng)格式設(shè)計，或者完全跳出網(wǎng)格之外，這種選擇對 Web 設(shè)計師的推動是毫無疑問的，然而真正的挑戰(zhàn)是，我們該如何放棄那些閉塞的思想而跳出網(wǎng)格之外思考。

城市的感覺
將城市規(guī)劃推之 Web 設(shè)計，二者之間的相似之處很有趣。網(wǎng)格布局非常適合創(chuàng)建可預(yù)見的，易于導(dǎo)航的網(wǎng)站，網(wǎng)格可以很好地幫助設(shè)計師進(jìn)行規(guī)劃，讓用戶易于訪問（圖3）。

圖 3: Ryan Brill

從正面意義上看，Tucson 這個城市當(dāng)然很容易訪問，一點(diǎn)方向感或一張街道圖就足夠了，居民向別人指示自己的方位，只需說，我在 Campbell Avenue 和 Prince Road 交叉路口的西南拐角處就可以了。公共交通都是正南正北或正東正西，辨路是很容易的。

而從另一方面說，Tucson 的設(shè)計者最初的規(guī)劃只考慮到有限的擴(kuò)張，當(dāng)城市發(fā)展到規(guī)劃之外的地方，問題就出現(xiàn)了。Tucson 網(wǎng)格化的局限阻止了不同風(fēng)格社區(qū)或鄰里的出現(xiàn)，很多 Tucson 的居民覺得這個城市缺乏一個充滿活力的市中心或眾多有個性的社區(qū)，結(jié)果，即使這樣的區(qū)域出現(xiàn)了，也容易前往，他們也懶得去找。

倫敦卻不同，它簡直是個迷。我知道倫敦人自己也要靠城市指南才可出行。這個城市的交通系統(tǒng)充滿挑戰(zhàn)，那些出租車司機(jī)需要通過專門的考試才能上崗。這個城市的自然成長并沒有讓它成為一個容易出行的地方。

然而在倫敦，精彩紛呈的城區(qū)與口味獨(dú)特的鄰里到處都是，文化聚集區(qū)以及奇趣社區(qū)也不一而足。雖然更難出行，因為口味紛呈，人們反而更樂意置身其中。

這個隱喻也適合那些趨向自然的 Web 設(shè)計，人們?nèi)绾尾拍茌p松地在那些曲里拐彎的胡同中穿梭？從另一個方面說，漂亮的設(shè)計可以通過打破我們所一直遵從的條條框框而得以實(shí)現(xiàn)。圖4中你可以看到，突破網(wǎng)格設(shè)計的規(guī)矩如何讓設(shè)計既保持易用性，又看上去與眾不同。

圖 4: AIGA Los Angeles

網(wǎng)格代碼的迷思
作為一個更多注重代碼而不是設(shè)計的人，我很迷惑地發(fā)現(xiàn)我們的設(shè)計是如何拘泥于代碼，我相信是長期的表格布局讓我們畫地為牢（圖5），聯(lián)想到最新的 CSS 布局，很容易知道這是為什么。

圖 5: k10k

表格布局很適合網(wǎng)格設(shè)計。表格的代碼本身就是重現(xiàn)一個網(wǎng)格，我們只是在單元格中填入圖片，文字，界面元素來完成我們的設(shè)計（圖6）。如果我們想實(shí)現(xiàn)復(fù)雜的非結(jié)構(gòu)化設(shè)計，就需要在文檔中運(yùn)用大量圖片，導(dǎo)致整個文檔的臃腫。

 
圖 6: Weightshift

表格布局有一些優(yōu)勢，然而跟城市規(guī)劃一樣，優(yōu)勢有時候也可以變成劣勢?；诒砀竦木W(wǎng)格保證它里面的所有單元格規(guī)規(guī)矩矩，要想讓所有的列擁有同樣的寬度？太簡單了，表格的天性如此。讓單元格之間保持一致的間隙？也是小菜一碟。然而，如果你不想要這種整齊劃一的結(jié)構(gòu)怎么辦？很不幸，你做不到。

CSS 改變了這一切，這是我認(rèn)為我們還未學(xué)會為 Web 而設(shè)計的理論依據(jù)。我們，尤其是那些從長期的表格布局轉(zhuǎn)到 CSS 的人，剛剛開始明白 CSS 的視覺模型對打破網(wǎng)格設(shè)計的陳規(guī)多么有幫助。CSS 布局完美嗎？并不，在 CSS 帶來的好處之外我們還失去了一些東西。整列擴(kuò)展對 CSS 設(shè)計來說是很大的問題，單元格的間隙問題也是。

CSS 無非是邊線與盒子，網(wǎng)格中也有，然而二者的本質(zhì)區(qū)別是，CSS 允許我們將一個盒子從其周圍的環(huán)境中獨(dú)立出來任意處置（圖7）。

圖 7

我們可以使用 position 或 float 屬性定位，我們可以用輕量級圖片充當(dāng)背景，因此使用 Box 的時候我們既可實(shí)現(xiàn)網(wǎng)格布局，也可以更有效的實(shí)現(xiàn)非網(wǎng)格布局，你可以在 Dave Shea 的 Blood Lust 中看到這個例子，這是他在 CSS Zen Garden 中使用的眾多設(shè)計之一（圖8）。

圖 8: CSS Zen Garden: Blood Lust

圖9展示了 Blood Lust 中運(yùn)用的基于 BOX 的非結(jié)構(gòu)化設(shè)計，也展示了如何使用 CSS 和 BOX 實(shí)現(xiàn)相互獨(dú)立的非結(jié)構(gòu)化網(wǎng)格。

圖 9

一旦我們明白了 BOX 的能力，我們就可以很容易突破網(wǎng)格的束縛。圖10中展示了一種高度非結(jié)構(gòu)化，甚至是自由的設(shè)計。

圖 10: Kutztown University: Communication Design Department

這些 BOX 使用 CSS 定位：

圖 11

不僅代碼變得更干凈，對熟悉 CSS 布局的設(shè)計者而言也更直觀簡單。而這種設(shè)計也同樣直觀易用且不落俗套。

展望

現(xiàn)代布局技術(shù)之美是我們有更多選項可選。使用 CSS 我們可以創(chuàng)建易于管理，輕量，視覺豐富的設(shè)計，如果樂意，也可以是網(wǎng)格設(shè)計，同時，我們也可以很容易地打破或解除這個網(wǎng)格。

這為當(dāng)代 Web 設(shè)計帶來更多機(jī)會，我們不應(yīng)因為對網(wǎng)格設(shè)計更熟悉而重蹈覆轍。

對于我們這些長期耽于表格布局的人來說，面臨的困難尤其大。對多年的 Web 設(shè)計者，這意味著同一直使用的東西決裂，有些人也許并不覺得難，然而絕大多數(shù)人會心存畏懼。我們需要學(xué)習(xí) CSS 模型的工作原理，還要勇于同陳規(guī)告別。

有一些新人，他們從未從事過表格布局設(shè)計，對他們來說，我們過去的方法既奇怪又死板，正是從這些人中，我們有希望看到更多對設(shè)計陳規(guī)的突破。

Web 正在走向成熟，我們設(shè)計方式也在改變，我們的面前有更多的創(chuàng)新與創(chuàng)意。我們不會拘泥于被規(guī)劃的城市，我們可以實(shí)現(xiàn)獨(dú)特的設(shè)計，我們這些老設(shè)計師，聯(lián)合當(dāng)今的新人會讓 Web 日新月異。

原文：http://www.comsharp.com/GetKnowledge/zh-CN/TeamBlogTimothyPage_K726.aspx