当前位置:380元网站建设 虎网站 > 建站百科 > 正文

把握细节,让网站资讯阅读更舒适

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

1、字体、字号

    字体和字号这两个元素必须捏在一起说。
    字体分为衬线体(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 强制平滑显示状态下尤其显得模糊不清。微软雅黑就是微软在这个字体显示问题上的解决方案。
    让我们分别对比下中英文的衬线体与非衬线体在不同字号时的显示效果。
    英文以Times和Verdanad为例,中文以宋体和微软雅黑为例。

2、行长
    我们随手拿起一本书或者一份报纸,数一数每行的文字,一般情况下都不会超过40个汉字。这是因为如果每行文字过长,读者会不停的转动脖子,感到疲惫的同时也会降0阅读效率;目光从行尾移至下一行*,也很容易串行,影响读者浏览文章的节奏。这点同样适用于网页上的文章阅读。由于显示器是横向的,我们更要注意划分阅读区域。
    文本宽度控制在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%,阅读效率大大减0。因此,为了提高页面浏览的舒适度和效率,越来越多的页面采用浅灰色和淡黄色做为页面背景。
    另外,印刷品以文字为主的出版物往往会采用0光泽度的纸张,也是因为光泽度高的纸张反射度高,导致阅读质量下降,容易使人视觉疲劳。页面背景仿造0光泽度的纸张(纸张纹理)也能否提高阅读的舒适度呢?

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


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

创建网页不只是为了排名,还要对用户友好

    面临面对用户的崛起,企业纷纷涌入建设网站的浪潮中。创建网页已经不只是单单为了排名这么简单,还要对用户友好才能在与同行的竞争中不落下风。那主要都体现在哪些方面呢? 创建网页不只是为了排名,还要对用户友好   电商类的网站可以进行站内的搜索,让客户依照关键词来搜索就能够找到同类商品,对于用户友好的。在数据时代,不只电商网站需要建立良好的搜索功能,就连企业的网站也是需要对于这方面进行规划,让用户在寻觅信...

       深圳福田百达金融服务和虎网科技签订做网站项目 百达选用虎网站企业商务型网站案例,其功能具备实用型所有配置外、特别值得关注的是增设了SEO深度优化,不管是内页还是标题都能够独立和个性化设置关键词和长尾词,更适合进行全站seo优化。百达位于深圳市福田区福华一路国际商会大厦B座5楼513室。百达是经深圳市福田区工商局审核的正规企业,统一社会信用代码:914403003222942408。同时经国家工信部和广东省通信管理局审核通过ICP备案;备案号:...

       优化首页的几种方式 一:利用网站logo使用的ALT文字,通常网站logo应该处于最左上角,在代码中比主导航还更靠前。而图片ALT文字大致相当于文字链接的锚文字效果。可以选择在页面的地步或者其他适当位置加上主页关键词的链接,但是这个锚文字可以采用不同的文字,虽说有时候可能会有一些冲突,但是,这种冲突的影响并不是太大。 二: 做好文字中关键词匹配原则,有利于网站的排名,注意匹配时时刻关注你的网站关键词密度,不要太过,个...

       采用响应式技术能解决的哪些问题 如今,响应式技术的出现为解决这一难题提供了有利的技术支持, 网站建设企业 通过采用响应式技术,就可以使网站页面随浏览设备的不同而自行响应,动态的调整布局结构、元素规格样式,将相同的内容以不同的格式呈现给不同设备的用户。那么, 响应式网站 的主要优势是什么呢,小编来为您解答这个问题。   一、一次建站节约多终端成本   激进网站若要覆盖PC端、手机端、PAD端,就必需建设三个网站,而采用响应式技术则...

       怎样对网站建设上线后网站进行维护 都说“买车容易,养车难”,要网站建设来说,这也是通用的道理,建设一个网站并不难,但是对网站的维护却是持之以恒的事情。网站后期维护需要规划,而规划的重点是对网站所在行业有一个详细的了解,而且还要对行业有预判能力。现在我们就怎样对 网站建设 上线后网站进行维护进行分析。   第一,做好行业特性分析,确定营销策略   我们先举例子说一下,比如医疗这个行业,客户都是短期客户,客户具有及时性,而且有着非常强...

       网站建设权重为何能够来的如此简单? 虽然百度否认了权值的存在,但是做为SEOer的我们在进行网站优化时还是会以百度权重作为参考的。不论是交换链接还是检测网站质量度,权重值依旧是一个很重要的参考数据。今天要和大家探讨的是怎样为新站加权呢?   网站建设权重就是网站在搜索引擎中的地位,你的网站权重越高,搜索引擎的收录就会好,你网站的排名就会越靠前,网站关键词也就比较靠前。对于刚上线的新站权重一般都为零,就像幼女一样,对世界的认识很纯真,...

最新模板
少儿英语培训机构网站建设 培训公司网站建设
成人自考网站建设 成人培训网站制作设计版面
智能家居摆设设计网站建设 智能家居装修企业网站建设
铜螺母,铜螺丝,螺栓,螺钉工厂网站建设
废气处理设备,如活性炭吸附箱、RTO蓄热式氧化处理设备、光氧等离子复合设备 低温等离子设备 光氧催化设备等网企业网站建设
图文阅读