你也许会在夜晚和周末,不定期更新一下自己的个人号;你也许作为一位新媒体运营,掌控着公司各种账号的推送。

无论你是谁,只要你写公众号,就一定会关注排版。毕竟,排版是内容的呈现形式,是文章的门面。

本文要解决什么问题?

「写作半小时,排版大半天」是很多人在公众号写作中遇到的问题。

为什么会这样?因为公众号提供了极其丰富的排版功能,可以调整字号、修改颜色、调整对齐,每个人都可以发挥自己的聪明才智,给自己的文章来一个独一无二的排版。

公众号后台的工具栏

再加上市面上还有琳琅满目的第三方公众号编辑器,一不小心就把时间都花在排版上了。

作为对比,今日头条的后台,提供的排版功能就显得非常简单了,常用功能其实就几个:设为标题、加粗、插入图片……没法调字号,没法改颜色。

头条号后台的工具栏

这其实是两种产品思路。写微信公众号,像是在亲自做一本杂志,各种色彩、各种图形,都可以放在里面;而写头条号,像是在给报纸上的专栏撰稿,只需提供文字,排版不归你管, 报纸自有规范。

从写作效率的角度,头条号的方案明显更优。忽略形式,专注内容,可以更高效地产出文章。

因此,建议大家根据自己以往文章的风格,花时间总结出自己的一套排版规范。有了规范之后,每次就可以专心写作。写好之后,直接套用排版,即可发布,非常节省时间。

如何确定一套排版规范?

1. 确定层次

一篇文章的正文内,如何划分层次?

只要不是写学术论文,都可以参考头条号的方案:用一级标题划分层次足矣,不需要二级标题、三级标题。

如何突出重点?加粗即可。

确定了层次,接下来就需要通过给不同层次的文字设定不同的样式,来把它们区别开来。

2. 正文的样式

正文是一篇文章内占据篇幅最大的部分,因此,正文最重要的是「可阅读性」或者说「易读性」,让读者可以清晰地阅读,不至于眼睛疲劳。

正文的字号,建议为12px~18px。太小看不清,太大无美感。

Apple的Human Interface Guideline (HIG)规范,正文字号为17px。

iOS HIG Paragraph text

Google的Material Design规范,正文字号为16px。

Material Design Body1

正文的颜色,不建议使用纯黑色#000000。对比度太大会导致刺眼,建议使用最接近黑色的灰度色。

比如,可以参考蚂蚁金服的Ant Design规范,使用#262626。

Ant Design Gray

或者参考Google的Material Design规范,使用#212121。

Material Design Grey

正文的行距,建议为1.2倍~1.5倍。这样可以让每行之间适当留空,营造出版式的呼吸感。

3. 标题的样式

标题穿插在正文中,起到提纲挈领的作用。因此,标题最重要的是「醒目度」或者说「吸引力」,让读者在快速浏览时可以一眼看到。

标题的字号,完全可以和正文一样,只需通过调整字重颜色,和正文有所区分即可。不必刻意追求字号的「大」。

Apple的Human Interface Guideline (HIG)规范,页面标题字号和正文一样,为17px。但是,字重为「Medium」,即中粗体。

iOS HIG Page titles

Google的Material Design规范,常用的标题字号为14px,甚至比正文的16px还要小。但是,字重同样为「Medium」,即中粗体。

Material Design Subtitle2

值得注意的是,标题也是文章中为数不多的,可以突出公众号品牌的地方。因此,可以在标题中应用自己公众号的品牌色,使其成为大片黑白之中的一抹彩色。

以头条号为例,系统提供了3种标题样式供选择。它们虽然造型和位置不同,但是几何图形的颜色都是「头条红」。

再比如腾讯官网,标题前面的矩形使用了「腾讯蓝」。

4. 排版规范示例

假设你的公众号logo如下:

现在,咱们根据上文的内容,来为你的公众号快速制定一个排版的规范:

正文:字号18px、颜色#262626、行距1.5倍。

