马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > 运营思维 > 写作技巧 > 提升网站文章可读性的排版技巧大全

提升网站文章可读性的排版技巧大全

时间:2012-11-30   文章来源:马海祥博客   访问次数:

最近有朋友说自己做的网站老是跳出率特别高,文章页的相关推荐也增加了好多,可是访客的停留时间依然很短。我打开他的网站仔细看了下,感觉文章内容写的还可以,相关链接也都做了,但是文章的行与行直接特别紧,文章也没有插图搭配,可能是因为要节省空间的原因。

如今,有很多网站文章的排版给人的感觉就是整个页面都是密密麻麻的字,让人一看就有种烦躁的感觉。其实这个问题也就说明了文章排版在客户体验这一环节的重要性了,排版在网页设计中经常被忽略,其实这是错误的,因为注重网页排版确实可以提高你的网页设计水平和可读性。

提升网站文章可读性的排版技巧大全-马海祥博客

说起排版,这是个大学问,页面上的每一个元素都能影响浏览,排版设计的好坏绝对很考验一个人的基本功底。接下来,我便在马海祥博客上列出了10个非常有用的排版技巧,让你的网站页面排版看起来更好。

1、纠正行高

最常见的网页布局错误之一是定义了不正确的行高。行高是定义一行文本的高度,所以我们必须按照文本字体大小来设定行高。

一般来说,在设置文本行高的时候,我经常在字体大小的基础上加上7个像素(对12-17像素的字体而言)

body{

font-size:14px;

line-height:21px; /* 14px + 7px */

}

2、纠正标题margin值

另外一个常见的错误是标题周围不正确的margin值。标题其实是与它下面的段落是相关联的,而不仅仅是两个段落的分割符。这就是为什么标题的margin-top比margin-bottom要宽。

3、不要使用过多的字体

提升网站文章可读性的排版技巧大全-马海祥博客

为了确保可读性和专业性,你的网页上不应该使用超过3种字体。使用过多的字体会干扰你的用户而且让你的网站看起来很乱。

相反,较少的字体让你的网站显得干净易读。你可以标题使用一种字体,正文使用一种字体,最后logo或副标题使用另外的字体。

4、代码部分使用等宽字体

如果你是一位开发者(就像大部分读这篇博客的人)你可能想贴一些代码在你的博客里。如果是这样,请使用等宽字体。 那么,什么是等宽字体?它就是字母和字符占相同水平宽度的字体。

提升网站文章可读性的排版技巧大全-马海祥博客

那么在网站的代码段你应该使用哪种字体呢?到目前为止 Courier字体是最流行的,那么尝试一下最新的一些字体像 Consolas或 Monaco怎么样呢?

5、关注对比

