11月的一個深夜，我飛臨我的故鄉(xiāng)亞利桑那 Tucson 的上空，我為這個城市網(wǎng)格式的布局所打動，Tucson 是美國通過規(guī)劃而建造的城市之一，從上空看，這個城市的所有東西都被設(shè)計者精心布局（圖1），我剛從倫敦回來，倫敦正好相反，倫敦的城市布局（圖2）曲里拐彎，看上去更像是出之天然。
圖 1：亞利桑那的 Tucson
圖 2：倫敦
我構(gòu)想這篇文章已久，這兩個城市的俯瞰圖讓我聯(lián)想到 Web 設(shè)計，當(dāng)今的技術(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)然很容易訪問，一點方向感或一張街道圖就足夠了，居民向別人指示自己的方位，只需說，我在 Campbell Avenue 和 Prince Road 交叉路口的西南拐角處就可以了。公共交通都是正南正北或正東正西，辨路是很容易的。
而從另一方面說，Tucson 的設(shè)計者最初的規(guī)劃只考慮到有限的擴張，當(dāng)城市發(fā)展到規(guī)劃之外的地方，問題就出現(xiàn)了。Tucson 網(wǎng)格化的局限阻止了不同風(fēng)格社區(qū)或鄰里的出現(xiàn)，很多 Tucson 的居民覺得這個城市缺乏一個充滿活力的市中心或眾多有個性的社區(qū)，結(jié)果，即使這樣的區(qū)域出現(xiàn)了，也容易前往，他們也懶得去找。
倫敦卻不同，它簡直是個迷。我知道倫敦人自己也要靠城市指南才可出行。這個城市的交通系統(tǒng)充滿挑戰(zhàn)，那些出租車司機需要通過專門的考試才能上崗。這個城市的自然成長并沒有讓它成為一個容易出行的地方。
然而在倫敦，精彩紛呈的城區(qū)與口味獨特的鄰里到處都是，文化聚集區(qū)以及奇趣社區(qū)也不一而足。雖然更難出行，因為口味紛呈，人們反而更樂意置身其中。
這個隱喻也適合那些趨向自然的 Web 設(shè)計，人們?nèi)绾尾拍茌p松地在那些曲里拐彎的胡同中穿梭？從另一個方面說，漂亮的設(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）。如果我們想實現(xiàn)復(fù)雜的非結(jié)構(gòu)化設(shè)計，就需要在文檔中運用大量圖片，導(dǎo)致整個文檔的臃腫。
圖 6: Weightshift
表格布局有一些優(yōu)勢，然而跟城市規(guī)劃一樣，優(yōu)勢有時候也可以變成劣勢。基于表格的網(wǎng)格保證它里面的所有單元格規(guī)規(guī)矩矩，要想讓所有的列擁有同樣的寬度？太簡單了，表格的天性如此。讓單元格之間保持一致的間隙？也是小菜一碟。然而，如果你不想要這種整齊劃一的結(jié)構(gòu)怎么辦？很不幸，你做不到。
粵公網(wǎng)安備 44010402000282號