网站设计:把握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-18 07:32:47

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

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

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

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

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

网站设计技巧:网页元素设计和网页转场设计

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

国外优秀的网站设计:创意大导航单页面网站设计

在国外优秀的设计网站中,开始流行一种这样的Web创意设计风格:整站由一个单一页面组成,通过设置锚点的方式,利用JavaScript技术,实现网站内容的滑动导航.这种创意十足的Web设计效果,可以很大程度上给人一种流畅华丽的动画震撼,沉醉于其美妙的操作设计的同时,更为网站设计者的构造灵感而折服,这里就为你搜集了10个创意大导航单页面网站设计. WeBleedDesign Gavin Castleton Two24Studios DesignSpam JP3Design MadeToKill Cla

网页设计理论:各种元素在页面的综合设计

网页设计中有导航条,链接,表单设计,字体行距,空白,表单聚焦,404错误页面等等元素.可以说每个页面都是由以上各种元素组成,因此对于研究网页用户体验来说,就是研究如何组合并设计这些东西. 如何提高网站产品的可用性? 优秀的产品可用性,一直是产品经理和用户体验设计师们追求的目标,今天我们来谈谈如何提高网站产品的可用性,给大家做做参考.不论是企业网站.个人博客,或者购物网站.游戏网站,我们都希望能吸引访问者并且给他们留下愉快的访问体验. 可用性 是用户体验的一种度量,它可以用访问者完成网站功能的方便

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

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

JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素

原文:JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素 一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了看导航栏菜单项高亮显示时,已经写了部分内容,只是那时写的代码没有实现div显示和隐藏,现在就在之前编写的基础上,为页面添加显示和隐藏div的效果. 没有写Java

电商网站设计:增加页面转化率的5个设计建议

眼见为实耳听为虚.人脑处理视觉信息的速度是文字信息的50倍.因此,借助视觉刺激让他人执行动作要比利用口头交流或文字更为容易,此原理也适用于电商网站设计. 根据网页设计心理学最新研究成果,要让访客执行动作,首先必须了解他们的心理.人脑做决策时大多是仓促的,未经过深思熟虑.MalcolmGladwell说过,"成功的决策是权衡理性思维与感性思维的结果."当访客面对众多选择时,最重要的是从感性层面吸引他们,但你只有几秒时间来完成这一步.关于劝导式网页设计,以下有五个建议: 一.清晰明确 人脑

JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果

原文:JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果 一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的:   1.实现思路 这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面中使用ul列表显示出所有的缩略图,然后使用JavaScript,for循环检查出当前点击的是哪一张图片,最后把这张图片给显示出来. 用到三个函数:显示图片函数.创建占位符预装图片.点击显示图