10 分钟就能轻松上手,这是我的公众号排版小技巧

2021 年 11 月 20 日 少数派
面对一篇微信公众号的文章,大家可能觉得没什么不寻常,但如果你有看到作者创作时使用的排版工具,便知道一篇文章排版工作的「不易」了。
比如说一篇文章的标题、引言、小标题、段落、引导等等,通常需要在浏览器插件、第三方浏览器等方式逐个插入模板来调整实现。虽然看似方便,但是日复一日重复这些操作,是十分枯燥无味的
近期因为工作需要我捡起这活,在被「折磨」好一段时间后,发现真的做不来这种重复的工作,于是决定花时间解决它。当然我也并非标新立异,只是觉得一个内容工作者,应该把更多的时间留在内容上,重复的排版工作交给程序执行不是更香吗?
公众号排版样式的自动化
微信公众号的文章并非长篇大论,绝大多数也不是专业文献,所以它最常见的排版样式一般是一级标题、二级标题、正文、引用、图片、加粗等等。
这么一看,很容易联想到专门给写作者用排版语言:Markdown。它的好处是能让你通过键盘就能完成特定的格式排版工作,十分快捷高效。当然了,它也并非复杂的编程语言,可能你只需花 10 分钟就能轻松掌握
比如说:写一级标题只需在文字前面加一个 # 号,引用段落样式只需在文字前加 > 号,文字加粗则在文字两边分别加两个 * 号:
Markdown演示(少数派的读者都很熟悉了~)
如上图所示,通过 Markdown 写作,我们解决了内容排版样式自动化。但最重要的问题是:微信公众号编辑器不支持 Markdown,我们该如何同步自动化排版好的内容呢

Markdown 转富文本

在网页查看代码不难发现,微信公众号编辑器其实源于百度 FEX 前端团队的开源的 ueditor 富文本编辑器项目,所以想要解决上面的问题,我们就需要将 Markdown 转为富文本
Google 搜索后,其实很快能在开源项目/软件中看到有很多优秀的实现方法 (世界可真美好!) ,比如 markdown-here、mdnice、typora 等等。通过以上这些服务 / 软件,在 Markdown 创作且排版好的内容便可以轻松转为富文本,并支持直接粘贴到公众号编辑器中,让排版样式得以保留。
左 / Markdown编辑器,右 / 粘贴到公众号的效果

主题 CSS 样式的修改

解决前面的问题后,其实还需要对 Markdown 主题 CSS 样式进行修改。毕竟上述服务的默认主题样式都太普通,并不完全适合自己的公众号。
CSS(层叠样式表),是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
Markdown 主题 CSS,其实就是决定 Markdown 编辑器里标题、字号、间距、颜色等排版样式的呈现,所以只要我把此前的排版习惯配置到 CSS 生成主题,便相当于一劳永逸地完成了排版工作,完全不需要再每次手动调整排版,即在 Markdown 软件边写作边排版。
CSS 部分截取
如果你负责的是品牌类公众号的内容创作,也可以直接把品牌的颜色/特征运用起来并写入 CSS,让排版风格更具独特性和不可模仿性,即既不普通也不像第三方编辑器那般俗套。
在多款服务 / 软件尝试后,我最终选择使用的服务是  mdnice 。除了能更好的实现上述两个需求,它还拥有稳定的图床,在其创作图文并茂的内容粘贴到微信公众号编辑器时都能完美显示(多数服务虽然也有图床可上传图片,但粘贴到公众号编辑器总会提示失败,需要手动逐个重新上传)。另外值得称赞的是它编辑界面主要分为三个区域,分别是:Markdown输入区、主题效果预览区、主题 CSS 区,让创作者能实时知道最终的排版效果:
mdnice 界面
微信公众号排版的建议
毫无疑问,内容重于排版,但好的排版,能让内容看起来更「舒服」。
在我看来,一个及格的排版需要考虑到使用设备、使用场景,所以微信公众号排版想达到及格线,就必须做到:
  • 使用减压的排版 :因为手机的屏幕比例相对细长,宽松舒适的排版会更利于阅读;
  • 设计清晰的层级:手机阅读一般是纵向滑动,合理的层级设计,能让读者阅读时明确自己看到了什么位置。

