做者 | 謝恩銘
出處 | 程序員聯盟 公衆號「ProgrammerLeague」程序員
目前(2017 年 3 月 26 日)全球微信用戶數大概有 9 億左右,微信公衆號也有幾千萬個。如此龐大的市場,吸引不少人投入公衆號的運營。編程
我工做中的同桌,一個法國程序員,也在用微信,由於他娶了一個安徽合肥的中國太太。瀏覽器
根據騰訊公佈的業績報告,2016 年第四季度,QQ 月活躍帳戶達到 8.68 億,比去年同期增加 2%;做爲對比,微信和 WeChat 的合併月活躍帳戶數達到 8.89 億,比去年同期增加 28%。微信
從月活躍帳戶數量來看,微信已經超越 QQ,成爲騰訊公司乃至中國互聯網的第一大服務應用了。這也是微信自 2011 年 1 月 21 日問世以來,第一次在體量上超越 QQ。markdown
前不久,世界首富比爾蓋茨開通了本身的公衆號:「比爾蓋茨」,微信號 gatesnotes。我有關注。app
要作好一個公衆號,比較關鍵的是內容和排版。固然了,比較有錢的公衆號靠宣傳,線下活動等方式也能夠漲不少粉。編輯器
我以爲:排版的做用首先是能讓人記住你的公衆號,造成必定個性,提升帳號識別度。幾個比較有個性的公衆號,好比咪蒙,一條,羅輯思惟,等等。第二個做用固然就是良好的視覺體驗,讓用戶享受看你的文章。工具
內容是很重要的,排版我我的認爲是給內容加分的。字體
一些擁有不少粉絲數的微信公衆號,排版也不怎麼講究;可是內容好,就有人看。若是你排版極好,但內容不佳,仍是沒人看。優化
固然了,若是能作到內容好,排版也好,那就「真真是極好的」。
爲了避免牽扯其餘公衆號,下面咱們能夠來對比一下我本身的公衆號排版前和排版後的效果:
能夠看到,個人公衆號在排版前(其實那時也有必定排版),風格比較隨意,大紅大綠,五光十色,動圖,實在有點看不下去。沒有設置頁邊距,也就是用了默認的 0 頁邊距。字號和字體顏色均沒有設置,都是黑色字體,16 號。黑色比較刺眼。
字間距沒有設置,是默認的。行間距沒有設置,是默認的 1 。感受文字和段落太緊湊,看起來比較累。
固然,我放出排版後的截圖,並非說個人排版就必定好,個人公衆號排版也一直在改進。只不過與排版前相比有一些進步,主要是:
排版後,字間距和行間距都有增長,使得看起來沒有那麼緊密,比較輕鬆。
頁邊距也有所增長,使得整篇文章不會那麼緊貼屏幕左右兩邊。閱讀更溫馨。
字體顏色比較統一,文章不用多過三種顏色。基本目前是正文 595959,16 號字體。圖片描述 a5a5a5,居中,12 號字體。大標題f79646(這個隨便你們怎麼調,我看不少公衆號大標題會用淺藍色或藍色,或灰色,等等,也是不錯),18 或 20 號字體,加粗。小標題 595959,18 號字體,加粗。
我以爲這樣的標題也不錯:
代碼高亮,縮進(我截的圖沒有體現出來,若是是多行代碼則更容易體現)。
增長了推薦閱讀版塊。
編號:若是是中文,用了小黑方塊。而不是像之前統一都用小黑點。
註釋用灰色背景。
主題色是灰色,是比較不費眼睛的顏色。
英文和中文之間空一格,數字和中文之間空一格,數字和英文直接空一格,但 數字/英文 與中文標點之間不空格。
把雙引號 「」 改爲「」或『』。
微信公衆號後臺自帶的編輯器功能實在有限。自帶的編輯器不能調整字間距,反正不少格式都不能設置。
幸好如今有很多很優秀的微信公衆號排版軟件或第三方在線編輯器,已經能夠排版出很是高大上的效果。
並且第三方編輯器通常只要用幾回就很熟悉了,排版完以後拷貝到微信公衆號後臺編輯器中,是帶着格式拷貝過去的。所以以後要在微信公衆號後臺寫新文章,只須要從公衆號後臺編輯器複製黏貼便可。就不用再經過其餘第三方編輯器了。
如今排版的資源不少,我推薦幾個比較主流的:
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…
免費版和收費版兩種。通常其實免費版夠用了,可是你也能夠用收費版。
收費版主要好處是能夠直接導出到公衆號。
排版沒有極限,只有多關注優秀公衆號,多研究別人排版,不斷優化,不斷預覽,慢慢造成本身風格的排版。
不過有一些須知的點,仍是有必要了解的,以防踩雷區:
文章標題分主標題和摘要兩部分,摘要也可稱爲副標題。
主標題,要作到博人眼球,言簡意賅。 摘要,製造懸念,讓人忍不住想點開看。能夠把別的公衆號優秀的標題,都記下來,彙總到在電腦的表哥文檔裏,不時拿出來參考。
注意:對於公衆號的文章,標題的效果有三種場景:
不一樣場景,標題的呈現略有不一樣,最好分別預覽下再發布。
單圖文封面圖尺寸 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 號字正文居中。右對齊用的少,特殊狀況下能夠試着用。
介紹了這麼多,咱們來實戰一下好了。咱們使用秀米來作演示,其餘的平臺操做相似。
首先進入秀米的官網,點擊登陸,若是沒有帳戶,則註冊一個用戶帳號,或者能夠綁定一些主流媒體號來登陸:
我是選擇用郵箱註冊,而後郵箱登陸進去後,點擊右上角「帳號設置」,
進去後,再綁定其餘媒體平臺(微博,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,由於那裏是用十六進制的。以下圖:
在秀米編輯器中,點擊「加入調色板」,你新設置的顏色就被添加到調色板了。
接着,你就能夠用調色板裏剛添加的這個顏色去設置文字或模板的配色了。
咱們繼續配置全文屬性,點擊「間距」,把幾個間距設置以下:
能夠看到,我設置的幾個間距分別是:
固然了,這幾個值你能夠本身調整,不必定要和我同樣。
而後,咱們在「快速插入正文或粘帖文案到此」這個框中,
插入一段咱們要編輯的文字,這段文字最好是沒有帶任何格式的(好比從 Markdown 編輯器拷貝過去的文字):
而後咱們再對這段文字進行排版。
首先點中這段文字或者選中你要排版的一部分文字。能夠看到,咱們剛纔已經提早設置了全文屬性,所以這整篇文字都是遵循 「行間距 1.7 倍,字間距 1.5 像素,頁邊距 10 像素, 字體顏色 rgb (89, 89, 89) 」。
若是你要對其中的個別文字設置屬性,能夠選中文字,而後進行配置:
既然如今文字屬性已經沒問題了,咱們接着來編輯標題,能夠在左邊欄的「系統模板」裏面選擇「標題」,而後選擇你須要的標題樣式,好比咱們能夠選這個:
點擊這個標題,它就會被放入咱們正在編輯的文字的光標所在部位,以下:
你能夠對這個標題進行配色,好比我選擇淡藍色做爲它的顏色:
修改標題顏色後,咱們再修改標題文字,把咱們的「排版重要性」這個標題粘帖到標題文字欄中,標題文字顏色也能夠修改,加粗。如今咱們全文的樣式:
你也能夠再添加別的內容或模板。暫時咱們就演示到這裏。接着來看如何把這段文字帶着格式複製到微信後臺編輯器中:
點擊上方的一欄圖標的最右邊那個向下箭頭的圖標,在下拉菜單中選擇「選中所有內容」:
再點擊彈出的小窗口中最右邊的三個點的那個圖標,在下拉菜單中選擇「複製到微信」:
會看到又彈出一個窗口,以下:
而後咱們用平時複製的快捷鍵,按下鍵盤上的「 Ctrl + c 」(若是是Mac電腦,那就是 Cmd + c ),就把內容複製到了剪貼板,而後咱們去微信後臺編輯器中的正文區域,按下鍵盤上的粘帖快捷鍵組合 「 Ctrl + v 」(若是是Mac電腦,那就是 Cmd + v ),就帶着格式粘帖過去了:
而後你能夠預覽一下,是否是你想要的格式。
學會了嗎?趕忙去試試吧!
人世間,
萬千情感皆有溫度,
千萬代碼似有性格。
這裏有原創教程,IT叢林......
和你一塊兒探索程序人生。
微信公衆號「程序員聯盟」ProgrammerLeague
我是謝恩銘,在巴黎奮鬥的軟件工程師。
我的簡介熱愛生活,喜歡游泳,略懂烹飪。人生格言:「向着標杆直跑」