用网格排版系统创造版面

注：本文是「100小时后请叫我设计师」栏目的试读文章。「100小时后请叫我设计师」希望不仅让你多懂一点设计，更要全方位提升你的设计水平，让你可以像设计师一样运用设计的力量。

---

上一节，我们学习了文段排版的三个维度，从行间距与字间距、标点处理、对齐方式三个方面认识了排版中微观的部份。而本节我们将走向宏观，学习如何创造出一个版面。大家所学的手法正是之前提到过的网格排版系统，让我们开始今天的学习吧。

阅读时思考

• 网格系统的限制在哪里？
• 网格系统适合/不适合哪些场景？

为什么使用网格设计系统

网格设计系统（又称栅格设计系统）是一种由瑞士平面设计风格（International Typographic Style）时代风靡起来的平面设计方法，一直沿用至今。

当然，在网格系之前其网格系统之前也有很多优秀的排版诞生，所以网格系统并非一切排版的根本原则。那么为什么要给初入设计基础的大家介绍网格设计系统呢？正是因为它的三个特点。

使用网格系统进行设计只需要两步：先建立网格再将内容填充进去。这如同把无从下手的页面变成了一个做好隔断的「收纳箱」，页面上每个元素的位置就有了参考，不再是乱摆乱放，自然就有了秩序。无论是建立网格还是摆放元素，都非常简单。

良好的秩序感

网格系统建立了严谨的参考线，如同一把隐形的尺子约束着所有元素的位置。内容再多再丰富都很容易制造出秩序感和节奏感。比如 Flipboard 的首页，尽管内容丰富，都呈现出良好的秩序感。

Filpboard 的首页和大致的网格

应用成熟广泛

尽管网格系统看上去非常严谨，但在应用时仍有极高的自由度。我们可以自由地跨栏放置元素，或者空出一栏。下面这些作品都是使用网格系统进行的设计，呈现出了完全不同的感觉。

EUC 生态城市联合实验室 由 A Black Cover Design 设计

Uber Career 网站

IKEA Catalog

接下来，我们将带着任务边做边学。我们的任务是给本专栏的一篇文章「色彩的作用」节选段进行排版，将同样的内容排版成适合 iPad 阅读的 PDF 文档。所用到的内容和图片可以点此下载。

页面尺寸：A4（297 mm × 210 mm；595*842px）

建议大家下载下来，边学边动手操作。接下来的内容并不会讲解软件操作相关的内容，因为可以完成这份任务的软件有很多，大家可以自行选择最熟悉的。最能胜任本次任务的软件或许是专业排版软件 Adobe InDesign，但其价格高昂，对于非专业人士来说大可不必。免费的 Figma、常用的 Powerpoint、Photoshop 等软件也可完成。

下文中动手操作部分将会用斜体字来显示。我们先从建立一个网格开始。要建立一个网格，可以分为两个部分：页边距、栏和行。

第一步：建立网格

页边距（Margin）

页面四周留白的部分即是页边距，在页面上形成一个隐形的框，框内为可以放置内容的安全区域，而框外则是留白。这是对于传统的页面排版，而对于可以的电子设备来说情况也是类似的，只是电子设备有了纵向滚动的特性，观者对于上下边距的感知会稍微弱一些。页边距无处不在，比如书籍的页边距、少数派网页版的页边距、App 设计规范的页边距。

出自：《设计中的设计》——原研哉

少数派网页版的页边距

App设计规范的页边距，出自：Human Interface Guidelines

严格来讲，安全区域之外是不允许放置内容的，也就是所谓的安全区（Safe area）。但在合理的前提下，图片是可以放在安全区域外来呈现更好的视觉张力。比如这样：

图片在安全区内（左）对比图片部分在安全区外（右）

页边距的四边不一定相等

页面上四边的是否相等，要根据实际情况而定。四边相等的页边距会让页面看起来平衡协调；而不等宽的页边距会让视觉焦点向某一方向偏移，形成不对称视觉张力。对于实体的书籍杂志，在一侧留出更多的边距也更加方便握持。

相等的页边距和不相等的页边距

页边距的尺寸

页边距该留多宽并没有标准答案。更大的页边距能够让页面显得更加庄重，视觉焦点也比较集中；较小的页边距可以给内容腾出更多的空间，承载更多内容。对于移动设备，则要取决于屏幕的大小。比如对于一张 A4 页面，可以设置 1 英寸（约为2.5cm）的页边距。而对于电子屏幕，在苹果的 Human Interface Guideline 中，在屏幕逻辑宽度为 375px 的情况下，建议页边距为左右各 16px。

在专业级的软件中（如 Adobe InDesign、Adobe Illustrator）通常设有完善的网格创建功能；

对于 PowerPoint 等没有专门建立页边距功能的软件，可以通过建立参考线充当页边距。

