微信公眾號排版怎么做好看？

我，一個靠公眾號排版，最高月入四千的設(shè)計學(xué)學(xué)生。

花費(fèi)兩周時間，整理了自己的排版經(jīng)驗(yàn)，分享于此，希望能幫到大家！

早在18世紀(jì)的新聞報刊等的版式設(shè)計中，就有很明確的排版要約，多數(shù)符合人們認(rèn)知的舒服的排版都是有共性的。

只要大家從這些基本角度出發(fā)，大家都可以做出好看的圖文。

下面我將從設(shè)計專業(yè)出發(fā)，結(jié)合新媒體的特點(diǎn)，分享一些排版技巧。

希望你能從中得到啟發(fā)，做出屬于自己的、好看又實(shí)用的排版。

結(jié)論

先上結(jié)論，方便沒有時間看以下理論部分的小伙伴直接使用。

▌字體

? 正文字號 14px（13-16字號為宜）

? 正文字體 蘋方、黑體

? 正文字色 灰色（63,63,63）

? 強(qiáng)調(diào)字體 黑色（0,0,0）

? 注釋字號 13px（12-14字號為宜）

? 注釋字色 淺灰（136,136,136）

? 對齊方式 兩端對齊（模塊化）

▌段落

? 頁邊距 15-25px（左右留白）

? 分段方式 段后空一行

? 行間距 1.68倍（1.5-2為宜）

? 手機(jī)一屏內(nèi) 文字2段以上

? 手機(jī)一屏內(nèi) 重點(diǎn)句子3句以下

? 字間距 2（1.5-2為宜）

▌配色

? 正文內(nèi)容強(qiáng)調(diào)色用低飽和度顏色

? 標(biāo)題/首頁圖可用高飽和度顏色

? 一篇圖文的強(qiáng)調(diào)方式不要超過2種

? 一篇圖文內(nèi)字體顏色不要超過3種

▌配圖

? 圖片兩端和文本對齊（模塊化）

? 文字類文章 圖片應(yīng)選用低飽和度顏色（去焦點(diǎn)化）

? 圖片類文章 文字應(yīng)盡可能統(tǒng)一格式，減少強(qiáng)調(diào)部分（去焦點(diǎn)化）

—

注：以上結(jié)論適合大部分圖文使用，但應(yīng)根據(jù)個性化需求做出調(diào)整，

比如受眾年齡較大，為提高文字辨識度，應(yīng)當(dāng)增大字號，縮小頁邊距等。

又如干貨類文章，應(yīng)當(dāng)注意行間距適當(dāng)縮小，頁邊距也要縮小等。

以下部分為原理講解，含有大量設(shè)計干貨。想要提高排版設(shè)計能力的小伙伴，一定要看下去。

只有理解了以上結(jié)論產(chǎn)生的原因，才能在各種情況下，針對內(nèi)容進(jìn)行調(diào)節(jié)，做出適合自己的一套排版風(fēng)格。

祝大家在公眾號排版中更上一層樓！

目錄

01. 版式

1.1 WCAG指南（依據(jù)）

1.2 字體

1.3 段落

02. 強(qiáng)調(diào)方式

2.1 分類

2.2 下劃線

2.3 斜體

2.4 加粗

03. 顏色

3.1 對比度

3.2 飽和度

3.2 配色

第一部分

版式

1.1 WCAG指南（排版依據(jù)）

為了使Web內(nèi)容更具可識別性，W3C（World Wide Web Consortium萬維網(wǎng)聯(lián)盟；是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)，發(fā)布了多項(xiàng)影響深遠(yuǎn)的Web技術(shù)標(biāo)準(zhǔn)及實(shí)施指南，對互聯(lián)網(wǎng)技術(shù)的發(fā)展和應(yīng)用起到了基礎(chǔ)性和根本性的支撐作用。）早在1999年就推出了WCAG（Web內(nèi)容無障礙指南），旨在使殘障人士更容易訪問網(wǎng)站內(nèi)容。

