微信公众号 高级排版指南

一、语言准备:Markdown 基础入门

markdown 简介:是一种轻量级的标记语言,目前也被越来越多的写作爱好者、撰稿人广泛使用。
使用markdown编辑器:
在线编辑器:stackEdit 和 简书
离线编辑器:Typora 、Markdown Pad、 Mpu

标题
方法1:# 一级标题 、 ##二级标题 、 ###三级标题
方法2:文字下加===(3个等号)一级标题、---(3个小破折号)二级标题、###三级标题一样的。

段落
两次回车分段效果
shift+回车为断行、分行效果

超链接
方法1:在要加超链接的内容上加英文字符状态的【】,后加圆括号(),括号中放链接地址。
方法2:英文字符状态<>,括号中加链接地址或邮箱地址。

图片
英文状态的!【】()圆括号中放图片链接地址,推荐在线工具极简图床和客户端ipic图床神器,快速得到图片地址链接。

列表
无序列表:方法1:破折号-加空格 方法2:星号*加空格。
有序列表:数字1英文句号.加空格,在一级序列中再插一级子列表时,需要按住Tab键或按4个空格缩进,右边就呈现层级缩进效果。

引用块
英文字符>加空格,双重引用嵌套的样式2个大于号>>加空格

强调
加粗处理:词语两边各加2个**星号或2个下划线--
倾斜处理:词语两边加1个星号或1个下划线

代码块
行内代码块突出重点,呈现为背景略灰的色块样式,在要突出的前后加英文字符的分号`(和~键在一起的),整个段落突出就在段落前后加3个英文字符的分号。

分割线
方法1:3个英文字符状态下的破折号---
方法2:3个或以上英文字符状态下的星号***
方法3:1个或以上英文字符状态下的破折号-加1个空格,要3个- - -
方法4:1个或以上英文字符状态下的星号* 加1个空格,要3个* * *

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

公众号设计规范的要素:
配色方案;价值定位区块;导语区块;标题区块;正文区块;强调文本区块;行动呼唤区块。

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

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

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

标题区块的应用:
公众号文章标题级别通常不超过3个级别;
二级标题使用频率最高;
字体表现形式:放大、加粗、主色;
对齐方式常见:左对齐、居中
其他修饰风格各异,下边框居多。(em是默认的倍数)

正文区块的应用:
公众号文章的主体,创建设计氛围的重要载体;
公众号默认正文字体大小16px像素;
公众号默认正文字体颜色值#3e3e3e;

公众号支持的字体有限,但可自定义;
正文字体15px、颜色#333333、1.8倍行距可以快速构建一种优雅感。

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

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

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

配置公众号自定义渲染样式:
安装Markdown Here 打开在基本渲染css中

配色方案的自定义样式:
提取颜色值

价值定位区块的自定义样式:
在公众号后台素材库新建图文中的作者位置输入价值定位一句话,或者在头部插入价值定位图作为头图。

0304-公众号排版设计规范模版文件(后).jpg

导语区块的自定义样式:
打开右上角markdown here 选项查看基本渲染css,在markdown here输入栏中,ctrl+f搜索:blockquote

导语区块.jpg

border-left:导语线条:4个像素的DDD色的实线。
padding:导语线与文字的距离,一个字符大小。
color:导语部分777颜色。

标题区块的自定义样式:
标题2代码 ctrl+f搜索:h2

标题区块.jpg

font-size:标题2为默认字体大小的1.4倍。
border_bottom:标题下加1个像素DDD色的实线下划线。

正文区块自定义样式:
正文代码 ctrl+f搜索:markdown-here-wrapper

正文区块.png

font-family:正文英文字体Arenir,微信中中文字体不可改。
font-size:正文字体大小为15个像素。
color:正文字体颜色为333号。
line-height:每行间的行高为默认的1.8倍。
margin:与边框距上下0.5倍,左右1倍。
text-align:正文文字两边对齐。

公众号markdown排版生效问题:
近期微信公众号后台升级,不再支持Markdown Here中,markdown-here-wrapper的全局设定。
可以通过渲染代码中对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是“强制应用”意思

强调文本区块自定义样式:
强调文本有所不同,在基本渲染css空白处插入:strong

强调区块.png

color:文中强调部分的颜色为00F9A5,一般为规范文件主色,达到统一。
font-weight:强调的字体加粗bold、不加粗、减细。

行动呼唤区块自定义样式:
在文尾插入行动呼唤的图片。
注意:结尾不能是引用的格式,不然行动呼唤的图会插在引用部分中。方法1:不要在结尾用引语。方法2:先插入好头图和行动呼唤图片,再在中间放入内容渲染。

导语

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

安装Markdown渲染插件
翻墙:蓝灯 再安装google旗下的Markdown插件
公众号自动排版工作流
注意:图片需要重新插入的。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容