阅读型网页设计怎么做？

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

字体：

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

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

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

从稳妥角度考虑，这可能是各大网站均采用非衬线字体作为选字体的原因。

推荐以下字体：

MacOS

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

英文：选 Helvetica Neue 次选 Arial。

Windows

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

英文：选 Arial 次选 Tahoma。

字号：

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

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

随着显示器技术发展，在显示器尺寸没有变大的情况下，显示器分辨率越来越高，这意味着单像素方块的物理尺寸越来越小，因此网页端设计时的推荐字号也在变大，从12px 到 14px 到 16px。

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

字色和背景色：

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

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

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

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

行宽：

行宽过大，阅读时要转动脖子，降低阅读效率，而且目光从行尾移至下一行首容易串行。行宽过小，用户注视点要在行间频繁跳跃，降低了阅读速度，体验也不好。为防止此现象，文本宽度好在450-700px之间。

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

如果采用左对齐，可以达到每一列字都对齐(有半角字符的行，会破坏队形)，但当后一个字符为标点时，会直接换行，导致此行会缺一块，不好。

如果采用两端对齐，就能避免这种情况。但两端对齐有另一个问题，段落的后一行不一定写满行。当后一行未写满行，且，行宽不是正文字号的整数倍时，为了达到两端对齐，前面行会增加字间距，但后一行不会增加字间距。这样，后一行的每个字都不能与其所在列对齐。

如果行宽是正文字号的整数倍，就能避免这种情况。达到两端对齐不留空，每列对齐像阅兵的效果。

行间距：

行间距太小，有密不透气的感觉，读者浏览文章时容易串行；行间距太大，阅读时会感觉文章不够连贯，页面也不够精致。网页上行距常用em为单位，不管是中文网站还是英文网站，大多用1.5em-1.8em的行距。

段间距：

分情况。文章较短，就不需要很宽的段距；文章很长，好利用段距分隔文章的节奏，给阅读者喘息和思考的机会，提高文章的可读性。经验值是，段间距一般为行间距的75% 。

标题名称：阅读型网页设计怎么做？
当前网址：https://www.cdcxhl.com/news19/262969.html

成都网站建设公司_创新互联，为您提供品牌网站制作、品牌网站建设、自适应网站、App开发、商城网站、营销型网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联