在我们的专栏页面设计中，因为要在 iPad 上阅读，我选择了均衡的四边等宽页边距，留白为 32px。

栏（Column）与行（Row）

以页边距为界，将内部空间分为等宽等距的若干纵向空间，这便是栏（Column）。栏与栏之间相对窄的空间则是间距（Gutter）。

由于元素的位置需要和栏形成的线对齐，所以栏越多就意味着元素的位置有更多的可能性。但若是栏过多，元素的位置的可能性就会过多，也就失去了网格对于版面的约束力。所以大家要根据实际情况，设定合适的栏数。如果对于栏的数量犹豫不决，可以先设定为 12 栏，因为 12 可以同时被奇数和偶数整除，也就意味着元素占用奇数（3、5、7 栏）栏和占用偶数栏（2、4、6 栏）都是可以兼容的。设定好栏数，还要调整随之而来的间距。间距的宽度的要求是要明显小于栏宽，同时还要足够大到能将相邻的两栏区分开来。

「栏」是纵向的线形成的空间，横向线形成的空间为「行」。类似于栏约束了元素的横向位置，行约束了元素的纵向位置。同样，行与行之间的距离，也要需要远小于行的高，且能够将相邻的两行区分开。在实际操作中，尤其是网页和 UI 设计中，行的建立或许不是必要的。因为通过严谨的间距控制也可以起到和网格同样的效果。比如规定任何元素之间的距离（甚至元素本身的尺寸）都必须是 8 的倍数。Google 的 Material Design 中提到的 8dp grid 就是这个原理。

回到我们的页面，我们的专栏排版页面中，我设置了比较中规中矩的 12 栏 + 28 行的网格。

经过以上两个步骤，我们已经得到了一个可用的网格，但还要在接下来的排版中留一个心思：不要将自己设定好的排版当成固化的规则，我们可能会遇到网格与内容配合不好的情况，这很正常，按需求更改网格即可，比如：

• 无法拉开元素间横向的距离，可能需要加大栏间距过小。
• 放置元素时要么太大要么太小，可能需要增多分栏。
• 页面中心信息太密集周围太空旷，可能需要重新调整页边距。

第二步：摆放元素

有了网格系统作为底线，无论你如何摆放，都游刃有余。即使有这样的底线支撑，网格系统内的元素摆放也是有逻辑的。下面我们将了解其中的原则与手法，并继续完成我们的页面。

基础的摆放手法并不困难，只要记住三点：

1. 将元素理解为矩形
2. 元素左上角靠交叉线放置
3. 决定合适的尺寸

我们一个一个来理解。

文段有长有短，图片有大有小。对于这些各自不同的页面元素，将他们抽象理解为矩形不仅方便处理，也和排版软件的工作原理符合。

通常情况下，元素的左上角会紧靠在网格中的栏和行（也就是横竖线）交叉的位置上。要注意，不能靠在间距（Gutter）和行（Row）线交叉的地方，因为间距的这些宽度正是为了隔开元素之间位置。当然，靠左摆放也并非绝对，我们在《处理文段排版的三个维度》中提到，一些本身就是右对齐的元素（如页码和页脚）应将元素的右下角对齐在栏与行交叉的位置上。图中的右上角的元素也是靠右处理。

找到了定位，元素是可以跨栏摆放的，所以对于一栏两栏放不下的元素，放心地使用更多的栏吧。在放置文段时，我们可以通过一行内承载了多少字数来判断宽度是否合适。因为如果行长过长，换行时视线的移动距离就更长，导致换行后的视线落点就会不清，进而换错行或换丢行；如果行长过短，观者则需要频繁进行换行，行文的连贯性降低，减慢阅读速度。

另外，视线换行在阅读过程中可以视为一种正向反馈，观者意识到自己读完了一行便更有兴致读下去。恰当的行长可以给观者恰当节奏的正向反馈，让观者更有耐心读下去。需要注意的是：因为段落是被放置在网格里的，所以行长的自由度是受到栏宽限制的，要协调好两者的关系。对于行长具体多少合适，前人的经验可供参考：英文语境下的理想行长是 9-11 个单词，中文是 38 字以内。大家在实际设计过程中可以先参照这个标准将文段排出来，然后再通过亲身阅读感受，进行判断和修正即可。

回到我们的页面，先将元素按照顺序摆上去看看吧！

明白了基础的摆放方法，我们已经可以按照正确的方式去摆放内容了。看上去有板有眼。但呈现出来的效果仍然不够理想。这是因为我们的排版只是「正确应用了网格」，还没有应用排版的原则。下面我们将了解排版背后的原则，并继续改善排版。

