腾讯云网站解决方案帮您轻松应对建站成本高/网络不稳等常见问题

让页面文字阅读更舒适的一些元素

2
回复
1338
查看
[复制链接]

761

主题

775

帖子

3万

积分

董事

Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72

积分
32849
发表于 19-4-2 11:11:45 | 显示全部楼层 |阅读模式      紫钻仅向指定用户开放  
                  上网在线阅读,是大多人获取信息的告急途径。用户会在网上阅读到大量的消息及各类文章,特殊是网络小说,这些页面展示的主体就是通篇大段的笔墨。对于这种看似简朴的文字堆砌的页面,有没有人诉苦过:“如许的页面还必要出结果图啊?”作为网页操持师的你是怎样处置处罚这样的界面的?
4 q3 d; D: {8 }' Q# Q a59765efddc28e013f2c98ae6a2698a4.jpg   是风俗性的使用宋体字大概微软雅黑?
1 x" t0 ?' }- ~) w, Y6 w  L/ c9 O  是直接设为12px或者14px的字号?
) {  a! B: _: ~$ S1 q' j  Z8 [8 U6 P  你有想过为什么要使用这种字体、字号吗?
0 O6 W: D/ t- P) J: Z( N, Z7 V  你有思量过文字排布与阅读服从的关系吗?; O0 \2 W9 i0 S# \8 A
  你的页面配景会影响到用户的欣赏舒适度吗?7 J. y3 D2 Z' j  d+ I! t
  让我们从以下5个元素详细分析。8 _  b+ t5 }8 G
f2497d72724fdbeeaddb4b2b53da7054.jpg   字体、字号
/ H' I1 P; o9 V8 h2 ?* P9 `: l  字体和字号这两个元素必须捏在一起说。
! w9 z; ]# `4 c2 d  字体分为衬线体(serif)与非衬线体(sans  serif)。简单的说,衬线体(serif)就是带有衬线的字体,笔画粗细差别并带有额外的装饰,开始和末端有显着的笔触(如下图)。常用的英文衬线体有Times  New Roman和Georgia,中文便是我们在windows下最常见的中易宋体。
5 _5 K' W, f+ e' ?  与衬线体相反,无衬线装饰,笔画粗细无明显查差异的字体就优劣衬线体(sans  serif)。Arial、Helvetica、Verdanad都是我们熟悉的英文非衬线体,中文有微软雅黑和mac下默认的中文-华文细黑。
. Q. j1 e. j/ ~  w4 D 5fb723b647c92a2adcfe39d6e6c01866.jpg   在已往,广泛以为有笔触装饰的衬线体,可进步辨识度和阅读效率,更得当做为阅读的字体。多用于报纸、册本等印刷品的正文。非衬线体饱满夺目,常用做标题或者用于较短的段落。* d8 a& ]  O* i0 ?* Q: t
  很长一段时间里,在互联网上我们会注意这样的一个征象,国外网站大部门以非衬线体为主,而中文网站根本就是宋体。实在不难明白,衬线字体笔画有粗细之分,很小字的情况下细笔画就被弱化,受限于电脑的分辨率,10-12px的衬线字体在体现器上是相当难辨认的(见下图);同字号的非衬线体笔画轻便而饱满,更适于做网页字体。windows下,中文宋体小字点阵的特性,12px、14px的字号显示仍然相当清楚雅观,便于阅读。这也就是为什么大多网页设计制作职员容易呆板性的选用特定字号或英文或中文的字体。
  n4 J5 h" f- G8 I+ E  M: ~3 r  现在随着显示器越来越大,分辨率越来越高,经常会以为看12px的文字有点吃力,做为设计师也会不自觉的开始大量使用14px的字体,而且越来越多的网站开始使用15、16px以致18px以上的字号做正文文字。大字号的使用,对英文字体来讲,衬线体的高辨识度和流通阅读的上风就表现出来了。中文宋体在显示14号以上字体时,单线条大字总是看上去有些单薄不那么和谐,特别是这款点阵字在  ClearType(http://baike.baidu.com/view/755822.htm)  欺压平滑显示状态下尤其显得暗昧不清。微软雅黑就是微软在这个字体显示标题上的办理方案。
