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


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

阅读时思考

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

为什么使用网格设计系统

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

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

应用简单

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

良好的秩序感

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

应用成熟广泛

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

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 客户端、关注 少数派公众号,解锁全新阅读体验 📰

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