B3 bohemia's – 设计多一点乐趣

可读性:优化文本长度

11 月 30, 2011

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. 50-60字符数是30个左右的汉字长度，数了下，微博用了38个字，还挺符合这个研究的呢。

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

  6. […] 本文编译自：UCD翻译小组，波希米亚，原文地址。译文出处： Christian Holst，转载请保留出处链接。 本文标签: 交互,优化 本文链接: 优化文本获得最佳长度 提升可读性与易读性 版权所有: 蓝枫博客, 转载请注明本文出处及链接！ 订阅更新: 您可以订阅我们的内容更新或者 分享给更多的朋友 上一篇: 探讨：迈向优秀产品经理所需具备的7种能力 […]

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

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

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

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

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

评论已关闭。