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

   上网在线阅读,是大多人获取信息的重要途径。用户会在网上阅读到大量的新闻及各类文章,特别是网络小说,这些页面展示的主体就是通篇大段的文字。对于这种看似简单的文字堆砌的页面,有没有人抱怨过:“这样的页面还需要出效果图啊?”作为网页设计师的你是怎样处理这样的界面的?

  是习惯性的使用宋体字或者微软雅黑?

  是直接设为12px或者14px的字号?

  你有想过为什么要使用这种字体、字号吗?你有考虑过文字排布与阅读效率的关系吗?

  你的页面背景会影响到用户的浏览舒适度吗?

  让我们从以下5个元素具体分析。


  字体、字号

  字体和字号这两个元素必须捏在一起说。

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

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


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

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

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

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

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


  行长

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

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

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

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

  间距

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

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

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

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


  背景

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

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

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


  结语:实际工作中,我们需要思考的更多,仅仅这5个元素是不够的。浏览环境、设备、网站特点、用户人群、个人偏好等等都需要设计师根据具体情况来把握界面文字的展示效果。差别也许是细微的,就像蝴蝶效应,多一点点的思考,就能为用户带来更好的体验感受。

时间: 2024-08-31 17:41:14

5元素让页面文字阅读更舒适的相关文章

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

上网在线阅读,是大多人获取信息的重要途径.用户会在网上阅读到大量的新闻及各类文章,特别是网络 小说,这些页面展示的主体就是通篇大段的文字.对于这种看似简单的文字堆砌的页面,有没有人抱怨过:" 这样的页面还需要出效果图啊?"作为网页设计师的你是怎样处理这样的界面的? 是习惯性的使用宋体字 或者微软雅黑?是直接设为12px或者14px的字号?你有想过为什么要使用这种字体.字号吗?你有考虑过文字 排布与阅读效率的关系吗?你的页面背景会影响到用户的浏览舒适度吗? 让我们从以下5个元素具体分析.

网站设计:把握5元素,让页面文字阅读更舒适

中介交易 SEO诊断 淘宝客 云主机 技术大厅 上网在线阅读,是大多人获取信息的重要途径.用户会在网上阅读到大量的新闻及各类文章,特别是网络小说,这些页面展示的主体就是通篇大段的文字.对于这种看似简单的文字堆砌的页面,有没有人抱怨过:"这样的页面还需要出效果图啊?"作为网页设计师的你是怎样处理这样的界面的? 是习惯性的使用宋体字或者微软雅黑? 是直接设为12px或者14px的字号? 你有想过为什么要使用这种字体.字号吗? 你有考虑过文字排布与阅读效率的关系吗? 你的页面背景会影响到用户

调整Windows8的DPI,使文字阅读更舒服

  1.桌面空白处点击右键,选择"个性化",如下图: 2.选择左侧"显示"选项,如下图: 3.调整"是桌面上的内容更易于阅读"设置,默认为100%,调整125%或150%可以让桌面上的文本及其他项目的大小更改.

网页设计师更需要注意页面的阅读性和可操作性

网页制作Webjx文章简介:设计师的作用不仅仅是使页面看上去美观.吸引用户的眼球,更需要注意页面的阅读性.可操作性等,要为扫描而设计. 当我们设计一个页面或者一个banner的时候,往往挖空心思去想创意,或者把效果做得很炫,却忽略了一些用户习惯.我这里所说的只是一些大家都知道,却往往容易忽略的--为扫描而设计. 用户善于扫描,且勤于扫描.WHY? 1.忙碌--大部分用户会花极少的时间来阅读极多的页面,为了提高效率,他们对于大部分的页面会采取扫描的方式,匆匆掠过.他们不可能也没有时间去阅读互联网带

提高网页文字阅读的5个体验

1.长文本使用标准字号 你现在正在阅读的文字的字号并不大,是你浏览器的默认显示大小,是浏览器本来应该显示的大小. 我不想点击"放大"."缩小"按钮,也不想更改浏览器的设置.我想马上就开始阅读,我希望你能适应我的设置,而不是反过来让我更改设置来适应你. 刚开始的时候,要用大字号来设计出一个好的布局会相对困难一些,但是这样会帮助你设计出一个更简单.更清爽的页面.把一个网站塞满各种信息并不难,但是让她简单而易用却不那么简单.起初,你会不适应这些大字号,但是一天之后,你就不

浅谈网页元素与页面的转场设计

在电视作品中,段落与段落.场景与场景之间的过渡或转换,叫做转场.为了使电视片内容的条理性更强.层次的发展更清晰.在场面与场面之间的转换中,需要一定的手法. 网站也是类似的,一个完整的网站由若干页面组成,而每个页面又由若干元素组成.为了使网站内容的条理性更强.操作逻辑更清晰.用户体验更好.用户转化率更高,在不同元素与页面的转换中,也需要一定的技巧. 过渡效果 a 渐入渐出 这种方式非常常见:比如在酷狗音乐盒中关闭音乐后,声音在几秒钟内逐渐停止,而不是马上消失:凡客首页广告头图的轮换也采取了渐入渐出

ava cript-为什么在chrome中插入百度地图之后页面文字就没法选中了?

问题描述 为什么在chrome中插入百度地图之后页面文字就没法选中了? 从这里生成的地图http://api.map.baidu.com/lbsapi/creatmap/index.html 在其他浏览器都正常,可以选中文字 有一个解决方法是把里面js文件的版本从1.1变成1.0.但不明白造成这种现象的原因是什么? 解决方案 看下你的层,有没有覆盖透明的层,把你的文本的zindex提高,另外看看 css 代码和js,有没有冲突的地方. 解决方案二: chrome中右键,审查元素,调出开发工具看是

如果文字多了,想让超出元素外面的文字以省略号显示的css样式

请看下面的demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>省略号显示</title> <style type="text/css"> .box{ width: 200px; height: 20px; line-height: 20px; background:

js实现选中页面文字将其分享到新浪微博_javascript技巧

一.功能简述 正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了.我的站点每篇文章的底部有一些分享的链接: 不过我觉得这些分享基本上就是聋子的耳朵--摆设.除非这篇文章惊天地.泣鬼神,痛彻心扉,穿越前世今生.但是,如果有更加方便快捷的分享方式,这种冷淡得让人结冰的场面或许就不会经常出现. 一般翻译软件都有划词翻译功能,例如有道桌面词典的桌面划词翻译功能:   启用后,随便选中那个软件的一段文字,就会出现类似这样子的浮动提示