關(guān)于排版

前段時(shí)間我發(fā)了條朋友圈：有哪些東西是你一旦知道，生活就從此回不去了的？

審美。

現在無(wú)論是微信文章還是其他場(chǎng)景，面對沒(méi)有排版的文字，我都會(huì )瞬間失去閱讀興趣。

這篇文章將從文字、留白、圖片、引導幾部分來(lái)寫(xiě)。先來(lái)說(shuō)說(shuō)排版的作用。

001 排版的作用

首先要明確，排版是為了內容服務(wù)。好的排版，一定都是順應人性的排版。

人天生缺乏耐心，如果沒(méi)有經(jīng)過(guò)排版處理，冗長(cháng)的文章會(huì )給讀者帶來(lái)很大的信息獲取壓力。

排版的作用有三點(diǎn)：

正文排版，包括三部分：

1.文字：字號、顏色、標點(diǎn)符號、排版規范2.留白：字間距、行間距、段間距、頁(yè)邊距3.配圖：封面圖、配圖、GIF

文字

002 字號

標題：推薦16px-18px正文：推薦14px-16px標注：推薦12px-14px

003 顏色

文章中除了圖片，正文全部顏色不要超過(guò)三種，顏色太多顯得雜亂。另外，不要選擇飽和度太高的顏色，就是日常所說(shuō)鮮艷的顏色。

這些顏色看起來(lái)比較廉價(jià)，因為會(huì )對我們的情緒造成影響。

▍主題色

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

▍正文顏色

一種作為正文顏色，不建議用純黑（#000000），手機端會(huì )比較刺眼，灰色會(huì )溫和一點(diǎn)。常用的有：#595959、#3f3f3f。

▍標注色

一種作為標注顏色，用作引用內容、注釋、聲明等。常用的顏色有：#888888、#a5a5a5

004 對齊

對齊方式主要有兩種：左對齊、居中。

▍左對齊

左對齊型排版，首行不需要縮進(jìn)。在中文書(shū)籍中，因為段落間沒(méi)有間隙，所以需要用兩個(gè)字符的縮進(jìn)加以辨識。但在網(wǎng)頁(yè)端和手機端，書(shū)本式的排版會(huì )讓讀者感到壓力，大家改用空行作了段落區分。

▍兩端對齊

沒(méi)有了首行縮進(jìn)之后，文章左側像刀削斧砍一樣工整。與之相對，右側容易出現鋸齒一樣粗糙的邊緣，英文排版中尤甚。

▲右側邊緣粗糙

針對這種情況，可以在編輯器中，使用兩端對齊功能，將右側也對齊，顯得更加精致。

▲兩端對齊之后

▍居中

居中型排版

一句話(huà)一行

視覺(jué)在中央

所以呢

每行不要多

否則就像這句話(huà)突然讓眼球掃一整行好費勁

另外，不同的對齊方式不要混淆在一起。否則就打破了整體上的視覺(jué)統一，不夠舒適。

005 標點(diǎn)符號

標點(diǎn)的亂用，也會(huì )導致排版會(huì )亂。一些文字編輯對標點(diǎn)亂用是非常反感的。

我之前在朋友圈看到簡(jiǎn)書(shū)主編一鳴發(fā)文章說(shuō)這個(gè)事，整篇文章用的都是咆哮體！一天審稿那么多，可以體會(huì )一下他的心情。

中文標點(diǎn)符號應全部使用全角符號，下面舉出幾個(gè)常用的標點(diǎn)符號。

▍引號

引號推薦使用直角引號「」，這個(gè)符號是「我的最?lèi)?ài)」。引號中再用引號使用雙直角引號『』。

表示諷刺、反諷暗示、強調語(yǔ)氣、人物對話(huà)時(shí)，使用彎引號“ ”。

直角引號可以在中文輸入法中「特殊符號 — 標點(diǎn)符號」中找到，或者是用直接日文輸入法輸入，鍵盤(pán)上的括號鍵即是。

直角引號源自日文，彎引號源自英文。

