FlowingDev

Lorem Ipsum 到底是啥玩意儿？占位文本的前世今生和理论

来了解下 Lorem Ipsum 这段经典占位文本背后出人意料的历史和用途，设计师和开发者都用它来可视化内容布局。

试用工具: Lorem Ipsum 生成器

一句话概括

Lorem Ipsum 是一种毫无意义、类似拉丁语的占位文本，用于填充设计中的内容区域，好让相关人员能专注于布局和视觉层次，而不会被可读内容分心。

它解决了什么问题

想象一下：你是一名设计师，正在精心打造一个超赞的新网站布局。你已经为标题、段落和图片说明都预留好了框框。但问题来了，往里面填什么内容呢？

你当然可以写“标题放这里”和“本段内容稍后提供”。但这有两个问题。首先，它看起来不像真实的文本。“标题放这里”才五个字；而一个真实的标题可能有十几个字。一段不断重复“内容内容内容”的文本会产生一种奇怪又扎眼的纹理，完全不能反映真实段落的自然质感。其次，也是更坑的一点，如果你用了实实在在、能读懂的中文，比如“我们公司成立于 1998 年，使命是……”，你的客户或老板肯定会开始读它。他们不会去评判你优美的设计，而是会说：“不对啊，我们是 1999 年成立的”，然后你就会被卷入一场关于文案而不是构图的讨论中。

核心问题是：如何将对形式的评估与对内容的评估分离开来。

于是，Lorem Ipsum 闪亮登场。它的起源故事比你想象的要酷。它不只是随机的胡言乱语。标准的 Lorem Ipsum 文本是一段被打乱和修改过的古典拉丁文本的摘录，这段文字出自古罗马政治家西塞罗在公元前 45 年写的《善恶之终》("De finibus bonorum et malorum")。

把它用作填充文本的做法至少可以追溯到 16 世纪，当时一位不知名的印刷商为了制作字体样本册，打乱了一整版活字。但它在现代声名鹊起，则要归功于 20 世纪 60 年代。一家名为 Letraset 的公司出售供平面设计师使用的干转印字母纸，他们在这些纸上推广了 Lorem Ipsum 段落。当 Aldus PageMaker 等桌面出版软件在 80 年代问世时，软件内置了 Lorem Ipsum 生成器，从而彻底巩固了它在数字设计师工具箱中的地位。

它之所以有效，是因为它看起来像一种似是而非的欧洲语言。它有长短不一的单词、大写字母和标点符号，能在页面上营造出逼真的“色块”或“纹理”。正因为它难以辨认，它迫使观看者的大脑放弃阅读，转而关注设计评审中真正重要的东西：字体清晰吗？行距合适吗？布局感觉平衡吗？标题够突出吗？它能让对话始终保持在正确的轨道上。

底层工作原理

你可能以为 Lorem Ipsum 生成器不过是复制粘贴一个文本文件。最简单的版本确实如此，但一个好的生成器要聪明一些，它会用简单的算法来创建看起来更自然、更多变的文本块。

源文本：西塞罗的遗产

这个过程始于一段源文本。经典的 Lorem ipsum dolor sit amet... 是西塞罗一段原文的打乱版。原文开头是这样的：

...neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

翻译过来就是：

...也没有人会因为痛苦本身是痛苦，就去喜爱、追逐或渴望得到它...

如你所见，占位文本的第一个词 Lorem 其实是 dolorem 的一部分。这些词都是真实的拉丁词，但它们被切碎、重排，还混入了一些无意义的词，使得整段文字在语法上不正确且毫无意义——而这正是它的目的所在。

一个生成器的“词典”就是这些拉丁语和类拉丁语词汇的一大个列表。

西塞罗原文 打乱后的 Lorem Ipsum
dolorem ipsum Lorem ipsum dolor
quia dolor sit quia dolor sit
amet, consectetur amet, consectetur
adipisci velit adipiscing elit

生成算法

一个可配置的生成器并不会每次都吐出同样的一百个词。它会用一套简单的规则从头构建段落。

  1. 句子生成： 为了创建一个句子，算法会从词汇表中随机挑选一定数量的词（比如 8 到 20 个）。它用空格把这些词连接起来，将第一个词首字母大写，并加上一个句号。想让它更花哨一点，还可以在某些词后面随机插入逗号。

  2. 段落生成： 为了创建一个段落，算法只需随机调用句子生成器若干次（比如 3 到 7 次），然后将生成的句子连接起来。

  3. 可配置输出： 当你要求生成“5 个段落”时，工具只是将段落生成循环运行五次。一些生成器提供更多控制，比如指定单词或字符数，这只需要不断运行选词循环直到达到目标数量即可。

下面是一个类似 JavaScript 的伪代码小例子，展示了其核心逻辑：

// 词汇字典
const LOREM_WORDS = ["lorem", "ipsum", "dolor", "sit", "amet", "consectetur", ...];

// 生成一个可变长度的句子
function generateSentence(minWords = 8, maxWords = 20) {
  const wordCount = Math.floor(Math.random() * (maxWords - minWords + 1)) + minWords;
  let words = [];
  for (let i = 0; i < wordCount; i++) {
    const randomIndex = Math.floor(Math.random() * LOREM_WORDS.length);
    words.push(LOREM_WORDS[randomIndex]);
  }
  let sentence = words.join(" ");
  // 首字母大写并添加句号
  return sentence.charAt(0).toUpperCase() + sentence.slice(1) + ".";
}

