CSS：超越網格的布局

css

原文作者：Molly E. Holzschlag
原文出自：Thinking Outside the Grid
中文翻譯：54player.com - nobita (2006-06-01)

“Aerials, in the sky, when you lose small mind you free your life” - System of a Down (1)

十一月的一個深夜，從空中俯瞰我的家鄉，亞利桑那州的圖森市，它那嚴謹的網格布局給我留下了深刻的映像。圖森是美國眾多規划過城市之一，從空中看，很容易發現圖森的城市設計師把這種精確的布局成功的應用到了規劃中(圖1)。

圖 1

我是從倫敦回到圖森，相比之下，倫敦完全沒有遵循網格布局。它的設計中有螺旋狀的，有圓形的，有梯形的，並且似乎更像是自然產生的(圖2)

圖 2

這篇文章我構思了很長時間，因為通過鳥瞰城市的布局，讓我聯想到了 web 設計中的網格。用現有的技術和技巧，我們可以隨行所欲的創造出基於網格的設計，或者，我們也可以完全打破這種網格。後者無疑將會增強我們的 web 設計：而擺在我們面前的挑戰就是如何擺脫狹隘的思想，超越網格布局。

方向感和城市

如果我們把城市規劃延伸到 web 設計中去，會有許多十分有趣的軌跡。基於網格的布局格外適用於那些有引導性，易於導航，真實的視覺表達的網站。網格能很好的協助設計師來布置，瀏覽者也易於訪問(圖3)。

圖 3：Ryan Brill

從有利的一面來看，網格狀的圖森當然更容易親近一些；你僅僅需要基本的方向感和街道地圖。居民們根據這種網格來告訴別人自己家所處的位置：“我在坎貝爾大街和王子路的東南角。”道路和交通都是從北至南或從西到東，這樣，城市就更容易導航。

另一方面，圖森的設計是在城市有限發展的前提之下的，一旦城市的發展超出了這種前提，在保持它的導航性和可用性上就會出現無數的問題。此外，圖森的網格給社區和鄰裡帶來的優越性也並未凸現。結果許多圖森的居民都感覺到城市缺少活動中心和獨特的社區。並且當這種分割的確存在時，人們很容易找到他們的目的地，但也同樣容易在某一個地方迷失掉。

倫敦與圖森相去甚遠，它像一個迷宮。我發現許多倫敦人都隨身攜帶一本倫敦旅遊指南來防止自己迷路！城市的交通系統就更具挑戰性，最具表現性的算是出租車司機，他們必須通過一種測試來證明他們具有駕駛這種傳統黑色出租車的“能力”。城市的有機發展並沒有增強它的可導航性。

但在倫敦，那些讓人驚歎的包圍和充滿趣味的地區劃分呈現在城市的各個地方。可以說它不止有一兩個文化中心或社區中心，而是許多個。降低了導航性，但增加了選擇性，並且人們會有更高的動機來參與到城市發展中去。

當考察這些非結構化、自然的設計時，人們如何才能在這些蜿蜒，迂迴的道路上找到方向呢？另一方面，在 web 設計和開發中可以打破這種循規蹈矩的思想。但至今，仍是有所保留的。在圖4中，我們看到了一種完全破除傳統網格禁錮的布局方式，在保持易用性的同時設計師採用了一種習慣之外的布局。

圖 4：AIGA Los Angeles

奇妙的書寫方式

對於一個以代碼為中心而非設計能力的人來說，代碼和設計緊密的結合在一起，更能讓我癡迷。我堅信，這種長時間禁錮在網格中的設計思想是表格版面配置所留下的後遺症(圖5)。再加上慢慢開始的對 CSS 布局的理解，我們很容易發現這種布局習慣產生的原因。

圖 5：k10k

表格版面配置似乎為網格設計而生，這種標記本身就可以繁衍出精確的網格，留給我們剩下的工作僅僅是用圖片、文字和其他介面元素填充這些格子來完成我們的設計(圖6)。如果我們需要創造一個非機構化或自然的，帶有複雜視覺表現的設計，就需要用到大量的圖片和標記，會造成文檔的臃腫和標記的複雜化。

