把握5元素,让页面文字阅读更舒适.pdfVIP

把握 5元素，让页面文字阅读更舒适 上网在线阅读，是大多人获取信息的重要途径。用户会在网上阅读到大量的新闻及各类文章，特别 是网络小说，这些页面展示的主体就是通篇大段的文字。对于这种看似简单的文字堆砌的页面，有 没有人抱怨过： 这样的页面还需要出效果图啊？“ ”作为网页设计师的你是怎样处理这样的界面的？ 是习惯性的使用宋体字或者微软雅黑？ 是直接设为 12px 或者 14px 的字号？ 你有想过为什么要使用这种字体、字号吗？ 你有考虑过文字排布与阅读效率的关系吗？ 你的页面背景会影响到用户的浏览舒适度吗？ 让我们从以下 5个元素具体分析。 字体、字号 字体和字号这两个元素必须捏在一起说。 字体分为衬线体（ 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 （/view/755822.htm ） 强制平滑显示状态下尤其显得模糊不清 。微软雅黑就是微软在这个字体显示问题上的解决方案。 让我们分别对比下中英文的衬线体与非衬线体在不同字号时的显示效果。 英文以 Times 和 Verdanad 为例，中文以宋体和微软雅黑为例。 行长 我们随手拿起一本书或者一份报纸，数一数每行的文字，一般情况下都不会超过 40 个汉字。这是因 为如果每行文字过长，读者会不停的转动脖子，感到疲惫的同时也会降低阅读效率；目光从行尾移 至下一行首，也很容易串行，影响读者浏览文章的节奏。这点同样适用于网页上的文章阅读。由于 显示器是横向的，我们更要注意划分阅读区域。 文本宽度控制在 450-700px 为宜，此范围内参照字号大小； 英文每行 80-100 个字母（空格算一个字母）为宜； 中文每行 30-40 个汉字为宜。 间距 通过设置间距，我们就可以控制文字的密度。如果每行间距太小，与文字过长一样，读者浏览文章 时也容易串行；如果行距过宽，阅读时就会感觉文章不够连贯。 间距没有固定的值，通常是根据字体大小来定义的。在 word 里我们常看到双倍行距、单倍行距和 1.5 倍行距的选项。网页上行距的单位常用 em 来表示，不管是中文网站还是英文网站，大家多喜欢 用 1.5em －1.8em 的行距。以 1.6em 的行距为例，字号 16px 的字，行距就是 25.6px 。 如（图