给新手设计师的排版设计指南

神译局2021-04-13
想要打破陈规,需先学会规则。

神译局是36氪旗下的编译团队,关注科技、商业、职场、生活等领域,重点介绍外国的新技术、新观点、新风向。

编者按:即使不是专业的设计师,我们也经常会在生活中进行排版设计,大到网页设计,小到一份Word文档的文字组合。排版设计的本质是“图像+文字”,这个简单的元素背后,有着无限的可能性。本文来自Medium,作者Monica Galvan在文中介绍排版设计的基本知识和相关技巧。原文标题“Improve your designs with these typography tips”。

图片来自Medium|制图Monica Galvan

优秀的版面设计可以为你的作品锦上添花。我们可以对字体进行多种类型的设计,从而适应某种具体的需要。你可以调整字体大小、间距、对齐方式、色彩,等等。一旦你掌握了排版设计的基本技巧,你就可以和其他字体搭配,实现多样化的、多次层的设计。

版面设计是一种排列字符的技巧和艺术。无论是设计海报、书页,还是APP上的文字,版面设计都在一定程度上参与创造了我们的视觉体验。

排版设计的目的有两个:第一个是清晰可读,要时刻考虑用户是否能够阅读它。第二个是使用特殊的排版技巧,创造一种美学氛围,从而吸引特定的受众。

学习基本的版面设计规则将帮助你成为更好的设计师。你需要做的只是一点理论知识,外加不断练习。接下来我们就开始介绍相关理论。

设计 vs. 设计式样,有什么区别?

设计(Typeface)和设计式样(font)的意思有重合,所有有时候人们难以分清这两种术语的区别。简单来说,设计就是各类设计式样的集合体,而设计式样就是每一种具体的、特殊的式样(比如不同粗细的字体)。

举个例子,Helvetica Bold就是一种设计式样,是Helvetica大家族中的一种。通过下面的图片,你可以很清楚地看到二者的区别。

图片来自Medium|制图Monica Galvan

字体的类型

字体可以分为三种类型:衬线字体、无衬线字体和装饰性字体。

三种类型的字体举例 |图片来自Medium|制图Monica Galvan

  • 衬线字体

衬线字体(Serif)是连接笔画较明显、或者笔画末尾有细线的字体。这些字符通常会在笔画末尾有一个小小的衬线,不同类型的衬线产生了不同类型的字体,从而产生了独特的效果。有时候衬线的区别会非常细微。

F尾部的衬线|图片来自Medium|制图Monica Galvan

衬线字体一般会更加正式和传统。编辑们经常会挑选这类字体,用在报纸、杂志和书籍正文中。Times New Roman 是最著名的衬线字体之一,它或许是您在计算机中最先了解到的字体。以下是一些比较著名的衬线字体的例子:

五种衬线字体|图片来自Medium|制图Monica Galvan

选择衬线字体的一个优势就在于可以自定义部分内容。举个例子,大部分衬线字体都是可以斜体的(而无衬线字体则没有)。有一些衬线字体也具有其他的变化,如连字变化。

  • 无衬线字体

无衬线字体(sans serif)一词来自法语,意思就是“没有衬线”。这种字体往往更加现代、醒目,可以在设计大型标题时考虑它们。

有衬线字体(左)和无衬线字体(右)的区别|图片来自Medium|制图Monica Galvan

最流行的一种无衬线字体包括Arial,它是Helvetica字体的复制品。下面的图片中介绍了一些最受欢迎的无衬线字体:

7种最受欢迎的无衬线字体|图片来自Medium|制图Monica Galvan

  • 装饰性字体

这类字体主要用于标题。由于它们缺乏易读性,所以尽量不要选择用装饰性字体来呈现大量的正文。装饰性字体包含的内容非常广泛,包括slab serifs、 scripts、blackletter和monospaced等。它们也会有一些有趣的用法,可以为设计增光添彩,但在使用时一定要谨慎。 

装饰性字体|图片来自Medium|制图Monica Galvan

版面设计元素

 版面设计元素一览|图片来自Medium|制图Monica Galvan

现在,让我们一起来探讨一下和印刷相关的术语。相关的术语非常多,比如大写高度、基线、上伸、下延、字形末端等。

但是,成为优秀设计师和认识多少术语并没有直接关系。相反,我们应该要多关注核心元素,因为你可能会每天都使用它们。

  • 行距

行距是两行字之间的距离,具体而言是两行字基线之间的空间距离。行距是影响阅读体验的重要因素之一。

一般来说,行距越短,阅读起来就越困难。但是,如果两行之间的空间太大,也会影响阅读体验。所以,行距需要掌握一个微妙的平衡,你必须根据文本的用途来调整字体。

行距|图片来自Medium|制图Monica Galvan

  • 字符间距

字符间距是指一系列字符(通常是一行或者多行)上每个字母的间距。字符间距的数值越小,字符之间就越紧凑。反之,数值越大,字符之间的空白就会越多。

你需要根据需要调整字符间距。太紧凑或者太宽松都会影响文字的可读性。

通常情况下,全都是大写字母的标题都需要增加字符间距,正文部分字符间距相对小,如果想要和标题区分开,还经常使用斜体。

字符间距由小到大的不同效果|图片来自Medium|制图Monica Galvan

  • 字距

字符间距是字符之间的距离,而字距是单指每个字母之间的距离。

字距|图片来自Medium|制图Monica Galvan

在大多数情况下你不需要调整字距,尤其是对大段文本而言。通常情况下,在调整标题或Logo的时候(这时候字母通常情况下不超过五个字)需要微调距离,这时候才会选择调整字距。字距的调整是非常微小的,当字母越大,字距的调整才越明显。在缺乏具体模版和数据的时候,你需要受过专业训练才能看出来字距是否过大。