相比彎引號，直角引號在漢字排版中更為優(yōu)雅和美觀(guān)，也避免了全角半角不分的同學(xué)亂用彎引號導致的格式錯亂。

▍省略號

千萬(wàn)不要用六個(gè)句號「。。。。。?！棺魇÷蕴?，也不要用三個(gè)點(diǎn)「...」，三個(gè)點(diǎn)是英文中的省略號。

中文省略號「……」在中文輸入法下，用shift + 6打出來(lái)。

▍破折號

破折號占兩個(gè)漢字空間，不能用連字符代替，即「--」，除了書(shū)本里，我現在很少看到有人打出標準的破折號了。

在中文輸入法下，用shift + -（鍵盤(pán) 0 右側的鍵）打出來(lái)，即「——」。

▍項目符號

有時(shí)候文章中會(huì )有一些并列關(guān)系的條目和句子，可以用項目符號區分開(kāi)。各種編輯器中都有列表功能，分為有序列表和無(wú)序列表兩種。

有序列表：

數字序列是最常見(jiàn)的有序列表。數字之外還有英文、羅馬文序列等。數字后面加的是圓點(diǎn)而不是頓號。

無(wú)序列表：

● 小黑點(diǎn)是最常用的。

■ 小方塊跟中文搭配也很優(yōu)美。

○ 小圓圈多用于注釋內容。

另外要注意一點(diǎn)，列表中每句話(huà)之后要加句號。

▍三角符

微信文章中經(jīng)?？梢钥吹礁黝?lèi)三角符號，有各式各樣的用處：

▲正三角經(jīng)常居中放在照片下方，注釋內容前面，起指示作用。

▼倒三角經(jīng)常單獨居中成行，用于分隔兩部分內容，引出下文。

▍分隔符

除倒三角外，還有很多符號，都可以用作分隔符。

▲小符號

分割線(xiàn)也是最常用的一種，各種編輯器中都有不同樣式的分割線(xiàn)，是排版中很重要的元素。除了用在文中，也可以用在文末。

▍進(jìn)度符

這是 i排版在一篇文章中提出的方法，我覺(jué)得也很有意思：

選擇同一個(gè)小符號，用類(lèi)似進(jìn)度條的方式來(lái)標注，更換其中某一個(gè)或幾個(gè)小符號的顏色，讓讀者知道文章讀到哪一部分，起到提示進(jìn)度的作用。

下面我用一個(gè)小符號來(lái)示范下：

先進(jìn)部分

第二部分

第三部分

006 排版規范

▍強調

在文章中，經(jīng)常需要強調某一部分，通過(guò)設計在視覺(jué)上凸顯出來(lái)。

引用 justfont 中的一段話(huà)：

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

除了要特別討論的上色之外，最常用的強調法不外乎「加粗」、「變斜」或是「加底線(xiàn)」。加粗、變斜是透過(guò)墨色濃度或形狀變化與正文對比，這發(fā)源自西方數百年的排版規則；加底線(xiàn)則是打字機盛行之后留下的遺產(chǎn)。

強調方式很多，但是千萬(wàn)不能亂用，更不能同時(shí)用在一個(gè)段落里，否則效果會(huì )讓人很尷尬。下面進(jìn)行一一說(shuō)明。

▍下劃線(xiàn)

下劃線(xiàn)是打字機時(shí)代的產(chǎn)物，如今已經(jīng)過(guò)時(shí)。如果用下劃線(xiàn)進(jìn)行強調，反而會(huì )喧賓奪主，對文字的閱讀形成干擾。除超鏈接外，其他句子盡量不要使用下劃線(xiàn)。

▍斜體

英文從文藝復興時(shí)期，就已經(jīng)有了用斜體進(jìn)行強調的排版規則。但中文不同，中文沒(méi)有斜體，只有計算機程序變形的斜體效果。中文斜體后失去了中文字形原來(lái)的結構和美感，所以不要在中文中使用斜體。

▍加粗

