135編輯器診斷5千篇圖文排版，只為還不會排版的你——獨家建議
135編輯器診斷5千篇圖文排版，只為還不會排版的你——獨家建議
胖友們大家好呀，我是三兒
自打三兒入行以來，就深深的明白一個道理，那就是排版一定要好看，俗話說的好：有趣的內容千篇一律，好看的排版萬里挑一！
在這個快節奏的時代，看臉成了唯一的標準，不管你內容再好，沒有好的排版，終究是站不住jio的。
那么今天，三兒就來給胖友們講一講公眾號排版的一些基礎知識，如果你是入坑幾年的老司機，說實話，這篇文章對你的用處不大，但如果你是剛入行的新手，每天需要在排版上花幾個小時，那么你一定要仔仔細細看完這篇文章！
*這篇文章主要是根據5000多篇135編輯器后臺用戶投稿所作出的一些診斷，給大家提出一些使用的建議，希望這些建議，能夠幫助到剛入行的小白。
標 題
在日常排版中，我們最常見的標題排版問題是：1、正文與標題區分不明顯。2、各級標題邏輯關系不明顯。
那如何才能解決這個問題呢？
胖友們可以通過對標題的強調，如加粗、加大字號等，與正文作出區分；也可以通過序號的逐級關系變化，來增強排版邏輯關系。
當然，我們還可以在保證上面操作的基礎之上，使用標題樣式，來增強標題的排版美感，引導文章的閱讀，優化用戶的視覺體驗。
一、這是一級標題
字號：16 px ，顏色#000000，加粗，字間距為 2，兩端對齊
2、這是二級標題
字號：16 px ，顏色#404040，加粗，字間距為 2，兩端對齊
（3）這是三級標題
字號：15 px ，顏色#404040，加粗，字間距為 2，兩端對齊
④這是四級標題
字號：14 px，顏色# 404040，加粗，字間距為 2，兩端對齊
1
這是一級標題
字號：16 px ，顏色#000000，加粗，字間距為 2，兩端對齊
2
這是二級標題
字號：16 px ，顏色#404040，加粗，字間距為 2，兩端對齊
3
這是三級標題
字號：15 px ，顏色#404040，加粗，字間距為 2，兩端對齊
4
這是四級標題
字號：14 px，顏色# 404040，加粗，字間距為 2，兩端對齊
高手版
1
這是一級標題
字號：16 px ，顏色#000000，加粗，字間距為 2，兩端對齊
2
這是二級標題
字號：16 px ，顏色#404040，加粗，字間距為 2，兩端對齊
3
這是三級標題
字號：15 px ，顏色#404040，加粗，字間距為 2，兩端對齊
4
這是四級標題
字號：14 px，顏色# 404040，加粗，字間距為 2，兩端對齊
這里我們需要注意的是：
1、標題字號 ≥ 正文字號。
無論文章使用到幾級標題，最低級標題的字號大小也應大于正文字號大小。
2、同級標題使用同級樣式。
為了保證文章整體性和邏輯性，同一級別的標題應當使用同一樣式，以保持文章連貫性。
正 文
最常見的正文排版問題是：①段落文字間留白不會控制。②無法表現不同的文體風格。
文字留白問題，即：字間距、行間距、段前/后距的處理問題。不同文體/文風也正是依靠他們的大小數值變化來呈現的。
文體風格還可以使用一些“正文樣式”來體現，例如豎排，居中，背景等樣式，但需要注意控制閱讀視覺體驗，以達到文字排版的最佳效果。
初級版
從前的日色變得慢，車、馬、郵件都慢，一生只夠愛一人；從前的鎖也好看，鑰匙精美有樣子，你鎖了，人家就懂了?！稄那奥?/span>
——摘自木心先生詩集《云雀叫了一整天》
正文：字號16、顏色#404040、字間距1、行間距2、兩端對齊、段后距15-20
注釋：字號14、顏色#808080、字間距1、行間距1、居右對齊
從前的日色變得慢，車、馬、郵件都慢，一生只夠愛一人；從前的鎖也好看，鑰匙精美有樣子，你鎖了，人家就懂了?！稄那奥?/span>
——摘自木心先生詩集《云雀叫了一整天》
正文：字號15、顏色#404040、字間距1.5、行間距1.75、兩端對齊、段后距10-15
注釋：字號13、顏色#808080、字間距1、行間距1、居右對齊
從前的日色變得慢，車、馬、郵件都慢，一生只夠愛一人；從前的鎖也好看，鑰匙精美有樣子，你鎖了，人家就懂了?！稄那奥?/span>
——摘自木心先生詩集《云雀叫了一整天》
正文：字號14、顏色#404040、字間距2、行間距1.5、兩端對齊、段后距5-10
注釋：字號12、顏色#808080、字間距1、行間距1、居右對齊
《從前慢》
從前的日色變得慢
車、馬、郵件都慢
一生只夠愛一人
從前的鎖也好看
鑰匙精美有樣子
你鎖了，人家就懂了。
——摘自木心先生詩集
《云雀叫了一整天》
正文：字號15、顏色#404040、字間距1.5、行間距2、居中對齊、段間距空行
注釋：字號13、顏色#808080、字間距1、行間距1、居右對齊
《從前慢》
從前的日色變得慢
車、馬、郵件都慢
一生只夠愛一人
從前的鎖也好看
鑰匙精美有樣子
你鎖了，人家就懂了。
——摘自木心先生詩集
《云雀叫了一整天》
正文：字號14、顏色#404040、字間距2、行間距2、居中對齊、段間距空行
注釋：字號12、顏色#808080、字間距1、行間距1、居右對齊
《從前慢》
從前的日色變得慢，車、馬、郵件都慢，一生只夠愛一人；從前的鎖也好看，鑰匙精美有樣子，你鎖了，人家就懂了。
——摘自木心詩集《云雀叫了一整天》
正文：字號16、顏色#404040、字間距1、行間距2、兩端對齊、段后距15-20
注釋：字號14、顏色#808080、字間距1、行間距1、居右對齊
從前的日色變得慢，車、馬、郵件都慢，一生只夠愛一人；從前的鎖也好看，鑰匙精美有樣子，你鎖了，人家就懂了?！稄那奥?/span>
——摘自木心詩集《云雀叫了一整天》
正文：字號15、顏色#404040、字間距1.5、行間距1.75、兩端對齊、段后距10-15
注釋：字號13、顏色#808080、字間距1、行間距1、居右對齊
從前的日色變得慢，車、馬、郵件都慢，一生只夠愛一人；從前的鎖也好看，鑰匙精美有樣子，你鎖了，人家就懂了?！稄那奥?/span>
——摘自木心詩集《云雀叫了一整天》
正文：字號14、顏色#404040、字間距2、行間距1.5、兩端對齊、段后距5-10
注釋：字號12、顏色#808080、字間距1、行間距1、居右對齊
高手版
《從前慢》
從前的日色變得慢
車、馬、郵件都慢
一生只夠愛一人
從前的鎖也好看
鑰匙精美有樣子
你鎖了，人家就懂了。
——摘自木心先生詩集
《云雀叫了一整天》
《從前慢》
正文：字號15、顏色#404040、字間距1.5、行間距2、居中對齊、段間距空行
注釋：字號13、顏色#808080、字間距1、行間距1、居右對齊
從前的日色變得慢
車 馬郵件都慢
一生只夠愛一人
摘自木心先生詩
集
從前慢
正文：字號14、顏色#404040
注釋：字號12、顏色#808080
胖友們在對段落文字進行排版時需要注意文字間距的處理，大號文字要減少字距，小號文字需要增加字距，一般是 1/5 的字間距。
在設置行間距時要注意，大號文字用大行距，小號文字用小行距，范圍在 1 - 2 之間。
Tips：對文章進行排版時需要注意，無論是使用純色樣式，還是圖文樣式，一定要對文字進行優化處理，即重心在文字，其余輔助。
最常見的圖片排版問題是：① 圖片不統一，② 與文體、風格不協調。
頭條封面圖尺寸 900 * 383 像素，次條封面圖尺寸 200 * 200 像素，封面圖注意與公眾號品牌、整體風格、文風等相符合。
非GIF圖上傳至公眾后臺，經推文發布后，圖片尺寸會等比壓縮成寬度 640 px，想提高圖片質量，可預先處理配圖的格式或尺寸。
配圖建議
建議大小不超過 5M ，為保證閱讀的流暢性，避免圖片加載緩慢等問題，可以預先將圖片處理成 500k - 1000k 。
建議使用橫圖（16:9 和 4:3），不建議使用豎圖，或全文配圖統一尺寸比例，盡量避免橫豎圖混用，詩歌、短句排版可以使用圓圖樣式。
文章中使用表情，建議表情尺寸控制在 130-180px ，表情主體內容在 150px 即可。
圖片的色調，需要符合全文配色需求。
牛油果綠是讓人無法拒絕
不同的穿搭，不同的風格，顯得人很洋氣
▲ ID：95641
做一個吃貨無憂無慮
當一個癡貨無牽無掛
▲ ID：93644
▲ ID：95498
▲ ID：94816
關于圖片排版，胖友們還可以看這篇文章來詳細了解哦！
配 色
最常見的排版配色問題是：① 對配色沒有準確定位。② 全文色調不統一。
文字配色以黑、25% 灰、75% 灰、品牌色等為主。文字強調可使用黑色加粗、品牌色加粗或者紅色加粗的方式，當然也可以使用特殊字符配合強調。
配圖的色調盡量配合文章配色，圖片的視覺效果、表達的情緒也要符合配色環境，在尋找配圖時，可以首選品牌色調圖片，次選中性色調圖片。
首選依然是品牌色調。樣式在使用過程中，一定要注意與文字、圖片之間的協調，在全文色調統一的情況下，圖文樣式可以使用同色系遞減關系進行配色。
除了首先考慮品牌色之外，也可以根據文體風格，使用冷色系、暖色系或是小清新、視覺沖擊較大的配色。
這里給胖友們推薦幾個配色網站，希望能夠幫助到大家！
顏色提?。?a src="https://www.designspiration.net" data-linktype="2" style="margin: 0px; padding: 0px; color: rgb(87, 107, 149); text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">https://www.designspiration.net
胖友們大家好呀，我是三兒
自打三兒入行以來，就深深的明白一個道理，那就是排版一定要好看，俗話說的好：有趣的內容千篇一律，好看的排版萬里挑一！
在這個快節奏的時代，看臉成了唯一的標準，不管你內容再好，沒有好的排版，終究是站不住jio的。
那么今天，三兒就來給胖友們講一講公眾號排版的一些基礎知識，如果你是入坑幾年的老司機，說實話，這篇文章對你的用處不大，但如果你是剛入行的新手，每天需要在排版上花幾個小時，那么你一定要仔仔細細看完這篇文章！
*這篇文章主要是根據5000多篇135編輯器后臺用戶投稿所作出的一些診斷，給大家提出一些使用的建議，希望這些建議，能夠幫助到剛入行的小白。
標 題
在日常排版中，我們最常見的標題排版問題是：1、正文與標題區分不明顯。2、各級標題邏輯關系不明顯。
那如何才能解決這個問題呢？
胖友們可以通過對標題的強調，如加粗、加大字號等，與正文作出區分；也可以通過序號的逐級關系變化，來增強排版邏輯關系。
當然，我們還可以在保證上面操作的基礎之上，使用標題樣式，來增強標題的排版美感，引導文章的閱讀，優化用戶的視覺體驗。
一、這是一級標題
字號：16 px ，顏色#000000，加粗，字間距為 2，兩端對齊
2、這是二級標題
字號：16 px ，顏色#404040，加粗，字間距為 2，兩端對齊
（3）這是三級標題
字號：15 px ，顏色#404040，加粗，字間距為 2，兩端對齊
④這是四級標題
字號：14 px，顏色# 404040，加粗，字間距為 2，兩端對齊
1
這是一級標題
字號：16 px ，顏色#000000，加粗，字間距為 2，兩端對齊
2
這是二級標題
字號：16 px ，顏色#404040，加粗，字間距為 2，兩端對齊
3
這是三級標題
字號：15 px ，顏色#404040，加粗，字間距為 2，兩端對齊
4
這是四級標題
字號：14 px，顏色# 404040，加粗，字間距為 2，兩端對齊
高手版
1
這是一級標題
字號：16 px ，顏色#000000，加粗，字間距為 2，兩端對齊
2
這是二級標題
字號：16 px ，顏色#404040，加粗，字間距為 2，兩端對齊
3
這是三級標題
字號：15 px ，顏色#404040，加粗，字間距為 2，兩端對齊
4
這是四級標題
字號：14 px，顏色# 404040，加粗，字間距為 2，兩端對齊
這里我們需要注意的是：
1、標題字號 ≥ 正文字號。
無論文章使用到幾級標題，最低級標題的字號大小也應大于正文字號大小。
2、同級標題使用同級樣式。
為了保證文章整體性和邏輯性，同一級別的標題應當使用同一樣式，以保持文章連貫性。
正 文
最常見的正文排版問題是：①段落文字間留白不會控制。②無法表現不同的文體風格。
文字留白問題，即：字間距、行間距、段前/后距的處理問題。不同文體/文風也正是依靠他們的大小數值變化來呈現的。
文體風格還可以使用一些“正文樣式”來體現，例如豎排，居中，背景等樣式，但需要注意控制閱讀視覺體驗，以達到文字排版的最佳效果。
初級版
從前的日色變得慢，車、馬、郵件都慢，一生只夠愛一人；從前的鎖也好看，鑰匙精美有樣子，你鎖了，人家就懂了?！稄那奥?/span>
——摘自木心先生詩集《云雀叫了一整天》
正文：字號16、顏色#404040、字間距1、行間距2、兩端對齊、段后距15-20
注釋：字號14、顏色#808080、字間距1、行間距1、居右對齊
從前的日色變得慢，車、馬、郵件都慢，一生只夠愛一人；從前的鎖也好看，鑰匙精美有樣子，你鎖了，人家就懂了?！稄那奥?/span>
——摘自木心先生詩集《云雀叫了一整天》
正文：字號15、顏色#404040、字間距1.5、行間距1.75、兩端對齊、段后距10-15
注釋：字號13、顏色#808080、字間距1、行間距1、居右對齊
從前的日色變得慢，車、馬、郵件都慢，一生只夠愛一人；從前的鎖也好看，鑰匙精美有樣子，你鎖了，人家就懂了?！稄那奥?/span>
——摘自木心先生詩集《云雀叫了一整天》
正文：字號14、顏色#404040、字間距2、行間距1.5、兩端對齊、段后距5-10
注釋：字號12、顏色#808080、字間距1、行間距1、居右對齊
《從前慢》
從前的日色變得慢
車、馬、郵件都慢
一生只夠愛一人
從前的鎖也好看
鑰匙精美有樣子
你鎖了，人家就懂了。
——摘自木心先生詩集
《云雀叫了一整天》
正文：字號15、顏色#404040、字間距1.5、行間距2、居中對齊、段間距空行
注釋：字號13、顏色#808080、字間距1、行間距1、居右對齊
《從前慢》
從前的日色變得慢
車、馬、郵件都慢
一生只夠愛一人
從前的鎖也好看
鑰匙精美有樣子
你鎖了，人家就懂了。
——摘自木心先生詩集
《云雀叫了一整天》
正文：字號14、顏色#404040、字間距2、行間距2、居中對齊、段間距空行
注釋：字號12、顏色#808080、字間距1、行間距1、居右對齊
《從前慢》
從前的日色變得慢，車、馬、郵件都慢，一生只夠愛一人；從前的鎖也好看，鑰匙精美有樣子，你鎖了，人家就懂了。
——摘自木心詩集《云雀叫了一整天》
正文：字號16、顏色#404040、字間距1、行間距2、兩端對齊、段后距15-20
注釋：字號14、顏色#808080、字間距1、行間距1、居右對齊
從前的日色變得慢，車、馬、郵件都慢，一生只夠愛一人；從前的鎖也好看，鑰匙精美有樣子，你鎖了，人家就懂了?！稄那奥?/span>
——摘自木心詩集《云雀叫了一整天》
正文：字號15、顏色#404040、字間距1.5、行間距1.75、兩端對齊、段后距10-15
注釋：字號13、顏色#808080、字間距1、行間距1、居右對齊
從前的日色變得慢，車、馬、郵件都慢，一生只夠愛一人；從前的鎖也好看，鑰匙精美有樣子，你鎖了，人家就懂了?！稄那奥?/span>
——摘自木心詩集《云雀叫了一整天》
正文：字號14、顏色#404040、字間距2、行間距1.5、兩端對齊、段后距5-10
注釋：字號12、顏色#808080、字間距1、行間距1、居右對齊
高手版
《從前慢》
從前的日色變得慢
車、馬、郵件都慢
一生只夠愛一人
從前的鎖也好看
鑰匙精美有樣子
你鎖了，人家就懂了。
——摘自木心先生詩集
《云雀叫了一整天》
《從前慢》
正文：字號15、顏色#404040、字間距1.5、行間距2、居中對齊、段間距空行
注釋：字號13、顏色#808080、字間距1、行間距1、居右對齊
從前的日色變得慢
車 馬郵件都慢
一生只夠愛一人
摘自木心先生詩
集
從前慢
正文：字號14、顏色#404040
注釋：字號12、顏色#808080
胖友們在對段落文字進行排版時需要注意文字間距的處理，大號文字要減少字距，小號文字需要增加字距，一般是 1/5 的字間距。
在設置行間距時要注意，大號文字用大行距，小號文字用小行距，范圍在 1 - 2 之間。
Tips：對文章進行排版時需要注意，無論是使用純色樣式，還是圖文樣式，一定要對文字進行優化處理，即重心在文字，其余輔助。
最常見的圖片排版問題是：① 圖片不統一，② 與文體、風格不協調。
頭條封面圖尺寸 900 * 383 像素，次條封面圖尺寸 200 * 200 像素，封面圖注意與公眾號品牌、整體風格、文風等相符合。
非GIF圖上傳至公眾后臺，經推文發布后，圖片尺寸會等比壓縮成寬度 640 px，想提高圖片質量，可預先處理配圖的格式或尺寸。
配圖建議
建議大小不超過 5M ，為保證閱讀的流暢性，避免圖片加載緩慢等問題，可以預先將圖片處理成 500k - 1000k 。
建議使用橫圖（16:9 和 4:3），不建議使用豎圖，或全文配圖統一尺寸比例，盡量避免橫豎圖混用，詩歌、短句排版可以使用圓圖樣式。
文章中使用表情，建議表情尺寸控制在 130-180px ，表情主體內容在 150px 即可。
圖片的色調，需要符合全文配色需求。
牛油果綠是讓人無法拒絕
不同的穿搭，不同的風格，顯得人很洋氣
▲ ID：95641
做一個吃貨無憂無慮
當一個癡貨無牽無掛
▲ ID：93644
▲ ID：95498
▲ ID：94816
關于圖片排版，胖友們還可以看這篇文章來詳細了解哦！
配 色
最常見的排版配色問題是：① 對配色沒有準確定位。② 全文色調不統一。
文字配色以黑、25% 灰、75% 灰、品牌色等為主。文字強調可使用黑色加粗、品牌色加粗或者紅色加粗的方式，當然也可以使用特殊字符配合強調。
配圖的色調盡量配合文章配色，圖片的視覺效果、表達的情緒也要符合配色環境，在尋找配圖時，可以首選品牌色調圖片，次選中性色調圖片。
首選依然是品牌色調。樣式在使用過程中，一定要注意與文字、圖片之間的協調，在全文色調統一的情況下，圖文樣式可以使用同色系遞減關系進行配色。
除了首先考慮品牌色之外，也可以根據文體風格，使用冷色系、暖色系或是小清新、視覺沖擊較大的配色。
這里給胖友們推薦幾個配色網站，希望能夠幫助到大家！
顏色提?。?a src="https://www.designspiration.net" data-linktype="2" style="margin: 0px; padding: 0px; color: rgb(87, 107, 149); text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">https://www.designspiration.net
更多的排版細節，可以來135圖文編輯器進行了解哦！
立即登錄
