文字排版怎么做才能让文章更吸引人?

不得不说,现今真的是一个看脸的社会,对于美好事物不断追求的人们看到漂亮的“总是莫名喜欢,从而可以得到更多大众关注,新媒体人做文字排版也是不例外的。文章的“脸蛋”除了文字功底优质内容外,脸面当然就是图文排版。出众的文笔配合上文章排版,除了跟读者共鸣,也能让读者感受到美的传递,赏心悦目。

不得不说,现今真的是一个看脸的社会,对于美好事物不断追求的人们看到漂亮的“脸蛋”总是莫名喜欢,从而可以得到更多大众关注,新媒体人做文字排版也是不例外的。文章的“脸蛋”除了文字功底优质内容外,脸面当然就是图文排版。出众的文笔配合上文章排版,除了跟读者共鸣,也能让读者感受到美的传递,赏心悦目。

简约而不简单.jpg

说起排版,这是个大学问。页面上的每一个元素都能影响浏览,排版设计的好坏绝对很考验一个人的基本功底。那么什么是好的排版?在我看来有比较棒的阅读性的,内容在视觉上是平衡连贯的,并且有整体空间感和美感的就是好排版。所以现在就从文字排版和图片排版这两大方面,与大家分享内容排版的技巧。

一、文字编排的易读化

当下社会的快餐文化,直接的使得我们的各种习惯随之改变,人们好像越来越不愿将时间花在长时间阅读上,用户习惯读图,那么一定是读图比读字更符合他们自身的使用习惯,所以不应该强行没收大家读图的权利,而应该想办法让文字内容更加易读美观并脱颖而出(具体可查看马海祥博客《基于页面易读性的文字编排设计要点》的相关介绍)。

1、字体:创造层次感

创造排版的层次感,让页面结构更加清晰。排版的层次感通常指页面中文本排列构建出的视觉层次。平时我们看过的书籍,书中的主标题看起来比副标题更重要,而主标题和副标题又明显比正文部分更显眼。所以我们在进行文字排版时,一般也可以遵循这个原则。

层次感.jpg

页面中所有字体尺寸应该是基于正文字体来进行选择的,因为正文是用户在每个页面中阅读最多的部分。那么,如何基于正文来选取其他部分字体的大小,下面有一些基本原则。

(1)、正文字体:调整字体大小,直到感觉看起来非常舒服为止。

(2)、标题字体:通常将正文字体放大到180%-200%。

(3)、副标题字体:通常为正文字体的130%-150%。

2、间距:排版更易读

通过调整行间距和段间距,让用户更容易扫读文字。段间距让用户能够更好地识别内容块和意群,行间距控制好则可以让大脑更轻松识别文字内容。

(1)、行间距

字间距01.jpg

行间距没有固定的值,通常是根据字体大小来定义的。在word里我们常看到双倍行距、单倍行距和1.5倍行距的选项。网页上行距的单位常用em来表示,不管是中文网站还是英文网站,大家多喜欢用1.5em-1.8em的行距,不超过2em。控制在正文尺寸的120%-160%,同时文本字体越小,两行之间的行距应该越大,确保字与行间的呼吸空间。

(2)、段间距

一般而言,段间距等于或大于正文字体行高。比如文章篇幅较短,就不需要很宽的段距,二文章篇幅很长,特别是那些偏学术的比较枯燥的文章,就要多利用段距把握文章的节奏,给阅读者喘息和思考的机会,且使文章更有层次和可读性。

3、行长:划分阅读区

我们随手拿起一本书或者一份报纸,数一数每行的文字,一般情况下都不会超过40个汉字。这是因为如果每行文字过长,读者会不停的转动脖子,感到疲惫的同时也会降低阅读效率;目光从行尾移至下一行首,也很容易串行,影响读者浏览文章的节奏。这点同样适用于网页上的文章阅读。由于显示器是横向的,我们更要注意划分阅读区域。

文本宽度控制在450-700px为宜,此范围内参照字号大小:

● 英文每行80-100个字母(空格算一个字母)为宜;

● 中文每行30-40个汉字为宜。

4、对比:提高视觉性