如同字体和色彩的选择，排版也是为了内容服务，既然为了内容服务，充分理解内容本身便是排版设计的基础。我们需要理解的项目包括但不限于页面上每个元素的作用与关系，行文的含义与断句，图片与文字的对应关系… 现在，大家可以花些时间重新阅读并理解一下这内容吧。

回到我们的内容，经过再次阅读并理解后，我对内容有了这些理解：

• 页面的组成部份有：标题，引导段，引导段的配图及其注释，阅读时思考，三个解释「色彩作用」的段落及其配图图片，章节名，页码。
• 页面可以分为两个大区：引导段和三个分论点。
• 分论点的结构统一，都是「标题+图片+文本」的结构。

理解了内容之后，你会发现现有排版有了很大的优化空间，我们先从「关系明确」下手。

在大家的社交生活中，有一种「安全社交距离」的现象：关系亲近的人的会更近，而关系疏远的人则会保持一定距离。实际上，页面排版亦是如此。通过调整元素之间的距离，可以让观者下意识地理解到元素之间的关系。大家可以观察一下身边的排版，大都符合这个基础原则。

在实际应用中，我们需要将关联较大的元素摆近一些，而关系较远的元素放远一些，关系最远的元素则摆放在边边角角。

回到我们的任务。根据刚刚我们对于内容的理解，这张页面里需要调节的关系还不少：

• 标题与正文的性质不同，需要拉远。
• 引导段和阅读时思考板块性质不同，需要拉远。
• 章节名和页码是不重要的东西，靠边放置。
• 分论点的三点是并列关系，而且结构稳定，可以和引导段的形式有所区别，尝试用上下结构并排摆放。
• 引导段的配图在文中的作用是举例，可以尝试放在旁边，作为参考和注释的角色。

经过调整后的页面元素之间关系明确，一目了然，不再需要观者通过阅读去判断了。不过对于排版的优化还没有结束，我们还需要考虑另一个原则——主次分明。

所谓的主次分明，是说页面上的元素一定不是同等重要，比如副标题没有主标题重要，正文没有标题重要，页码没有正文重要。面对不同重要的元素，我们也要分层级而治，把舞台留给最重要的内容，弱化不重要的内容。

为了凸显和弱化，我们可以使用尺寸（字号）、色彩、字重、阴影等手法让元素拥有一定的区别，形成层级。至于凸显和弱化的程度，我们可以按照观感来判断即可：最要突显的元素一眼能看到，而不重要的元素需要花些心思寻找才能看到的程度就可以了。

如果应用到我们的页面则是：

• 主标题统领全文，加粗加大。
• 引导段作为需要先读的内容，适当加大字号。
• 引导段三张配图旁边的注释，弱化艺术家的名称，与其作品的名称拉开区别，易于理解。
• 阅读时思考这段并非「正文」，使用黄色让它和其他内容有所区分，字号不变。
• 最次要的页码和章节名可以再弱化一些，颜色灰一些一些。

经过层级调整后的版面，主次分明，结构非常清晰。至此我们已经完成了本页面的排版，最后还要记得将排版形成体系。

假设刚刚设计的页面只是一本书籍中的一页，那么这本书其他页面中的标题，文本，页码等等元素也应该使用相同的手法排版并且保持一致的风格。

Principles for Good Layout Design, Tingchen https://www.behance.net/gallery/86001445/Principles-for-Good-Layout-Design?tracking_source=search_projects%7Cbook%20layout

这样做的原因是为了降低观者的阅读成本。在生活中通过统一体系而降低识别成本的例子比比皆是，制服就是如此。比如在 Apple Store 即便人员拥挤，你也可以一眼找到工作人员。这正是因为店员统一着装的功劳，虽然蓝色 T 恤本身并不特别，但只要在工作期间就会穿着统一。所以顾客就知道：只要穿着这样衣服的就是工作人员。

Apple Store

所以对于一本杂志或者书籍来说，其中的同类元素也应该有一样或类似的样式。具体的做法包括但不限于：

• 所有页面都使用同一个网格
• 标题的样式和位置一致
• 正文的样式和字号一致
• 图片尺寸的一致
• 保持正文的行长一致
• 元素间的间距一致或遵循一定的一致性

总之，只要遵循确定下来的样式和手法，不要推翻即可。当然，如果有必要改变，则需全局改变。

好了，让我们看看最后的效果吧。对比最初「只是正确使用网格」排版，效果好了不止一点半点。仔细体会两者阅读体验的区别，会发现优化前的排版有不知从何读起的感觉，而优化后的版本读起来有明确的焦点和结构。这也说明，排版对于观者的阅读体验有很大的影响，阅读顺序是可以被设计师所引导的。

完成了这个版面，我们趁热打铁，再练习两个排版来试试。

练习题：如果是活动海报

