查看原文
其他

JZ 的文章是如何排版的?

2016-09-21 言十、Iris JZsolv

这里是工作狂的聚集地

职场

学术

新媒体

设计

极客


特立独行的排版,是怎样炼成的?



不少读者都在后台留言说,JZ 的排版和他们所知的许多公众号非常不一样。那么,JZ 特立独行的排版是怎么制作的呢?



前两天,我的好友阿禅在「可能吧」上介绍了《可能吧的文章是如何排版的?》,文章里他说目前用 Markdown 的语法大大简化了排版过程。读者可能会发现,这篇文章下面有我的留言,谈到了一种我在考虑开发的插件式一键渲染方法——通过提供 MD 的 CSS 渲染模版,只需要按下组合键就可以完成预设风格的排版。



当然,JZ 目前采用的不是「可能吧」式 MD 排版,而是标准的企业级 HTML5 模块排版。具体的操作会比较专业,有兴趣的读者可以回复“报名”在上海参加线下培训。



如果你是企业账号运营者,建议你非常仔细阅读这篇文章。JZ 作为微信行业中的版式设计领军厂牌,在给其他企业订制高级排版规范的时候,都统一使用这套排版规范。



使用 HTML 编辑器排版



JZ 有一套自己的 VI,而这套 VI 是基于 HTML 代码设计的。如图,它们包括▼




所以在排版时,我们建议使用 135编辑器。首先将完整代码贴入,随后根据需要进行删改。或者当我们需要新增一个局部模块时,就复制对应模块代码,替换代码的部分内容。



如摘要样式▼



摘要样式



代码如下:


<center style="box-sizing: border-box;">        <span style="font-size: 16px; margin: 10px; border-top:3px solid #0492A2;width:70%; border-bottom:3px solid #0492A2;padding: 10px; color: #0492A2;"> 摘要样式</span>    </center>


大标题样式▼ 


大标题



代码如下:


<center style="box-sizing: border-box;"> <span style="font-size: 18px;"><strong><span style="border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #0492A2; padding: 10px; color: #0492A2;">大标题</span></strong></span> </center>


如果我要修改文字,只需把代码里的文字替换成另一段文字即可;如果修改文字样式,也可以直接使用 135编辑器 的文字样式修改功能



通常,我都会先选择把文章在 135编辑器 中排好,排版正式完成再复制到微信后台。



细心一点



要做出一个好的排版效果,需要排版者非常注意细节和排版规范。 比如 JZ 的排版,就要注意以下但不仅限于以下细节: 



文字



正文字号 14 px,标注关键词、箭头换颜色;



不同样式的功能不同,要根据文章内容进行选择。比如说:



这个是文字引用



这个是大标题



这个是小标题




引用文字或总结部分,用蓝色特殊页面板块;引用当小标题,用引用样式;



图片/视频和文字的间距固定,图片上方空一行,下方空两行;



注意字距和标点符号的使用规范,具体请见《中文排版指南(有点变态)》



尾部关键词需要保证整行文字一样长。



图片&视频



不管是头图子图 icon,还是图片本身,都要确保图片画质(这里给到一个技巧,大多数位图格式如 .jpg/.png 在上传微信后,正文内的画质都会被压缩,但其实如果你把静态图导出为静态.gif 格式,微信就不会压缩画质);



图片先插在 135编辑器样式内,再复制在后台;



如果是第一次做的文章,先将图片插在 135编辑器内,再复制在微信后台; 如果是微信里排好的文章,需要改动位置的话,图片就要重新插入;



直接插视频,不插链接。



那我是怎么记住这些要求的呢?我做了一个思维导图,整理排版思路,排版完对着导图检查,确保不出纰漏。▼




这个方法也可以给微信小编们借鉴一下。



聪明一点



排版不仅仅训练的是排版能力本身,还有对文字内容的把控力、考虑用户体验的能力等。在 JZ 文章的排版乃至任何文章的排版过程,都需要充分理解文章内容,并且换位思考读者的感受。



一个用户打开自己订阅的公众号推送的文章,需要看到三个窗口。



首先出现在第一个窗口的是标题,它决定一篇文章是否足够吸引读者打开。▼ 



在单图文情况下,引语会出现在第二个窗口。▼




它也会出现在文章分享到好友的缩略界面上。两者共同决定了读者对文章的第一印象。▼



因此,标题和引语需要反复斟酌。引语用一句话介绍文章内容,不能与正文部分有较大重复。



摘要,首先出现在第三个窗口。这个窗口也决定了用户会不会拉下来继续看。由于在手机上,第一屏显示了正文前面的部分,如果足够吸引读者,他们就会继续往下看




所以摘要和文章的开头部分也需要斟酌



另外,排版时也需要全面理解文章内容,头图、子图 icon 的选取,根据文章内容而变。



想学习标题和引语的写作技巧?



JZ 近日将在北京开展《奔向 10W+!—— 新媒体顶尖文案训练营》线下课,不仅会更详细地介绍标题党的科学养成方式,还会介绍 JZ 曾创下的两日 170W 阅读事件,以及全面解剖行业大号成功的秘诀。报名请扫下方二维码▼






其他你会感兴趣的内容

回复 VI看图文排版视觉系统原理

回复 排版学习超高颜值排版技巧

回复 大V 探讨微信大号运营策略


设计、培训、运营等合作请致电

TEL:(021)3721 8818



除了干货,其他什么也没有




54 27808 54 15287 0 0 3081 0 0:00:09 0:00:04 0:00:05 3080

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存