可读性:优化文本长度

Readability: the Optimal Line Length
Baymard.com版权所有
作者:Christian Holst
译者:UCD翻译小组波希米亚
原文地址: http://baymard.com/blog/line-length-readability

译者序:直接捞干的来了!

提升文本可读性的关键之一,就是让每行文本承载合适的字数。这不仅仅是设计一下文本宽度的问题,它也应该是一个易读性的问题。

文本最佳长度是每行承载50-60字符,包括空格(“Typographie”, E. Ruder)。也有其他资料建议不超过75字/行也可以接受。但你一定会问,不按这样的标准做又会怎样?

  • 太长-如果一行里文字太多,用户眼球很难长时间聚焦文本。因为文本长度过长会让人很难注意到段落的起点和终点。此外,对于这么大块文本来说,也很难对当前行进行继续阅读。(译者注:稍一走神儿,就找不到读到哪了。都有过这样的经历吧?)
  • 太短-如果一行里文字太少,眼睛要不停的来回扫视,破坏了阅读节奏。同时,每行文本太短也样会让人觉得紧张,这行没看完就跳到下一行去了(很可能一些重要的词会被跳过)。

原本跳到下一行文字时,潜意识里是会那么有点小亢奋(只要别太频繁,原因见上面两点)。因此在每一行的开头,读者的精力都很集中,但这种专注会逐渐消褪,可能还没等把这行看完(“Typographie”, E. Ruder)。

为了避免文本过长或过短所带来的弊端,同时又能持续的激励读者,我们建议把每行承载的文本量控制在5-75 50-75个字符(译者注:中文建议35-45个汉字,14px)。

网页设计中如何获得最佳长度

在网页设计中,可以使用em或px(像素)来实现每行字符的最佳数目(使用em可以获得很好的效果,但操作起来比px略显复杂)。其实无论选择哪一种,要获得最佳效果,都需要为你的读者设置一个固定宽度。

这也是我们为什么不推荐使用“流式”布局的原因之一:实际上你在强制用户通过改变浏览器窗口,来获得更好的阅读体验。当想到时下显示器屏幕有这么多不同的分辨率,很明显,“流式”布局会让文本行变得要么宽,要么窄。

正如大家看到的,在baymard.com站上,我们使用了17px的Arial来呈现文字。文章容器宽度为504px,每一行大概65个字符。

在你的页面中,每行显示多少个字符?50-75个?如果你想让你的读者拥有更好的阅读体验,就该这么做。

扩展阅读

Better Web Readability Project http://code.google.com/p/better-web-readability-project/
争论 iPad(上):行宽与阅读 http://www.typeisbeautiful.com/2010/05/2537
关于MacOS下字体的一些研究 http://www.pjhome.net/article/Web/mac_os_fonts.htm

16 条评论

  • 1
    wangqing
    2011-12-01 - 11:10 | Permalink

    50-60字符数是30个左右的汉字长度,数了下,微博用了38个字,还挺符合这个研究的呢。

  • 2
    2011-12-01 - 12:13 | Permalink

    恩,呵呵~还好,当初设定宽度的时候,其实还是有这个考虑的。大概控制在每行40字左右。但两边留白有点少,略显拥挤。

  • 3
    2011-12-03 - 03:56 | Permalink

    目前大部分国内博客都超出了这个字数长度

  • 4
    2011-12-07 - 10:43 | Permalink

    09年的时候,在国外看到过一篇文章,研究的是英文字体的排版和阅读习惯的视觉引导。

    总结出来的结果是字体大小、方向长度决定了间距。具体是个什么公式忘记了。

  • 5
    2011-12-07 - 11:38 | Permalink

    @Kimcool 还能找到不?分享出来一起研究一下~

  • 6
    2012-02-18 - 16:32 | Permalink

    不错,很多网站都有点视觉疲劳…

  • 7
    2012-06-14 - 01:13 | Permalink

    有些小的网站倒是做的很不错;大的门户网站可能重点偏向不一样;受商业影响,不会纯粹的在乎这个方面吧,这应该是一个因素。

  • 8
    2012-06-14 - 09:38 | Permalink

    是的,确实很多大网站反而没有注意这些细小的问题。商业影响也许是一方面,但其实他们更有实力也更应该促进科学的设计方法,受众越大越应该重视才对。

  • 9
    Lan
    2013-08-15 - 17:27 | Permalink

    最近看的一个是说一行显示10-12个单词为最好。 对英文来说,单词数比较合理。

  • 发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>