【收藏】给运营新人的干货:公众号排版小技巧

1、微信推出深色模式后,适配深色模式就成为了每一个新媒体运营人员需要考虑的问题,比如原来白色底的图片放在黑色背景上会极大影响美观性。出现这种情况的时候,我们可以选择使用支持 Alpha 通道(透明背景)的图片格式(如 .png)以适配深色模式下出现的图片背景颜色问题。

▲ 深色模式下的白底图片

2、在浏览器上安装壹伴插件后,我们可以直接在微信公众号后台预览深色模式下的推文(免费)。需要注意的是,该功能目前仍在测试阶段,所以正式发布推文前仍需将推文发送到手机上进行预览。

▲「壹伴」插件提供的深色模式预览功能

3、正文部分两端对齐并缩进,我一般会选择缩进 8px;适度留白,我一般会将行间距设为 1.75,这些都是为了视觉美感。

▲ 两端对齐&缩进

4、纯黑色字(#000000)易使眼睛产生阅读疲劳,不宜用于正文部分,我自己常用的是比较淡的黑色(#555555)。

▲ 字体颜色

5、当你在推文中添加了大量图片的时候,小三角形▲+图片说明能让你的读者更好地跟上你的节奏。

▲ 图片说明

6、「阅读原文」是公众号推文中少有的可以添加外链(比如公司官网地址/商品购买链接等)的地方,可以适当进行引导,比如 Emoji 中的手势表情。

▲「阅读原文」引导

7、不小心点开推文中的图片——相信你在阅读公众号推文的时候常有这种不悦的体验。为了防止用户误触,一些公众号,比如苹果公司官方公众号「Apple」将图片设置成了背景图片。

▲ 图片防误触处理

目前还未发现比较好的第三方工具可以解决插入背景图片且自动占位这个问题,所以暂时只能使用代码,好在并不难,在你需要插入图片的地方注入以下代码并修改图片链接、图片高度、图片宽度这三个参数。

<div style="height: 0; display: block;">
<svg style="display: block;background-image: url("这里放图片链接");
background-size: 100%;background-repeat: no-repeat;" viewBox="0 0 图片高度 图片宽度" width="100%" xmlns="http://www.w3.org/2000/svg">
</div>

注入代码的方式可以看看我之前发过的文章——【SVGⅡ】用代码在公众号中画各种图形

当然,你也可以选择壹伴插件/新媒体管家插件提供的代码编辑功能。

8、有很多时尚大号擅长一图流,如「GQ实验室」「局部气候调查组」等,这种风格也客观解决了深色模式的配色问题。如果你有意尝试这种风格(当然需要设计师配合),长图拼接缝隙将会是你排版时遇到的一个问题,如果你不知道如何修改代码,请在秀米/135编辑器中搜索「无缝图片」模板,插入模板并替换成你自己的图片即可消除两张图片间的间隙。当然你也可以尝试为图片添加浮动代码解决这个问题。

▲ 图片拼接缝隙处理

我们一直为样式所累,如果你感兴趣的话,后面我将出一期 CSS+Markdown 的排版教程(图文/视频),不要被这些技术唬住,它们简单易学且能极大地把我们从繁琐的排版工作中解脱出来。

发表评论

邮箱地址不会被公开。