使公众号增加阅读量的方法-公众号排版

　　下面我将从设计专业出发，结合新媒体的特点，分享一些排版技巧。希望你能从中得到启发，做出属于自己的、好看又实用的排版。

　　结论

　　先上结论，方便没有时间看以下理论部分的小伙伴直接使用。

　　▌字体

　　⚬ 正文字号 14px(13-16字号为宜)

　　⚬ 正文字体 苹方、黑体

　　⚬ 正文字色 灰色(63,63,63)

　　⚬ 强调字体 黑色(0,0,0)

　　⚬ 注释字号 13px(12-14字号为宜)

　　⚬ 注释字色 浅灰(136,136,136)

　　⚬ 对齐方式 两端对齐(模块化)

　　▌段落

　　⚬ 页边距 15-25px(左右留白)

　　⚬ 分段方式 段后空一行

　　⚬ 行间距 1.68倍(1.5-2为宜)

　　⚬ 手机一屏内 文字2段以上

　　⚬ 手机一屏内 重点句子3句以下

　　⚬ 字间距 2(1.5-2为宜)

　　▌配色

　　⚬ 正文内容强调色用低饱和度颜色

　　⚬ 标题/首页图可用高饱和度颜色

　　⚬ 一篇图文的强调方式不要超过2种

　　⚬ 一篇图文内字体颜色不要超过3种

　　▌配图

　　⚬ 图片两端和文本对齐(模块化)

　　⚬ 文字类文章 图片应选用低饱和度颜色(去焦点化)

　　⚬ 图片类文章 文字应尽可能统一格式，减少强调部分(去焦点化)

　　—

　　注：以上结论适合大部分图文使用，但应根据个性化需求做出调整，

　　比如受众年龄较大，为提高文字辨识度，应当增大字号，缩小页边距等。

　　又如干货类文章，应当注意行间距适当缩小，页边距也要缩小等。

　　以下部分为原理讲解，含有大量设计干货。想要提高排版设计能力的小伙伴，一定要看下去。

　　只有理解了以上结论产生的原因，才能在各种情况下，针对内容进行调节，做出适合自己的一套排版风格。

　　祝大家在公众号排版中更上一层楼!

　　目录

　　01. 版式

　　1.1 WCAG指南(依据)

　　1.2 字体

　　1.3 段落

　　02. 强调方式

　　2.1 分类

　　2.2 下划线

　　2.3 斜体

　　2.4 加粗

　　03. 颜色

　　3.1 对比度

　　3.2 饱和度

　　3.2 配色

　　第一部分

　　版式

　　1.1 WCAG指南(排版依据)

　　为了使Web内容更具可识别性，W3C(World Wide Web Consortium万维网联盟;是Web技术领域最具权威和影响力的国际中立性技术标准机构，发布了多项影响深远的Web技术标准及实施指南，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。)早在1999年就推出了WCAG(Web内容无障碍指南)，旨在使残障人士更容易访问网站内容。

　　这些准则规范了标准化web页面的设计，初衷是为了使视力等受损人群能够阅读Web内容，而如今该指南已经成文Web页面设计的准则，它有效提高了所有用户对页面的可识别性以及可用性。

　　该指南第一部分—可感知性(Perceivable)中就对文字的编排等进行了详细的阐述，如：

　　1.4.3对比度(最小)：文本视觉呈现以及文本图像至少要有4.5:1的对比度，特殊部分除外。

　　1.4.8视觉呈现：段落的行间距至少是1.5倍行距，段落间距至少比行间距大1.5倍。

