11月的一个深夜，我飞临我的故乡亚利桑那 Tucson 的上空，我为这个城市网格式的布局所打ꦫ动，Tucson 是美国通过规划而建造的城市之一，从上空看，这个城市的所有东西都被设计者精心布局（图1），我刚从伦敦回来，伦敦正好相反，伦敦的城市布局（图2）曲里拐弯，看上去更像是出之天然。

图 1：亚利桑那的 Tucson

图 2：伦敦

我构想这篇文章已久，这两个城市的俯瞰图让我联想෴到 Web 设计，当今的技术可以让我们自由实现网格式设计，或者完全跳出网格之外，这种选择对 Web 设计师的推动是毫无疑问的，然而真正的挑战是，我们该如何放弃那些闭塞的思想而跳出网格之外思考♋。

城市的感觉
将城市规划推之 Web 设计，二者之间的🐻相似之处很有趣。网格布局非常适合创建可预见的，易于导航的网站，网格可以很好地帮助设计师进行规划，让用户易于🍎访问（图3）。

图 3: Ryan Brill

从正面意义上看，Tucson 这个城市当然很容易访问，一点方向感或一张街道图就足够了，居民向别人指示自己的方位，只需说，我在 Ca🎃mpbell Avenue 和 Prince Road 交叉路口的西南拐角处就可以了。公共交通都是正南正北或正东正西，辨路是很容易的。

而从另一方面说，Tucson 的设计者最初的规划只考虑到有限的扩张，当城市发展到规划ꦬ之外的地方，问题就出现了。Tucson 网格化的局限阻止了不同风格社区或邻里的出现，很多 Tucson 的居民觉得这个城市缺乏ও一个充满活力的市中心或众多有个性的社区，结果，即使这样的区域出现了，也容易前往，他们也懒得去找。

伦敦却不同，它简直是个迷。我知道伦敦人自己也要靠💯城市指南才🍸可出行。这个城市的交通系统充满挑战，那些出租车司机需要通过专门的考试才能上岗。这个城市的自然成长并没有让它成为一个容易出行的地方。

然而在伦敦🌠，精彩纷呈的城区与口味独特的邻里到处都是，文化聚集区以及奇趣社区也不ౠ一而足。虽然更难出行，因为口味纷呈，人们反而更乐意置身其中。

这个隐喻也适合那些趋向自然的 Web 设计，人们如何才能轻松地在那些曲里拐弯的胡同中穿梭？从另一个方面说，漂亮的设计可以通过打破我们所一直遵从的条条框框而得以实现。图4中你可以看到，突破网格设计的规矩如何让设计既保持易用性，又🐼看上去与众不同。

图 4: AIGA Los Angeles

网格代码的迷思
作为一个更多注重代码而不是设计的人，我很迷惑地发现ꦓ我们的设计是如何拘泥于代码，我相信是长期的表格布局🅰让我们画地为牢（图5），联想到最新的 CSS 布局，很容易知道这是为什么。

图 5: k10k

表格布局很适合网格设计。表格的代码本身就是重现一个网格，我们只是在单元格中填入图片，文字，界面元素来完成我们的设计🎉（图6）。如果我们想实现复杂的非结构化设ꦐ计，就需要在文档中运用大量图片，导致整个文档的臃肿。

 
图 6: Weightshift

表格布局有一些优势，然而跟城市规划一样，优势有时候也可以变成劣势。基于表格的网格保证它里面的所有单元格规规矩矩，要想让所有的列拥有同样的宽度？太简单了，表格的天性如此。让单元格之间保持一致的间隙？也是小菜一♒碟。然而，如果你不想要这种整齐划一的结构怎么办？很不幸，你做不到。

CSS 改变了这一切，这是我认为我们还未学会为 Web 而设计的理论依据。我们，尤其是那些从长期的表格布局转到 CSS 的人，刚刚开始明白 CSS 的视觉模型对打破网格设计的陈规多么有帮助。CSS 布局完美吗？并不，在 CSS 带来的好处之外我们还失去了一些东西。整列扩展对 CSS 设计来说是很大的问题，单元𓄧格的ℱ间隙问题也是。

CSS 无非是边线与盒子，网格中也有，然而二者的本质区别是，CSS 允许我们将一个盒子从其周围的环境中独立出来任意处🌳置（图7）。

图 7

我们可以使用 position 或 float 属性定位，我们可以用轻量级图片充当背景，因ꦐ此使用 Box 的时候我们既可实现网格布局，也可以更有效的实现非网格布局，你可以在 Dave Shea 的 Blood Lust 中看到这个例子，这是他在 CSS Zen Garden 中使用的众多设计之一（图8）。

图 8: CSS Zen Garden: Blood Lust

图9展示了 B🀅lo💝od Lust 中运用的基于 BOX 的非结构化设计，也展示了如何使用 CSS 和 BOX 实现相互独立的非结构化网格。

图 9

一旦我们明白了 BOX 的能力，我们就可以很容易突破网格的束缚。图10中展示了😼一种高度非结构化，甚至是自由的设计。

图 ꦓ10: Kutztown Universit✤y: Communication Design Department

这些 BOX 使用 CSS 定位：

图 11

不仅代码变得更干净，对熟悉 CSS 布局🌳的设计者而言也更直观简单。而这𒆙种设计也同样直观易用且不落俗套。

展望

现代布局技术之美是我们有更多选项可选。使用 CSS 我们可以💎创建易于管理，轻量，视觉丰富的设计，如果乐意，也可以是网格设计，同时，我们也可以很容易地打破或解除这个网格。

这为当代 Web 设计带来更多机会，我们不应因为对网格设计更熟悉而重蹈覆辙。

对于我们这些长期耽于表格布局的人来说，面临的困难尤其大。对多年的 Web 设计者，这意味着同一直使用的东西决裂，有些人也许并不觉得难，꧅然而绝大多数人会心存畏惧。我们需要学习 CSS 模型的工作原理，还要勇于同陈规告别。

有一些新人，他们从未从事过表格布局设计，对他们来说，我们过去的方法既奇怪又死板，ܫ正是从这些人ཧ中，我们有希望看到更多对设计陈规的突破。

Web 正在走向成熟，我们设计ജ方式也在改变，我们的面前有更多的创新与创意。我们不会拘泥于被规划的城市，我们可以实现独特的设计，💫我们这些老设计师，联合当今的新人会让 Web 日新月异。

原文：//www.comsharp.com/GetKnowledge/zh-CN/TeamBlog🧜T♔imothyPage_K726.aspx