這些準(zhǔn)則規(guī)范了標(biāo)準(zhǔn)化web頁面的設(shè)計，初衷是為了使視力等受損人群能夠閱讀Web內(nèi)容，而如今該指南已經(jīng)成文Web頁面設(shè)計的準(zhǔn)則，它有效提高了所有用戶對頁面的可識別性以及可用性。

該指南第一部分—可感知性（Perceivable）中就對文字的編排等進(jìn)行了詳細(xì)的闡述，如：

1.4.3對比度（最小）：文本視覺呈現(xiàn)以及文本圖像至少要有4.5:1的對比度，特殊部分除外。

1.4.8視覺呈現(xiàn)：段落的行間距至少是1.5倍行距，段落間距至少比行間距大1.5倍。

我們基于2018年版WCAG 2.1（標(biāo)準(zhǔn)制定了本公眾號排版指南。

做為一個排版參數(shù)的建議，能適用于大部分排版所需，可使Web圖文更具有可辨識度，也讓排版從理論層面上更為易讀，也即美觀。

1.2 字體

字號請選定為12-16px之間（人眼對于中文的識別極限為12px，過小將會引起視覺不適）

注：

我們應(yīng)當(dāng)根據(jù)內(nèi)容做出適應(yīng)性調(diào)整。

12px更精致，節(jié)奏感更強(qiáng)，適于文藝類圖文排版

16px更易讀，適用于干貨或嚴(yán)肅類圖文排版

人民日報公眾號采用16px字號，主要考慮用戶多為中老年人，更注重文字的清晰易讀。

1.3 段落

▌行間距：1.5倍-2倍字號

我們建議行間距在1.5倍-2倍字號之間，這樣有利于將同一行內(nèi)容歸納閱讀（近似原則），避免了閱讀過程中產(chǎn)生疲勞感。

1.68倍行距則是各類新聞app常用的行間距，如百度：1.68倍；網(wǎng)易新聞：1.68倍；今日頭條：1.68倍。

今日頭條為1.68倍行距

▌段間距：

我將段落分為四個檔次：

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

不空行：用于兩段文字為同一內(nèi)容，僅作閱讀時停頓用。

空一行：用于段與段之間的分隔，不同內(nèi)容之間的呼吸點(diǎn)。

空兩行：用于小標(biāo)題前的空隔，代表一個小節(jié)內(nèi)的不同二級單位。

分隔符：用于大標(biāo)題前的警示符，代表同一文章內(nèi)的不同小節(jié)。

注：

行文閱讀應(yīng)當(dāng)有韻律感，使人在閱讀時如乘滑梯一般下行，往往在不知覺間就閱讀了全文。

空行的作用可以提高整體行文閱讀時的節(jié)奏把握，利于讀者對于內(nèi)容閱讀的呼吸、思考、停頓。

文字分段時插入圖片，插入分隔符，干貨類文章中插入圖解，都有這樣的作用。

第二部分

強(qiáng)調(diào)方式

2.1 分類

在文章中，經(jīng)常需要強(qiáng)調(diào)某一部分，通過設(shè)計在視覺上凸顯出來。

引用justfont中的一段話：

借用底色、邊框與不同字體的變化，告訴讀者這一段很重要，也幫助快速瀏覽掌握重點(diǎn)。

除了需要特別討論的上色之外，最常用的強(qiáng)調(diào)法不外乎加粗、變斜或是加底線。

加粗、變斜是透過墨色濃度或形狀變化對正文對比，這發(fā)源自西方數(shù)百年的排版規(guī)則；加底線則是打字機(jī)盛行之后留下的遺產(chǎn)。

強(qiáng)調(diào)方式很多，但是千萬不能亂用，更不能同時在一個段落里，否則效果會讓人很尷尬，下面進(jìn)行一一說明。

2.2 下劃線

