作者 | 謝恩銘
出處 | 程式設計師聯盟 公眾號「ProgrammerLeague」
內容簡介
- 排版重要性
- 公眾號排版資源
- 公眾號排版須知
- 圖文排版實戰
1. 排版重要性
目前（2017 年 3 月 26 日）全球微信使用者數大概有 9 億左右，微信公眾號也有幾千萬個。如此龐大的市場，吸引很多人投入公眾號的運營。
我工作中的同桌，一個法國程式設計師，也在用微信，因為他娶了一個安徽合肥的中國太太。
根據騰訊公佈的業績報告，2016 年第四季度，QQ 月活躍賬戶達到 8.68 億，比去年同期增長 2%；作為對比，微信和 WeChat 的合併月活躍賬戶數達到 8.89 億，比去年同期增長 28%。
從月活躍賬戶數量來看，微信已經超越 QQ，成為騰訊公司乃至中國網際網路的第一大服務應用了。這也是微信自 2011 年 1 月 21 日問世以來，第一次在體量上超越 QQ。
前不久，世界首富比爾蓋茲開通了自己的公眾號：「比爾蓋茲」，微訊號 gatesnotes。我有關注。
要做好一個公眾號，比較關鍵的是內容和排版。當然了，比較有錢的公眾號靠宣傳，線下活動等方式也可以漲很多粉。
我覺得：排版的作用首先是能讓人記住你的公眾號，形成一定個性，提高賬號識別度。幾個比較有個性的公眾號，比如咪蒙，一條，羅輯思維，等等。第二個作用當然就是良好的視覺體驗，讓使用者享受看你的文章。
內容是很重要的，排版我個人認為是給內容加分的。
一些擁有很多粉絲數的微信公眾號，排版也不怎麼講究；但是內容好，就有人看。如果你排版極好，但內容不佳，還是沒人看。
當然了，如果能做到內容好，排版也好，那就「真真是極好的」。
為了不牽扯其他公眾號，下面我們可以來對比一下我自己的公眾號排版前和排版後的效果：
排版前
可以看到，我的公眾號在排版前（其實那時也有一定排版），風格比較隨意，大紅大綠，五顏六色，動圖，實在有點看不下去。沒有設定頁邊距，也就是用了預設的 0 頁邊距。字號和字型顏色均沒有設定，都是黑色字型，16 號。黑色比較刺眼。
字間距沒有設定，是預設的。行間距沒有設定，是預設的 1 。感覺文字和段落太緊湊，看起來比較累。
排版後
當然，我放出排版後的截圖，並不是說我的排版就一定好，我的公眾號排版也一直在改進。只不過與排版前相比有一些進步，主要是：
排版後，字間距和行間距都有增加，使得看起來沒有那麼緊密，比較輕鬆。
頁邊距也有所增加，使得整篇文章不會那麼緊貼螢幕左右兩邊。閱讀更舒適。
字型顏色比較統一，文章不用多過三種顏色。基本目前是正文 595959，16 號字型。圖片描述 a5a5a5，居中，12 號字型。大標題f79646（這個隨便大家怎麼調，我看很多公眾號大標題會用淺藍色或藍色，或灰色，等等，也是不錯），18 或 20 號字型，加粗。小標題 595959，18 號字型，加粗。
我覺得這樣的標題也不錯：
程式碼高亮，縮排（我截的圖沒有體現出來，如果是多行程式碼則更容易體現）。
增加了推薦閱讀版塊。
編號：如果是中文，用了小黑方塊。而不是像以前統一都用小黑點。
註釋用灰色背景。
主題色是灰色，是比較不費眼睛的顏色。
英文和中文之間空一格，數字和中文之間空一格，數字和英文直接空一格，但 數字/英文 與中文標點之間不空格。
把雙引號 “” 改成「」或『』。
2. 公眾號排版資源
微信公眾號後臺自帶的編輯器功能實在有限。自帶的編輯器不能調整字間距，反正很多格式都不能設定。
幸虧現在有不少很優秀的微信公眾號排版軟體或第三方線上編輯器，已經可以排版出非常高大上的效果。
而且第三方編輯器一般只要用幾次就很熟悉了，排版完之後拷貝到微信公眾號後臺編輯器中，是帶著格式拷貝過去的。因此之後要在微信公眾號後臺寫新文章，只需要從公眾號後臺編輯器複製黏貼即可。就不用再通過其他第三方編輯器了。
現在排版的資源很多，我推薦幾個比較主流的：
微信公眾號編輯器
135 ：www.135editor.com/ 比較簡約的編輯器。有對應公眾號。非常強大，模板和樣式也很豐富。有「一鍵排版」功能。不登入即可編輯。註冊登入的話可以儲存你編輯過的素材，方便重複利用。
秀米 ：xiumi.us 秀米註冊方便，可以繫結郵箱，微訊號，QQ 號，微博，等等。有圖文秀（HTML 5 展示頁面）和圖文排版兩種排版格式。有對應公眾號。相對於 135 的不登入也可以編輯，秀米必須要登入賬號才能編輯，這點比較麻煩。不過註冊登入之後可以儲存你的素材，有利有弊。
i排版 ：www.ipaiban.com/ 有對應公眾號。有些模板和樣式是付費的，這點不如 135 和秀米。和 135 一樣，不登入即可編輯。
排版，用好這幾款絕對夠了。
我自己一般用 135 和秀米。
程式碼排版軟體
對於程式設計相關的公眾號來說，程式碼的排版也是很必要的。因為程式碼段沒有格式和有高亮縮排，完全是天壤之別。
程式碼排版外掛
Markdown Here 外掛：markdown-here.com/
目前有 Chrome，Firefox，Safari 的瀏覽器對應外掛，也有 Thurnderbird 這個郵件客戶端的外掛。。
程式碼排版軟體
MarkEditor ：markeditor.com/app/markedi…
免費版和收費版兩種。一般其實免費版夠用了，但是你也可以用收費版。
收費版主要好處是可以直接匯出到公眾號。
3. 公眾號排版須知
排版沒有極限，只有多關注優秀公眾號，多研究別人排版，不斷優化，不斷預覽，慢慢形成自己風格的排版。
不過有一些須知的點，還是有必要了解的，以防踩雷區：
圖文標題
文章標題分主標題和摘要兩部分，摘要也可稱為副標題。
主標題，要做到博人眼球，言簡意賅。 摘要，製造懸念，讓人忍不住想點開看。可以把別的公眾號優秀的標題，都記下來，彙總到在電腦的表哥文件裡，不時拿出來參考。
注意：對於公眾號的文章，標題的效果有三種場景：
- 推送給使用者
- 轉發在朋友圈
- 傳送至好友或群裡。
不同場景，標題的呈現略有不同，最好分別預覽下再發布。
封面圖
單圖文封面圖尺寸 900 x 500。如果是多圖文，那麼首圖封面圖尺寸 900 x 500，次圖一律 200 x 200。次圖的風格最好保持一致。如下圖 ：
封面圖要儘量選擇清晰、色彩統一的圖片。在挑選圖片時也要清楚自己的公眾號定位，儘量挑選與自己公眾號形象一致的圖片。
排版中圖片重要部位儘量居中，因為圖文訊息在傳送時會擷取中間區域。不要用動圖。
作者與簽名
如果是別人投稿的文章或者轉載的文章，需要標註。如果是你自己原創的文章，不標也可以。這部分格式比較多樣。
圖片描述
12 號字，顏色 a5a5a5，居中。
字號
建議大家正文中的字型最好使用 16 號字，最小不要小於 14 號，最大不要超過 18 號。手機螢幕有限，字型太大太小看起來都會不舒服。多分段，太長的段落會泯滅讀者繼續讀下去的動力。一段文字千萬不要超過手機一屏的長度。
註釋，用 16 號或 14 號字。
段落標題，用 18 號字。
字型
可以根據實際需要選擇，但是任何時間都不應該忽視辨識度，花哨的字型、斜體、濫用粗體是大忌。
用線條和符號，引導視線，領著讀者的眼睛，看你想讓它看的地方。
各種三角符號是個好東西。直角引號比較古典，用「」和『』代替 “ ”，尤其在標題中。
微信編輯器中的行距預設是 1.0，但建議行距最好使用 1.5 - 1.75，這樣文章看起來不擠。我一般用 1.75。
空格
英文和中文之間空一格，數字和中文之間空一格，數字和英文直接空一格，但 數字/英文 與中文標點之間不空格。
配色
色彩是非常關鍵的因素。
一般來說，正文不要用黑色，因為在移動端看比較刺眼。灰色的視覺友好度高。
在正文配色方面，一般使用 595959（十六進位制 RGB），a5a5a5 也是比較不錯的，相對 595959 淡一些，但是文章裡可以這兩種顏色配合使用。
段落標題顏色 595959，可以用漢字，也可以用數字。段落標題用橙色 f79646 也不錯。
正文顏色用 3f3f3f 也可以，595959 有人反映偏淡，正文中的重點內容，可以加粗。
註釋顏色 a5a5a5，記得把註釋部分，加入引用框。
彩色不是不可以用，但是沒有深厚的功力，難以駕馭，一般用彩色來突出重點內容，推薦暗紅 c00000、深藍 0070c0、橙色 f79646。
背景色要慎重使用，尤忌大紅大紫，如果一定要加背景色，最好用淺色系。
文中重點部分可以加“底色”來強調。
編號
- 小黑點適合英文
- 小方塊更適合中文
- 空心小圓圈適合註釋內容
列出的條目，或者並列關係的句子，可以用有序或者無序列表區分開，或者用表格。文章中的人名、地名、書名或特殊名詞，可以加下劃線。
對齊
正文一般情況下左對齊，除非文字特別少，比如詩歌、廣告文案等可以 18 號字正文居中。右對齊用的少，特殊情況下可以試著用。
4. 圖文排版實戰
介紹了這麼多，我們來實戰一下好了。我們使用秀米來做演示，其他的平臺操作類似。
首先進入秀米的官網，點選登入，如果沒有賬戶，則註冊一個使用者賬號，或者可以繫結一些主流媒體號來登入：
我是選擇用郵箱註冊，然後郵箱登入進去後，點選右上角「賬號設定」，
進去後，再繫結其他媒體平臺（微博，QQ，微信）：
登入進秀米首頁，我們會看到：
可以看到你可以編輯 「秀製作」（HTML 5 頁面，高大上，一般用於廣告或宣傳）和「圖文排版」（我們一般的公眾號圖文的排版）。
「秀製作」我們就不演示了，就展示一下「圖文排版」吧。
點選「圖文排版」，進入圖文彙總頁面：
可以看到我已經制作過一些圖文了，因此它有存檔。
點選「新增新的 2.0 圖文」，會進入正式圖文製作頁面：
可以看到從左到右有好多元素。那麼如何快速掌握這些工具的使用呢？貼心的秀米為我們製作了詳細圖文教程。
重新回到剛才那個圖文彙總頁面，可以找到一個「點此觀看圖文排版新手引導」：
點選之後，會進入一個頁面「秀米圖文 2.0 新手引導」，
閱讀一下這個頁面，在最下面，會看到「點選此處繼續進入基礎練習」：
點選它，會進入「秀米圖文 2.0 基本操作」，
學完這頁。到最下面會看到「點選此處繼續進入進階練習」：
點選它，會進入「秀米圖文 2.0 進階操作」。
跟著上面兩篇引導實踐操作之後，你已經掌握瞭如何排版出高大上的公眾號文章了。
不過，我們還是來實際操作一下：
首先，我們像上面演示的一樣，新建一個圖文排版（點選「新增新的 2.0 圖文」）：
然後，配置一下「全文屬性」（那個星形圖示）：
點選星形圖示後，會出現全文屬性的配置選項：
首先，配置「主題」，可以看到系統給了我們一些預設顏色，如果你需要其他顏色，可以點選右下角的加號，
可以看到我把 rgb （r 是 red 的首字母，表示紅色；g 是 green 的首字母，表示綠色；b 是 blue 的首字母，表示藍色。因此這三個就是三元色）的三個值都設定為 89，因為我們之前說過正文的配色常用 595959，但是 59 是十六進位制的值，把它轉換成十進位制就是 89 （5 * 16 + 9 = 89）。
插一句題外話，在微信公眾號後臺的編輯器中可以直接配顏色 595959，因為那裡是用十六進位制的。如下圖：
在秀米編輯器中，點選「加入調色盤」，你新設定的顏色就被新增到調色盤了。
接著，你就可以用調色盤裡剛新增的這個顏色去設定文字或模板的配色了。
我們繼續配置全文屬性，點選「間距」，把幾個間距設定如下：
可以看到，我設定的幾個間距分別是：
- 行間距：1.7 倍
- 字間距：1.5 畫素
- 頁邊距：10 畫素
當然了，這幾個值你可以自己調整，不一定要和我一樣。
然後，我們在「快速插入正文或粘帖文案到此」這個框中，
插入一段我們要編輯的文字，這段文字最好是沒有帶任何格式的（比如從 Markdown 編輯器拷貝過去的文字）：
然後我們再對這段文字進行排版。
首先點中這段文字或者選中你要排版的一部分文字。可以看到，我們剛才已經提前設定了全文屬性，因此這整篇文字都是遵循 「行間距 1.7 倍，字間距 1.5 畫素，頁邊距 10 畫素， 字型顏色 rgb (89, 89, 89) 」。
如果你要對其中的個別文字設定屬性，可以選中文字，然後進行配置：
既然現在文字屬性已經沒問題了，我們接著來編輯標題，可以在左邊欄的「系統模板」裡面選擇「標題」，然後選擇你需要的標題樣式，比如我們可以選這個：
點選這個標題，它就會被放入我們正在編輯的文字的游標所在部位，如下：
你可以對這個標題進行配色，比如我選擇淡藍色作為它的顏色：
修改標題顏色後，我們再修改標題文字，把我們的「排版重要性」這個標題粘帖到標題文字欄中，標題文字顏色也可以修改，加粗。現在我們全文的樣式：
你也可以再新增別的內容或模板。暫時我們就演示到這裡。接著來看如何把這段文字帶著格式複製到微信後臺編輯器中：
點選上方的一欄圖示的最右邊那個向下箭頭的圖示，在下拉選單中選擇「選中全部內容」：
再點選彈出的小視窗中最右邊的三個點的那個圖示，在下拉選單中選擇「複製到微信」：
會看到又彈出一個視窗，如下：
然後我們用平時複製的快捷鍵，按下鍵盤上的「 Ctrl + c 」（如果是Mac電腦，那就是 Cmd + c ），就把內容複製到了剪貼簿，然後我們去微信後臺編輯器中的正文區域，按下鍵盤上的粘帖快捷鍵組合 「 Ctrl + v 」（如果是Mac電腦，那就是 Cmd + v ），就帶著格式粘帖過去了：
然後你可以預覽一下，是不是你想要的格式。
學會了嗎？趕緊去試試吧！
人世間，
萬千情感皆有溫度，
千萬程式碼似有性格。
這裡有原創教程，IT叢林......
和你一起探索程式人生。
微信公眾號「程式設計師聯盟」ProgrammerLeague
我是謝恩銘，在巴黎奮鬥的軟體工程師。
個人簡介
熱愛生活，喜歡游泳，略懂烹飪。
人生格言：“向著標杆直跑”