Newshot 三十年前我开始设计网站时，David Siegel 刚刚出版了 Creating Killer Web Sites，这本书推广了用 HTML 表格和 spacer GIFs 来布局网页。后来 CSS 通过浮动和定位让我们对布局有了更多控制。这两者原本都不是为页面布局而设计的，而浏览器行为不一致又会让使用它们变得令人沮丧。尽管如此，这并没有阻止我和一代又一代其他设计师使用浮动和定位。
当 CSS 框架开始提供现成的网格系统时，事情稍微容易了一些。Blueprint CSS) 提供了 24 列网格，而 Nathan Smith 的 960 Grid System 提供了 12 列和 16 列选项。这些框架为设计师和开发者提供了共享结构，让布局规划和实现变得容易得多。
- 1996：HTML 表格和 spacer GIFs
- 2007：Blueprint CSS 及其 24 列网格
- 2008：960 Grid System 及其 12 列网格
- 今天：12 列网格仍是熟悉的框架惯例。
12 列网格并不是 2000 年代发明的。平面设计师使用基于列和模块化的网格已有几十年，而 12 是个方便的数字，因为你不需要是数学天才，就能把它分成二分之一、三分之一和四分之一，从而创建我们在网上随处可见的 2-up、3-up 和 4-up 组件。
随后出现了 Bootstrap 和 Foundation 等框架，帮助 12 列网格确立为页面布局的事实标准。我明白为什么会这样。但在某个过程中，一种布局选项成了几乎所有东西的默认起点。
CSS Grid 改变了页面布局的可能性，但我仍然看到设计师先把页面分成 12 个等宽列，再决定如何把内容放进去。他们最终得到的设计可能完全没问题，但也可能看起来非常相似。
不过，我不认为 12 列网格本身有问题。问题在于，在考虑我所设计的公司有什么独特之处、它的网站需要传达什么之前，就伸手去拿一个熟悉的解决方案。那么，如果我从这些问题开始，会发生什么？
每家公司都有值得讲述的故事
在我决定一个布局需要多少列之前，我想了解我正在为之设计的公司。它和竞争对手有什么不同？它希望人们记住什么？它是否有可以影响网站外观和感觉的个性？
这些问题很重要，因为布局不只是排列内容。元素的大小、位置和彼此关系会影响人们体验网站的方式。一个克制、有序的构图所传达的东西，可能和一个充满能量与动感的构图截然不同。所以为了说明我的意思，我会用 Wheelman。它是我为我的书 Standout Designs for the Web 虚构的一家公司。
Standout Designs for the Web 的预购现已在 CSS-Tricks store 开放。
Wheelman 为逃亡司机提供产品和服务，包括法律咨询、抢劫保险，以及一家销售入室盗窃必需品的在线商店。它还出版一本杂志，提供关于驾车生活的建议、新闻和故事。
Wheelman 不是一家普通的公司，那它的网站凭什么要看起来像一堆千篇一律的组件拼凑？它认真对待自己的业务，但不惧怕在设计上玩点花样。它叛逆，但不想显得拒人千里。它的客户是罪犯，可他们要求专业感。Wheelman 有太多个性可以拿来发挥，我希望它的设计能体现这一点。
这不意味着为了不同而让 Wheelman 显得不同。它的客户仍然需要找到自己想要的东西、理解它提供什么，并购买它的产品和服务。但我可以通过选择契合这家公司的布局，而不是将就于熟悉的排列方式，让这些体验更令人难忘。
从内容开始，而不是从列开始
假设我正在为 Wheelman 的线上商店设计一个新的着陆页。它包含两款产品，其中一款配有巨大的标题、产品图片，以及你在大多数商店里都能找到的那类功能与信息。
在决定如何排列这些元素之前，我想先越过它们，去考虑它们之间的关系。我会问自己这样的问题：
- 哪些元素最值得关注？
- 哪些内容属于同一组？
- 信息是否存在自然的顺序？
只有到这时，我才开始思考视觉设计层面的问题：“一张大照片能否奠定场景基调？我是否应该让引言更醒目？空白能否引导视线并创造出停顿的空间？我怎样才能把图片和文字组合成一个经过斟酌的构图？”
这些问题帮助我在决定用哪种网格来实现之前，先理解这个布局需要达成什么。
我可以把所有内容排成单列，带来直截了当的阅读体验。那会让响应式设计容易得多。但我不会这么做。
Wheelman 有着叛逆的个性，我希望它的商店能体现这一点。一个更有活力的布局似乎更合适，但我仍然需要在两款产品及其信息之间建立清晰的层级。两列等宽的布局让两款产品获得同等的重要性。
改变它们的比例就能建立层级，即使大多数元素保持相同的尺寸。
我可以把这些比例建立在一个十二列网格之上，但我不会这么做。列只能在垂直方向上划分空间，而我要的是一个能增加另一个维度的布局。
用模块化网格增加另一个维度
把布局划分成列是一个有用的起点，但增加行会创造出另一个维度，并打开更多创意可能。列与行相交的地方，会形成矩形或方形的单元，称为模块。
把这些模块组合起来，就形成了更大的空间区域，可以用来建立层级、控制空白，并为构图增添变化。
使用模块化网格，我可以加入戏剧性、通过改变尺度来建立层级，并让构图显得远没有那么可预测。从四列四行开始，我就有十六个模块可用，但我不需要把它们全部填满。
我可以通过将大型图形标题和产品图片铺展到四个模块中来营造戏剧性，同时让产品信息和购物工具各占一个模块。
模块化结构在其他产品构成的网格中变得更加明显。大多数只占一个模块，而另一些则横向或纵向占两个模块。改变它们的尺寸会让某些产品更突出，也让整体排布更难以预测。
最终结果仍然像一个产品页面，具有清晰的阅读顺序和让内容呼吸的空间。但它也无疑让人感觉像是 Wheelman 会发布的东西。
我不指望这种构图在每种屏幕尺寸下都奏效，因此我可以调整模块的大小和数量来改善阅读体验。
而且，如果一个网格就能提供这么大的灵活性，想象一下组合两个或更多网格能做什么。
混合网格以创建复合布局
我希望 Wheelman 的网站具备的一点是多样性。它的杂志、商店和服务服务于不同目的，我不希望每个页面都感觉像是我把内容倒进了同一个模板。
Wheelman 需要既井然有序又不落俗套的布局。复合网格提供了我需要的结构，同时为不那么常规的排布留出空间。
复合网格在同一页面上组合两个或更多任意类型的网格：分栏、模块化或层级式。这些网格可以重叠、并排，或一个叠在另一个上面。组合网格创造了任一网格单独无法提供的可能性。
我可以先把一个两栏网格叠加到一个包含三栏的网格上。它们合并后的网格线形成四个分属两种不同宽度的栏，让我在不丢失底层结构的情况下获得更多灵活性。
这些比例为安排内容提供了更多可能性。我可能会用更宽的区域放照片或标题，然后把突出引文放进较窄的空间之一。另一个页面可以使用相同的底层网格，但以不同方式组合其空间，以适应另一个故事。
随着栏数增加，组合具有不同栏数的网格会变得更有趣。在 Standout Designs for the Web 中，我探索了几种组合，包括混合四栏和五栏网格，为 Wheelman 的页面创建不同的构图，同时保持连贯的视觉结构。
重点不是为了让每个页面仅仅为了不同而看起来不同。而是为每个部分提供适合其内容的布局，同时让它们都感觉像是同一家公司的一部分。
别让熟悉感替你做出选择
十二栏网格很有用，我当然不是建议你完全停止使用它们。但它们只是众多选项中的一种，而每个设计都从相同结构开始，会在你甚至还没考虑设计所讲述的故事之前就限制你的可能性。
十二栏网格所启发的 2-up、3-up 和 4-up 模式本身也没有什么问题。有时它们可能正是所需要的。但不假思索地采用它们，可能会挤压那些让网站令人难忘的个性与特色的空间。
Wheelman 给了我很多选择不同布局的理由。它的故事、产品和服务并不都需要相同的安排，而它的个性给了我机会让这些安排更具辨识度。网格只是帮助我把这些想法付诸实践的工具。
而这远不止适用于布局。同样的思考方式也应该影响我选择的颜色、我使用的字体排印、我委托制作的图片，以及我把这些元素组合在一起的方式。
这就是我写 Standout Designs for the Web 的原因。我希望鼓励设计师把目光投向熟悉的解决方案之外，在颜色、字体排印、图像和布局上做出更有考量的决定。不是为了不同而不同，而是为了做出看起来、感觉上都属于其背后公司的网站。而不是属于任何别人。
Standout Designs for the Web 现已开放预订！所有预订者还将免费获得 Hardboiled Client Interview Guide —— 一份实用的配套读物，帮助设计师提出更好的问题，发现一家公司真正独特之处。
该书将于 11 月 20 日出版，无 DRM 的 EPUB 和 PDF 版本定价为 $14.99。