对比(contrast)是四项基本设计原理之一,在网页中对文字的排版也非常适用。可以将对比分为三类,主要是标题与正文的对比、文字颜色的对比,以及文字颜色与背景颜色的对比。

(1)、标题与正文对比

标题正文对比.png

标题使用18号的微软雅黑,正文使用12号的宋体,两种字体字号的对比让文字内容富有层次,很容易吸引读者眼球(具体可查看马海祥博客《如何通过内容营销策划来吸引消费者眼球》的相关介绍)。

(2)、强调文本对比

文本对比.jpg

一部分文字采用了与主要文字不同的样式,增加视觉效果,突出展示了段落的重点。一般规则是,强调文本不要超过整个文本的10%,如果所有都被强调,那就不是强调了。当然,一次仅仅使用两种或是三种强调技巧。换句话说,不要同时使用,颜色,字体改变,大小,下划线,斜体,黑体。

(3)、文字颜色与背景颜色对比

颜色对比.jpg

正文文本与背景合适的对比可以提高文字的清晰度,产生强烈的视觉效果。将文字内容清晰衬托出来,既有丰满的层次感,同时有具有很强的视觉冲击力。在使用这一原则时需要注意,必须确保文字是容易看清的,如果文字过小或过于纤细、色彩对比度不够,会适得其反。如果对色彩的对比度还不够熟悉时,可以通过颜色对比检测工具(Check My Colours、Colour Contrast Check)检测色差和亮度差,确保网页设计的易读性(具体可查看马海祥博客《基于网站色彩设计对用户体验影响的研究》的相关介绍)。

二、图文排版的简单化

为了增加阅读体验,一种友好的图文排版必不可少。图文混排的样式有很多,我们大体可以分为具有设计样式的和简单混排的。富有设计感的图文排版较复杂,需要一定的设计功底才能做的好看。因此简单好看的图文排版越来越受欢迎,处理好图片和文字的关系就可以。

1、图文的组织关系

①、图片靠左对齐

正常情况下,用户的注意力从左向右(当然不否定特例的)。其优势是可以增加内容的识别度,图片可以先吸引读者对内容的注意力。

②、图片靠右对齐

如果内容比图片更重要或者内容很难用相应的图片进行表达,同时又想充实页面提高页面美观度的,可以考虑图片放在右侧。

③、图片放在上方

一般都是类似瀑布流列表的排版方式。此时图片的重要程度比放在左侧还要高的多,基本每条记录的主要信息都靠配图来呈现。

④、图片放在下方

主要的优势,可以把文字和图片的结合优势充分发挥出来,文字简要陈诉,图片带你身临其境,还原真实情况。

⑤、图片作为背景

图片作为背景,可以加强其沉浸感,充分利用图片唤起读者的想象,把图片的诱惑最大化以提高文章整体档次。

⑥、同时利用上述几种方式

有时候为了减缓读者审美疲劳,或者突出某些重点部分。利用不同排列方式的优势来最大化达到传播目的,但缺点是给人的第一感觉是“乱”。

2、多图型简单排版

(1)、左右图文

左右图文可以选择,左边放图片,右边放文案;或者右边放图片,左边放文案。但需要注意的是,使用这种排版方法要保证图片尺寸尽量一致,文案长度尽量相近,保证它们都是对称对齐的。

左右图文.jpg

(2)、上下图文

上下图文和左右图文差不多,可以上图片下文案,也可以下图片上文案。跟左右图文一样,要注意尽量保证图片尺寸和文案长度的相同。

上下图文.png

(3)、上图下文

在内容文字比图片多很多时,上图下文的效果比上文下图的好,因为图文同时出现时,用户会先被图片吸引,如果文字在图片上方,很容易造成大家忽略跳过文字的结果。而大段文字出现在图片下方,也会让人比较有耐心阅读。

3、单图型简单排版

(1)、高清图铺满

如果是一张高清的图片,我们可以选择用它直接铺满整个页面,再把文字置于图片中。当图片构图复杂或文案颜色与背景颜色相近时,不能直接将文案置于背景上,否则就会看不清。

①、给图片加个色块,再把文案放到色块上面。

image.png

②、或者干脆给整个背景都覆盖上一个带透明度的矩形。