标题:字号18px、中粗体、颜色#262626、行距1.5倍。标题文字的左侧12px处,展示1个宽度为4px的矩形,颜色为#f85959。

在构思好规范后,可以用自己熟悉的画图软件把它画出来,就像这样:

恭喜你,已经成功创造出了带有自己品牌基因的公众号排版规范。

如何在写作中套用规范?

套用规范,是为了减少排版的机械性工作,专心于文字写作。

这里,向大家介绍一个概念:Markdown语言。

1. Markdown

不要听到「语言」二字就觉得这是一个很深奥的东西,其实简单来说:Markdown是一门用于写作的语言,非常容易上手。

根据上文所制定的排版规范,大家只要知道以下2个Markdown语法即可:

# 一级标题
**加粗**

使用Markdown语言写作,需要使用相对应的软件。在这里,推荐大家使用Typora,完全免费,同时支持Windows和macOS平台。大家可以去它的官网typora.io下载安装。

解释一下:在文字前面加上「#」号,就表示这是一级标题;把文字使用「**」包围起来,就表示对文字加粗。

使用Markdown语言写作,需要使用相对应的软件。在这里,推荐大家使用Typora,完全免费,同时支持Windows和macOS平台。大家可以去它的官网typora.io下载安装。

现在,可以体验一下,在Typora里,使用Markdown语言专心写作的感觉了。

加「#」号,是一级标题:

普通输入,就是正文:

把文字用「**」包围起来,是加粗:

写好之后,选择全文并复制,然后粘贴到公众号后台即可:

可以看出,用Markdown语言写出来的东西,所见即所得。复制粘贴去公众号后台之后,文字的字号、颜色、行距,都保证和写作时一模一样。

但是,这个排版后的效果,并不是上文制定的排版规范啊。

没错,目前的排版效果,只是Typora自带的一套默认主题。咱们现在需要把刚刚制定的排版规范,写成Typora的主题,以供咱们使用。

这里,向大家介绍一个概念:CSS语言。

2. CSS

又是一门「语言」,不要紧,咱们只需要掌握一点点皮毛就行。简单来说,CSS是用来描述一个网页应该长什么样子的语言。

还记得刚刚咱们制定的排版规范吧:

正文:字号18px、颜色#262626、行距1.5倍。

标题:字号18px、中粗体、颜色#262626、行距1.5倍。左侧展示1个宽度为4px的矩形,颜色为#f85959。

把这套规范用CSS语言写出来,就是这样:

p {
  font-size: 18px;
  color: #222222;
  line-height: 1.5;
}
h1 {
  font-size: 18px;
  font-weight: bold;
  color: #262626;
  line-height: 1.5;
  padding-left: 12px;
  border-left: 4px #f85959 solid;
}

其中,p表示正文,h1表示一级标题。知道了这个,再直接翻译成中文,就非常好理解了:

正文 {
  字号: 18px;
  颜色: #222222;
  行距: 1.5;
}
一级标题 {
  字号: 18px;
  字重: 粗;
  颜色: #262626;
  行距: 1.5;
  左边距: 12px;
  左边框: 4px #f85959 实线;
}

3. 使用CSS作为Typora主题

现在,随便打开一个文本编辑器,把上面的英文CSS代码粘贴进去,存储为「公众号.css」。

然后,在Typora的偏好设置里,点击「打开主题文件夹」,把咱们的「公众号.css」文件复制进去。

复制成功后,退出Typora,再重新打开Typora。在「主题」菜单中,就可以看到咱们的「公众号」主题了,选择它:

成功了,排版规范应用成功。

现在进行技术总结

  • 忽略形式,专注内容。
  • 正文最重要的是「可阅读性」。
  • 标题最重要的是「醒目度」,可以融入品牌色。
  • 在Typora内用Markdown专心写作,可以随时切换各种主题。

其实,你正在看的这篇文章,就是使用文中的方法完成的:使用Markdown写作 -> 粘贴进公众号后台 -> 配图 -> 推送出去。