马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > 网站制作 > 网站设计 > 如何才能让页面文字阅读起来更舒适?

如何才能让页面文字阅读起来更舒适?

时间:2013-07-15   文章来源:www.mahaixiang.cn   访问次数:

就目前社会发展的状况来说,在网上在线阅读,可能已经是大多人获取信息的重要途径。用户在互联网上阅读到大量的新闻及各类文章,特别是网络小说,而这些页面展示的主体就是通篇大段的文字。对于这种看似简单的文字堆砌的页面,不知有没有人想过:如何才能让页面的文字让读者阅读起来更舒适呢?那么作为一名网页设计师,又是怎样设计处理这样的界面呢?

把握5元素,让页面文字阅读更舒适

是习惯性的使用宋体字或者微软雅黑?
  是直接设为12px或者14px的字号?
  你有想过为什么要使用这种字体、字号吗?
  你有考虑过文字排布与阅读效率的关系吗?
  你的页面背景会影响到用户的浏览舒适度吗?

接下来让我们借助马海祥博客的平台,给大家从以下5个元素(字体、字号、行长、间距、背景)具体分析一下:

页面5个元素:字体、字号、行长、间距、背景

1、字体、字号

为什么字体和字号这两个元素必须捏在一起说呢?

字体分为衬线体(serif)与非衬线体(sans serif)。简单的说,衬线体(serif)就是带有衬线的字体,笔画粗细不同并带有额外的装饰,开始和结尾有明显的笔触(如下图)。常用的英文衬线体有Times New Roman和Georgia,中文即是我们在windows下最常见的中易宋体。

与衬线体相反,无衬线装饰,笔画粗细无明显查差异的字体就是非衬线体(sans serif)。Arial、Helvetica、Verdanad都是我们熟悉的英文非衬线体,中文有微软雅黑和mac下默认的中文-华文细黑。

页面元素:衬线体(serif)与非衬线体(sans serif)

在过去,普遍认为有笔触装饰的衬线体,可提高辨识度和阅读效率,更适合做为阅读的字体。多用于报纸、书籍等印刷品的正文。非衬线体饱满醒目,常用做标题或者用于较短的段落。

很长一段时间里,在互联网上马海祥注意到了这样的一个现象,国外网站大部分以非衬线体为主,而中文网站基本就是宋体。其实不难理解,衬线字体笔画有粗细之分,很小字的情况下细笔画就被弱化,受限于电脑的分辨率,10-12px的衬线字体在显示器上是相当难辨认的;同字号的非衬线体笔画简洁而饱满,更适于做网页字体。windows下,中文宋体小字点阵的特性,12px、14px的字号显示仍然相当清晰美观,便于阅读。这也就是为什么大多网页设计制作人员容易机械性的选用特定字号或英文或中文的字体。

如今随着显示器越来越大,分辨率越来越高,经常会觉得看12px的文字有点吃力,做为设计师也会不自觉的开始大量使用14px的字体,而且越来越多的网站开始使用15、16px甚至18px以上的字号做正文文字。大字号的使用,对英文字体来讲,衬线体的高辨识度和流畅阅读的优势就体现出来了。中文宋体在显示14号以上字体时,单线条大字总是看上去有些单薄不那么协调,特别是这款点阵字在ClearType 强制平滑显示状态下尤其显得模糊不清。微软雅黑就是微软在这个字体显示问题上的解决方案。

让我们分别对比下中英文的衬线体与非衬线体在不同字号时的显示效果。

英文以Times和Verdanad为例,中文以宋体和微软雅黑为例:

如何才能让页面文字阅读起来更舒适?

2、行长

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

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

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

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

3、间距

通过设置间距,我们就可以控制文字的密度。如果每行间距太小,与文字过长一样,读者浏览文章时也容易串行;如果行距过宽,阅读时就会感觉文章不够连贯。

间距没有固定的值,通常是根据字体大小来定义的。在word里我们常看到双倍行距、单倍行距和1.5倍行距的选项。网页上行距的单位常用em来表示,不管是中文网站还是英文网站,大家多喜欢用1.5em-1.8em的行距。以1.6em的行距为例,字号16px的字,行距就是25.6px。

如下图所示,1.5-1.8em的行距的确是非常适于阅读的文字密度。

如何才能让页面文字阅读起来更舒适?

关于段距,我们要考虑一下具体实际情况。比如文章篇幅较短,就不需要很宽的段距;二文章篇幅很长,特别是那些偏学术的比较枯燥的文章,就要多利用段距把握文章的节奏,给阅读者喘息和思考的机会,且使文章更有层次和可读性。

4、背景

白色是全频光,全放射光对人眼睛的最有刺激,所以很多印刷品读物的纸张都选用乳白色或者淡黄色的纸张。由于显示器本身就发光,所以同是纯白色背景的文字,在电脑上比在纸上阅读会使眼睛更容易疲乏,另有研究表明:在电脑上阅读只有在纸上阅读速度的78%,阅读效率大大减低。因此,为了提高页面浏览的舒适度和效率,越来越多的页面采用浅灰色和淡黄色做为页面背景。

另外,印刷品以文字为主的出版物往往会采用低光泽度的纸张,也是因为光泽度高的纸张反射度高,导致阅读质量下降,容易使人视觉疲劳。页面背景仿造低光泽度的纸张(纸张纹理)也能否提高阅读的舒适度呢?

我曾做过这样一个小调研,同样一段文字放在不同颜色的背景上(仅考虑自然光源),其中有两个背景加了纸张纹理的效果。结果75%的人认为带有纸张纹理的背景长时间阅读舒适度最高。