加粗是最理想的強調方式，也是最通用的做法。強調的時(shí)候除了加粗外，還可以改變字號或改變顏色。

▍引用

開(kāi)頭的摘要、別人的資料、人物對話(huà)、重點(diǎn)語(yǔ)句，都可以使用引用功能。

▲引用功能

引用的內容要獨立成段，如果來(lái)自別處，請記得加上引用說(shuō)明。

用了引動(dòng)功能的句子，就是多了這句話(huà)前面那道豎杠。

引用格式中的句子，推薦使用標注色，即#a5a5a5 或者#888888

▍中西文混排

中英文之間加空格：

我用 Typora 進(jìn)行寫(xiě)作。

中文與數字之間加空格：

現在已經(jīng)到了 2 月份。

中文夾雜英文單詞使用全角標點(diǎn)：

這是我給爸媽新買(mǎi)的 iPhone 7，你拿去吧。

對于完整的英語(yǔ)句子，則使用半角標點(diǎn)：

我最喜歡的英文名言是「Each man is the architect of his own fate.」

以上幾點(diǎn)是通行的做法，不是標準規范。我查了很多資料，中西文混排目前還沒(méi)有一套標準的官方規則，其中最主要的爭論之一是關(guān)于空格的用法。

有一些同學(xué)的文章中字間距很大，這種情況就不需要再加空格。

關(guān)于這個(gè)問(wèn)題，我在方宏章的文章《關(guān)于文字的可閱讀性》中找到一段話(huà)，很有參考意義：

每個(gè)字母之間必須有一定合理空間（Kerning），如果字母之間的距離過(guò)于狹小，就像兩個(gè)挨著(zhù)很近的雞蛋隨時(shí)有可能相碰撞的危險，如果字母間距過(guò)大，那字母就會(huì )失去張力和緊張感，使得文字閱讀變得乏味。

所以字母之間的距離應該合適，使得在很緊湊的句子和印刷很差的情況下，不會(huì )和其他的字母混淆在一起而影響閱讀性。

留白

如果用黑白打印機，把微信文章打印出來(lái)，你會(huì )發(fā)現各種顏色間區別，其實(shí)只是灰度不同。

紙上只有黑與白兩部分。

上面說(shuō)的文字和符號，就是排版設計中「黑」的部分，而設計「白」的部分，也是非常重要的。

字間距、行間距、段間距、頁(yè)邊距等，這些是「白」的部分。就像陰陽(yáng)一樣，黑白得當，才有了和諧的美感，給閱讀留下了呼吸的空間。

007 字間距

針對一般的文本設計來(lái)說(shuō)，字號越小，字母之間的間距就要越大，以使文字易于辨認。相反，如果將字號調大的話(huà)，緊致一些的間距以至于字符之間不會(huì )那么松垮，而更易閱讀。

可以在編輯器中對字間距進(jìn)行調節，0.5 —1.5都很常見(jiàn)。

008 行間距

文字太過(guò)密集，容易讓讀者失去閱讀興趣，很多好內容因此被埋沒(méi)。而相反過(guò)于稀疏，視覺(jué)效果也并不理想。

根據行業(yè)經(jīng)驗，行間距一般為字號的 1.5 倍左右。14px — 16px的字號，推薦1.5或者1.75的行間距。

009 段間距

段間距一般用回車(chē)空行代替，當然也可以進(jìn)行手動(dòng)設置，正文中設置 15 的段間距，在微信上看起來(lái)就非常美觀(guān)。

段間距也有不同層次的劃分，可以參考一下知乎用戶(hù) @Hindy 的習慣：

我將段落間距分為四檔：空三回車(chē)、空兩回車(chē)、空一回車(chē)與換行不空。

空三回車(chē)：用在小節與小節結束的時(shí)候。比如一個(gè)標題小節結束，下文是另一個(gè)標題開(kāi)始?？諆苫剀?chē)：用在二級標題下的分隔?？找换剀?chē)：用在段落與段落間，內容相較接近。換行不空：用在兩段文字是講述的一個(gè)內容，只是在閱讀時(shí)需稍作停頓的情況。