// 生成一个包含可变数量句子的段落
function generateParagraph(minSentences = 3, maxSentences = 7) {
  const sentenceCount = Math.floor(Math.random() * (maxSentences - minSentences + 1)) + minSentences;
  let sentences = [];
  for (let i = 0; i < sentenceCount; i++) {
    sentences.push(generateSentence());
  }
  return sentences.join(" ");
}

// 生成 3 个段落
for (let p = 0; p < 3; p++) {
  console.log(generateParagraph());
}

就是这么个简单的结构，就能按需生成无穷无尽、看起来独一无二的占位文本块了。

来自一线的翻车案例

过分积极的客户

自由设计师 Maria 正在为一家新开的手工烘焙店开发网站。她设计了一个华丽的首页模型，在“我们的故事”和产品描述部分使用了 Lorem Ipsum。她对自己的作品很满意，便将链接发给客户以供设计审批，并在邮件中解释说文本只是占位符。客户正忙着经营他的烘焙店，草草浏览了邮件就点了链接。一小时后，Maria 收到一封抓狂的邮件：“设计不错，但网站怎么是拉丁文的！我们不卖‘dolor sit amet’！请立即修复文本。” Maria 接下来花了 20 分钟在电话里安抚他，并重新解释了占位文本的用途。

教训： 永远不要假设非技术背景的 stakeholder 知道 Lorem Ipsum 是什么。主动解释这是一种帮助他们专注于视觉设计的工具，真正的文字稍后会填上。

“坚不可摧”的单词

前端开发 Sam 正在为一个新闻 App 构建一个响应式卡片组件。卡片上有一个标题、一张图片和一小段文本摘要。它需要在手机上看起来很棒，这意味着文本栏会非常窄。Sam 丢了几句 Lorem Ipsum 进去，看起来完美极了。文本换行优美，间距恰到好处，然后他就交付了这个组件。几周后，App 从一份德国科学期刊上拉取了一篇真实文章，里面有个词 Rechtschreibreform。这个词比整个卡片的宽度还长。它没有换行，而是直接溢出了容器，彻底摧毁了布局。

教训： Lorem Ipsum 使用的是简短的、基于拉丁语的单词。它对于检查整体文本流效果很棒，但对于压力测试布局则糟透了。一定要用真实的、最坏情况下的内容来测试你的 UI，比如长单词、短标题或不同语言的文本。

生产环境的“小意外”

初级开发 Chloe 接到了一个任务，要给一个正在运行的电商网站添加一个新的推广横幅。这是个急活，周五下午 4 点才提的需求。她写好了横幅代码，调整了样式，然后丢了些 Lorem Ipsum 进去检查对齐。为了在周末前赶紧部署，她匆忙提交了代码并推到了生产环境。在接下来的三个小时里，公司首页上赫然挂着一个横幅，上面写着：“来看看我们全新的春季系列！Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

教训： 占位文本是具有放射性的——它绝不能进入生产环境。在你的部署流程中加入检查机制，比如一个简单的脚本，在代码库中搜索 "lorem ipsum"，如果找到就让构建失败。这是一个廉价而有效的安全网，可以防止这类尴尬的错误。

常见的坑和翻车点

  • 忘了替换它。 这是头等大罪。一个带着 Lorem Ipsum 上线的网站看起来既不专业又像是坏掉了。使用部署前脚本或手动检查清单来追捕并根除它。
  • 让它把客户搞懵。 如果你不解释这是什么，客户肯定会感到困惑，以为出了什么问题。一句提前的解释能为所有人节省时间和焦虑。
  • 想当然地认为它代表了真实内容的长度。 一行 "Lorem ipsum dolor sit amet..." 并不是一个真实的标题。一个生成的段落也不会和真实的用户简介一样长。设计时要考虑到灵活性，因为真实的内容是不可预测的。
  • 忽略国际化（i18n）。 Lorem Ipsum 的字符集和词汇结构都是基于拉丁语的。它无法揭示你的设计如何处理更宽的汉字（中文）、德国的长复合词，或阿拉伯语（عربى）的从右到左排版。
  • 用它做 UX 测试。 它的设计初衷就是为了被忽略。如果你在测试用户是否能理解指引或明白某个号召性用语，你必须使用真实、有意义的文本。用 Lorem Ipsum 来做面向用户的说明，就像递给别人一张没有标注的地图。

为什么你也该懂点

作为一名开发者、设计师，甚至项目经理，Lorem Ipsum 都是数字创作过程中一个基础组成部分。每当你在内容敲定前就需要搭建结构时，都应该想到它。

  • 前端与 UI 开发： 当你构建 React 组件、CSS 网格布局或简单的 HTML 页面时，你需要看到文本的流动效果。Lorem Ipsum 是你填充那些 p 标签和 div 的首选，这样你就可以在等待文案的同时把样式搞定。
  • UI/UX 设计与线框图： 在 Figma、Sketch 或 Adobe XD 中，使用占位文本可以确保反馈会议的焦点始终在布局、层级和用户流程上，而不是演变成文案修改会。
  • 数据库填充： 构建 App 时，你需要测试数据。一个能生成 1000 个假用户的脚本可以用 Lorem Ipsum 来填充他们的“个人简介”字段，这让你的开发环境比一个全是 NULL 或空字符串的数据库感觉真实得多。
  • 印刷与平面设计： 它最初的用途至今仍然活跃。在设计宣传册、杂志或书籍封面时，排版师用它来评估字体选择、字体搭配、行距（leading/line-height）和字偶距（kerning）。

深入探索

理论搞定，动手试试吧——100% 在你的浏览器中运行。

试用工具: Lorem Ipsum 生成器