image.png

③、如果图片构图简单,你可以直接把文案置于图片空白处。

(2)、模糊图缩小

如果所选的这张图片质量不好模糊,可以考虑走气质路线:小图配上少量文字,再加上留白。但是当图片实在太小,而文案又实在过多时,此时这条路不但走不通,还会显得单调呆板。

image.png

此时可以考虑通过设计以增大图片面积:

①、加个好看的边框。

image.png

②、插入几个形状,用图片填充形状以后,更改形状的透明度。

image.png

三、移动端排版的特殊化

排版设置完全是一个常规技能,遵循简单的原则能让文本的可读性更好。虽然这些规则相对简单可行,但是并不能覆盖全部的排版需求,比如在移动端阅读。由于移动设备的逐渐发展,人们平时往往使用它的机会多于使用电脑,因此在移动端的排版上,我们要尤为注意。

1、简单突出

image.png

从移动端有限的屏幕以及页面加载速度这两方面来考虑,最好的展示效果是简单,有一个核心元素,突出重点为最优。以可口可乐的这个“我们在这 我们在乎”为例,相较而言,越简单的排版会越容易引起关注。这是因为我们的大脑里最初看到这种简洁排版,会立刻出现“嗯 我可以马上看完不费劲”的潜意识信息而带着轻松的态度去阅读。

2、大小反差

在桌面端我们可能会采用字号差异较大的文字组合,移动端屏幕较小,容纳的文字也较少,同等的字号差异在小屏幕上的感受会被放大。原因是我们在使用这两种设备时的观看距离不同,桌面端我们的眼睛离屏幕较远,而在移动端则相反,因此我们应该在移动端使用较小的字号反差。

3、颜色反差

image.png

移动设备使用环境复杂多变而不局限在室内,可能在室外,甚至暴露在强烈的阳光下,应确保文字在背景中不会识别困难,即使是色弱者也可以正常阅读。建议的文字和背景的颜色反差比应该高于4.5:1(AA级),才能确保更多人及环境都可以轻松阅读。我们可以借助检测工具来帮助检测这个比值。

4、对齐

在英文的段落排版中,通常是左侧对齐,而让右侧自然形成起伏边。对中文排版与阅读习惯而言则相反,特别是在移动端上阅读,段落的头尾对齐尤其重要。一边是夹杂了数字或英文字母字符的情况下,原本中文的整齐排列被打乱了,右侧严重参差不齐不美观。一边是微调文字的间距以补足右边存大的空白,整洁对齐。

image.png

当然,其实排版的方法有很多,不过不同人都会有不一样的简洁,并且现今的传播媒介都在随着时代变化而变化。审美和设计方面水平都在提高,不过最基础的原则总是不变的,对于用户体验来说,那就是内容更加易懂,这就是作为文字排版最好的执行标准。



文章申明:本文章转载自互联网公开渠道,如有侵权请联系我们删除
文章评价
登录后可以评论
立即登录
小三儿135主笔
一个酷爱钻研排版的小编!
共606篇文章
最近文章
更多
  • 2023霜降节气海报合集,给你专属秋天的灵感!
  • 寒露节气免费手机海报模板分享
  • 2023中秋节精美海报大放送,尊的都很好看!
  • 不看会后悔系列!2023国庆节精美海报模板分享!
比格设计
热门工具
135编辑器
领先的在线图文编辑平台原创样式素材,一键套用
比格设计
受欢迎的在线作图网站,新媒体配图、手机海报应有尽有
管小助
企业营销、私域流量运营——站式营销管理平台
推荐文章
用户运营平台产品设计指南
浅谈用户运营中的用户分层
内容运营:戴上写作的六顶思考帽
5000字方法论:4个细节,决定私域能不能赚钱
一个案例说明白用户分析怎么用
22条视频,涨粉12.6万,一个女孩子在抖音靠洗车也能月入过万!
高价值社群的5大核心关键
抖音账号内容自检清单!
决定离职后,3天拿到offer的总结与反思!
【135早资讯】:教育部将彻查教材插图问题;抖音6月1日起将对本地生活商家收取服务费
热门素材样式
运营导航
运营工具
分享到