下劃線是打字機(jī)時代的產(chǎn)物，如今已經(jīng)過時。如果用下劃線進(jìn)行強(qiáng)調(diào)，反而會喧賓奪主，對文字的閱讀形成干擾。

除超鏈接外，其他句子盡量不要使用下劃線。

2.3 斜體

英文從文藝復(fù)興時期，就已經(jīng)有了用斜體進(jìn)行強(qiáng)調(diào)的排版規(guī)則。但中文不同，中文沒有斜體，只有計算機(jī)程序變形的斜體效果。

中文斜體會失去了中文字形原來的結(jié)構(gòu)和美感，所以不要在中文中使用斜體。

2.4 加粗

加粗是最理想的強(qiáng)調(diào)方式，也是最通用的做法，強(qiáng)調(diào)的時候除了加粗外，還可以通過改變字號或改變顏色。

同上，為保持行文的韻律感，在同一段落、同一閱讀屏幕內(nèi)，強(qiáng)調(diào)句應(yīng)在三句以下。否則人的視線焦點(diǎn)就會被多處牽引，造成疲勞感。

第三部分

顏色

3.1 對比度

文字與背景的亮度反差越大，人眼就更容易把文字從背景中分離出來，文字也就越容易被閱讀。

更具WCAG標(biāo)準(zhǔn)，文本視覺呈現(xiàn)以及文本圖像至少要有4.5:1的對比度。

因此，4.5:1這也是文本內(nèi)容能被清晰閱讀的最小對比度。

最淺灰色

（118,118,118）

根據(jù)WCAG標(biāo)準(zhǔn)，該字色是能被清晰閱讀的最淺灰色

灰色

（218,218,218）

該字色對比度為1.39:1，不滿足WCAG標(biāo)準(zhǔn)

在公眾號圖文編輯器里，有色彩RGB值的設(shè)置

正文字色

（63,63,63）

亮度對比度范圍

對比度越低，畫面越精致；對比度越高，文字越容易被看清。

正文字色不推薦純黑色（0,0,0），過高的對比度容易產(chǎn)生視覺疲勞。我們推薦（63,63,63），這種深灰色比純黑色更加柔和，版面會更加精致。

對比度計算器

對于專業(yè)人士，我們一般推薦用對比度計算器來計算對比度是否符合色彩范圍。

同理，其他顏色的可讀性，也可以用這種方法測試。這也是為什么常見的強(qiáng)調(diào)方式中，黃色背景上放白色文字，會變得不可讀。

3.2 飽和度

飽和度是指色彩的鮮艷程度，也稱色彩的純度。

飽和度越高，顏色越鮮艷。

對于正文內(nèi)容，需要長時間的閱讀，使用低飽和度可以降低色彩對人的打擾，提高閱讀沉浸感。

對于需要突出強(qiáng)調(diào)的內(nèi)容，使用高飽和度顏色更吸引人的注意，起到更好的強(qiáng)調(diào)效果。

3.3 配色

一般而言，一篇圖文的字體顏色不要超過三種。

▌主題色

一種顏色作為主題色，可以用在標(biāo)題、重點(diǎn)內(nèi)容、二維碼、頭像、頂部和底部的引導(dǎo)等。

▌?wù)念伾?/p>

一種作為正文顏色，一般為灰色（63,63,63）。

▌標(biāo)注色

一種做為標(biāo)注顏色，用作引用內(nèi)容、注釋、聲明等。一般為淺灰色（136,136,136）

我是一安，致力于研究設(shè)計和新媒體的碰撞，喜歡請留言，分享即贊賞。

Thank You!

@ EAN丨2020.3.5

Copyright ? EAN All Rights Reserved

[1]W3C.(2018).Web Content Accessibility Guidelines (WCAG) 2.1

[2]justfont.(2018).https://justfon（刪去）t.com/

[3]站酷網(wǎng).(2019).公眾號專業(yè)排版教程 -①版式部分-小楊小楊喜氣洋洋