手動(dòng)設置的話(huà)，標題和小節之間的行間距也有所差別。較好的方法，還是去參考喜歡的大號，模仿他們的習慣，然后在試圖創(chuàng )新。

010 段落長(cháng)度

正文段落的長(cháng)度，是影響留白很大的元素。

段落長(cháng)，留白少。

段落短，留白多。

如果都是長(cháng)段落，黑壓壓的大段文字會(huì )讓人覺(jué)得呼吸不過(guò)來(lái)；如果是一連串的短段落，大片的留白會(huì )打斷排版的連續性。

而如果都是中等長(cháng)度的段落，則就像唱片機卡碟一樣，絮絮叨叨，缺乏豐富的節奏。

控制段落長(cháng)度的節奏，是非常重要的排版技巧，這點(diǎn)很多人都不知道。長(cháng)、中、短段落結合，能讓讀者在大段文字中迅速找到落腳點(diǎn)。

如此，排版真正成為文字情緒的一部分。

最后，段落最長(cháng)也千萬(wàn)不要超過(guò)一屏。下圖這種神人行為，我們一般人千萬(wàn)不要嘗試，簡(jiǎn)直喘不過(guò)氣。

011 頁(yè)邊距

頁(yè)邊距是閱讀時(shí)，正文與左右兩邊的距離。微信默認比較窄，可以用編輯器進(jìn)行調整，給讀者更多的閱讀空間。

有一些比較文藝風(fēng)的文章，會(huì )設置很大的頁(yè)邊距來(lái)增加留白。根據自己情況來(lái)調整，本文的頁(yè)邊距為 1。

圖片

012 圖片的作用

圖片是為內容服務(wù)，我把圖片分為兩種類(lèi)型：有意義的、無(wú)意義的。

▍有意義的圖片

有意義的圖片有 4 種作用：分享、娛樂(lè )、銷(xiāo)售、解決問(wèn)題。

1.分享

分享某種情感，或者文章中提到的某個(gè)物品、人物、場(chǎng)景、行為等等。

▲九份的芋圓

2.娛樂(lè )

一些表情包、GIF 等都是此類(lèi)，跟讀者進(jìn)行情感上的娛樂(lè )互動(dòng)。

3.銷(xiāo)售

跟文章內容結合，對讀者進(jìn)行銷(xiāo)售?；蛘呤卿N(xiāo)售某一種觀(guān)點(diǎn)，或者是說(shuō)服讀者做某件事，如一些商品使用場(chǎng)景的圖片。

▲圖片來(lái)自深夜發(fā)媸

4.解決問(wèn)題

有些信息只靠文字很難直觀(guān)表達，或者過(guò)于復雜，需要圖片來(lái)進(jìn)行解釋說(shuō)明，輔助理解，如一些數據圖片、趨勢圖等等。

▍無(wú)意義的圖片

無(wú)意義的圖片有 3 種作用：美化排版、閱讀獎勵、凸顯調性

1.美化排版

圖像能夠打破視覺(jué)的單調性，如果一篇文章全是字，會(huì )讓人興趣索然，而通過(guò)配圖來(lái)調節視線(xiàn)，讓人不容易輕易疲勞。

2.閱讀獎勵

圖片相比文字更容易理解，調動(dòng)的讀者認知成本比較少，讀者在看圖片的時(shí)間，可以讓大腦進(jìn)行適當休息，作為閱讀中的獎勵。

尤其是一些有趣好笑的或者是性感美女圖片，都是閱讀獎勵。

3.凸顯調性

統一風(fēng)格的圖片能夠塑造文章的調性，而高逼格的配圖，會(huì )提升文章的質(zhì)感。

013 圖片的選擇標準

簡(jiǎn)單來(lái)講，圖片有兩大選擇標準：清晰、統一。

▍清晰

圖片高清不模糊，是排版的基本要求。除了原始圖片是否高清以外，不同的格式也會(huì )影響最終效果，圖片的格式部分下文會(huì )講。

