已在页面完全加载前强制排版_公众号写作排版指南v2.0（适配Dark Mode）

微信的 iOS 版已经适配了 Dark Mode，Android 的深色模式也正在内测中，夜间使用微信的体验将大大提升。

公众号文章是由用户自定义图片，文字颜色，排版等等，很难做到完全适配。这使得当浏览公众号文章时，效果大打折扣。

这时候可以按照一些规范，调整排版，使得文章在 Dark Mode 下依然赏心悦目。

文字颜色

首先说说微信公众号文章深色模式的整体适配方案，页面通过对颜色值进行一定的反转计算，得到了 Dark Mode 下匹配的颜色值。例如正常模式下色号为「#232323」的黑，在深色模式下显示的为「#c3c3c3」的白；「#333333」的黑，会转换为「#b3b3b3」的白；彩色颜色值则不进行转换。

参考 @阿里巴巴国际 UED 以及 @ebooksplan 对于深色模式适配的文章，总结了如下的文字配色方案：

这是微信在「白色模式」和「深色模式」不同颜色文字渲染效果，可作为参考，主题色可自由选择。

图片

微信公众号支持插入 JPEG、JPG、PNG、GIF 等格式的图片，考虑到视觉上的统一，尽可能的选择没有底色的图片。

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

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

排版

：公众号写作排版指南 v1.0

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

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

字间距：1px
行间距：1.8em
端间距：3em
文字大小：16px
字体：Optima-Regular
两端留白：10px

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

OK，以上就是本次文章的内容，希望你阅读愉快，Good Night！

完

文章首发于公众号「嗜码」

已在页面完全加载前强制排版_公众号写作排版指南v2.0（适配Dark Mode）相关推荐

企业微信加载html模板,企业微信公众号页面模板使用的方法是什么?
微信公众号页面模板是最近公众号推出的功能哦,这个功能可以解决管理员不少的麻烦呢,很多的公众号都开通了这个功能,就算你开通了这个功能,你也要学会使用哦,企业微信公众号页面模板使用的方法是什么呢? 企业微 ...
【Vue】—解决页面图片加载抖动的问题
[Vue]-解决页面图片加载抖动的问题问题如下解决办法 overflow:hidden; height:0; padding-bottom:*; // 其中*处填图片的高宽百分比=高/宽*100 ...
页面加载前需要定义全局变量
页面加载前需要定义全局变量如:var layer,laydate,layuiForm,layuiTable; 加载和初始化layui模块 layui.use(['layer','form','lay ...
纯web项目不能使用mui.preload进行页面预加载的解决办法
首先: 纯web项目不能使用mui.preload进行页面预加载的, 比如[基于微信的web项目](http://ask.dcloud.net.cn/question/20644) 怎么办呢? 自己写 ...
CEF3—在网页加载前给js对象填值
文章目录 CEF3-在网页加载前给js对象填值前言思路代码 CEF3-在网页加载前给js对象填值前言记录一次笔者在实际开发中遇到的问题.在用cef做多页应用开发的时候,多个单页共享数据的问题 ...
小程序性能优化之页面预加载方案——让你的小程序运行如飞进阶篇
小程序性能优化之页面预加载方案进阶篇转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80798452 写在前面预加载方案 ...
前端技术-HTML页面的加载
HTML页面的加载 HTML页面的加载实际上是基于http过程+浏览器对数据的解析渲染. http协议的请求过程是基于TCP协议的.http是要基于TCP连接基础上,简单的说,TCP单纯建立连接,不涉 ...
【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
[react] 在react中页面重新加载时怎样保留数据？
[react] 在react中页面重新加载时怎样保留数据? 使用浏览器localstorage来保存应用程序的状态个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎 ...

已在页面完全加载前强制排版_公众号写作排版指南v2.0（适配Dark Mode）

文字颜色

图片

排版

已在页面完全加载前强制排版_公众号写作排版指南v2.0（适配Dark Mode）相关推荐

最新文章

热门文章