邀請有禮，免費送VIP高大上的微信公眾號圖文是如何排版的？
原標(biāo)題：如何排出高大上的微信公眾號圖文？
來源：知乎
微信搜索已經(jīng)成為人們?nèi)粘Ｋ阉髯稍?、資料的一個重要入口，如何讓一篇有內(nèi)容、有價值的文章更加地利于人們閱讀，排好圖文版面非常關(guān)鍵。
為了將公眾號的圖文版面排好，我嘗試過第三方的微信編輯器、無數(shù)次調(diào)試校對，在不同手機上預(yù)覽……最終找到一套簡單、高效和美觀的微信排版方法。
這套方法不需要使用任何一個第三方的微信編輯器，這意味著高效、簡單、方便。
我堅信一名好的設(shè)計師使用公眾號的自帶編輯器就能排出非常優(yōu)秀的版面，但一些圖片、圖表和表格的處理，需要用好 PPT / Keynote 和 PS。
在這篇文章中，我總結(jié)了八個排好公眾號微信圖文的要點，分享給各位，希望大家都能做出讓人賞心悅目的圖文。
不過在說如何做之前，要先賣個關(guān)子講一講什么樣的排版是好的圖文排版。
第一部分 什么是好的微信圖文排版？
我對什么是好的微信公眾號編輯器文章排版提出了以下的三點要求：
能清晰體現(xiàn)文章脈絡(luò)
閱讀輕松愉快，信息傳達(dá)順暢
符合定位，能建立起視覺特征
不如直接看舉例子：
AppSo 和愛范兒是我個人打開頻率比較高的兩個公眾號，這兩個公眾號話題偏向科技類，文章圖文并茂，比較長，做好微信排版讓觀眾讀起來舒服非常重要。我們可以結(jié)合這兩個例子來說一說前面的幾條原則。
首先，清晰體現(xiàn)文章脈絡(luò)。AppSo 經(jīng)常會給出一個「懶人目錄」，這樣既能讓讀者快速了解文章的大概內(nèi)容，也可以讓讀者自行選擇感興趣的部分直接刷過去。
兩個公眾號都會在文章的一個部分結(jié)束的時候使用分割線，并且用更大的字號和加粗的形式處理大標(biāo)題，以此來形成文章的「視覺金字塔」。
其次，閱讀輕松愉快，信息傳達(dá)順暢。兩個公眾號的文章內(nèi)容偏多，因此需要使用圖片和留白等方式來讓圖文閱讀更加順暢，使讀者產(chǎn)生比較輕松的閱讀體驗，不讓人感到擁擠難受。
最后，微信圖文排版符合定位，能建立起品牌的視覺特征。兩個公眾號都在開篇圖，分割線上使用了獨有的視覺特征，來強化品牌因素，給人留下較為深刻的獨有的印象。
這兩個公眾號的品牌視覺特征建立不算特別強的，但也基本足夠。
第二部分 排好微信圖文基礎(chǔ)操作
① 欄寬、縮進(jìn)、基礎(chǔ)字號與行距
什么叫欄寬？很簡單，公眾號圖文在手機上一行能容納的字?jǐn)?shù)就叫欄寬。
兩端縮進(jìn)和 Word 中的頁邊距類似，縮進(jìn)數(shù)值越大，左右頁邊距留出來的「白色」越多。在同一個屏幕分辨率下，欄寬大小、兩端縮進(jìn)大小和基礎(chǔ)字號大小，三者相互決定。如下圖：
如何選對這四個參數(shù)的數(shù)值呢？別著急，把影響這些參數(shù)的因素說清楚之后，會發(fā)現(xiàn)可選的范圍并不大。
首先是基礎(chǔ)字號和欄寬。如果微信圖文里邊文本內(nèi)容比較多而且重要，就需要考慮閱讀久了會不會累。
這個時候，微信編輯器里基礎(chǔ)字號不能太小——強烈建議不要小于 16，16 號字在兩端沒縮進(jìn)時對應(yīng)的欄寬能容下 20 個字左右。
另外，兩端縮進(jìn)也不建議太多。縮進(jìn)太多了之后，欄寬能容納下的字?jǐn)?shù)就少了。當(dāng)字號縮減到 13、14 個，視線就會在行與行之間不停地切換。
如果想要縮進(jìn)多、欄寬字?jǐn)?shù)又不太少，就要減小字號，這樣就與前面字號太小眼睛閱讀時容易累到構(gòu)成矛盾。舉個欄寬和字號設(shè)置不太合適的例子：
在這個例子中，欄寬為 21 字，文本內(nèi)容多，沒有圖片作為調(diào)節(jié)。能顯出專業(yè)，但是一個頁面就有快 500 字的確容易產(chǎn)生閱讀壓力。其中以上四個參數(shù)的選擇搭配不是太合適。有以下參考建議：
兩端縮進(jìn) 8 號或字號增大 1 號
每 300 字左右保證都有一個大一點的留白作為緩沖（可以使用圖片、分割線、大標(biāo)題等元素）
行距這個參數(shù)的確認(rèn)也簡單，微信就給了幾種固定選擇，綜合來看，1.75 倍行距是用得最多的了。
② 保證縮進(jìn)后的良好對齊性
下面是 App Store 圖文的排版，我非常喜歡這個 APP 的圖文設(shè)計，我在自己排微信公眾號圖文的時候也借鑒了許多。
App Store 圖文的排版左對齊線近乎「完美」，如下圖。找不到破壞這條對齊線的元素，這條對齊線是整個圖文的「靈魂」。
在微信公眾號的圖文排版中，微信默認(rèn)有一個縮進(jìn)的間距，圖片是不能拓展到屏幕兩端的，這個時候再去追求圖片和文本錯開的意義不大了。
所以 Effork 的文章在首圖之后，完美地遵循縮進(jìn)后的左右對齊線，參見下圖：
③ 文本對比構(gòu)建層級關(guān)系
在公眾號圖文中，處理好大標(biāo)題、小標(biāo)題同樣非常重要，文章的脈絡(luò)和結(jié)構(gòu)全靠它倆。
那么通過什么方式來進(jìn)行區(qū)分，形成視覺金字塔呢？最簡單的方法就是通過設(shè)置字號大小、粗細(xì)和顏色來區(qū)分標(biāo)題、正文及注釋，下圖是我在公眾號圖文中所用的層級樣式（例子中沒有出現(xiàn)大標(biāo)題）：
有部分朋友有一個習(xí)慣性思維——認(rèn)為字小就是精致，實際上不是這樣的。
字號大小并不是精致的決定性因素，調(diào)試好各個要素之間的關(guān)系才是最重要的。該用較大字號的時候還是要用起來的。
寫標(biāo)題的時候要注意精簡，一般控制字?jǐn)?shù)不超過 10 個，少在圖文中出現(xiàn)標(biāo)題占兩行或多行的情況。
④ 用間距表明親密性并留白
除了行間距，微信公眾號圖文編輯器還支持更改段前段后間距。
先說段落。段落行數(shù)不宜過多，通過對比不同行數(shù)段落的效果，得到的結(jié)論是：段落多控制在三五行，中間穿插一些一兩行的短段落比較適合閱讀。
文本段落之間通過空行來表示分段，不采用首行縮進(jìn)的方式，首行縮進(jìn)在屏幕段閱讀不是必要的。只要有合適的形式區(qū)分段落即可——這個形式就是空行。
除了空行，需要在大標(biāo)題、小標(biāo)題、段落之間設(shè)置「段前距」和「段后距」。
這里就有一個原則——「前松后緊」。什么意思呢？如下圖：
為什么會有 A>B 這一「前松后緊」的關(guān)系呢？其實跟換段落空行是一樣的。
文章一般都會有幾個部分或者幾個論點，一個部分或一個論點論述完的時候，相當(dāng)于一個完整的小內(nèi)容已經(jīng)結(jié)束了，這個時候通過較多的留白來暗示這一節(jié)點，然后再另起一個部分或一個論點。
另外，標(biāo)題與正文之間的間距也應(yīng)該大大于微信編輯器的正文段落之間的間距。間距的留出，能讓整個頁面更有呼吸感，閱讀更加輕松，也更符合行文內(nèi)容內(nèi)在邏輯的表達(dá)。
需要補充的是，我在這篇圖文中沒有使用大標(biāo)題。如果還有一級大標(biāo)題，其前后間距要比小標(biāo)題前后間距對應(yīng)留得再多一點，其中的道理仍然是親密性關(guān)系的不同。
第三部分 排好微信編輯圖文高階操作
⑤ 用好圖片，緩解閱讀壓力
不管是人文類文章，還是效率型干貨，圖片都是一個很好的緩解閱讀壓力的存在。
不過不同主題的文章所使用的圖片類型不同，前者是和主題相關(guān)的插畫或照片，而后者是一些說明性質(zhì)的插圖、截圖……
在文章中插入圖片，基本保證三四百字就會出現(xiàn)一到兩張圖片，圖片要和文章內(nèi)容相關(guān)。推薦幾個免費圖庫：
照片：Pexels、Unsplash、Pixabay
插畫 + 照片：Freepik
前面的三個免費圖庫大家比較熟悉，最后一個圖庫有插畫，不過網(wǎng)站下載速度不太穩(wěn)定。給大家看兩張我搜索「Fashion」得到的結(jié)果，休整一下用作一些時尚類公眾號插圖還是不錯的：
⑥ 讓圖片更利于手機端的閱讀
首先是圖片前后的親密性處理。圖片在圖文中比較特殊一點，它的段前段后需要根據(jù)手機預(yù)覽效果進(jìn)行調(diào)試。
一般在圖片的段前加 10 個單位，段后不作處理。評判標(biāo)準(zhǔn)就是編輯器中文本段落中間插入圖片，圖片的段前段后與段落之間的間距大致相等，見下圖：
其次要注意圖片的比例與剪裁。圖片的比例也是有講究的，手機豎向瀏覽的時候是一個高高的，窄窄的頁面，這個時候像寬幅電影熒幕的比例是不太適合閱讀的。一般多采用以下幾種比例：
寬：高 = 4:3、1:1、3:4、2:3。幾種比例在手機端微信界面上的效果參考如下：
然后，給圖片加一個小圓角，讓圖片更加精致。圖片加圓角流行起來有以下因素：
手機全面屏流行，手機屏幕四個圓角變得更大；
iOS 系統(tǒng)從 iPhone X 發(fā)布之后，在圓角屏幕上使用了大圓角的 UI 設(shè)計，進(jìn)一步使得圓角流行起來。
那么這個圓角應(yīng)該如何加呢？首先講一講圖片的尺寸與像素。目前手機流行的屏幕分辨率寬是 1080 個像素。如今由于手機網(wǎng)速夠快，流量比較夠用，微信公眾號圖文對圖片壓縮減小了，顯示變?yōu)榱烁咔濉?/p>
這意味著在一篇圖文中，最好是不讓觀眾點開每一張插圖就能完整獲取圖片信息。參考下面兩張截圖的對比：
敲黑板，重點來了，Effork 這么干的。將圖片寬像素控制在 1000 左右，太小分辨率不夠，太大加載變慢。如果圖片上有重要的需要放大看的內(nèi)容，可以適當(dāng)增加像素。
接下來需要計算圓角的大小——圓角大小等于圖片寬邊像素數(shù)量除以 40。
有一些好奇寶寶會問為什么是寬邊像素數(shù)除以 40？因為要讓整個圖文里插圖的圓角大小一樣，需要使用相對值，不能使用絕對值。比如 25 個像素的圓角對于寬 1000 的圖片來說，就要大于寬 2000 像素的圖片圓角。當(dāng)然啦，不除以 40，改成除 45 也是可以的，只不過 40 很好計算。
至于如何用 Photoshop 給圖片加圓角，留給各位去自行解決以下。再多說說加描邊的情況：一般只有純白色或很淺的灰色截圖會加一個小描邊，描邊大小 1-2 個像素，顏色為淺灰色，顏色值參考 #bbbdbf。
最后，注意圖片的輸出。直接給結(jié)論，顏色非常淺或者有較大面積高飽和色彩的圖片我會輸出 PNG 格式，整體比較暗的圖片，我一般在 PS 中輸出高等質(zhì)量的 JPEG 格式圖片（不需要輸出最佳）。
⑦ 制作完美的圖表
在上一篇文章《努力就能上清華北大嗎？》中，用到了幾張圖表，正好是非常好的例子，這里再拿出來「溜一溜」：
這幾個例子其實已經(jīng)反映得差不多，再多啰嗦幾句，做好圖文中的表格要求還是比較高的，首先需要會用 PowerPoint、Keynote 或者是其他矢量軟件。
接下來，在制作過程中，不能以電腦屏幕為尺度標(biāo)準(zhǔn)，要記住這張圖最后是要呈現(xiàn)在手機端，很多參數(shù)都需要大一號。因此圖表欄的基礎(chǔ)文本字號大小要合適，通過控制欄寬來實現(xiàn)。行距大小等要素也要合適。
最后，圖表設(shè)計要素完整、簡單明了、重點突出、表意清楚。
要素完整。圖表標(biāo)題、橫縱軸標(biāo)簽、數(shù)據(jù)標(biāo)簽和單位、圖例、數(shù)據(jù)來源等等，一張專業(yè)合格的圖表需要給完整說清楚一張圖表要點的圖表要素。
簡單明了。表格樣式建議參考三線表，不需要太多網(wǎng)格線。三線表真的是特別棒的樣式了，基于它可以稍作一些調(diào)整。柱狀圖、餅圖同樣如此，使用簡潔的樣式，表達(dá)明確的意思。
重點突出。使用一兩個有識別性的顏色作為強調(diào)色對圖表想要突出的信息點進(jìn)行標(biāo)記。
表意清楚。一張好的圖表，觀眾只需要掃一眼，就能 Get 到作者想要傳達(dá)的意圖。
⑧ 建立品牌視覺特征
越是關(guān)注度高的公眾號，越是注重圖文的品牌視覺特征這塊。能建立其品牌視覺特征的幾個要點如下：
統(tǒng)一的、高辨識度的顏色組合
分割線、標(biāo)題設(shè)計
封面圖、文首圖、文尾圖
插畫師專門配的插畫
以上幾點實現(xiàn)的難度大致遞增。建議各位多注意日常「10萬+」閱讀公眾號文章的品牌視覺特征。
歡迎關(guān)注
公眾號 @振原的小屋
嗶哩嗶哩 @振原的小屋
365微信編輯器——一款強大專業(yè)的微信公眾平臺圖文在線編輯、排版美化工具，提供手機預(yù)覽、圖文同步、素材秒刷等功能,讓您在微信圖文、文章內(nèi)容排版、文本編輯、素材編輯上更加方便，通過微信編輯器讓您的內(nèi)容顯示更美觀,更易閱讀。
新媒體小編都在用的365微信編輯器，大量樣式、模板等您解鎖；365編輯器首頁，發(fā)現(xiàn)更多微信公眾號排版編輯技巧、新媒體運營資訊；m.hgsbcw.cn/home
點擊注冊365微信編輯器，即可領(lǐng)取3天VIP
