我的公众号文章排版编辑方案 2.0

2022-08-10 15:24:37 +08:00
 huhexian

当你选择阅读这篇文章时,我们应该达成了一个共识:微信公众号官方后台编辑器特别烂、特别难用

四个月前,我分享了编辑公众号的方法(1.0),和本文内容差不多,都是基于Markdown,今天不同的是编辑之后的样式,以及字号的大小等有所调整,变得更加美观,易于阅读。

为什么要排版?

因为阅读一篇排版精美的文章,是眼睛的一种享受。独立博客庭说有一篇文章《微信公众号排版心得》,作者提到古人对于写作有两个基本要求:

  • 有物
  • 有序

有物,即文章要有内容;有序,即文章要有条理。我可以理解为内容上和排版上都要有条理,内容、结构清晰有条理,自然而然可以对文章排版结构进行合理划分。

如果想了解精美的排版是怎样的,我建议可以去看看这几个公众号的文章:槽边往事中国新闻周刊三联文化周刊

如何有效排版?

我们在用 Word 进行编辑文字时,里面需要设置的格式很多,包括页面大小、行间距、段间距、字间距,字体、字号、颜色……在微信公众号排版上大致可以参考这些。我从版面、文字、样式三方面分享。

干净的版面

简单来说,拒绝花里胡哨,我不喜欢用秀米、135 等编辑器的原因之一就是过于花哨,对于以文字写作为主的公众号作者来说不适合。此外,界面元素太多,容易干扰写作,它给我的印象是更适合营销宣传类公众号使用。

  • 行间距在1.7-1.75之间为宜
  • 字间距在1-2之间为宜
  • 两边缩进设置默认为8

关于文章的配图,我一直觉得非必要情况下,一张头图即可,它只是文章的点缀,排版做好了,没有图片搭配,阅读也是一种享受。如果要插入图片,我的建议:图片上下空行。本文加上封面,共 3 张图,足够。

我们习惯了在纸媒上看每段文字首行缩进两格,这个习惯我也一直在坚持,无论是考试写作文还是平常写日记。但是在电子阅读上,首行缩进更显多余,没有必要

另外,我想说一个我讨厌的点。见过许多公众号文章,不知道 ta 是在写诗还是写文,常常一句话一行,一篇文章下来,只见整整齐齐的一列,像是叠好的俄罗斯方块。尽管这样能使人阅读更加轻松,尽管现在的人没多少耐心读长文,但我总觉得很不舒服。

合适的文字

对于文字,我们需要考虑的方面有字体、字号、英文大小写、中英混写等。

中文和英文都有各自适宜的字体,在公众号上中文基本上是宋体,但不同的字体只有在 iOS 设备上才看得出。

同时,标题和正文的字号大小应该不一样,方便读者区分。中文里没有斜体这一样式,尽量不要使用。中英文同时出现时,中英文之间需要增加空格,例如上面提到的 iOS 。专有名词要使用正确的大小写,这个我也经常出错,例如GitHubYouTube

总结一下:

  • 正文字号 14
  • 标题字号 15 或 16
  • 中英文之间增加空格
  • 专有名词注意大小写

还有更加细致的内容可以参考 GitHub 中的一篇文档《中文文案排版指北》。

统一的样式

请快速浏览本文,可以发现我的标题(一级标题和三级标题)、加粗,以及用反引号包起来的内容,都是统一的颜色。

上面我提到,如果仅用字号大小来区分正文与标题,可行但不太明显,如果给不同层级的标题添加不同的样式,这样即容易区分,又显得有层次感。

另外,我建议,一旦确定使用某种样式,后续的所有文章都应采用这种样式,以形成自己的风格,增加读者的印象。我之前的样式风格和现在不一样,因为当时不同层级的标题区分不明显,我自己看着也不合适。

总结一下:

  • 样式做到统一且固定
  • 形成“自成一派”的风格

排版的工具呢?

微信 Markdown 编辑器

Markdown是我认为最合适的排版工具,然而微信公众号后台编辑器不支持该语法,不慌,有方法。

Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。相关语法本文不做介绍,可自行前往菜鸟教程网站查看学习。

你所阅读的这篇文章就是在 Markdown 编辑器中完成的。

一款高度简洁的微信 Markdown 编辑器,支持 Markdown 语法、色盘取色、多图上传、一键下载文档、自定义 CSS 样式、一键重置等特性。

自动即时渲染为微信图文,这个功能在上图中可以看到,左侧是 Markdown 文档,右侧则是渲染后的微信图文。

当编辑好一篇文章时,只需点击右上角的复制,再去公众号后台编辑器粘贴即可,不用增添删改,直接发布。

说在最后

我也不是专门写一篇文章为这个编辑器打广告,只是在摸索中找到了合适且喜欢的编辑样式,于是拿来自用并做分享。

不用花太多心思想着如何将一篇微信图文写得多么漂亮、华丽,Less is more,就我个人理解来说,大道至简,更少但是更好,因为你把重要的东西做好了,那个重要的东西就是内容。让读者享受你的文章,读懂你的内容,这就是more

使用地址

https://doocs.github.io/md/

最后,可以点击原文查看最终排版效果。

https://mp.weixin.qq.com/s/_v1QluFXNjrElEplqGWHZw

2608 次点击
所在节点    分享创造
8 条回复
codingBug
2022-08-10 21:58:04 +08:00
颜值有点高
cdroot
2022-08-10 22:35:16 +08:00
感觉很好
matthewzhong
2022-08-10 22:52:32 +08:00
一直在用你这个编辑器,感谢!
huhexian
2022-08-10 23:22:05 +08:00
@matthewzhong 不不不,这个不是我开发的,上面有开源地址,应该感谢开源作者。
liuzhihang
2022-08-11 01:01:22 +08:00
一直使用 mdnice
Envov
2022-08-11 11:33:52 +08:00
好赞
moonkiller
2022-08-12 14:27:14 +08:00
厉害了 排版和楼主的颜值一样高
cocang
2022-08-14 10:18:33 +08:00
我也喜欢简介之道,不过商业微信编辑器也是挺有可圈可点之处的,比如说样式多氛围感更足,交互性多,快捷 SVG 动效等等

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/871944

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX