最全的排版教程,没有之一!

     

    图片源自网络,如有侵权请至后台联系小编


    本篇文章由135编辑器亲授,全方位解读排版技巧,内容由浅入深,以讲义结合案例的方式,为大家呈现一场有料有趣的排版教程。




    “审美”到底是怎么回事?




    先来看这样一组对比照,网上超火的妆前妆后照,你喜欢哪一个?相信答案应该是一致的。人们对于美和丑的认识是这样,美,可能比较难描述到底哪里美,但是丑却能一眼指出。


    化了妆的妹子就好像是排了版的文章,给人一眼看去非常舒服的感觉。如果说标题能引导读者点开文章,好的排版就留住读者继续阅读,从而才会达到内容想要的效果,保持优美的排版也会增加用户粘度。







    排版的目的?


    为了辅助阅读


    使内容更容易、更有条理地被读者接收,更容易传达作者意图。

    什么样的排版能够辅助阅读?

    总结起来大概是这几点:容易理解、可以扫读、整洁有序、段落清晰和重点突出


    为了辅助体验


    给读者带去愉悦、舒适的视觉享受,带来视觉体验的美感。




    了解排版目的,有利于在排版实践中做到心中有“理”。

    马上进入咱们本期的排版干货实战教学。


    文章主要分为两大版块:


    一、图文排版基本技巧   

    二、图文排版的细节处理






       图文排版基本技巧




    排版基本技巧-字体



     选择合适的字体

     同一篇文章的字体种类

     同一种字体的不同处理方式


    ①选择合适的字体

    不同类型的文章风格需要不同的字体表达,比如古诗词,用手写体或者楷体,微软雅黑或者黑体就不搭配的。


    YES

    NO

    VS


    ②同一篇文章的字体种类

    字体种类不宜过多,一般不超过三种。如需要变换,尽量采用同一字族,如叶根友钢笔行书、毛笔特色、刀锋等。


    ③同一种字体的不同处理方式

    一般采用加粗、颜色、大小、斜体(一般是英文)。

    为何中文不能用斜体,斜体其实是西方一些文字的手写体,中文是方块字,斜体是变形的,中文的手写体一般是书法体。


    补充说明:

    字体颜色选择事,建议正文字色75%灰、注释字色50%灰、这两种颜色视觉友好度高,纯黑有些刺眼,灰色温和些,黑灰白三色,是最安全也最有逼格的颜色。

    当然,标题颜色可适当区分开。








    排版基本技巧-字号 


    字号过大或过小都影响阅读,太小需要放大镜,太大比较适合老年群体。


    选择合适的字号:

    标题:16px、18px、20px;

    正文:14px、16px

    注释:12px、14px


    一般来说,标题,正文,注释应有层级大小区分。


    举个栗子:





    排版基本技巧-行距

    行距


    什么是行距?就是正文中每行文字之间的距离。行间距控制好可以让大脑更轻松识别文字内容——这也符合我们的阅读习惯。

    经过很多的测试,目前最常见的是行间距选择的数值是1.5和1.75,而1显得太拥挤,如果文字很少则可以设置为2倍。


    行距=1

    行距=1.75

    VS


    注意:文本字体越小,两行的行间距应该越大,确保字与行呼吸的空间。


    行距调整操作示意图:











    排版基本技巧-行宽



    行宽是指一行文字的宽度。行宽对阅读的记忆是有影响的,我们的视线移动呈 “Z” 字形,合适的行宽可以有效避免大脑对多余信息的处理。


    比如咪蒙的每篇文章都有设置左右留白,行宽值小,简单易读,形成独特的小清新风格。


    留白操作示意图:






    排版基本技巧-首行缩进和段间距



    区分段落与段落之间,可以采用首行缩进段间距两种方式。

    首行缩进



    利用首行缩进来区分段落,适合传统、正式、适合传统印刷读物。


    段间距

    手机阅读不同于纸媒,段落的开始一般不需要首行缩进,段落之间通过空行调大段间距。





    排版基本技巧-常用对齐方式

    左对齐

    符合阅读习惯、亲切自然,使阅读更轻松



    右对齐

    新颖、有格调、时尚有现代感。



    居中对齐

    视线集中、整体感强、庄重优雅



    菱形对齐

    新颖、趣味、别具一格









    排版基本技巧-标点符号



    中英文之间需要加空格

    示例:IOS 是个不错的操作系统


    中文与数据之间需要加空格


    示例:已经到了 11 月了。


    专有名词使用特定大小写


    示例:我刚买了台 iPhone 7



    除了标点符号外,我们用线条和图书符号引导阅读。如图:用线条和符号领着读者的眼睛,看你想让他看的地方。


    例如:阅读原文样式


    戳原文,更有料!








    排版基本技巧-图片


    大家不知道有没有这样的体会,有时候网络不好,打开一篇文章,半天图片都显示不出来,那就是你的图片太大了。


    选一张好图片


    封面图片尺寸大小:宽900px 高500px , 显示效果最好。

    图片大小: 静态图100k , 动态图500k

    图片格式:GIF格式更清晰

    压缩图片网站:推荐腾讯「智图」


    现135编辑器拥有图片库,内有大量免费高清图片



    图片的处理方式


    缩放、裁剪、旋转、翻转、锐化、图片滤镜、多图拼贴

    人像处理(美白、磨皮…)加圆角、加边框、加阴影



    135编辑器直接链接了美图秀秀,可以进行上述操作。


    图文混排方式


    上图下文、下图上文、左图右文、右图左文、图文叠加、图文环绕多行、多列图文穿插排列。


    135编辑器里有大量图文样式可供选择







    图文排版细节处理




    细节处理-清除格式


    微信的编辑后台是一个网页编辑器,就是如果直接拷贝粘贴的话,会带着原来的格式过来。

    无论你的原文是放在Word文档,还是网站上,文本里的每一个字都指定了大小、粗细、颜色、字体。你如果不看代码,是不知道的。但是,一旦你直接拷贝粘贴过来,会带着原有的所有格式过来。而那些格式,很可能根本不适合手机,也不适合微信。


    135编辑器有一个清除格式按钮,可以一键清除文章格式。


    清除格式操作示意: