微信公众号排版如何兼容微信“深色模式”和“浅色模式”?

微信公众号排版如何兼容微信“深色模式”和“浅色模式”?



前不久,微信公众号推出了“深色模式”夜间阅读的用户体验的到很好的提升,但相对内容创作者却迎来了新的挑战:微信公众号内容排版如何兼容“深色模式”呢?


微信公众号排版如何兼容微信“深色模式”和“浅色模式”?


别急,365微信编辑器带大家了解一下。

 

先来说下微信公众号文章深色模式的适配方案吧,页面其实是通过颜色值进行反转计算,然后匹配相应的颜色值。比如正常的色号为[#232323]黑色,在深色模式下字体就会匹配相反的颜色[#c3c3c3]白色;在深色模式下显示的为 「#c3c3c3」的白色和「#333333」的黑色,会转换为「#b3b3b3」的白色;彩色颜色值则不进行转换。值得注意的是:彩色字体和底色不会变!





「白色模式」和 「深色模式」对比图

微信编辑器
微信编辑器





微信公众号支持插入 JPEG、JPG、PNG、GIF 等格式的图片,考虑到视觉上的统

一,尽可能的选择没有底色的图片。

目前 PNG 格式的图片是最佳的选择,底色透明,而且占用空间小,加载速度会更快一些。

例如下面的微信图标,在「深色模式」和「白色模式」下都能够优雅的展示。




 

排版的工具在上一篇文章有提到,这里再说说细节。

本文排本所使用的一些参数如下:

  • 字间距:1px

  • 行间距:1.8em

  • 端间距:3em

  • 文字大小:16px

  • 字体:Optima-Regular

  • 两端留白:10px

最后,有了以上的规范,你看到的「深色模式」和「浅色模式」下的就变成了下面的这个样子

 

微信公众号排版如何兼容微信“深色模式”和“浅色模式”?

 

OK,以上就是本次文章的内容,祝您生活愉快。






365编辑器是微梦传媒旗下的一款微信编辑器,拥有海量正版素材,动图图库,提供文章排版,微信图文美化和公众号内容编辑功能,支持实时预览,一键秒刷,多平台一键同步,实现新媒体编辑的多样化内容运营



新媒体小编都在用的365微信编辑器,大量样式模板等您解锁;更多内容请关注内容中心

www.365editor.com





上一篇 社群怎么建立,如何做好社群营销? 下一篇 【排版干货】微信公众号图文章排版实战技巧