可能是深色模式下最好的公众号阅读体验！

iOS 版微信今天发布了 7.0.12 版本，更新了对「深色模式」的支持，并可跟随系统设置。 不管是对话框还是朋友圈都做了比较好的适配，可以应对绝大部分夜间使用的场景，建议去 App Store 升级体验。

美中不足的一点：公众号的排版受到了巨大挑战。许多内容和图片在「深色模式」下出现了白底显露、对比不明显等问题，阅读体验较差。为此我做了一些尝试，保证白天和夜晚都有很好的阅读体验。遂有此文，抛砖引玉。

欢迎使用本文排版规范的在文章标注：

本排版规范来自 @eBooksPlan

总体

微信的「深色模式」是一种色号为「#232323」的黑，并不是绝对的黑，更加偏向于视觉上的「灰」，我建议将其设为默认字体的颜色。本文在「白色模式」下字体的黑色即为「#232323」，「深色模式」下的白色为「#ffffff」的白色。此种情况下，当你在两种模式之间切换时，会有一种颜色如同潮汐般渗透出来的感觉，十分神奇。🌝🌚

另外，作为黑白两种颜色之外的补充色，经过再三比较，我最终选择了色号为「#ab1942」的红色，作为强调、突出、标记等场景使用时的颜色，感觉如下，接近朱砂红的质感。

◎ 纯粹基于僧僧的审美，说不定亮一点的红色会更加活泼些

封面

微信官方提供的头条封面图尺寸是 900 x 393 px ，次图封面图尺寸是 200 x 200 px，把内容放置在中间 400 x 400 px 的正方形内，效果是最佳的。

◎ 建议保存至本地或收藏 👆

文字

字号

标题：18 px

正文：16 px

注释：12 px

根据内容设计上的「对比」和「重复」的原则，标题、正文、注释应该有层级大小的区别。

字体颜色

文章排版整体的颜色尽量不要超过三种，当然你也可以大胆打破这种局限，前提是你要清楚知道何时这么做。任何时候不要使用斜体，这在数字屏幕上很不美观，会失去界面原有的结构美感。

以下是我常用的配色：

• 标题：#c00000、#ab1942、#0070c0、#3f3f3f

• 正文：#3f3f3f、#595959、#7f7f7f

• 注释：#888888、#a5a5a5

• 突出：#c00000、#ab1942、#0070c0

对齐方式

两端对齐

这种对齐在英文排版上应该是要极力避免的，除非行足够长，能够避免单词之间出现难看的空隙。不过，在公众号中这种对齐方式可以实现文章的规整，视觉效果是最棒的，推荐使用。建议参数设置为 16 ，避免文字在屏幕边缘过于危险。

居中对齐

比较适合一些较短的文章，资讯和娱乐性质的内容，一行字不要太多，尽量不要断行。

间距

字间距

一般来说，文章的字号小的话，字间距相对就越大，使得文字易于识别，但是字间距过大又会导致文章信息传递的速度降低。一般建议 1.0 的间距。

行间距

行间距为 1.0，太过拥挤。过于密集的行距会让读者的视线在换行时产生困扰，影响阅读体验。所以，我大多选择 1.75 行间距，当文字很少则可以设置为 2 倍。

段间距

段落之间的间隔，应当比行间距更大，以使文章更有层次感。段距可以直接用回车换行，也可以设置段间距。推荐段间距：段前距为 15，段后距为 15效果可能更好一点。另外，段落最长不要超过一屏。尽量控制在 4 行左右。由于每行本身文字不多且首行缩进是用在中文书籍中用于辨别分段情况，所以尽量不要使用首行缩进。注意：文章字体越小，行间距就应该越大，确保字与行之间呼吸的空间。

两端留白

在两侧留白，是内容居于视觉的核心区域，可以让文章看起来既干净又具有凝聚力，读起来更轻松。

图片

微信官方支持 JPG、PNG、GIF 等格式的图片，考虑到「灰色模式」的显示效果，图片不要使用白底的了，尽可能选择没有底色的图片。

一般情况下，PNG 图片在导出时，大小不超过 40K，并导成 PNG8，在保存到微信公众号后台时，就不会被自动添加白底。在公众号后台不做技术升级的情况下，目前 PNG 格式的图片是最佳选择。

排版规范

在两侧留白，是内容居于视觉的核心区域，可以让文章看起来既干净又具有凝聚力，读起来更轻松。

中英文之间需要加空格

示例：Sketch 作图是个技术活。

中文与数据之间需要加空格

示例：你的生日是 5 月 29 日。

专有名词使用特定大小写

示例：据说新 iPad Pro 要出来了。

对于完整的英语句子，则使用半角标点

示例：我最喜欢的英文名言是「Less is more.」

多说几句

另外字体的选择上，考虑到不同设备的适配，就选「Optima-Regular（中文细体）」吧。规范即是美，设计时请遵循以下四大原则：对比、重复、对齐、亲密性。

文字也是需要亲密性的，和读者，和自己。

欢迎使用本文排版规范的在文章中标注：

本排版规范来自 @eBooksPlan

相关文章

今天科技界没有新闻