新型SEO思维就是从一个全新的层次上提升seo优化的水平,达到网络信息最佳化的展示效果!
马海祥博客 > 网站运营 > 写作技巧 > 文章排版怎么才有美感

文章排版怎么才有美感

时间:2018-12-07   文章来源:马海祥博客   访问次数:

都说当今是个看脸的时代,漂亮的“外表”自然会受到更多关注,写文章也不例外。文章的“脸”,除了它传递的思想外,就是它的排版了。一片文笔出众、排版讲究的文章,除了内容能让读者引发思考外,看完还会有种赏心悦目的感觉。

文章排版怎么才有美感-马海祥博客

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

一、文字编排的易读化

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

1、字体:创造层次感

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

文章排版怎么才有美感-马海祥博客

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

文章排版怎么才有美感-马海祥博客

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

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

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

2、间距:排版更易读

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

(1)、行间距

文章排版怎么才有美感-马海祥博客

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

(2)、段间距

文章排版怎么才有美感-马海祥博客

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

3、行长:划分阅读区

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

文章排版怎么才有美感-马海祥博客

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

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

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

4、对比:提高视觉性

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

(1)、标题与正文对比

文章排版怎么才有美感-马海祥博客

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

(2)、强调文本对比

文章排版怎么才有美感-马海祥博客

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

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

文章排版怎么才有美感-马海祥博客

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

二、图文排版的简单化

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

1、图文的组织关系

①、图片靠左对齐

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

②、图片靠右对齐

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

③、图片放在上方

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

④、图片放在下方

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

⑤、图片作为背景

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

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

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

2、多图型简单排版

(1)、左右图文

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

文章排版怎么才有美感-马海祥博客

(2)、上下图文

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

文章排版怎么才有美感-马海祥博客

(3)、上图下文

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

文章排版怎么才有美感-马海祥博客

3、单图型简单排版

(1)、高清图铺满

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

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

文章排版怎么才有美感-马海祥博客

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

文章排版怎么才有美感-马海祥博客

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

文章排版怎么才有美感-马海祥博客

(2)、模糊图缩小

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

文章排版怎么才有美感-马海祥博客

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

①、加个好看的边框。

文章排版怎么才有美感-马海祥博客

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

文章排版怎么才有美感-马海祥博客

三、移动端排版的特殊化

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

1、简单突出

文章排版怎么才有美感-马海祥博客

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

2、大小反差

文章排版怎么才有美感-马海祥博客

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

3、颜色反差

文章排版怎么才有美感-马海祥博客

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

4、对齐

文章排版怎么才有美感-马海祥博客

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

马海祥博客点评:

关于排版,还有很多不同的方法,因为不仅不同的人对排版有不同的见解,而且如今的传播媒介和字体等本身都在不断的变化。相应的审美和设计方法也不会一成不变,但总的原则是不变的,那就是让内容更易读,这也是好的排版的不变标准。

本文为马海祥博客原创文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/xzjq/2420.html,注明出处;否则,禁止转载;谢谢配合!

相关热词搜索: 文章排版

上一篇:提高写作能力的15条技巧
下一篇:没有了

今日话题更多>

SEO研究院 更多 >>