# _* ~3 b3 V3 o: M  让我们分别对比下中英文的衬线体与非衬线体在不同字号时的显示效果。
" y2 G% |" R+ x' ^: e  英文以Times和Verdanad为例,中文以宋体和微软雅黑为例。
: R' [( \) H& f/ t+ E8 A% e* R. ~ c223930b840558f369f0284e7e7c80bc.jpg 7560d7ac097ba4b0bd2a75f7fd3cfeea.jpg   行长9 t0 H7 W& a  P! N- i8 Z; b+ H
  我们随手拿起一本书或者一份报纸,数一数每行的文字,一样寻常情况下都不会凌驾40个汉字。这是由于假如每行文字过长,读者会不绝的转动脖子,感到疲劳的同时也会低沉阅读效率;眼光从行尾移至下一行首,也很容易串行,影响读者浏览文章的节奏。这点同样实用于网页上的文章阅读。由于显示器是横向的,我们更要注意分别阅读地域。& {% [6 u; v. l
  文本宽度控制在450-700px为宜,此范围内参照字号巨细;6 ^/ ~+ L; r) f0 ^" _6 n: n
  英文每行80-100个字母(空格算一个字母)为宜;
& A; b4 k3 Z$ \5 S3 ]  中文每行30-40个汉字为宜。
; W7 W1 }+ o. @9 u1 J* b  间距8 i, H$ u# e1 F5 ~( e6 L
  通过设置间距,我们就可以控制文字的密度。如果每行间距太小,与文字过长一样,读者浏览文章时也容易串行;如果行距过宽,阅读时就会感觉文章不敷连贯。
' ]# A2 S9 d7 {' v* ~1 t  间距没有固定的值,通常是根据字体大小来界说的。在word里我们常看到双倍行距、单倍行距和1.5倍行距的选项。网页上行距的单元常用em来表现,不管是中文网站照旧英文网站,各人多喜欢用1.5em-1.8em的行距。以1.6em的行距为例,字号16px的字,行距就是25.6px。
- B% M9 `4 H( e: E  如(图)所示,1.5-1.8em的行距简直是非常适于阅读的文字密度。
% B) f( h( I' M6 n  关于段距,我们要考虑一下具体现实情况。好比文章篇幅较短,就不需要很宽的段距;二文章篇幅很长,特别是那些偏学术的比力枯燥的文章,就要多利用段距把握文章的节奏,给阅读者喘气和思索的时机,且使文章更有条理和可读性。! d+ y3 w2 v5 l/ Y1 O
c56ef96bd7d7f19a9affbbfbb52ed238.jpg   背景
9 @$ A; x& F# M1 w! U4 Y, W  白色是全频光,全放射光对人眼睛的最有刺激,以是许多印刷品读物的纸张都选用乳白色或者淡黄色的纸张。由于显示器自己就发光,所以同是纯白色背景的文字,在电脑上比在纸上阅读会使眼睛更容易疲乏,尚有研究表明:在电脑上阅读只有在纸上阅读速率的78%,阅读效率大大减低。因此,为了提高页面浏览的舒适度和效率,越来越多的页面接纳浅灰色和淡黄色做为页面背景。
4 a; G1 q. _5 L# \8 }! d  a% W- q  别的,印刷品以文字为主的出书物通常会采用低光泽度的纸张,也是因为光泽度高的纸张反射度高,导致阅读质量降落,容易使人视觉疲惫。页面背景仿造低光泽度的纸张(纸张纹理)也能否提高阅读的舒适度呢?; N: V  V/ m2 O3 Z7 v9 u7 j
  我曾做过这样一个小调研,同样一段文字放在不同颜色的背景上(仅考虑自然光源),此中有两个背景加了纸张纹理的效果。效果75%的人认为带有纸张纹理的背景长时间阅读舒适度最高。
+ ~  t- v! T# K5 h e2707daa66b122a915c3ee64e7409a82.jpg   结语:实际工作中,我们需要思考的更多,仅仅这5个元素是不够的。浏览环境、装备、网站特点、用户人群、个人偏好等等都需要设计师根据具体情况来把握界面文字的展示效果。差别大概是渺小的,就像蝴蝶效应,多一点点的思考,就能为用户带来更好的体验感受。: x$ X6 S- T% J) c) a+ ^9 O
        :更多请关注建站教程栏目* z" H& ?) g  h8 v9 R# w  {3 h

. H5 ~) z  R* j0 j  B            

0

主题

8

帖子

4

积分

1°伸手党

Rank: 2

积分
4
发表于 19-10-12 20:48:32 | 显示全部楼层         
有竞争才有进步嘛
回复

使用道具 举报

0

主题

4

帖子

4

积分

1°伸手党

Rank: 2

积分
4
发表于 19-11-18 08:05:35 | 显示全部楼层         
真是 收益 匪浅
回复

使用道具 举报

网站简介

球球发,是一家 Discuz! 商业插件、风格模板、网站源码、 Discuz!运营维护技术等于一体的交流分享网站,全站95%的资源都是免费下载,对于资源我们是每天更新,每个亲测资源最新最全---球球发(如果我们有侵犯了您权益的资源请联系我们删除