排版改造家 | 1个月时间,排版差距竟然会这么大?

排版改造家 | 1个月时间,排版差距竟然会这么大?

640



哈喽胖友们大家好啊

我是三儿


今天的排版改造家

不是三儿自己来做了

而是想给大家分享一篇

排版课学员的作业


今天选取的这一篇

排版简洁大方

在当时得到的分数也比较高~


首先给大家看看我们给到的排版

(上下滑动查看更多)

↓↓↓

grey.gif

(好吧,我承认,丑化得很刻意~)



下面是关于这篇排版的一些建议

 ↓↓↓



grey.gif

排版的优点



 1、排版要素完整 


开头有引导关注的元素,结尾有二维码的元素,文章总的来说排版要素完整。


 2、有对文章进行简单的分层 


采用了总-分-总的排版思路,分解了文章结构(引导语、正文、结语),能帮助读者理清阅读逻辑和思路;正文有节奏感,按照7个要点划分段落,清晰明了。


 3、标注了重点内容的标注 


用了加粗、换色(红色)两种方式处理重点句子,重点突出,能减轻阅读负担,帮助用户理解文章。


 4、图文结合 


每个段落均有搭配符合内容的图片,利于读者理解文章,提升整体质感的同时使读者获得更好的视觉体验。



grey.gif

还需要改进的地方




 1、文本设置问题 


字号:全文通用16号字,标题、正文字号大小没有区分开来。


grey.gif


间距:字间距、行间距、段间距处理的都不好。文字间距小、无分段,显得很拥挤。段落间无留白,图片文字也挤在一起。


重点标注:文章标题与操作步骤用了相同的红色,影响阅读逻辑;此处文字添加了下划线,非常突兀、混乱。


grey.gif


 2、图片问题 


没有做到合理利用多图样式整合图片,图片的展现非常杂乱。


 3、样式问题 


样式滥用:过于花俏且显得杂乱无章。全文用了7种不同的分割线,4种不同的图片样式。


grey.gif


样式乱用:分割线的功能是划分文章内容,给读者创造一个视觉休息区。本文很多位置使用分割线都是多此一举,并没有起到功能性作用。


grey.gif


 4、配色混乱 


没有明显的主色调,加上因为样式乱用的原因,文章的展现就更乱了。



grey.gif

排版优化




首先给大家看一下优化之后的排版

(上下滑动查看更多)

↓↓↓


grey.gif


下面是对这篇作业的排版思路分析

↓↓↓


像配色,行间距、字间距设置以及留白处理这些基本的问题,三儿就不再重复说了,下面只说几点这篇排版的亮点。


 1、排版内容整齐 


有很多人可能拿到这样一篇杂乱的排版就被吓到了,不知道该如何下手,其实最重要的还是梳理好文章的结构,划分好文章内容的层次以后,排版就相对来说容易多了。这篇作业的一大亮点就是文章内容层次的划分非常清晰,并且每个部分的排版格式都是统一的,方便用户阅读。


 2、巧妙运用图片样式 


这篇作业的第二大亮点就是把原先杂乱的图片做了一个整理,并且统一了全文的图片样式,只有一张图片的地方,放置的是单一的手机图片样式;有两张图片需要对比的地方,放置的是两个手机的对比图;涉及到多张图片的地方则用了一个滑动样式,节省了排版的空间。

grey.gif

单图样式

grey.gif

双图样式

grey.gif

多图样式

>>>左右滑动查看更多

值得一提的是,这里的手机图片样式是用得非常巧妙的。因为文章的内容是在讲微信的搜索功能,配图大多都是手机微信截图,那单单放一张图片会显得有点单薄,如果把手机这个元素加进去,就会更加的场景化,增强用户的阅读体验感。


不过这位童鞋的排版也存在一点小小的问题,配图的选择上其实可以再优化一下,改造前后的图片基本上没有变化,不是特别美观。


我们平时在排版的时候,也要多思考给文章内容搭配什么样的排版样式是合适的,甚至是加分的,而不是觉得什么好看就用上了,这样是不会取得任何效果的。


 3、增加了导读部分 


优化的排版在原先排版的基础上设置了一个导读,这部分的内容可以让用户很快就明白文章讲的是什么,第一时间抓住他们的注意力。有很多小编喜欢用一个很长的引子作为开头,但是却没有讲到什么重点,这样就很可能劝退用户。


grey.gif


//////////


看到这么好看的排版,你又酸酸酸酸酸酸了?


羡慕一百次一万次,不如报名一次排版训练营来得快,第8期排版训练营正在报名中哦~


在最新一期的课程里,135编辑器课程团队吸取了前几期学员遇到的问题及建议,着重对SVG、排版技巧进行更新。课程也由原来的15章节变为17章节。力图将最新最全的公众号排版知识展现给你,手把手教你从入门到精通公众号排版!


助教1对1指导,深度练习实操,会员福利解锁,还有报名即送的新媒体工具,扫码二维码马上报名!


👇👇👇

grey.gif



好了

今天的排版改造到这里就结束了


如果你也存在排版上的问题

希望和大家一起交流探讨

欢迎投稿给三儿

三儿会在下一期里

对你的排版进行简单的点评和优化哦~

(*以下是投稿教程)



grey.gif

投稿教程




1、首先打开135编辑器,输入你要投稿的排版。


2、然后在编辑区右侧点击『保存同步』


grey.gif


3、点击『另存图文给其他用户』。


grey.gif


4、在输入编号的位置输入三儿的编辑器编号,然后完成投递。


grey.gif


5、三儿的编辑器用户编号:4741754。


6、注意:投稿标题请带『排版投稿』前缀,否则三儿将无法识别你的投稿。



//////////



来喽来喽

和三儿一起交流排版


发现排版问题

分享排版技巧

共同进步

争取做出更好看的排版吧~


grey.gif

↑重要的码要多扫几遍


福利时刻-免费领取7天135编辑器VIP会员】


点击https://www.135editor.com/users/invite/ddb12a17ce400c35fe041d275a578351,注册135编辑器,即可获得7天VIP会员



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