圖 6：Weightshift

基於表格的網格布局有它的一些優點，但是，比如城市的設計，優勢也會變成弱點。基於表格的網格布局能保證儲存格中的元素都按照我們設想的那樣去排列。讓所有列都保持同樣的大小？我們甚至不用去考慮這個問題，這是表格天生的屬性。讓儲存格之間產生一些空白？同樣也不需要我們去思考。當然，如果我們不想要這種大小一致的格子呢？卻只能得到一個令人痛苦的答案：不行。

CSS 改變了這一切，這就是為什麼我們一直在整理 web 設計經驗的原因。在使用了多年的表格之後，我們慢慢開始對CSS布局產生了獨特的見解——對於那些離散的，語義化的元素來說，CSS 的視覺模型更容易打破網格布局。無懈可擊，並非如此，CSS 給我們帶來益處，同樣也給我們帶來了難題。像表格那樣可以伸縮的列就是其中一個，還有每個單元之間的空白。

CSS 視覺模型是由盒模型和線條組成。網格也是由它們組成，是嗎？當然，如果你那樣去做的話，答案是肯定的。這是最基本的差異。CSS 允許我們隨心所欲的使用一個盒子和多個盒子，而獨立於它的外圍(圖7)。

圖 7

我們可以使用 position 屬性或直接浮動一個盒子，並且我們可以加入所佔空間小一些的圖片來做為背景。通過一些技巧，我們可以讓這些盒子呈現出不同的視覺效果。其中包括網格，但同樣也能高效的創造出非網格化的設計來，你可以在 Dave Shea 的 Blood Lust 中看到，一個為 CSS Zen Garden 製作的設計(圖8)。

圖 8：CSS Zen Garden: Blood Lust

圖9顯示了組成 Blood Lust 那種非結構化網格設計所用到的盒子，又一次向我們展示了一種用 CSS 的盒子來創造非結構化網格的設計，這些盒子關聯在一起，又相互之間保持一定獨立性。

圖 9

只要我們知道我們能對或用一個盒子來做什麼，我們就可以用這種能力來打破長久以來的網格的禁錮。來看下面的這個設計(圖10)，就是完全非結構化的，甚至是一種完全自然的表現。

圖 10：Kutztown University: Communication Design Department

以及依據 CSS 來定位的盒子布局：

圖 11

不僅僅能減少標記的使用量，同樣明顯的讓設計師更熟練的運用 CSS 來布局。然而螢幕上看到的就變的豐富多彩，也顯示了非網格化設計的可用性和引人之處。

無限廣闊的空間

我們現在選擇這種美觀，極具挑戰的現代布局方式。根據 CSS，我們可以創造出易於管理、小巧、多樣化的設計，甚至是傳統的網格布局。但我們同樣可以解除網格機構，或者完全拋棄它。

這就為現在的 web 設計師們展開一個廣闊的世界。但剩下的挑戰是進一步思考，而不是因為它們的相似性而倒退到過去的那種設計模式中去。

在我們跳出基於表格版面配置思想的這些年裡，這個挑戰是極其嚴峻的。許多資深的 web 設計師，改變了我們的思考方式，改變了我們長久以來一直使用的那種設計模式。對一部分人來說，這是很容易，但對於大多數人來說，卻很難超越。部分答案在於教會自己去理解和掌握 CSS 與瀏覽器的表現方式。但還有一部分答案就是主動的拋棄慣例。

街區裡有一個剛出生的孩子，她的名字叫做“我從未在工作中使用過表格。”對於她來說，那種老方法都顯得陌生和狹隘。也就是在她這一代，我們很可能會看到更多在過去十年裡從未出現的新穎的設計。

web 正在走向成熟，我們的努力在慢慢的改變它，我們創新的機會比以往任何時候都更加明顯。不僅僅限制於城市設計，我們同樣能創造出獨特的設計，並讓它們正常的工作。作為一種動力，無論是經驗豐富的老手，還是年輕人都將受到這樣的啟示，一個極具鼓舞力的觀念，那就是我們的互連網在日新月異變化著。並且我相信，你會覺得這是非常好的一件事。