已在页面完全加载前强制排版_文章排版怎么做才更具美感？

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

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

一、文字编排的易读化

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

1、字体&＃xff1a;创造层次感

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

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

(1)、正文字体&＃xff1a;调整字体大小&＃xff0c;直到感觉看起来非常舒服为止。

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

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

2、间距&＃xff1a;排版更易读

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

(1)、行间距

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

(2)、段间距

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

3、行长&＃xff1a;划分阅读区

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

文本宽度控制在450-700px为宜&＃xff0c;此范围内参照字号大小&＃xff1a;

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

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

4、对比&＃xff1a;提高视觉性

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

(1)、标题与正文对比

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

(2)、强调文本对比

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

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

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

二、图文排版的简单化

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

1、图文的组织关系

①、图片靠左对齐

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

②、图片靠右对齐

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

③、图片放在上方

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

④、图片放在下方

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

⑤、图片作为背景

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

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

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

2、多图型简单排版

(1)、左右图文

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

(2)、上下图文

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

(3)、上图下文

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

3、单图型简单排版

(1)、高清图铺满

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

①、给图片加个色块&＃xff0c;再把文案放到色块上面。

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

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

(2)、模糊图缩小

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

此时可以考虑通过设计以增大图片面积&＃xff1a;

①、加个好看的边框。

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

三、移动端排版的特殊化

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

1、简单突出

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

2、大小反差

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

3、颜色反差

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

4、对齐

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

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