微信公众号高级排版指南笔记

微信公众号高级排版指南笔记

语言准备：Markdown基础入门

标题

• 代表标题，最多可叠加至5个#，也就是五级标题

• ===和---添加在文字下方也可标记一级标题和二级标题

段落

• 两次回车创建一个段落
• 强制断行效果可通过shift+回车实现

超链接

• [链接名称] (链接地址) 去掉空格即可
• <链接地址>

图片

• ！ [] (图片链接)
• 推荐图床：极简图床、iPic

列表

• 无序列表 * 空格
• 有序列表 1. 空格
• Tab键可进行缩进

引用块

• “>” 空格
• “>>”可进行多重引用

强调

• 两个**或__包裹实现加粗
• 一个**或__包裹实现倾斜

代码块

• 行内代码块为``包裹在单词前后
• 段落代码块为上下各```包裹在段落前后

分割线

• “---”
• 三个*
• “- - -”
• 三个*+空格

---

规范准备：公众号排版设计规范

公众号设计规范的要素

• 配色方案
• 价值定位区块
• 导语区块
• 标题区块
• 正文区块
• 强调文本区块
• 行动呼唤区块

配色方案

• 配色方案包括彩色系和无彩色系
• 彩色系一般不使用超过三种色彩
• 彩色系一般使用于标题或强调处
• 无彩色系黑白灰一般选用3-4个梯度
• 无彩色系一般使用在正文和引用文本

价值定位区块

• 提供关于公众号的竞争优势、用户价值等信息
• 通常是关于公众号的一句话简介
• 公式：目标用户+痛点问题+解决方式
• 通常的表现形式为：文章头图/作者名称

导语区块

• 一般用于出现在文章的头部
• 通常用于表现创作背景、写作动机或构造悬念
• 通常的表现形式为：左边框+右缩进
• 在正文中，引用的表现形式和导语通用

标题区块

• 公众号文章标题级别通常不超过三个级别
• 二级标题使用频率最高
• 字体表现形式：放大/加粗/主色
• 对齐方式常见：左对齐/居中
• 其他修饰风格各异，下边框居多

正文区块

• 公众号文章的主体，创建设计氛围的重要载体
• 公众号默认正文字体大小16px
• 公众号默认正文字体颜色值#3e3e3e
• 公众号支持的字体有限，但可自定义
• 正文字体15px、颜色#333333颜色、1.8倍行距可以快速构建一种优雅感

强调文本区块

• 强调文本区块用于突出重点、表明身份等场景
• 具体的表现形式包括加粗、倾斜、加主色、放大、下划线等
• 公众号最常用的两种强调形式为：加粗和加主色
• 外站超链接在公众号图文中无法使用，所以强调文本会与超链接文本混用

行动呼唤区块

• 行动呼唤一般放置于公众号的文末，是所有文章的最终目的
• 常用的形式包括二维码扫描、商业购买、原文链接、相关阅读等
• 通常需要进行额外的图片设计和嵌套
• 二维码扫描的形式会再次加入经过变形的价值定位

---

样式准备：自定义公众号排版样式

配置公众号自定义渲染样式

配色方案的自定义样式

• 保存配色方案的颜色值

价值定位区块的自定义样式

• 直接插入图片

导语区块的自定义样式

• blockquote分组代表导语区块
  • border-left为导语左边黑线的宽度和颜色、soild为实线
  • padding代表左边的线和文字的距离,即内边距，1em为一个默认字体的大小
  • color为导语的颜色

标题区块的自定义样式

• h2（二级标题）分组代表标题区块
  • font-size为字体大小
  • border-bottom为标题下方边框的厚度、实线和颜色

正文区块的自定义样式

• wrapper分组代表正文区块
  • font-family为英文字体（中文字体无法更改）
  • font-size为正文字体大小
  • color为正文颜色
  • line-height为行高，行与行之间的空隙
  • margin为上下、左右空出的距离，即外边距
  • text-align为正文的对齐方式

Notes | 公众号 Markdown 排版失效的问题

问题：

学习完课程后，在实践过程中遇到了这样一个问题。当我一键markdown后，排版样式只是临时统一。当我保存后，再次打开，发现排版字体又变回了16px，另外上下左右边距也消失了。

近期微信对公众号后台编辑器做了一些功能的升级和调整，就不再支持 Markdown here中 .markdown-here-wrapper的全局设定。所以如果你需要调整正文的样式，需要改用P标签来进行自定义。

比如你需要调整所有段落文字的边距、字体类型，可以通过在 Markdown Here的渲染代码中对P的代码做如下修改：

p {  
    margin: 0 0 1.2em 0 !important;
    font-family: Avenir, PT-sans !important;
    padding: 0.5em 1em !important;
    font-size: 14px !important;
    line-height: 1.8em;
}

!important在这里的意思就是“强制应用”的意思。

当然在邮件、非微信公众号编辑器等其他地方还是可以正常使用的。

Notes | 如何在自定义微信正文字体

微信上支持的字体有限，这个取决于微信内的浏览器支持那些网页字体，所以最妥当的就是使用它默认的字体(点击“清除格式”)后显示的那一个。

但是根据目前在IOS设备的尝试，支持的中文字体有：平方(PingFangSC)，微软雅黑(Microsoft YaHei)，华文细黑（STHeiti Light）等等，具体的常见字体代号参见：中文网页用什么字体最合适？

那应该如何在Markdown Here中修改呢？我们可以挑选出对应的正文标签P，然后做如下属性声明：

p { 
    font-family: PingFangSC-regular, "Microsoft YaHei", STXihei, serif;
}

上面之所以有多个字体，主要的规则有三条：

• 优先使用排在前面的字体。

• 如果找不到该种字体，或者该种字体不包括所要渲染的文字，则使用下一种字体。

• 如果所列出的字体，都无法满足需要，则让操作系统自行决定使用哪种字体。

强调文本区块的自定义样式

• strong分组代表强调区块
  • color为强调文本颜色
  • font-weight为强调字体大小，有light、normal和bold三种大小

行动呼唤区块的自定义样式

• 直接插入图片
• 当最后一句话为引用语时行动呼唤图片也会被引用进去，因此需要提前插入图片避免这种情况

---

一键排版：公众号自动排版工作流

---