135编辑器诊断5千篇图文排版,只为还不会排版的你——独家建议

135编辑器诊断5千篇图文排版,只为还不会排版的你——独家建议

  胖友们大家好呀,我是三儿


  自打三儿入行以来,就深深的明白一个道理,那就是排版一定要好看,俗话说的好:有趣的内容千篇一律,好看的排版万里挑一!


  在这个快节奏的时代,看脸成了唯一的标准,不管你内容再好,没有好的排版,终究是站不住jio的。


  那么今天,三儿就来给胖友们讲一讲公众号排版的一些基础知识,如果你是入坑几年的老司机,说实话,这篇文章对你的用处不大,但如果你是刚入行的新手,每天需要在排版上花几个小时,那么你一定要仔仔细细看完这篇文章!


  *这篇文章主要是根据5000多篇135编辑器后台用户投稿所作出的一些诊断,给大家提出一些使用的建议,希望这些建议,能够帮助到刚入行的小白。



640?tp=webp

 标 题 


  在日常排版中,我们最常见的标题排版问题是:1、正文与标题区分不明显。2、各级标题逻辑关系不明显。


  那如何才能解决这个问题呢?


  胖友们可以通过对标题的强调,如加粗、加大字号等,与正文作出区分;也可以通过序号的逐级关系变化,来增强排版逻辑关系。


  当然,我们还可以在保证上面操作的基础之上,使用标题样式,来增强标题的排版美感,引导文章的阅读,优化用户的视觉体验。


1
初级版 


一、这是一级标题


字号:16 px ,颜色#000000,加粗,字间距为 2,两端对齐


2、这是二级标题


字号:16 px ,颜色#404040,加粗,字间距为 2,两端对齐


(3)这是三级标题


字号:15 px ,颜色#404040,加粗,字间距为 2,两端对齐


④这是四级标题


字号:14 px,颜色# 404040,加粗,字间距为 2,两端对齐



2
进阶版 


1

这是一级标题


字号:16 px ,颜色#000000,加粗,字间距为 2,两端对齐


2

这是二级标题


字号:16 px ,颜色#404040,加粗,字间距为 2,两端对齐


3

这是三级标题


字号:15 px ,颜色#404040,加粗,字间距为 2,两端对齐


4

这是四级标题


字号:14 px,颜色# 404040,加粗,字间距为 2,两端对齐


3

高手版 



1

这是一级标题


字号:16 px ,颜色#000000,加粗,字间距为 2,两端对齐


2

这是二级标题


字号:16 px ,颜色#404040,加粗,字间距为 2,两端对齐


3

这是三级标题


字号:15 px ,颜色#404040,加粗,字间距为 2,两端对齐


4

这是四级标题


字号:14 px,颜色# 404040,加粗,字间距为 2,两端对齐


这里我们需要注意的是:

1、标题字号 ≥  正文字号。

无论文章使用到几级标题,最低级标题的字号大小也应大于正文字号大小。


2、同级标题使用同级样式。

为了保证文章整体性和逻辑性,同一级别的标题应当使用同一样式,以保持文章连贯性。



grey.gif

 正 文 


  最常见的正文排版问题是:①段落文字间留白不会控制。②无法表现不同的文体风格。


  文字留白问题,即:字间距、行间距、段前/后距的处理问题。不同文体/文风也正是依靠他们的大小数值变化来呈现的。


  文体风格还可以使用一些“正文样式”来体现,例如竖排,居中,背景等样式,但需要注意控制阅读视觉体验,以达到文字排版的最佳效果。


1

初级版 


  从前的日色变得慢,车、马、邮件都慢,一生只够爱一人;从前的锁也好看,钥匙精美有样子,你锁了,人家就懂了。《从前慢》

——摘自木心先生诗集《云雀叫了一整天》


正文:字号16、颜色#404040、字间距1、行间距2、两端对齐、段后距15-20


注释:字号14、颜色#808080、字间距1、行间距1、居右对齐



  从前的日色变得慢,车、马、邮件都慢,一生只够爱一人;从前的锁也好看,钥匙精美有样子,你锁了,人家就懂了。《从前慢》

——摘自木心先生诗集《云雀叫了一整天》


正文:字号15、颜色#404040、字间距1.5、行间距1.75、两端对齐、段后距10-15


注释:字号13、颜色#808080、字间距1、行间距1、居右对齐



  从前的日色变得慢,车、马、邮件都慢,一生只够爱一人;从前的锁也好看,钥匙精美有样子,你锁了,人家就懂了。《从前慢》


——摘自木心先生诗集《云雀叫了一整天》


正文:字号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、居右对齐



2
进阶版 


《从前慢》

从前的日色变得慢,车、马、邮件都慢,一生只够爱一人;从前的锁也好看,钥匙精美有样子,你锁了,人家就懂了。

