关于阅读网页设计您应注意以下几点

关于阅读网页设计您应注意以下几点

互联网的飞速发展使我们每天在网页上花费越来越多的时间。 网页设计的重要性不言而喻。 本文的作者以阅读网页设计为例，讨论一些需要特别注意的方面，希望对您有所帮助。

  最近，我负责一个知识型社区的修订，其中之一是增强读者在网络上的阅读体验。 在研究了一些网站的设计规范并查阅了一些文档之后，结合我自己的想法，我总结了以下几点以供参考。

  阅读网页（例如各种新闻网站，阅读社区，网络端阅读站点等），在删除广告等干扰元素后，纯内容阅读体验将受到以下因素的影响：字体，字体大小， 字体颜色，线条宽度，线条间距，段落间距，背景色。

  下一张一张

  字型：

  衬线或无衬线字体：已经研究了许多网站，所有网站都使用非衬线字体。

  检查信息，衬线字体更具表现力，可以提高识别和阅读效率。 它们主要用于报纸，书籍和其他印刷材料，以及电子杂志和艺术网站中的文字字体。

  在电子屏幕上显示时，由于字体大小，显示大小和显示分辨率等因素的影响，使用衬线字体时，过细的笔划可能显示不清晰且难以识别。

  从审慎的角度来看，这可能是主要网站使用非serif字体作为首选字体的原因。

  建议使用以下字体：

  苹果系统

  中文：首选平芳定期第二选择冬青黑简化。

  英语：Helvetica Neue是第一选择，Arial是第二选择。

  视窗

  中文：首选Microsoft Yahei第二选择Holly Black简化。

  英文：Arial偏爱Tahoma。

  字体大小：

  字体太小，看不到疲倦的眼睛，页面太细腻，显示效率低。

  显示屏上显示的单词大小取决于字体大小和单个像素正方形的物理大小。 单个像素块的大小取决于显示大小和显示分辨率。

  随着显示技术的发展，在不增加显示器尺寸的情况下，显示器的分辨率越来越高，这意味着单个像素块的物理尺寸越来越小，因此在设计时建议使用的字体大小 网络端也越来越大，从12px到14px到16px。

  为了稳定起见，建议在文本中使用16px。 基于此，在扩展和缩小之后确定标题和辅助文本的大小。 建议使用4px作为步长，以使对比度明显。

  字符颜色和背景颜色：

  阅读体验受文本和背景之间的对比影响。 高对比度时，识别清晰，但眼睛容易疲劳。 只有找到合适的对比度，它才能被清晰识别，长时间阅读并且不容易疲劳。

  第一个是黑底白字和黑底白字。 这对眼镜本身比较结实，视觉机制（如人眼的侧面抑制）会使对比度特别大，因此很容易识别。 因为白色背景上的黑色文本比黑色背景上的白色文本具有较低的对比度[1]，所以它更具可读性，适合强调文本阅读的网站； 黑色背景上的白色文本具有视觉刺激性，适合视觉表达或创造。大气的页面，例如海报，主题网站的首页等。此外，对于有视觉障碍的用户，这两种配色方案也更加人性化 选择。

  但是，黑底白字不是最好的。 由于白色的亮度为100％，黑色的为0％，巨大的亮度对比使眼睛在阅读时必须尽力而为，这容易造成眼睛疲劳，因此白色的黑色字符仍然不适合长时间阅读， 所以印刷品的纸张主要是乳白色或浅黄色的纸张。 由于显示屏本身会发光，因此在计算机上阅读白色背景上的文本比在纸上阅读更容易引起疲劳。

  但是，希尔（Hill，1997）的研究表明，黑白一直被认为是最易读的。 与没有黑色的颜色组合相比，带有黑色的颜色组合更易于阅读； 在较浅的背景上较暗的文本较暗在背景上较浅的文本获得很高的评价。 因此，更好的组合可能是浅灰色背景+深灰色文本，并保证对比度（大于4.5）。

  行宽：

如果行宽太大，则在阅读时应转过脖子以降低阅读效率，并且很容易从行尾到下一行的开头对眼睛进行序列化。 如果线宽太小，则用户的注视点必须在线之间频繁跳动，这会降低读取速度，并且体验不好。 为了防止这种现象，文本的宽度最好在450-700像素之间。

  在确定特定值时，应注意，线宽应为正文本符号的整数倍。 这是因为中文是方形字符。 最好的排版应该像小学时的文字一样。 每列单词应对齐。 除了最后一行，每行都应填充以使其整齐。

  如果使用左对齐，则可以实现单词的每一列都是对齐的（具有半角字符的行将破坏形式），但是当最后一个字符为标点符号时，将被直接换行，从而导致缺少一行 这条线，这不好。

  如果使用两端对齐，则可以避免这种情况。 但是，合理性还有另一个问题。 段落的最后一行不一定充满行。 当最后一行不满行且行宽不是正字符大小的整数倍时，为了实现对齐，第一行将增加单词间距，但最后一行不会增加单词间距 。 这样，最后一行的每个单词都无法与其所在的列对齐。

  如果行宽是正字符数的整数倍，则可以避免这种情况。 实现两端的对齐而不留空白，每个列的对齐就像阅兵一样。

  左对齐

  证明

  行间距：

  行距太小，有松紧和透气的感觉。 读者在浏览文章时可以轻松地序列化； 如果行距太大，他们会觉得文章不连贯，页面也不够精致。  em的单位通常用作网页上游距离的单位。 无论是中文网站还是英文网站，大多数都使用1.5em-1.8em的行距。

  段间距：

  点。 如果文章短，则无需较大的段落间距； 如果文章很长，则最好使用段落间距分隔文章的节奏，使读者有机会进行思考和思考，并提高文章的可读性。 经验值是段间距通常为行间距的75％。

  结论：

  实际上，纯内容的阅读体验远不止于此。 在实际工作中，环境光，设备尺寸和分辨率以及用户视觉都应在设计者的考虑之内。 魔鬼将在细节上考虑更多，并改善用户体验。