另外要注意圖片上不要有水印，除非是經(jīng)過(guò)特殊設計的水印，否則真的很土。

▍統一

統一包括主題、風(fēng)格、尺寸上的統一。圖片要與文章主題統一，不同圖片之間的風(fēng)格要統一，不要上面都是漫畫(huà)表情，下面一下子都變成了人物風(fēng)景。另外不同類(lèi)型的圖片，較好將尺寸統一。

05 封面圖

014 尺寸

封面圖是一篇微信文章的先進(jìn)印象。封面圖總共出現在 4 個(gè)場(chǎng)景，尺寸會(huì )變形，都有裁剪，而且在 Android 和 IOS 系統中，具體也會(huì )有所區別：

公眾號會(huì )話(huà)：矩形。歷史消息：矩形。轉發(fā)消息：正方形。分享朋友圈：正方形。

▲王如飛研究的封面圖裁剪情況

這張圖太復雜，不用記住。只要記住封面圖的尺寸是 900 X 500，次條封面圖的尺寸是 200 X 200 就好。按照這個(gè)尺寸來(lái)配圖，效果是較佳的。

另外要把重要內容放在中間 400 X 400 的正方形內，這部分的內容一定不會(huì )被裁掉。

015 制作

▍全力風(fēng)格

可以用美圖秀秀或者 PS 等一些制圖軟件，加上一些文字、圖形、logo 等固定元素，形成自己獨特的風(fēng)格。當然更厲害的就是請專(zhuān)業(yè)的插畫(huà)師定制插畫(huà)。

▍尺寸

修改尺寸，可以用美圖秀秀進(jìn)行修改，或者直接用 PPT 也行。

把圖片放入 PPT 中，選中圖片之后「點(diǎn)擊格式 — 裁剪 — 縱橫比 — 16:9」。

▲直接用 PPT 裁剪

▍在線(xiàn)生成

如果擔心自己審美不達標的話(huà)，創(chuàng )客貼這個(gè)網(wǎng)站可以幫你一分鐘制作出高大上的封面圖。登錄網(wǎng)站后，點(diǎn)擊「開(kāi)啟設計 — 公眾號文章首圖」即可。

▲創(chuàng )客貼：chuangkit.com

▍獲取封面圖

關(guān)于如何獲取別人的封面圖，IT云課堂 提供了一個(gè)很實(shí)用的技巧：

在電腦打開(kāi)文章，右擊鼠標查看源代碼。然后按 Ctrl + F，出現一個(gè)搜索框。輸入 var msg，出現黃色背景代碼。復制 msg_cdn_url 后面的地址，在瀏覽器打開(kāi)。點(diǎn)擊「另存為」即可下載。

06 配圖

016 圖庫

▍導航

相信大家的文件夾里都收藏了一大堆圖片網(wǎng)站，其實(shí)只要用好設計師導航網(wǎng)站就好了。絕大多數常用的圖庫，在這些導航中都有收錄，并且已經(jīng)按照免費 / 付費分好類(lèi)，也有相應的介紹說(shuō)明。

這里推薦三個(gè)：

設計導航：hao.shejidaren.comHiPPTer：hippter.com優(yōu)慶設計：ubuuk.com

▲HiPPTer：hippter.com

導航網(wǎng)站中除了圖片以外，還包含各種素材和神器，可以去探索一下。

▍常用圖片網(wǎng)站

下面這些是大家常用的圖庫網(wǎng)站，在上面三個(gè)導航中都有收錄。

Behance：behance.netDribbble：dribbble.comPinterest：pinterest.comPixabay：pixabay.comUnsplash：unsplash.com500px：500px.com花瓣網(wǎng)：huaban.com站酷網(wǎng)：zcool.com.cn……

▍特殊網(wǎng)站介紹

工欲善其事，必先利其器。下面再介紹幾個(gè)比較特殊的。

文字云

這個(gè)網(wǎng)站可以在線(xiàn)生成文字云效果的圖片。網(wǎng)站是英文的，可以借助谷歌瀏覽器自帶的翻譯功能。具體步驟是「上傳字體 — 添加文字 — 上傳圖片」。