——摘自木心诗集《云雀叫了一整天》


正文:字号16、颜色#404040、字间距1、行间距2、两端对齐、段后距15-20


注释:字号14、颜色#808080、字间距1、行间距1、居右对齐



从前的日色变得慢,车、马、邮件都慢,一生只够爱一人;从前的锁也好看,钥匙精美有样子,你锁了,人家就懂了。《从前慢》

——摘自木心诗集《云雀叫了一整天》


正文:字号15、颜色#404040、字间距1.5、行间距1.75、两端对齐、段后距10-15


注释:字号13、颜色#808080、字间距1、行间距1、居右对齐


grey.gif

从前的日色变得慢,车、马、邮件都慢,一生只够爱一人;从前的锁也好看,钥匙精美有样子,你锁了,人家就懂了。《从前慢》


——摘自木心诗集《云雀叫了一整天》

grey.gif


正文:字号14、颜色#404040、字间距2、行间距1.5、两端对齐、段后距5-10


注释:字号12、颜色#808080、字间距1、行间距1、居右对齐



3

高手版 



《从前慢》


从前的日色变得慢

车、马、邮件都慢

一生只够爱一人

从前的锁也好看

钥匙精美有样子

你锁了,人家就懂了。


——摘自木心先生诗集

《云雀叫了一整天》

《从前慢》


正文:字号15、颜色#404040、字间距1.5、行间距2、居中对齐、段间距空行


注释:字号13、颜色#808080、字间距1、行间距1、居右对齐



从前的日色变得慢


车 马邮件都慢


一生只够爱一人        


摘自木心先生诗

grey.gif

从前慢


正文:字号14、颜色#404040


注释:字号12、颜色#808080


胖友们在对段落文字进行排版时需要注意文字间距的处理,大号文字要减少字距,小号文字需要增加字距,一般是 1/5 的字间距。


在设置行间距时要注意,大号文字用大行距,小号文字用小行距,范围在 1 - 2 之间。


Tips:对文章进行排版时需要注意,无论是使用纯色样式,还是图文样式,一定要对文字进行优化处理,即重心在文字,其余辅助。



grey.gif
 图 片 


最常见的图片排版问题是 图片不统一,② 与文体、风格不协调。


1
封面的图片尺寸 


头条封面图尺寸 900 * 383 像素,次条封面图尺寸 200 * 200 像素,封面图注意与公众号品牌、整体风格、文风等相符合。



2
配图的图片尺寸 


非GIF图上传至公众后台,经推文发布后,图片尺寸会等比压缩成宽度 640 px,想提高图片质量,可预先处理配图的格式或尺寸。



3

配图建议 


建议大小不超过 5M ,为保证阅读的流畅性,避免图片加载缓慢等问题,可以预先将图片处理成 500k - 1000k 。


建议使用横图(16:9 和 4:3),不建议使用竖图,或全文配图统一尺寸比例,尽量避免横竖图混用,诗歌、短句排版可以使用圆图样式。


文章中使用表情,建议表情尺寸控制在 130-180px ,表情主体内容在 150px 即可。


图片的色调,需要符合全文配色需求。



4
图文样式 


grey.gif
grey.gif
grey.gif
牛油果の夏天
无法不爱的颜色

牛油果绿是让人无法拒绝

不同的穿搭,不同的风格,显得人很洋气

grey.gif

▲ ID:95641


吃货语录
grey.gif
grey.gif

做一个吃货无忧无虑

当一个痴货无牵无挂

grey.gif

▲ ID:93644


grey.gif
清爽夏日
FRESH SUMMER
grey.gif
grey.gif
grey.gif

▲ ID:95498


grey.gif
grey.gif
grey.gif

▲ ID:94816


关于图片排版,胖友们还可以看这篇文章来详细了解哦!

➤➤➤图片排版超链接



grey.gif

 配 色 


最常见的排版配色问题是:① 对配色没有准确定位。② 全文色调不统一。


1
文字颜色 


文字配色以黑、25% 灰、75% 灰、品牌色等为主。文字强调可使用黑色加粗、品牌色加粗或者红色加粗的方式,当然也可以使用特殊字符配合强调。



2
图片配色 


配图的色调尽量配合文章配色,图片的视觉效果、表达的情绪也要符合配色环境,在寻找配图时,可以首选品牌色调图片,次选中性色调图片。



3
样式色调 


首选依然是品牌色调。样式在使用过程中,一定要注意与文字、图片之间的协调,在全文色调统一的情况下,图文样式可以使用同色系递减关系进行配色。



4
全文配色 


除了首先考虑品牌色之外,也可以根据文体风格,使用冷色系、暖色系或是小清新、视觉冲击较大的配色。


这里给胖友们推荐几个配色网站,希望能够帮助到大家!

中国色:http://zhongguose.com

颜色大全:https://www.0to255.com