即使你的网站有很好的排版了,另一个需要注意的是对比。如果你的页面背景是中灰色(#999999),那么不要使用深灰色(#333333)的文本,否则你的内容很难看清,尤其是对一些年纪比较大的或视力差的人。

总之,除非你的网站是关于黑客、黑帽seo或哥特摇滚的,不然你应该使用浅色背景和深色字体来保证清晰的对比度增加你网站的可读性。

6、只给链接的文本加下划线

在我上网的这么多年中,浏览器用在链接的默认样式一直是蓝色文本加下划线。虽然这个蓝色经常被改成另外的颜色,但下划线一直被当做是链接的常规样式。这就是为什么除了链接你不要给其他的东西加上下划线的原因。否则,这可能对你的用户造成很大的困惑。

7、创建样式库

让你的网站产生视觉震撼的一个简单高效的方法是给特殊的页面创建特殊的样式。例如,创建一个warning的CSS类来向 你的用户显示“警告”。

8、按级别来排列标题和文本

为了增加可读性,给标题、介绍段落和常规文本创建标签层级是很重要的,这样你的用户可以看清你的文章结构并能很快的找到他们感兴趣的部分。

提升网站文章可读性的排版技巧大全-马海祥博客

标题承载着内容的主旨,使用简短的文字让读者在短时间内了解信息内容,在版面中具有重要地位。文字是平面设计的重要组成部分,相对于图片的暗示性,文字传递出的是明确并且具体的信息。

9、大胆留白

我认为最重要的排版技巧之一是“大胆留白”。留白是指空白区或没有使用的空间,它会使你的设计整齐而专业。许多人喜欢苹果网站的原因是:它尽管简单但很精致,而且有很多留白。

10、正确使用标点符号

如果你想提升你的排版水平不容忽视的一点是正确使用标点符号。例如,引号经常用双撇符号代替(译者注:我想作者要表达的意思应该是全角符号和半角符号的区别,就像中文的引号和英文的引号不同一样)。

注意区分双撇符号:    He said "Hello".
同样的文本,使用引号:    He said “Hello”.

这样更好,不是吗?如果你是WordPress用户,你可能很乐意知道你最喜欢的博客平台自动将双撇号转换为智能的引号 。否则,你得使用HTML字符编码。如下所示:

He said &s;ldquo;Hello”.

尽管,你可能已经熟悉了网页设计的层次结构,你可能也明白排版中也少不了它。但是我还是要再强调一下,层级结构会给你一个阅读显示文本的起点。这点非常重要,因为这会帮助你准确传递信息,同时保证读者准确理解,很多网站在这个问题上都做得很好,但是你还是应该牢记在心,这样你的网站就不会显得太过时。

为了增加可读性,给标题、介绍段落和常规文本创建标签层级是很重要的,这样你的用户可以看清你的文章结构并能很快的找到他们感兴趣的部分。

马海祥博客点评:

文字在画面中的安排要考虑到全局的因素,不能有视觉上的冲突。否则在画面上主次不分,很容易引起视觉顺序的混乱,有时候甚至1个像素的差距也会改变你整个作品的味道。文字不仅要在字体上和画面配合好,甚至颜色和部分笔画都要加工,这样才能达到更完整的效果,而这些细节的地方需要的是耐心和功力。

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

相关标签搜索: 文章可读性   排版技巧  

上一篇:我的文章写作思路的方法技巧
下一篇:我心目中的医疗网站编辑是什么样的?

您可能还会对以下这些文章感兴趣!

  • 怎样巧妙的运用这些方法写好文章标题

    大家都知道,要写好一篇搜索引擎喜欢的文章,不仅内容要丰富,标题也非常的重要。一个好的标题,应该具备引起注意、概括整体内容、形成阅读冲动这3个作用,写出好的标题往往是内容成功建设的一半。写文章,这在传统时代,只是纸质媒体或者学习作文上才会去写,但随着互……【查看全文

    阅读:97关键词: 文章标题   文章   标题   日期:2017-08-30
  • 广告文案标题命名的38个写作技巧

    对于一则设计精妙的标题,当它的精妙之处能强化销售信息、加深读者印象时,才算真正具备价值,可惜许多文案写手为了创意而创意,导致精心的设计反而模糊了销售信息。假如你得在巧妙隐晦和简单直接之间作选择,我建议你选择简单直接,虽然你不会因此赢得广告大奖,但至少……【查看全文

    阅读:5841关键词: 广告文案   标题命名   写作技巧   文案写作   文案   日期:2014-08-07
  • 网站文章编辑规范的标准细则

    文章内容可以是案例分析、技术介绍、话题论述等形式。文章具有可读性,文章语句通顺,文章分段分层、主题清晰,整齐有序的文章排版。较长的文章需要段落化,特长的文章分页处理。段落之间最好有一定距离,显得文章层次分明,一般可在每段之间软回车空一行,保持每段空格……【查看全文

    阅读:3619关键词: 网站文章   网站编辑   文章规范   文章标准   编辑细则   日期:2014-05-07
  • 文案写作手法的一些套路

    一句文案救活一个品牌,这种事听起来玄乎。但一个文案让企业名声大噪,让产品销售破纪录,这还真不少。喜欢看文案的同学应该有感触,那些经典文案,让人看了不自觉的会上瘾,也会让人不禁疑惑――这样的文案是怎么写出来的?同样的意思,文案大咖说出来,特别有感觉。比……【查看全文

    阅读:3488关键词: 文案写作   文案   写作手法   日期:2017-05-12
  • 网络编辑要学些什么技能?

    对于一名合格的网编来说在编辑文章的时候不能就只是生搬硬套的,像木头似的不知道为什么要写这篇文章。假如网编都不知道写这篇文章的目的,那么消费者读了这篇文章,能产生消费欲望吗?能给我们的站点带来实质的价值吗?所以,能给站点带来用户的文章才是好文章,否则,……【查看全文

    阅读:2683关键词: 网络编辑   编辑技能   编辑   日期:2014-06-16
  • 如何使用文案的力量来改善用户体验

    在国内的互联网公司中,文案设计大多属于交互设计师及类似岗位的范畴,但国内的很多企业都没有设置专门的交互设计师或类似的岗位来负责文案的设计,他们更愿意花钱在一堆海量的数据多数据分析,以及做出更新奇的功能,那么是不是文案对于产品就不重要呢?当然不是,功能……【查看全文

    阅读:1345关键词: 文案   改善体验   用户体验   日期:2014-03-21
  • 新手文案学习写作的三大步骤

    好的文案,是一种独特的风格,能瞬间抓住大众的目光,撞出共鸣的火光。耐心练习,坚持下来,文案创作基本功才会更扎实,创作出更优秀的文案。学习需要日积月累,成就事业也需要积累,不懈地努力奋斗。积累是一种毅力,是由微小到伟大的必经之路,是成功的前提,是由量变……【查看全文

    阅读:4120关键词: 文案   日期:2016-12-27
  • 如何从SEO的角度来规范网络编辑?

    网络编辑可以说是网站内容的设计师和建设者,通过网络对信息进行收集、分类、编辑、审核,然后通过网络向世界范围的网民进行发布,并且通过网络从网民那里接收反馈信息,产生互动。所以网络编辑跟报纸、杂志编辑最大的不同就是需要掌握大量的网络技术知识,还需要为我们……【查看全文

    阅读:1482关键词: SEO角度   规范网络编辑   网络编辑   网络SEO   SEO编辑   日期:2013-11-02
  • 怎么写一篇高流量的文案或软文?

    耍噱头、卖弄文句或夸张吹捧,都不是构成出色标题的要件,一个设计精妙的标题,当它的精妙之处在于能够抓住读者内心的迫切需求、让他认为可只要称为你的用户就能离自己心中所理想成为的那个人更进一步,可惜许多文案写手为了创意而创意,导致精心的设计反而模糊了销售信……【查看全文

    阅读:3274关键词: 文案   软文   日期:2016-10-07
  • 网站网络编辑人员的岗位职责及要求

    网站编辑,是网站内容的设计师和建设者,通过网络对信息进行收集、分类、编辑、审核,然后通过网络向世界范围的网民进行发布,并且通过网络从网民那里接收反馈信息,产生互动,一名优秀的网络编辑人员,可以根据网站业务规划内容,确定网站主导思想和主题方向,并完成内……【查看全文

    阅读:10179关键词: 网站编辑   网络编辑   岗位职责   编辑   日期:2015-08-07
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

未来的站内SEO优化需要做些什么? 网站前端性能优化中最容易被忽略的10个技巧