文字云網(wǎng)站：tagul.com

表情

很多文章配圖里有大量的表情，可以在百度搜索「斗圖」，有很多豐富的資源。也可以在「暴走漫畫(huà)」網(wǎng)站，或者下載「花熊」App 進(jìn)行制作。

暴走漫畫(huà)：baozoumanhua.com斗圖啦：doutula.com

Mockup

Mockup是指圖片展示素材模型，什么意思呢，就像這張圖。

你可以找一張手機截圖，替換圖中的手機圖片，手機截圖就可以瞬間變得高大上了。就像這樣：

推薦三個(gè)Mockup網(wǎng)站：

smartmockups.commockplus.cnfreedesignresources.net

先進(jìn)個(gè)網(wǎng)站只有臺式機、筆記本、平板、手機、手表五種模板，但是好處是只要選好模板，可以上傳圖片進(jìn)行自動(dòng)替換。其他兩個(gè)網(wǎng)站有各式各樣的其他素材，不過(guò)需要下載 PSD 圖層進(jìn)行手動(dòng)替換。

017 找圖

▍關(guān)鍵詞

用關(guān)鍵詞有兩個(gè)搜索方向：縱向、橫向。

1.縱向

縱向就是縮小或者擴大關(guān)鍵詞的范圍。

比如說(shuō)要搜索法律相關(guān)的圖片，搜索「法律」沒(méi)有滿(mǎn)意的圖片，則可以縮小范圍，試試「律師」或者「法官」。

同樣也可以反過(guò)來(lái)擴大范圍，比如需要一個(gè)小蛋糕的圖片，可以試試搜索「下午茶」。

2.橫向

橫向就是搜索相近的詞匯，很多時(shí)候找的圖片是可以用其他圖片代替的。

比如需要一張表現時(shí)間圖片，可以去搜索「手表」，也可以試試「鐘表」、「watch」等等。

另外也可以用英文或者其他語(yǔ)言去檢索，出來(lái)的圖片也會(huì )不一樣。

▍以圖識圖

有時(shí)候看到一些喜歡的圖片，但是尺寸太小、不夠高清，或者是有水印，這個(gè)時(shí)候可以用百度和 Google 的「以圖識圖」功能，讓搜索引擎幫忙找這張圖片的其他尺寸、格式。

在百度圖片中選擇好一張圖片后，點(diǎn)擊「按圖片搜索」：

▲點(diǎn)擊右下角那個(gè)放大鏡

或者是在百度頁(yè)面點(diǎn)擊那個(gè)照相機，上傳圖片：

▲點(diǎn)擊照相機

搜索引擎會(huì )自動(dòng)幫你找到不同尺寸的相似圖片。

另外也可以直接在谷歌瀏覽器的程序商店里下載安裝Tineye插件?？吹揭粡垐D后右鍵選擇「Search Image on TinEye」，大多數圖片都可以找到相似圖片。

▍下載

有的時(shí)候好不容易找到了一張圖片，但是下載起來(lái)可能又很麻煩。有很多插件都支持一鍵下載功能，可以在任何網(wǎng)站一鍵下載圖片。

依舊推薦三個(gè)插件：

gentlemanOK記花瓣采集插件

安裝插件以后，在圖片上直接 alt + 鼠標左鍵即可一鍵下載。除了插件，360瀏覽器、UC瀏覽器也有一鍵下載圖片的功能。

不過(guò)提醒大家一定要注意版權問(wèn)題，盡量不要盜用有版權的圖片。

018 圖片處理

▍水印

非原創(chuàng )圖片不要打水印。對于原創(chuàng )圖片，除非水印經(jīng)過(guò)特殊設計，否則都不會(huì )好看，另外加了水印也不方便讀者保存。

有時(shí)候網(wǎng)上找來(lái)的一些圖片需要去水印，這個(gè)時(shí)候可以用美圖秀秀或者是 PS：