颜色提取:https://www.designspiration.net


胖友们大家好呀,我是三儿


自打三儿入行以来,就深深的明白一个道理,那就是排版一定要好看,俗话说的好:有趣的内容千篇一律,好看的排版万里挑一!


在这个快节奏的时代,看脸成了唯一的标准,不管你内容再好,没有好的排版,终究是站不住jio的。


那么今天,三儿就来给胖友们讲一讲公众号排版的一些基础知识,如果你是入坑几年的老司机,说实话,这篇文章对你的用处不大,但如果你是刚入行的新手,每天需要在排版上花几个小时,那么你一定要仔仔细细看完这篇文章!


*这篇文章主要是根据5000多篇135编辑器后台用户投稿所作出的一些诊断,给大家提出一些使用的建议,希望这些建议,能够帮助到刚入行的小白。



grey.gif

 标 题 


在日常排版中,我们最常见的标题排版问题是:1、正文与标题区分不明显。2、各级标题逻辑关系不明显。


那如何才能解决这个问题呢?


胖友们可以通过对标题的强调,如加粗、加大字号等,与正文作出区分;也可以通过序号的逐级关系变化,来增强排版逻辑关系。


当然,我们还可以在保证上面操作的基础之上,使用标题样式,来增强标题的排版美感,引导文章的阅读,优化用户的视觉体验。


1
初级版 


一、这是一级标题


字号:16 px ,颜色#000000,加粗,字间距为 2,两端对齐


2、这是二级标题


字号:16 px ,颜色#404040,加粗,字间距为 2,两端对齐


(3)这是三级标题


字号:15 px ,颜色#404040,加粗,字间距为 2,两端对齐


④这是四级标题


字号:14 px,颜色# 404040,加粗,字间距为 2,两端对齐



2
进阶版 


1

这是一级标题


字号:16 px ,颜色#000000,加粗,字间距为 2,两端对齐


2

这是二级标题


字号:16 px ,颜色#404040,加粗,字间距为 2,两端对齐


3

这是三级标题


字号:15 px ,颜色#404040,加粗,字间距为 2,两端对齐


4

这是四级标题


字号:14 px,颜色# 404040,加粗,字间距为 2,两端对齐


3

高手版 



1

这是一级标题


字号:16 px ,颜色#000000,加粗,字间距为 2,两端对齐


2

这是二级标题


字号:16 px ,颜色#404040,加粗,字间距为 2,两端对齐


3

这是三级标题


字号:15 px ,颜色#404040,加粗,字间距为 2,两端对齐


4

这是四级标题


字号:14 px,颜色# 404040,加粗,字间距为 2,两端对齐


这里我们需要注意的是:

1、标题字号 ≥  正文字号。

无论文章使用到几级标题,最低级标题的字号大小也应大于正文字号大小。


2、同级标题使用同级样式。

为了保证文章整体性和逻辑性,同一级别的标题应当使用同一样式,以保持文章连贯性。



grey.gif

 正 文 


最常见的正文排版问题是:①段落文字间留白不会控制。②无法表现不同的文体风格。


文字留白问题,即:字间距、行间距、段前/后距的处理问题。不同文体/文风也正是依靠他们的大小数值变化来呈现的。


文体风格还可以使用一些“正文样式”来体现,例如竖排,居中,背景等样式,但需要注意控制阅读视觉体验,以达到文字排版的最佳效果。


1

初级版 


从前的日色变得慢,车、马、邮件都慢,一生只够爱一人;从前的锁也好看,钥匙精美有样子,你锁了,人家就懂了。《从前慢》

——摘自木心先生诗集《云雀叫了一整天》


正文:字号16、颜色#404040、字间距1、行间距2、两端对齐、段后距15-20


注释:字号14、颜色#808080、字间距1、行间距1、居右对齐



从前的日色变得慢,车、马、邮件都慢,一生只够爱一人;从前的锁也好看,钥匙精美有样子,你锁了,人家就懂了。《从前慢》

——摘自木心先生诗集《云雀叫了一整天》


正文:字号15、颜色#404040、字间距1.5、行间距1.75、两端对齐、段后距10-15


注释:字号13、颜色#808080、字间距1、行间距1、居右对齐



从前的日色变得慢,车、马、邮件都慢,一生只够爱一人;从前的锁也好看,钥匙精美有样子,你锁了,人家就懂了。《从前慢》


——摘自木心先生诗集《云雀叫了一整天》


正文:字号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、居右对齐



2
进阶版 


《从前慢》

从前的日色变得慢,车、马、邮件都慢,一生只够爱一人;从前的锁也好看,钥匙精美有样子,你锁了,人家就懂了。

——摘自木心诗集《云雀叫了一整天》


正文:字号16、颜色#404040、字间距1、行间距2、两端对齐、段后距15-20


