IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

可读性:优化文本长度

B3 bohemia's 2012-03-25 21:00:16 累计浏览 2,364 次
本机暂存

    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个字符(译者注:中文建议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

    同分类推荐文章

    1. 如何写好设计文档? (2026-06-23 08:00:00)
    2. Designing With Uncertainty: How AI Supercharges Probabilistic Thinking (2026-06-16 23:00:00)
    3. The Benefits Of Cognitive Inclusion In UX Research (2026-06-10 18:00:00)

    查看更多 设计 文章 →

    建议继续学习

    1. 120个优秀的水平导航设计 (累计阅读 75,627)
    2. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
    3. 流程管理与用户研究 (累计阅读 17,053)
    4. 我的 Sublime Text 2 笔记 (累计阅读 16,729)
    5. 30套最好的网站开发与设计中使用的小型图标 (累计阅读 12,529)
    6. 越简单越丰富――极简网页设计视觉呈现技巧 (累计阅读 11,599)
    7. 看看各个网站的404错误处理 (累计阅读 10,208)
    8. sns视觉设计分享 (累计阅读 9,523)
    9. 图书馆的世界纪录 (累计阅读 9,506)
    10. 网站导航设计的6大分类 (累计阅读 9,298)