美圖秀秀：消除筆功能 / 祛痘功能PS：修復畫(huà)筆功能 / 修補工具

另外還有一款常用的去水印工具：Inpaint，可以傻瓜式一鍵去水印。

▍截圖美化

講一個(gè)用 PPT 美化截圖的小技巧。有時(shí)候文章中經(jīng)常需要放一些手機截圖，但是直接放在文章里并不好看，需要進(jìn)行處理一下。

這個(gè)時(shí)候可以借助 PPT 圖片樣式中的「居中矩形陰影」，為截圖加上陰影。

▲PPT 的圖片樣式

▍版權聲明

要小心圖片侵權，使用了別人的圖片，一定要注明來(lái)源。實(shí)際上絕大多數公眾號在這方面做的都不好，可以參考一下專(zhuān)業(yè)媒體號的做法。

確定圖源的，可以在圖片下方，小字標明來(lái)自某部電影、某位攝影師、還是某個(gè)商業(yè)圖庫。

▲題圖來(lái)源：Oyvind Solstad / CC BY

如果不確定圖片源，一定要注明「圖片來(lái)自互聯(lián)網(wǎng)」，通常寫(xiě)在文末左下方。如果是轉載的文章，不確定圖源，寫(xiě)上「圖源：原作者配圖」。

▲本文圖片均來(lái)自網(wǎng)絡(luò )

GIF

019 GIF 圖庫

1.Giphy

最大的 Gif 搜索引擎，找 Gif 用好 Giphy 基本就夠了。

Giphy：giphy.com

2.Tumblr

俗稱(chēng)「湯不熱」，國外非常好玩的社交平臺，有大量精美的 Gif，可以關(guān)注那些網(wǎng)上推薦的 tumblr 賬號。例如專(zhuān)門(mén)惡搞名畫(huà)的 Scorpiondagger

Tumblr：tumblr.com

3.SOOGIF

國內的動(dòng)圖網(wǎng)站，專(zhuān)門(mén)給公眾號提供素材的。除此以外，還集合了GIF壓縮、剪裁、制作的功能。

SOOGIF：soogif.com

4.Gif 喵

也是斗圖常用的國內網(wǎng)站，每天都會(huì )更新專(zhuān)輯，內容全面且動(dòng)圖質(zhì)量比堆糖、花瓣上的普遍要高。此外也自帶 Gif 制作和壓縮功能。

Gif 喵：gifmiao.com

5.9gag

暴走漫畫(huà)最初就是模仿9gag，這個(gè)網(wǎng)站的 GIF 質(zhì)量非常高，注冊后右鍵另存為可以下載。但是需要視頻格式將轉換 GIF 格式。

9gag：9gag.com

6.小豬動(dòng)圖

國內很專(zhuān)業(yè)的動(dòng)圖網(wǎng)站，素材更新快，并且把GIF動(dòng)圖劃分了上百個(gè)子類(lèi)。同時(shí)在網(wǎng)站上還可以對 GIF 壓縮、制作、加水印、裁剪，以及將視頻轉換成 GIF 格式。

小豬動(dòng)圖：piggif.com

7.搜索引擎

也可以在百度、必應、Google 等搜索引擎上直接搜索 GIF 圖片，關(guān)鍵詞 + gif，比如「小貓 gif」。

8.其他

葉子豬：xx.yzz.cn/NBAGIF：nba-80s-90sgifs.lofter.comRafael-varona：rafael-varona.comGIFBIN：gifbin.comGIFSON：gifson.netGolden Wolf：goldenwolf.tvJulian Glander：glander.co

020 GIF 處理

▍壓縮

在微信上傳 GIF 的大小不能超過(guò) 2M，因此經(jīng)常需要進(jìn)行壓縮?？梢灾苯釉谏厦嫣岬降?SOOGIF、Gif 喵、小豬動(dòng)圖 這幾個(gè)網(wǎng)站上面進(jìn)行壓縮，這里再推薦一個(gè)壓縮常用的網(wǎng)站。

ezgif.com/optimize

