如何更好地使用栅格系统

印刷中也会用到栅格，但就本文而言，我主要想探讨的是用于PC和移动设施上的栅格系统设计。

紫色块放内容

内容块包含文本，图片以及是它们的组合方式，背景色彩实际上不能算是内容元素，除非是成为文本以及照片的容器。

上图中的粉色块作为栅格中的列，它们组成了内容宽度。一般来说，列宽是不会变的，只是列数会随着设备的不同而差异，比如从PC端的12列变为平板手机上的8列，然后在移动端变为4列。严格来说，你或许可以定义任何想要的列宽，但大多数状况下的网格列宽都设定在60-80px之间。选择适合的列宽是最重要的，因为它是内容宽度的主要决定原因。

水槽是在列与列之间的空间。20px是一个常用的规格修改，当设计块状或者卡片元素的网格时，这种间距比较重要，比如做照片类设计的之后。有些平台会随着设施宽度的降低而下降水槽的厚度，但也可以保持固定。

外边距也称为外水槽，是内容宽度之外的空白区域。为了更便于的设计，外边距会随着设施宽度的降低而下降。移动设备的边距通常为20-30px，而在平板手机和PC端，这个厚度一般会变化巨大。

以下会介绍一些基本的准则，但要知道在实际设计中似乎没有任何硬性的要求。

1.内容元素需要位于若干列上

其核心观念是内容元素需要位于若干列上，你可以任意分割，比如6×2,3×4,4×3。下面的举例中，我展现了不同分割方法设计的信息卡片。

如果我们把内容都放到网格上，文本内容会变得很长，最佳的位置是不严格在任何网格上，这只是可以的，只要理解了整个元素实际上是一个不可见的，更大的容器就行。

正确的内容填充方法和不恰当的把栅格当做边距

然而即使有人说“我必须一个1200px宽的设计”，这并不意味着你的设计就是1200px宽，这也许是说设计内容长度在1200px的画布内，实际内容占位是960px，这样才会有空间留出外边距。

5.完全出血的元素或纹路图形必须设计在画板边缘，并理解为出血的列网格

这个页面布局的底部图片被设计成完全出血

这是一个例外的规则，当背景色彩以及照片在完全出血的状况下，开发同学会把它理解为一个全屏的内容元素。

如果设计的是装饰元素等等的内容，可以接受它被裁切掉，此时也可以摆脱栅格化的设计。

一些照片和文字的出血设计

页眉和脚注有时也是例外，它们不被觉得是内容的一个别。有些设计将他们固定在浏览器边缘，有些则偏爱保持内容的宽度，这取决于自身用途和内容的状况。将他们维持在内容宽度内的好处是，当用户在宽屏显示器上看页面时，不应该来回扫视；将他们固定在浏览器上的好处是可以为导航元素提供更多的空间。

栅格化布局如何做到响应式

图片来源Intuit

在特色的栅格化系统设计中，列的长度和水槽的厚度是维持不变的，只是列的“数量”发生差异。为什么要如此处理呢？这是为了让设计更简洁。如果一组三张卡片分别放到桌面的四列上，那么在平板手机上，会显示两张卡片，并把第三张卡片进行折行显示在第二行上。不应该做任何的调整，因为尚未清楚它位于第四列上了。在手机上，答案也很简单，只应该一张卡片，其他的都会自动堆到以下的行中。如果你宁愿，也可以更加有创意，选择只在电脑上显示一张卡片，或者做一个水平滚动。这些列的自适应对于代码来说就是很简单的参考。

实际上，web必须展现任何浏览器的宽度。例如，有一个大显示器，它可以看见1600像素宽的东西，实际上pc端的网页设计是1200px宽，平板手机上是768px宽，手机是360px宽。所以你会发现一个大于1200px的设计，有长期的留白。但是当你的浏览器再小一个像素，1199px，会出现哪些呢？

固定网格

固定栅格示意

如果开发那边写了一个固定栅格，当你从桌面缩小到平板手机，就像是在900px的浏览器长度时，你不会发现任何变化，设计如同是被剪掉了一样。但当超过768px临界点时，设计很快还会改变，平板手机上的显示效果才会好上去。如果再次增加这个值，同样的事情也会出现，在到达另一个临界值之前，设计看上去都是不变的。

流动网格

流动网格的示例

目前来看看流动网格的特征，当窗口缩小时，内容将动态的出现差异，文本会进行换行，元素也会变窄。然而，这些元素在内容宽度缩小到下一个临界值之前，布局是不会变化的。

然而我想说的是，设计的临界值也是一个修改布局的参考点。这就是为什么列宽和水槽在网格中不会改变的缘由，因为我们想让设计师在考量布局时才会更易于地创建一致性。

混合网格

在实际项目中，使用流动网格和固定网格的组合也有常见的做法。网站一般是流动网格，因为它要去适应各类不同终端的大小。

一些做的很酷的栅格系统

不应该太呆板地去坚持传统栅格套路，12、8、4这样的分布，甚至不应该20px的水槽。下面是一些在设计中使用栅格系统做的很棒的设计灵感。

Invision’sGenomeProject

可以发现，他们的设计刻意不去使用任何的水槽，所以看上去是无缝的。

这个网站除了设计的很高，他们还运用了在设计中展现她们自己的栅格系统来让整体的设计显得非常性感。

DropboxDesign

他们没有设计水槽和外面距，相反，整个页面被切成两半，然后将内容填充到这两个别。

WordPress

WordPress创建帐号页面

使用网格的方法取决于你自己。你可以在主要内容部分使用网格，次要内容则不使用。在Wordpress的举例中，页面中间的个别使用栅格化设计，左侧的侧边栏则没有使用。

TheMockupClub

内容和网格也并不总是从后面开始，对于模型网站，内容在上面也未尝不可。

Instagram

我特别确定的说，Instagram的PC端是用上了6列栅格布局。

要点总结

写这篇文章的目的是想提供一些关于怎么在响应式设计中使用栅格系统。我明白对于我自己来说，我花了这些年的时间写了长期的代码来理解网格是怎样工作的。我在YouYube上看了这些视频，也阅读了长期的文章，但每个人都在关注它为什么重要，却不去强调到底如何在自己的项目中使用这种方法。

你要做的最好的事情就是从那时开始注意这些优秀设计是怎样对齐元素的，你将要开始发现这种方式。为了帮助理解，这里有一些设计平台概述了他们的网格使用：

Intuit’sDesignSystem

…Andhere’shugelistofothersystemsyoucanlookthrough

在完全理解了网格的工作原理后来，我终于变成了一名更好的设计师，因为我明白我的设计将怎样在临界值之间进行转化。我也可以落地我的设计，使他们无法有一个完美的像素对齐。这样的规范带来了更一致，更简单的设计，当客户从一个界面到另一个界面流转时，这真的提高了产品的档次。我建议在你的设计中去应用这种网格，并和开发一起，以同样的形式将他们落地，这即将是一个特别不错的进步。

本文翻译已获得作者的即将授权

授权截图