针对这两个问题,我是这样做的:
说明:关于微信公众号排版,少数派作者  @马马马马马马克思  曾在《第八章 | 微信公众号排版的建议》有详细的讨论过,作者的观点和我基本一致,所以下方内容会稍有重复。
使用减压的排版
微信公众号的阅读时间是碎片化的。如果不能为读者提供一个舒适的阅读环境,减小读者的阅读压力或阅读成本,那往往就不会有把文章看完的意愿。
我会建议从这 4 个方向解决问题:

1. 留白的页距、字距、行距、段落间距

在平面设计中,留白的意义在于给予设计呼吸的空间,提供布局上的平衡。留白区域的环绕与陪衬,良好的衬托出中心区域的表现。
而在阅读场景的留白,不仅可以更突出内容,还可以为读者减压,增强读者能持续阅读下去的耐心
实际效果可以看看下方的对比:
左 / 未优化,右 / 已优化
从横向角度看,我给文章提供了更宽的页边距,让内容和屏幕边缘不再紧密挨凑,而是有了明显留白,让视觉上有了休息的空间。所以在自定义 CSS 样式时,我推荐将 margin 左右边距设置 6px。
页距对比
而在字距上则推荐将 letter-spacing 设置为 0.5px,略微调宽的字距能让字体相对不过于紧凑,减少阅读压力。
而从纵向角度看,我调整了行距和段落间距,其中我觉得最重要的是段落间距。因为考虑到手机滚动阅读的操作、从上到下的阅读习惯,段与段之间间距需要更加明显,方便阅读的定位。
段落间距对比
段落间距调整后,行距也需要随之调整,让段落之间和行之间的间距悬殊控制的合理的范围内。目前我在自定义 CSS 样式里,将 margin 上下边距设置 11px,行高 line-height 设置为 25px。

2. 使用两端对齐

为了能使上述提到的页距效果最大化,我建议在正文使用两端对齐。倘若不使用,很容易造成文字的行尾形成不规则的锯齿状,通篇下来,会让阅读压力明显提升。
左 / 居左对齐,右 / 两端对齐
不过两端对齐也有个弊端,当遇到中英文、数字公式等内容时,两端对齐会为了「盲目」对齐,导致字间距被过渡放大,阅读起来也十分难受。我建议遇到这种状况时,可以选中该段路文本直接使用普通的居左对齐。

3. 使用合理的字号

字号大小,是读者最能感知排版的存在,也是决定文章横向空间中显示字符数量的主要因素。
出版行业里有个术语叫 CPL,即较优的每行字符数(character per line),行业普遍采用的较为理想的数据是:每行字数在 40~50 个左右。
而在手机上,如果考虑到屏幕比例的细长和排版边距的调整,微信公众号文章的每行理想字数是 21 个左右,所以我推荐在自定义 CSS 样式里,将字体大小调整为 14~15px。至于多层级的标题大小,可以根据实际需要进行调整,但尽可能确保大小相差不要过大。

4. 不使用绝对的色值

