CSS：超越网格的布局

“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 布局的理解，我们很容易发现这种布局习惯产生的原因。 表格布局似乎为网格设计而生，这种标记本身就可以繁衍出精确的网格，留给我们剩下的工作仅仅是用图片、文字和其他界面元素填充这些格子来完成我们的设计(图6)。如果我们需要创造一个非机构化或自然的，带有复杂视觉表现的设计，就需要用到大量的图片和标记，会造成文档的臃肿和标记的复杂化。 图 6：Weightshift 基于表格的网格布局有它的一些优点，但是，比如城市的设计，优势也会变成弱点。基于表格的网格布局能保证单元格中的元素都按照我们设想的那样去排列。让所有列都保持同样的大小？我们甚至不用去考虑这个问题，这是表格天生的属性。让单元格之间产生一些空白？同样也不需要我们去思考。当然，如果我们不想要这种大小一致的格子呢？却只能得到一个令人痛苦的答案：不行。 CSS 改变了这一切，这就是为什么我们一直在整理 web 设计经验的原因。在使用了多年的表格之后，我们慢慢开始对CSS布局产生了独特的见解——对于那些离散的，语义化的元素来说，CSS 的视觉模型更容易打破网格布局。无懈可击，并非如此，CSS 给我们带来益处，同样也给我们带来了难题。像表格那样可以伸缩的列就是其中一个，还有每个单元之间的空白。 CSS 视觉模型是由盒模型和线条组成。网格也是由它们组成，是吗？当然，如果你那样去做的话，答案是肯定的。这是最基本的差异。CSS 允许我们随心所欲的使用一个盒子和多个盒子，而独立于它的外围(图7)。 图 7 我们可以使用 position 属性或直接浮动一个盒子，并且我们可以加入所占空间小一些的图片来做为背景。通过一些技巧，我们可以让这些盒子呈现出不同的视觉效果。其中包括网格，但同样也能高效的创造出非网格化的设计来，你可以在 Dave Shea 的 Blood Lust 中看到，一个为 CSS [...]