　　我们基于2018年版WCAG 2.1(标准制定了本公众号排版指南。

　　做为一个排版参数的建议，能适用于大部分排版所需，可使Web图文更具有可辨识度，也让排版从理论层面上更为易读，也即美观。

　　1.2 字体

　　字号请选定为12-16px之间(人眼对于中文的识别极限为12px，过小将会引起视觉不适)

　　注：

　　我们应当根据内容做出适应性调整。

　　12px更精致，节奏感更强，适于文艺类图文排版

　　16px更易读，适用于干货或严肃类图文排版

　　人民日报公众号采用16px字号，主要考虑用户多为中老年人，更注重文字的清晰易读。

　　1.3 段落

　　▌行间距：1.5倍-2倍字号

　　我们建议行间距在1.5倍-2倍字号之间，这样有利于将同一行内容归纳阅读(近似原则)，避免了阅读过程中产生疲劳感。

　　1.68倍行距则是各类新闻app常用的行间距，如百度：1.68倍;网易新闻：1.68倍;今日头条：1.68倍。

　　今日头条为1.68倍行距

　　▌段间距：

　　我将段落分为四个档次：

　　不空行、空一行、空两行和分隔符

　　不空行：用于两段文字为同一内容，仅作阅读时停顿用。

　　空一行：用于段与段之间的分隔，不同内容之间的呼吸点。

　　空两行：用于小标题前的空隔，代表一个小节内的不同二级单位。

　　分隔符：用于大标题前的警示符，代表同一文章内的不同小节。

　　注：

　　行文阅读应当有韵律感，使人在阅读时如乘滑梯一般下行，往往在不知觉间就阅读了全文。

　　空行的作用可以提高整体行文阅读时的节奏把握，利于读者对于内容阅读的呼吸、思考、停顿。

　　文字分段时插入图片，插入分隔符，干货类文章中插入图解，都有这样的作用。

　　第二部分

　　强调方式

　　2.1 分类

　　在文章中，经常需要强调某一部分，通过设计在视觉上凸显出来。

　　引用justfont中的一段话：

　　借用底色、边框与不同字体的变化，告诉读者这一段很重要，也帮助快速浏览掌握重点。

　　除了需要特别讨论的上色之外，最常用的强调法不外乎加粗、变斜或是加底线。

　　加粗、变斜是透过墨色浓度或形状变化对正文对比，这发源自西方数百年的排版规则;加底线则是打字机盛行之后留下的遗产。

　　强调方式很多，但是千万不能乱用，更不能同时在一个段落里，否则效果会让人很尴尬，下面进行一一说明。

　　2.2 下划线

　　下划线是打字机时代的产物，如今已经过时。如果用下划线进行强调，反而会喧宾夺主，对文字的阅读形成干扰。

　　除超链接外，其他句子尽量不要使用下划线。

　　2.3 斜体

　　英文从文艺复兴时期，就已经有了用斜体进行强调的排版规则。但中文不同，中文没有斜体，只有计算机程序变形的斜体效果。

　　中文斜体会失去了中文字形原来的结构和美感，所以不要在中文中使用斜体。

　　2.4 加粗

　　加粗是最理想的强调方式，也是最通用的做法，强调的时候除了加粗外，还可以通过改变字号或改变颜色。

　　同上，为保持行文的韵律感，在同一段落、同一阅读屏幕内，强调句应在三句以下。否则人的视线焦点就会被多处牵引，造成疲劳感。

　　第三部分

　　颜色

　　3.1 对比度

　　文字与背景的亮度反差越大，人眼就更容易把文字从背景中分离出来，文字也就越容易被阅读。

　　更具WCAG标准，文本视觉呈现以及文本图像至少要有4.5:1的对比度。

　　因此，4.5:1这也是文本内容能被清晰阅读的最小对比度。

　　最浅灰色

　　(118,118,118)

　　根据WCAG标准，该字色是能被清晰阅读的最浅灰色

　　灰色(218,218,218)

　　该字色对比度为1.39:1，不满足WCAG标准

　　在公众号图文编辑器里，有色彩RGB值的设置

　　正文字色　(63,63,63)

　　亮度对比度范围

　　对比度越低，画面越精致;对比度越高，文字越容易被看清。

　　正文字色不推荐纯黑色(0,0,0)，过高的对比度容易产生视觉疲劳。我们推荐(63,63,63)，这种深灰色比纯黑色更加柔和，版面会更加精致。

　　对比度计算器

　　对于专业人士，我们一般推荐用对比度计算器来计算对比度是否符合色彩范围。

　　同理，其他颜色的可读性，也可以用这种方法测试。这也是为什么常见的强调方式中，黄色背景上放白色文字，会变得不可读。

　　3.2 饱和度

　　饱和度是指色彩的鲜艳程度，也称色彩的纯度。

　　饱和度越高，颜色越鲜艳。

　　对于正文内容，需要长时间的阅读，使用低饱和度可以降低色彩对人的打扰，提高阅读沉浸感。

　　对于需要突出强调的内容，使用高饱和度颜色更吸引人的注意，起到更好的强调效果。

　　3.3 配色

　　一般而言，一篇图文的字体颜色不要超过三种。

　　▌主题色

　　一种颜色作为主题色，可以用在标题、重点内容、二维码、头像、顶部和底部的引导等。

　　▌正文颜色

　　一种作为正文颜色，一般为灰色(63,63,63)。

　　▌标注色

　　一种做为标注颜色，用作引用内容、注释、声明等。一般为浅灰色(136,136,136)

版权保护: 本文由 运营小能手 原创，转载请保留链接: https://www.wechatadd.com/artdet/159