互联网的高速成长使得我们天天花在网页上的时间越来越多，网页设计的重要性不问可知。本文作者以阅读型网页设计为例，谈谈哪几点是需要出格留意的，但愿对你有辅佐。

最近认真某常识型社区的改版，个中一块是晋升读者在网页端阅读的体验。在调研一些网站的设计类型和查阅部门文献后，团结本身的思考，总结如下几点，以供参考。

一个阅读型网页，好比各新闻资讯网站、阅读型社区、web端念书网站等，在去除告白等滋扰元素后，纯内容的阅读体验会受到以下几个因素的影响：字体、字号、字色、行宽、行间距、段间距、配景致。

接下来一一先容。

字体：

衬线字体 or 非衬线字体：调研了多个网站，均回收非衬线字体。

查阅资料，衬线字体更富表示力，可提高辨识度和阅读效率，多用于报纸、书籍等印刷品，以及电子杂志和艺术网站的正文字体。

在电子屏上显示时，由于字号、显示器尺寸、显示器判别率等影响因素，利用衬线字体时过细的笔画大概会显示不清难以辨认。

从稳妥角度思量，这大概是各大网站均回收非衬线字体作为首选字体的原因。

推荐以下字体：

MacOS

中文：首选 苹方regular 次选 冬青黑体简体。

英文：首选 Helvetica Neue 次选 Arial。

Windows

中文：首选 微软雅黑 次选 冬青黑体简体。

英文：首选 Arial 次选 Tahoma。

字号：

字号太小看不清累眼睛，太大页面不精美且显示效率低。

一个字在显示器上显示出来有多大，取决于字号和单个像素方块的物理尺寸。单像素块尺寸，取决于显示器尺寸和显示器判别率。

跟着显示器技能成长，在显示器尺寸没有变大的环境下，显示器判别率越来越高，这意味着单像素方块的物理尺寸越来越小，因此网页端设计时的推荐字号也在变大，从12px 到 14px 到 16px。

稳妥起见，正文发起利用 16px 。以此为基准，扩大和减小后确定标题和帮助文本的字号，此处发起以 4px 为步长，使比拟明明。

字色和配景致：

阅读体验受文字和配景的比拟度影响。高比拟度时，识别清晰，但眼睛容易疲惫。只有找到一个符合的比拟度，才气做到既识别清晰，长时间阅读又不容易累。

首先是白底黑字和黑底白字。二者自己比拟力强，加上人类眼睛侧抑制等视觉机制，会让反差出格大，因此识别起来很清晰。由于白底黑字相较于黑底白字的反差更小[1]，故而可读性更高，合用于注重文字阅读的网站；黑底白字视觉 *** 性强，合用于注重视觉表示力或营造气氛的单页面，好比海报、主题网站首页等。别的，对付视觉受损的用户，此两种配色方案也是较人性化的选择。

然而，白底黑字并非更好。由于白色具有100%的亮度，玄色是0%，庞大的亮度比拟让眼睛在阅读时要尽全力去适应，容易引起眼部疲惫，因此白底黑字仍不适宜长时间的阅读，所以印刷品读物的纸张多用乳白色或淡黄色的纸张。又因为显示器自己就发光，所以在电脑上阅读纯白色配景的文字，比在纸上阅读时，眼睛会更容易疲乏。

然而Hill(1997)的研究却表白：玄色和白色一直被认为是最可读的；有玄色在内的色彩组合比没有玄色的色彩组合更易于阅读；较浅配景上较深的文本较量暗的配景上较浅的文本的评价高。因此，更好的组合大概是担保了比拟度(大于4.5)的浅灰配景 + 深灰文本。

行宽：

行宽过大，阅读时要动弹脖子，低落阅读效率，并且眼光从行尾移至下一行首容易串行。行宽过小，用户凝望点要在行间频繁跳跃，低落了阅读速度，体验也欠好。为防备此现象，文本宽度最亏得450-700px之间。

确定详细数值时，要留意行宽应该是正文字号的整数倍。这是因为中文是方块字，更好的排版应该像小学时的作文本那样，每一列字都对齐，除最后一行外，每一行应该写满，这样才气整整齐齐。

假如回收左对齐，可以到达每一列字都对齐(有半角字符的行，会粉碎队形)，但当最后一个字符为标点时，会直接换行，导致此行会缺一块，欠好。

假如回收两头对齐，就能制止这种环境。但两头对齐有另一个问题，段落的最后一行不必然写满行。当最后一行未写满行，且，行宽不是正文字号的整数倍时，为了到达两头对齐，前面行会增加字间距，但最后一行不会增加字间距。这样，最后一行的每个字都不能与其地址列对齐。

假如行宽是正文字号的整数倍，就能制止这种环境。到达两头对齐不留空，每列对齐像阅兵的结果。

左对齐

两头对齐

行间距：