排版|告别爆款标题样式
上面四个选项都是可以戳的
昨天的文章内容并不是很充实，但是点赞率很高，所以小编一高兴就想写篇教程。今天我们来聊一聊如何用代码 DIY 一款好看的标题，并利用重复性，实现公众号的视觉识别系统。注：小编的排版理念仅为个人观点，如有不当之处，欢迎指正（最后这句是客套话，不用当真）
用代码 DIY 标题的话无非就是用 AI 做图，用 DW 修改标签闭合方式，然后将代码复制到 135 编辑器或谷歌浏览器开发者工具，实现由 AI 到微信图文的转化。如果需要保留 AI 中的字体，只需将文字创建轮廓。用代码来制作标题，具有加载速度快，不受编辑器样式的局限，可更改字体等优点，制作方法都是以前教程中涉及到的知识了，小编今天重点讲一下设计标题的几个要点。
在用 AI 进行设计标题时，首先要遵循对齐性原则。包括：标题与正文段落的对齐；标题内部元素的对齐；标题字体的对齐。
❶ 标题与正文段落的对齐：如选择标题居中对齐，在 AI 中设计时，要确保画布两端留白相同（利用 AI 的对齐画板-水平居中对齐可轻松实现）。如选择标题左对齐/右对齐，要使标题的左端（右端）与正文左端（右端）对齐。控制标题的位置可以通过<section>标签中的 padding/margin 属性来实现，具体方法请咨询度娘。（涉及到CSS盒子模型，比较容易理解，百度一下，你就知道）
❷ 标题内部元素的对齐：以本文标题为例，包含有以下几个元素：圆环标识、数字、分割线、文字、备注文字。虽然看起来比较简单，但每个元素的对齐都是有讲究的。
字与字：标题中的数字、文字均垂直对齐。通常情况下，同字号的艺术体数字与汉字并不等高，因此为了保证其高度相同，需要增加数字的字号。同时，备注文字采用等线字体，也通过调整行间距的方式保证与前面的文字等高。▼
字与装饰：标题中的字与垂直分割线高度一致，数字与内圆环间距=文字与外圆环间距=文字与垂直分割线间距。对齐性绝非限于水平/垂直居中对齐，还要保证间距的一致。调整各元素的间距时，要巧妙利用 AI 的参考线（快捷键 CTRL+R 调出标尺），用两条参考线度量出一段间距后，直接复制即可得到两条同间距的参考线。▼
❸ 字体的对齐：选择字体时，尽量选择能够保证高度一致的字体。手写体/书法体的对齐性较差，但如果符合公众号主题，也可尝试使用。使用书法体时可适当放大字号，减少字数，以增强视觉冲击力。
重复性原则在上篇推送中已有提及，在这里小编具体讲一下如何将重复性应用在标题设计上。标题作为一个全文中出现频率最高的排版元素，是建立视觉识别系统的重点。下面以本文排版为例进行说明：
❶ 重复字体：本文标题字体与封面图、文首导航、文末引导语的字体相同。在一篇文章中重复使用某种字体的标题，有利于让文章排版形成一个整体；在公众号的所有文章、后台回复图中重复使用某种字体，有利于让公众号给人的视觉体验形成一个整体。
❷ 重复颜色：本文标题颜色为 #000000，分割线、备注文字颜色为 #c9caca，与导航及正文颜色一致。
❸ 重复元素：本文标题中的圆环元素与公众号头像、文章封面图、文首导航的圆环元素相同。三个圆圈的转动方向、速度，也均与文首导航的圆环一致。
❹ 重复对齐：本文标题中备注文字采用左对齐的方式，与标题左对齐一致。数字与圆环的比例=导航中加粗文字与圆环的比例。一篇文章，正文最好选择两端对齐，其他元素对齐方式尽量保持一致。
今天的文章虽然很少涉及到代码，但看起来可能比代码还要变态。无论是对齐性还是重复性，都需要用近乎强迫症的眼光去抠每个细节。否则做出来的样式不够专业（就算不专业也要显得专业），还不如直接套用编辑器的爆款。所谓的代码排版都是噱头，代码只是实现转化的工具，细致的设计才是排版的重点。祝大家装逼愉快。
