排版|告别爆款标题样式

发表于 讨论求助 2022-08-22 14:56:43

>> >


上面四个选项都是可以戳的


昨天的文章内容并不是很充实,但是点赞率很高,所以小编一高兴就想写篇教程。今天我们来聊一聊如何用代码 DIY 一款好看的标题,并利用重复性,实现公众号的视觉识别系统。注:小编的排版理念仅为个人观点,如有不当之处,欢迎指正(最后这句是客套话,不用当真)


用代码 DIY 标题的话无非就是用 AI 做图,用 DW 修改标签闭合方式,然后将代码复制到 135 编辑器或谷歌浏览器开发者工具,实现由 AI 到微信图文的转化。如果需要保留 AI 中的字体,只需将文字创建轮廓。用代码来制作标题,具有加载速度快,不受编辑器样式的局限,可更改字体等优点,制作方法都是以前教程中涉及到的知识了,小编今天重点讲一下设计标题的几个要点。



在用 AI 进行设计标题时,首先要遵循对齐性原则。包括:标题与正文段落的对齐;标题内部元素的对齐;标题字体的对齐。


❶ 标题与正文段落的对齐:如选择标题居中对齐,在 AI 中设计时,要确保画布两端留白相同(利用 AI 的对齐画板-水平居中对齐可轻松实现)。如选择标题左对齐/右对齐,要使标题的左端(右端)与正文左端(右端)对齐。控制标题的位置可以通过<section>标签中的 padding/margin 属性来实现,具体方法请咨询度娘。(涉及到CSS盒子模型,比较容易理解,百度一下,你就知道)


❷ 标题内部元素的对齐:以本文标题为例,包含有以下几个元素:圆环标识、数字、分割线、文字、备注文字。虽然看起来比较简单,但每个元素的对齐都是有讲究的。


字与字:标题中的数字、文字均垂直对齐。通常情况下,同字号的艺术体数字与汉字并不等高,因此为了保证其高度相同,需要增加数字的字号。同时,备注文字采用等线字体,也通过调整行间距的方式保证与前面的文字等高。

字与装饰:标题中的字与垂直分割线高度一致,数字与内圆环间距=文字与外圆环间距=文字与垂直分割线间距。对齐性绝非限于水平/垂直居中对齐,还要保证间距的一致。调整各元素的间距时,要巧妙利用 AI 的参考线(快捷键 CTRL+R 调出标尺),用两条参考线度量出一段间距后,直接复制即可得到两条同间距的参考线。

❸ 字体的对齐:选择字体时,尽量选择能够保证高度一致的字体。手写体/书法体的对齐性较差,但如果符合公众号主题,也可尝试使用。使用书法体时可适当放大字号,减少字数,以增强视觉冲击力。



重复性原则在上篇推送中已有提及,在这里小编具体讲一下如何将重复性应用在标题设计上。标题作为一个全文中出现频率最高的排版元素,是建立视觉识别系统的重点。下面以本文排版为例进行说明:


❶ 重复字体:本文标题字体与封面图、文首导航、文末引导语的字体相同。在一篇文章中重复使用某种字体的标题,有利于让文章排版形成一个整体;在公众号的所有文章、后台回复图中重复使用某种字体,有利于让公众号给人的视觉体验形成一个整体。


❷ 重复颜色:本文标题颜色为 #000000,分割线、备注文字颜色为 #c9caca,与导航及正文颜色一致。


❸ 重复元素:本文标题中的圆环元素与公众号头像、文章封面图、文首导航的圆环元素相同。三个圆圈的转动方向、速度,也均与文首导航的圆环一致。


❹ 重复对齐:本文标题中备注文字采用左对齐的方式,与标题左对齐一致。数字与圆环的比例=导航中加粗文字与圆环的比例。一篇文章,正文最好选择两端对齐,其他元素对齐方式尽量保持一致。



今天的文章虽然很少涉及到代码,但看起来可能比代码还要变态。无论是对齐性还是重复性,都需要用近乎强迫症的眼光去抠每个细节。否则做出来的样式不够专业(就算不专业也要显得专业),还不如直接套用编辑器的爆款。所谓的代码排版都是噱头,代码只是实现转化的工具,细致的设计才是排版的重点。祝大家装逼愉快。

发表