思维感悟:

实际工作中,可能我们需要思考的更多,仅仅这5个元素是远远不够的。除此之外,还有浏览环境、设备、网站特点、用户人群、个人偏好等等都需要设计师根据具体情况来把握界面文字的展示效果。差别也许是细微的,就像蝴蝶效应,所以在此马海祥博客也想提醒一下各位设计师,或许你多一点点的思考,就能为网站用户带来更好的体验感受,为网站带来意想不到的效果。

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

相关标签搜索: 页面设计   页面文字   阅读方式  

上一篇:2012年网站体验设计趋势回顾
下一篇:什么是响应式网页设计?

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

  • 分享20个极简主义的网页设计风格

    极简主义的设计之所以总是流行,是因为他们一直用一些很简单的创意和资源去表达概念,网页设计的领域受极简主义设计的影响很大,许多有才华的设计师总是用几个简单的工具就设计出了不起的网站,比如字体和几何图形等元素。简约设计的优势不仅仅是其优雅的风格,也有在网页加……【查看全文

    阅读:718关键词: 极简主义   网页设计   设计风格   日期:2018-11-01
  • 基于页面易读性的文字编排设计要点

    文字的编排还应注意文字本身的格式效果。图文画面构成中,把不同重点的文字内容用不同的字体来表现,是设计中常用手法,如:行首的强调、引文的强调等。但字体过多画面就显得不安宁,字体过少又缺乏必要的生气,字体数量的多寡常暗示平面中核心内容的多少,所以我们要详……【查看全文

    阅读:760关键词: 易读性   文字编排   文字编排设计   设计要点   日期:2014-04-15
  • 什么是响应式网页设计?

    响应式网页设计(Responsive Web design,通常缩写为RWD)是指:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。可以说是一种网页设计的技术做法,该设计可使网站在多种浏览设备(从桌面电脑显示器到移动电话或其他……【查看全文

    阅读:5336关键词: 网页设计   响应式设计   响应式网页设   响应式网页   日期:2013-09-15
  • 全能型设计师必备的10个技能

    为了成为一个全能的设计师,你必须学会掌握一些技能来有效的应对客户或你的老板,很多情况下,一个设计师需要有良好的审美观和许多年的经验,而将那些“经常被雇佣”的设计师和其他设计师区分开来的就是下面列出来的技能,掌握这些技能,你不仅能在团队中成为更有价值的……【查看全文

    阅读:1071关键词: 设计师   设计技能   日期:2014-11-07
  • 响应式网页设计的排版设计趋势

    假如你研究一个流行的作品集网站,里面展示了当今的网页设计,毫无疑问,你会注意到网页的基本结构千变万化,根本没有固定形态,它可以伸缩变化成任何所需的东西,我认为这是响应式网页设计带来的最棒的副产品,事实上,新的准则,就是根本没有固定准则,我们能观察发现……【查看全文

    阅读:1117关键词: 响应式网页   响应式设计   排版设计   设计趋势   网页设计   日期:2015-04-01
  • 全方位解析响应式网页的设计与应用

    响应式网页设计可以提供一个比较满意的效果,他给广泛的应用设备提供了一个自定义的解决方案,无论是一个老式旧笔记本还是最先进的设备都能够获得比较好的体验。但响应式网页设计也并不是最好的,这只是个单纯的概念,它可以有效的提高用户体验但是却不能彻底解决。我们……【查看全文

    阅读:1301关键词: 响应式网页   网页设计   响应式应用   应用设计   日期:2014-05-08
  • 网页设计新手需知道的10条实用法则

    大胆留白是设计概念中常常会提到的理论,但真正能根据理论具体落实的设计师却为数不多,可能是因为设计师胆儿不够大,另一种可能是没有在实际中领会到留白的美妙,网页设计中的留白是为了在有限的容量中预留一些让其中元素呼吸的负空间,并不是一种所谓的“偷懒”行为,……【查看全文

    阅读:733关键词: 网页设计   设计法则   日期:2015-01-15
  • 响应式网页布局的实现方法原理

    昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计?》,我觉的响应式网页设计不仅仅是一种趋势,还更是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平板,手机)相关的设计问题。既然是设计的问题,这里就会涉及到很多……【查看全文

    阅读:52335关键词: 响应式网页   响应式布局   响应式原理   响应式设计   日期:2013-09-17
  • 网站设计的重要因素及注意事项

    网站设计(Web Design)就是一个把信息需求转换成用软件网站表示的过程,就是指在因特网上,根据一定的规则,使用Dreamweaver、photoshop等工具制作的用于展示特定内容的相关网页的集合。网站设计的目的就是产生网站。简单的信息如文字,图片(GIFs, JPEGs,PNGs)和表格……【查看全文

    阅读:1306关键词: 网站设计   网站设计因素   网站设计注意   日期:2012-10-05
  • 关于响应式页面重构的一些关键技术点

    单纯的页面重构,所涉及到的工作内容一般是“分析设计稿>切图>写HTML和CSS”,虽然看起来很少,但要做好这份工作,绝非所想的那么容易。原因很简单:工作内容单一,在时间和工作量上必会很苛刻,往往跟设计师的工作时间是3:1,即设计师给三天的时间,制作只给一天的时间……【查看全文

    阅读:698关键词: 响应式   响应式页面   日期:2016-09-25
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

企业网站SEO推广能给企业带来哪些好处? 百度搜索用户建议专区上线公告