在大多数设计软件中,你可以选择光学字偶距(Optical)或者度量字偶距(Metrics)。度量字偶距可以调整不同字体样式的微调,大多数的字体样式都可以用度量字偶距调整。光学字偶距的原理是按照字符形状来调整相邻字符之间的距离。

  • 段落对齐

段落对齐包括左对齐、右对齐、居中对齐和适应对齐。

通常情况下。右对齐是一个不错的选择。居中对齐适合少量文本和标题。在大多数情况下,人们的阅读习惯更适合左对齐。

左对齐的文本更便于眼睛辨认和理解,因为我们都是从左到右来阅读页面的。现在,大多数的书籍都是左对齐或者在适应的前提下左对齐的。适应对齐的文本更为传统,经常用在报纸、杂志上。对于适应对齐的文本,有时候你需要调整字符间距来避免句子中出现的空白。

四种对齐方式,从左到右、从上到下依次是:左对齐、右对齐、居中对齐和适应对齐|图片来自Medium|制图Monica Galvan

选择哪种段落对齐,取决于最终的视觉效果如何。有时候,当你将文字左对齐或者居中对齐的时候,你会发现边缘部分差异过大(参考下图左边的文本)。在这种情况下,你需要按下回车键手动调整,从而创造出更好的视觉效果。下图是两个文本的例子,你觉得哪一个看起来更舒服?

左边是糟糕的排版,右边是理想的排版|图片来自Medium|制图Monica Galvan

层次结构

设计和排版中最重要的是做出一个层次结构。不管你在做什么设计,层次感都是不可避免的。如果登录页面上所有的文字大小都相同,用户会不知道先阅读哪些内容,很容易就会失去耐心,直接选择退出。

通过更改字体、大小、粗细和颜色,你可以引导用户一眼看到最重要的信息。

在你的设计中加入层次结构

有三种方法增加层次结构。

首先是增加排版设计的大小——最重要的信息占据的篇幅是最大的,辅助信息的篇幅相对较小。

接下来,我们可以使用颜色或者色调来创建层次结构。对于主要信息可以加粗,对于次要信息可以使用更加柔和的色彩。

你还可以通过调整间距来创建层次结构。比如你的标题可以是大而粗的亮色字符,也可以在这个基础上将标题和正文留出足够的间距,这样用户或者读者会第一眼就看到这类消息。

增加版面设计的对比

使用上面的方法可以增加版面设计中的对比度。比如,你可以在标题中使用亮红色,正文则使用暗红色,通过色彩的对比可以产生良好的层次感。

另外,你还可以从文本的“轻重”这一角度考虑。作为练习,你可以把不同的字体进行粗细搭配以查看效果。标题使用粗体和亮色,正文则应该使用常规颜色。当一种字体有多种字体式样时,这种组合搭配就会有更多花样。

你当然还可以通过改变大小来增加对比,也就是创建字体相同、但是大小不同的文本组合。

最后,你开可以尝试一些文本全部使用大写字母,搭配的文本则使用小写字母。所有都是大写字母的段落会牢牢抓住读者的眼球,因为这是一种独特的风格。你也可以选择将标题全部设为大写字母。

如何选择字体式样

现在你已经了解了什么是排版设计,了解了字体的三种类型,以及使字体清晰易读的几种调整策略。现在我们将利用学到的这些基础知识,来作出好看的设计。

  • 避免追随潮流

选择和设计字体的第一点就是避免跟随潮流。要优先考虑经得起时间考验的经典字体。

  • 从选择字体类别开始

将挑选字体式样想像成不同场合挑选服装。你需要穿着正式还是随意?都有谁到场?这些问题都可以帮助你缩小字体的类型和范围。举个例子,如果你现在正在为百事可乐设置首页,那么你可能需要更加现代的无衬线字体,以配合它们设计大胆的徽标。

如果你是要为一部严肃的剧情电影设计海报,也许你会更需要用稳重优雅的衬线字体做标题。

任何时候,都要根据当时的场景和需要选择字体。

  • 字体数量尽量控制在2-3个

不要在一个版面设计中使用太多类型的字体。字体越多,阅读或者区分的难度就会越大。通常情况下,请尽量将字体数量控制在2至3个。

在搭配多个字体时,请确保选择两种截然不同的字体。比如,不要选择看起来几乎没有差别的两种无衬线字体,而且应该将无衬线字体和衬线字体或装饰性字体搭配,以达到理想的区分效果。

如何提高排版技巧

事实上,想要提高这类技巧,我们必须不断练习。

如果你是版面设计的新手,那么请先从自己探索文字开始,暂时不要考虑用颜色、摄影、图像或者其他方式进行设计。

打开一款你喜欢的设计软件,从一个白色的画板开始。添加一个标题,一段正文,然后开始探索不同的组合和搭配。

如何创建层次结构?请在白板上多添加一些文本,然后用文中提到的技巧去改变字体大小、字母间距、单词大小写等。

如果你有信心,可以开始尝试搭配2至3种字体,同时调整它们的色彩和间距等。你很快就会发现,设计的本质就是“图像+文字”,在这两个元素中,存在着无限种搭配、无限种可能。

译者:Michiko

+1
10

好文章,需要你的鼓励

参与评论
登录后才能参与讨论哦...
后参与讨论
提交评论0/1000

请回复有价值的信息,无意义的评论将很快被删除,账号将被禁止发言。

文章提及的项目

下一篇

干掉ATM机的是移动支付,那未来电子发票、电子合同是否会影响到快递?

2021-04-13

36氪APP让一部分人先看到未来
36氪
鲸准
氪空间

为你推送和解读最前沿、最有料的科技创投资讯

一级市场金融信息和系统服务提供商

聚集全球最优秀的创业者,项目融资率接近97%,领跑行业