▍錄制

有時(shí)候需要自己錄制一些 GIF，例如一些軟件的教程。這里推薦幾款口碑比較好、易上手的 GIF 錄制軟件。

GIFCam（Win 系統）LICEcap（Mac 系統）Screen To Gif

▍轉換

有時(shí)候需要把一些視頻轉化為 GIF，上面提到小豬動(dòng)圖的網(wǎng)站就具備這個(gè)功能。另外可以用迅雷播放器直接從視頻中截取 GIF 圖。用迅雷播放器打開(kāi)視頻，點(diǎn)擊右鍵「GIF 圖截取」即可。

引導

021 頂部?jì)热?/p>

頂部是閱讀文章時(shí)的先進(jìn)眼，決定了讀者對文章的初始印象。頂部的內容，一定要經(jīng)過(guò)設計，否則就干脆保持空白。

▲正好有空的頭圖

良好的設計會(huì )增加內容的可信任感，而那些爛大街的模板，不僅難看沒(méi)有效果，反而會(huì )降低讀者對公眾號的評價(jià)。

頂部通常放置的元素有：

標題、slogan、頭圖、引導語(yǔ)、作者信息、聲明信息、轉載信息、音頻等

頂部?jì)热荽蟾庞腥齻€(gè)方面的用途：

引導讀者關(guān)注、置頂，通常是 logo + slogan。對文章信息進(jìn)行補充說(shuō)明，例如閱讀時(shí)間、作者信息、聲明信息、轉載信息等。引出下文，通過(guò)一張圖片，或者是一段引導語(yǔ)。

下圖是行動(dòng)派的頂部?jì)热?，包含了：slogan、日歷、授權信息。其中第二張圖的日歷每天都會(huì )變，是行動(dòng)派的標志一直，也是與讀者互動(dòng)的一部分。

頂部的內容不要占用太大版面，要讓讀者快速切入文章。讀者被標題吸引進(jìn)來(lái)是為了看內容的，這個(gè)時(shí)候心情是急切的。如果頂部?jì)热萏?，半天看不到正文，反而起了反作用?/p>

09底部

022 底部的作用

底部的元素有：

底圖、投票、作者信息、版權聲明、合作說(shuō)明、引導（話(huà)題互動(dòng)）、關(guān)注語(yǔ)、往期推薦、二維碼、贊賞、閱讀原文。

底部與頂部不同，讀者已經(jīng)看完了正文，整個(gè)人的狀態(tài)比較放松，所以底部?jì)热荻嘁恍┮矝](méi)有關(guān)系。這個(gè)時(shí)候應該盡量對上面缺失的要素進(jìn)行補充，頂部沒(méi)有放的信息，可以放在這里，一些重要信息可以選擇重復。

如領(lǐng)英的底部，包括了：話(huà)題互動(dòng)、廣告、互推、作者信息、合作說(shuō)明、二維碼：

023 二維碼

二維碼底部放置二維碼是為了方便讀者直接關(guān)注，不用再翻頁(yè)到文章開(kāi)頭。

一個(gè)經(jīng)過(guò)用心設計的二維碼，能夠提高不少轉化率。在各大編輯器中，都有各種二維碼的樣式，可以挑選合適的。

有時(shí)候需要自己生成一些二維碼，這個(gè)時(shí)候要借助兩個(gè)工具：短網(wǎng)址、二維碼生成器。

網(wǎng)址越長(cháng)，生成的二維碼就越復雜難看，而微信自己的鏈接都太長(cháng)了。

▲長(cháng)網(wǎng)址的二維碼

這時(shí)候需要借助短網(wǎng)址工具，將長(cháng)網(wǎng)址進(jìn)行縮短，用縮短后的網(wǎng)址去生成二維碼。

▲百度短網(wǎng)址：dwz.cn

二維碼生成器基本上都帶有美化功能，生成后可以進(jìn)行美化。這里推薦兩個(gè)二維碼生成器：

草料二維碼：cli.im第九工廠(chǎng)：9thws.com