注释:字号14、颜色#808080、字间距1、行间距1、居右对齐



从前的日色变得慢,车、马、邮件都慢,一生只够爱一人;从前的锁也好看,钥匙精美有样子,你锁了,人家就懂了。《从前慢》

——摘自木心诗集《云雀叫了一整天》


正文:字号15、颜色#404040、字间距1.5、行间距1.75、两端对齐、段后距10-15


注释:字号13、颜色#808080、字间距1、行间距1、居右对齐


grey.gif

从前的日色变得慢,车、马、邮件都慢,一生只够爱一人;从前的锁也好看,钥匙精美有样子,你锁了,人家就懂了。《从前慢》


——摘自木心诗集《云雀叫了一整天》

grey.gif


正文:字号14、颜色#404040、字间距2、行间距1.5、两端对齐、段后距5-10


注释:字号12、颜色#808080、字间距1、行间距1、居右对齐



3

高手版 



《从前慢》


从前的日色变得慢

车、马、邮件都慢

一生只够爱一人

从前的锁也好看

钥匙精美有样子

你锁了,人家就懂了。


——摘自木心先生诗集

《云雀叫了一整天》

《从前慢》


正文:字号15、颜色#404040、字间距1.5、行间距2、居中对齐、段间距空行


注释:字号13、颜色#808080、字间距1、行间距1、居右对齐



从前的日色变得慢


车 马邮件都慢


一生只够爱一人        


摘自木心先生诗

grey.gif

从前慢


正文:字号14、颜色#404040


注释:字号12、颜色#808080


胖友们在对段落文字进行排版时需要注意文字间距的处理,大号文字要减少字距,小号文字需要增加字距,一般是 1/5 的字间距。


在设置行间距时要注意,大号文字用大行距,小号文字用小行距,范围在 1 - 2 之间。


Tips:对文章进行排版时需要注意,无论是使用纯色样式,还是图文样式,一定要对文字进行优化处理,即重心在文字,其余辅助。



grey.gif
 图 片 


最常见的图片排版问题是 图片不统一,② 与文体、风格不协调。


1
封面的图片尺寸 


头条封面图尺寸 900 * 383 像素,次条封面图尺寸 200 * 200 像素,封面图注意与公众号品牌、整体风格、文风等相符合。



2
配图的图片尺寸 


非GIF图上传至公众后台,经推文发布后,图片尺寸会等比压缩成宽度 640 px,想提高图片质量,可预先处理配图的格式或尺寸。



3

配图建议 


建议大小不超过 5M ,为保证阅读的流畅性,避免图片加载缓慢等问题,可以预先将图片处理成 500k - 1000k 。


建议使用横图(16:9 和 4:3),不建议使用竖图,或全文配图统一尺寸比例,尽量避免横竖图混用,诗歌、短句排版可以使用圆图样式。


文章中使用表情,建议表情尺寸控制在 130-180px ,表情主体内容在 150px 即可。


图片的色调,需要符合全文配色需求。



4
图文样式 


grey.gif
grey.gif
grey.gif
牛油果の夏天
无法不爱的颜色

牛油果绿是让人无法拒绝

不同的穿搭,不同的风格,显得人很洋气

grey.gif

▲ ID:95641


吃货语录
grey.gif
grey.gif

做一个吃货无忧无虑

当一个痴货无牵无挂

grey.gif

▲ ID:93644


grey.gif
清爽夏日
FRESH SUMMER
grey.gif
grey.gif
grey.gif

▲ ID:95498


grey.gif
grey.gif
grey.gif

▲ ID:94816


关于图片排版,胖友们还可以看这篇文章来详细了解哦!

➤➤➤图片排版超链接



grey.gif

 配 色 


最常见的排版配色问题是:① 对配色没有准确定位。② 全文色调不统一。


1
文字颜色 


文字配色以黑、25% 灰、75% 灰、品牌色等为主。文字强调可使用黑色加粗、品牌色加粗或者红色加粗的方式,当然也可以使用特殊字符配合强调。



2
图片配色 


配图的色调尽量配合文章配色,图片的视觉效果、表达的情绪也要符合配色环境,在寻找配图时,可以首选品牌色调图片,次选中性色调图片。



3
样式色调 


首选依然是品牌色调。样式在使用过程中,一定要注意与文字、图片之间的协调,在全文色调统一的情况下,图文样式可以使用同色系递减关系进行配色。



4
全文配色 


除了首先考虑品牌色之外,也可以根据文体风格,使用冷色系、暖色系或是小清新、视觉冲击较大的配色。


这里给胖友们推荐几个配色网站,希望能够帮助到大家!

中国色:http://zhongguose.com

颜色大全:https://www.0to255.com

颜色提取:https://www.designspiration.net


更多的排版细节,可以来135图文编辑器进行了解哦!




文章评价
登录后可以评论
立即登录