白纸黑字,在白色纸上写上黑色的字,看起来理所应当。可实际上,在电子屏幕阅读时,如果白色背景色采用纯黑的字体时,对比会十分强烈,不仅给人一种沉重感,还会造成不小的视觉疲劳。
左 / 纯黑,右 / #33333
解决的方法其实也很简单,不使用绝对的黑(即#00000),而是使用那些看起来像黑色但又不是纯黑的颜色,我自己比较倾向使用  #333333 来解决上述问题。

利用 Markdown 进行层级设计

合格的层级设计,能让用户清楚知道自己阅读到了哪里,不会觉得有看着看着迷路的错觉。我一般会用这两个方法避免:

1. 不同层级不同样式

从我个人的习惯看,一篇文章的层级通常会有 2~3 个。想让层级更清晰,你可以使用模板、字体大小、位置、颜色等各种方法区分。
但我实在是觉得第三方编辑器模板插入麻烦,而且样式很俗套;专门设计的标题规范图片,每次插入又很麻烦,于是我选择在 CSS 主题中分别对它们的样式进行了简单的自定义:
这里的二级和三级区分不明显,还有很多优化空间

2. 小节间插入较为明显的分割线

在每个小节结束时插入分割线,可以让读者明显感受到上下的内容将会有不同,而且也能告诉读者已经读完了一节内容。
不过微信公众号编辑器自带的分割线就是一条无法调整页距的线条,特别影响整体的视觉美观。所以我也在 CSS 主题中调整了分割线的页边距,并且添加了向中间过渡的渐变,让视觉看起来更舒服:
左 / 默认分割线,右 / 优化后

3. 合理的加粗提醒

对于微信公众号文章的重点内容提醒,很多写作者经常会选中好几句连续的文字加粗换个亮色,虽然确实让他们和普通的文字产生明显的不同,但我觉得如果在一段文字里,有连续加粗换个亮色的重要句子,那就说明这段文字里就压根没有重点。
重点是指主要的,而不是指相对主要的 。我在自定义的 CSS 样式里,为标重点做了两个形式:
  1. 使用代码块,标注重要的专有名词 (因为我的创作上不涉及使用代码块写代码,所以和代码块本身的用法不存在冲突)

  2. 使用纯黑加粗,区别于正文的非绝对黑色333333 (只对真正重要的句子加粗)

以上就是我对微信公众号排版自动化的尝试,对我个人工作而言,确实帮我提升了不少效率,至少让繁琐重复的排版调整工作离我远了不少,希望也能对屏幕前的你有所帮助!最后感谢 mdnice 开发者开发的服务,真的超赞。
原文链接:https://sspai.com/post/69926
作者 / 洛世
责编 / 广陵止息

/ 更多热门文章 /

登录查看更多
0

相关内容

Markdown 是一种轻量级的标记语言,可以用一些简单语法来表达一些富文本内容。
干净的数据:数据清洗入门与实践,204页pdf
专知会员服务
161+阅读 · 2020年5月14日
【干货书】R语言书: 编程和统计的第一课程,
专知会员服务
111+阅读 · 2020年5月9日
公众号的粉丝,怎么就变成视频号的了?
人人都是产品经理
0+阅读 · 2022年2月6日
Python NLP 入门教程
开源中国
14+阅读 · 2017年10月1日
Python 书单:从入门到……
Linux中国
39+阅读 · 2017年8月6日
国家自然科学基金
3+阅读 · 2014年12月31日
国家自然科学基金
1+阅读 · 2014年12月31日
国家自然科学基金
0+阅读 · 2014年12月31日
国家自然科学基金
0+阅读 · 2013年12月31日
国家自然科学基金
0+阅读 · 2013年12月31日
国家自然科学基金
0+阅读 · 2012年12月31日
国家自然科学基金
0+阅读 · 2012年12月31日
国家自然科学基金
0+阅读 · 2009年12月31日
国家自然科学基金
0+阅读 · 2008年12月31日
Arxiv
1+阅读 · 2022年4月19日
Arxiv
20+阅读 · 2020年6月8日
A Multi-Objective Deep Reinforcement Learning Framework
VIP会员
相关资讯
公众号的粉丝,怎么就变成视频号的了?
人人都是产品经理
0+阅读 · 2022年2月6日
Python NLP 入门教程
开源中国
14+阅读 · 2017年10月1日
Python 书单:从入门到……
Linux中国
39+阅读 · 2017年8月6日
相关基金
国家自然科学基金
3+阅读 · 2014年12月31日
国家自然科学基金
1+阅读 · 2014年12月31日
国家自然科学基金
0+阅读 · 2014年12月31日
国家自然科学基金
0+阅读 · 2013年12月31日
国家自然科学基金
0+阅读 · 2013年12月31日
国家自然科学基金
0+阅读 · 2012年12月31日
国家自然科学基金
0+阅读 · 2012年12月31日
国家自然科学基金
0+阅读 · 2009年12月31日
国家自然科学基金
0+阅读 · 2008年12月31日
Top
微信扫码咨询专知VIP会员