还是刚才的主题，如果将其包装成活动海报应该如何排版？同样，海报必须出现的内容在下方的如下，大家也可以按照需要增加装饰性的图片和元素。

少数派付费栏目特别活动 2022

色彩的作用 THE FUNCTION OF COLOR
如何利用色彩塑造合适的观看体验

19:00-20:30 8月18日 

主讲人：mmmmmmarcus

地点：上亭市静案区南京中路 1601 号 801 室

线上观看：少数派公众号直播

承办：少数派

我先交出我的尝试排版，左边是海报本身的效果，右边是对应使用的网格。

这幅海报的概念来自于一个摄影术语—— Golden hour，它专指黎明和黄昏时如同魔术般的天色变化。尤其是黄昏期间，天色从地平线到天空呈现出「橙-黄-粉-白-蓝」的渐变色。电影 La La Land 中这个场景就是标准的 Golden hour。

之所以选择这个概念，是因为 Golden hour 作为天然呈现且人人都有感受过的色彩体验就非常符合我们「色彩」这个主题了，所以海报背景就是模拟 Golden hour 的渐变色彩观感。部分文字上面也用了一些渐变来强化这种光影的感觉。

排版方面，我将信息分为四个层级，最重要的标题使用最大的字体并按照语意分为「色彩的」和「作用」两段，其中「作用」这两个字为下方的信息起到了锚定位置的作用。第二层信息则是副标题，作为第二显眼的元素存在，字号和标题的大字体拉开了差距，位置恰好处于标题之下，符合阅读顺序。

接下来则是时间地点等信息，我将它们安排到副标题之后，使用了一样的字号和结构，表明它们都是「活动信息」类的信息。其中，时间做了特殊处理，因为时间相对其他信息更重要。最后一层是位于顶端的「少数派付费栏目」等辅助信息，我将这些文字放在下方，和主要内容共用的栏的位置上，可以强化网格带来的视觉节奏感。而且，他们的字号也非常小，即便在最上面，也不会让它抢了主标题的风头。

当然，我的方案一定不是唯一的解法，或许你的设计能更胜一筹，欢迎将你的设计发在评论区。

本节课我们阐述了使用网格设计系统的原因，学习了如何建立网格，如何在网格中摆放元素，以及摆放元素的原则，并且做了简单的练习。我们经历的步骤如下：

• 构建网格系统：创建页边距；创建栏与行。
• 摆放元素：把元素理解为矩形；元素靠交叉线放置；决定合适的尺寸。
• 摆放原则：理解内容；关系明确；主次分明；形成体系。

最后不忘一句老生常谈：希望大家可以留意生活中的排版设计，可以带着网格系统的思路去观察和学习优秀的排版作品。下一节我们将进入一个全新的章节「需求分析」。

思考题讨论

网格系统的限制在哪里？

网格系统是一套规范化的排版方式，那么要说到到网格系统的限制，可以先说说所谓的「规范」。大家或多或少都听过一些各行业公司的「设计规范」比如 IBM 的 Carbon Design Syetem，沃尔沃的 Volvo Cars design system，Google 的 Material Design 等等…… 他们都有一个共性——提升设计质量的底线。

拿 Material Design 来说，他是自 Android 5.0 以来 Google 官方推行的设计规范。在它刚刚推出时，能符合 Material Design 规范的 App 都看上去「蛮好看的」，但在今天如果有一个 App 一丝不苟的遵循着 Material Design，我们不会认为它丑，但会认为它平平无奇。

如果站在专业的交互设计角度去看 Material Design，其规范的内容更多是「不去犯错」，而不会去指导「合理创新」。如果一律遵循规范，必然是不能做出突破的，况且规范本身就是人为制定，人为推翻的。所以，网格系统也是一种规范。我们当然可以放开手，突破网格系统，只要符合「形式用来强化内容」的原则就可以了。

网格系统适合/不适合哪些场景？

我们日常应用排版的大部分场景都可以使用网格系统解决，但有两种情况除外。

第一种情况是内容极其简单，以至于不需要画网格。比如一页 PPT 中只有一行字或一段话，为此画一个完整的网格就是小题大做了。你可以想一想是不是只需要确定页边距（用来固定页眉页脚）或者根本不需要网格。

第二种情况其实上面一到思考题已经做了概括，即网格系统阻碍发挥的时候。如果你发现本身合理的排版不符合网格，放在网格规定的位置就不舒服了，而且怎么改网格都不对，那就把它放在你原本认为舒适的地方就好了。

---

🛒 前往购买

「比身边人多懂一点设计」栏目订阅读者和少数派会员专享 20 元代金券已发放至您的「订单与优惠券」，可在下单时叠加使用。

> 下载 少数派 2.0 客户端、关注 少数派公众号，解锁全新阅读体验 📰

> 实用、好用的 正版软件，少数派为你呈现 🚀