lorem-ipsum placeholder-text design ui-ux generator

占位文本的艺术:为设计师提供高效的 Lorem Ipsum 生成

为您的 UI 设计和原型生成专业的占位文本。立即自定义段落、句子和单词。

简介:什么是 Lorem Ipsum?

每一位设计师、开发者和排版人员都曾遇到它:那段出现在模板、线框图或空白栏目中的"类拉丁文"文字。Lorem ipsum dolor sit amet, consectetur adipiscing elit... 它无处不在,出现在各种设计稿和原型中,但大多数每天使用它的人并不知道它来自哪里,也不明白为什么要用它。

Lorem ipsum 是占位文本——在真实内容尚未准备好时,用于填充设计布局中空白区域的虚拟文字。它看起来像拉丁文,读起来毫无意义,但却作为行业标准沿用了五个多世纪。深入了解它——其历史、机制和最佳实践——会让你成为更优秀、更有见识的设计师。

本文将全面介绍 Lorem Ipsum:它从何而来,生成器如何创建它,何时使用它,以及何时真实内容才是更好的选择。


两千年的历史

西塞罗与《论善与恶的界限》(公元前 45 年)

Lorem ipsum 的故事不是从印刷厂开始的,而是源于古罗马。公元前 45 年,罗马哲学家、政治家马库斯·图利乌斯·西塞罗(Marcus Tullius Cicero)撰写了《De Finibus Bonorum et Malorum》(《论善与恶的界限》),这是一部探讨伊壁鸠鲁和斯多葛伦理学的哲学论著,探讨了人类生活中何为最高的善与恶。

该著作第 1.10.32 和 1.10.33 节包含了 Lorem Ipsum 的原始来源。西塞罗在其中写道:

"Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." ("也没有人因为痛苦本身而热爱、追求或渴望获得痛苦,除非是因为有时某些情形出现,在那里劳苦和痛苦能为他带来巨大的快乐。")

这段文字是对苦乐本质的沉思——没有人为了痛苦本身而追求痛苦。当这段文字后来被打乱用作占位文本时,其哲学内涵被剥离,只留下文字本身的视觉节奏。

15 世纪的印刷革命

时间快进到 15 世纪。威尼斯印刷商阿尔杜斯·马努蒂乌斯(Aldus Manutius)及其时代的排字工人需要一种方法来展示字体和页面布局,而不使用真实内容。他们将西塞罗的文字故意打乱,使其无法阅读(这样读者就不会因内容而分心),然后将其用作填充材料。这种做法在欧洲各印刷厂中逐渐成为标准。

这种打乱是有意为之的:一段看起来像真实语言但没有实际含义的文字,非常适合用于视觉判断布局是否有效,因为眼睛将其视为文字,但大脑不会去理解其含义。

理查德·麦克林托克 1994 年的发现

几个世纪以来,没有人确切知道 Lorem Ipsum 来自哪里,其起源一直是个谜。直到 1994 年,弗吉尼亚州汉普登-悉尼学院的拉丁文教授理查德·麦克林托克(Richard McClintock)对 Lorem Ipsum 中出现的不寻常词汇"consectetur"产生了好奇——该词在古典拉丁文中极为罕见。他在一本拉丁文学索引中查找这个词,追溯到了西塞罗的《De Finibus》。这一发现证实了世界上最著名的占位文本长达两千年的传承历史。


经典 Lorem Ipsum 段落

以下是今天使用的标准 Lorem Ipsum 文本:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

将其与西塞罗的原文对比,可以看出词语是如何被提取、重新排列和截断的,从而产生看起来像拉丁文但实际上毫无意义的内容。"Lorem"本身甚至不是一个真正的拉丁词——它是"dolorem"的残片,"do"被截掉了。


Lorem Ipsum 生成器的工作原理

现代 Lorem Ipsum 生成器不使用纯随机性——它们使用精心整理的词库和算法组合来生成模拟自然语言节奏的文字。

词库

大多数生成器从《De Finibus》衍生出的扩展语料库开始——数百个看起来像拉丁文的词汇。词库中的常见词包括:lorem、ipsum、dolor、sit、amet、consectetur、adipiscing、elit、sed、eiusmod、tempor、incididunt、labore、dolore、magna、aliqua... 等。

句子组装

生成器从词库中随机选择词汇,将其组合成长度不一的句子(通常为 5 到 20 个词)。一些生成器会按照统计上自然的间隔添加逗号和连词,以模拟拉丁语的句子结构。

段落构建

句子被分组成段落。生成器通常提供以下选项:

  • 段落数量(例如 3 段)
  • 每段的句子数
  • 总词数
  • 是否以经典的"Lorem ipsum dolor sit amet..."开头

输出格式

生成器通常输出:

  • 纯文本——原始词汇和标点符号
  • HTML——用 <p> 标签包裹,可直接用于网页
  • Markdown——用于文档和静态网站生成器

变体与替代方案

Lorem ipsum 是经典,但许多主题变体也为开发者和设计师提供了不同的选择。

Bacon Ipsum(培根 Ipsum)

使用肉类主题的词汇:"Bacon ipsum dolor amet strip steak pork belly brisket short loin..."。非常适合在团队演示中注入一点幽默。

Hipster Ipsum(潮人 Ipsum)

填充时髦词汇:"Artisan keffiyeh quinoa normcore organic craft beer..."。用于讽刺过度设计的品牌形象。

Corporate Ipsum(企业 Ipsum)

生成商业流行语:"Synergize scalable functionalities to proactively facilitate cross-platform value propositions..."。令人不安地真实。

Cupcake Ipsum(纸杯蛋糕 Ipsum)

甜蜜的甜点主题:"Cupcake ipsum dolor sit amet marshmallow tiramisu toffee donut jelly beans..."

随机词汇/词典方式

一些设计师更喜欢真正的随机英文词汇,或基于专有名词的填充文字(如 Fillerama,它从电影剧本中提取内容)。每种方法在可读性和真实感上都各有利弊。


使用 Lorem Ipsum 进行设计:利与弊

使用 Lorem Ipsum 的理由

专注布局:占位文本让设计师完全专注于视觉层次、留白和比例,不会被文字的含义分散注意力。当真实内容存在时,相关方不可避免地会开始修改文字,而不是评估设计本身。

效率:您可以立即生成所需数量的文字,完美适配您的列和容器尺寸。

中立性:Lorem ipsum 不会引发情感或政治反应,是客户演示中真正中立的填充内容。

行业标准:参与设计评审的每个相关方——开发人员、产品经理、营销人员——都理解 Lorem Ipsum 意味着"此处放置内容"。

反对 Lorem Ipsum 的理由(内容优先设计)

"希腊文本"问题:当整个设计中都使用占位文本时,一旦填入真实内容,最终的布局可能会完全不同。真实的标题有不同的长度,真实的正文有不同的节奏,真实的行动号召有不同的权重。

可访问性盲点:Lorem ipsum 使我们无法评估设计对屏幕阅读器是否有效,也无法判断 ARIA 标签在上下文中是否有意义。

相关方混淆:不熟悉设计的客户有时会将 Lorem Ipsum 误认为翻译错误或程序 bug。

内容优先倡导者(如文案写手 Sarah Richards 和 UX 设计师 Giles Colborne)认为,使用真实内容进行设计——即使是粗糙的草稿文案——会产生更诚实、更准确的设计,因为内容本身就是设计。


网页排版与占位文本

占位文本在评估排版决策方面非常有价值:

字体搭配

生成标题和正文文本块,查看您选择的标题字体(例如粗体衬线字体)是否与正文字体(例如清晰的无衬线字体)搭配良好。无意义的词语确保您是在判断形状和节奏,而不是内容。

行高和间距

一整段 Lorem ipsum 可以揭示您的 line-height 是否过紧(文字感觉拥挤)或过松(读起来像列表)。正文文字的标准建议是字体大小的 1.4 到 1.6 倍。

栏宽和可读性

排版人员使用行宽(每行字符数)原则:最佳可读性为每行 45 到 75 个字符。Lorem ipsum 让您快速了解列宽是否违反了这一原则。

响应式缩放

观察 Lorem ipsum 块在不同断点处的重排效果。文字在移动设备宽度时是否仍然平衡?标题在 320px 时是否能优雅地折行?


可访问性影响

使用 Lorem ipsum 具有常被忽视的重要可访问性影响。

屏幕阅读器

屏幕阅读器(如 NVDA、JAWS 和 VoiceOver)会尝试朗读 Lorem ipsum,产生混乱、无意义的音频。这是Lorem ipsum 绝对不应出现在生产环境中的强烈信号。

ARIA 标签和语义含义

在设计可访问性组件时,按钮、链接和表单标签中的占位文本最终必须替换为有意义的文字。使用 Lorem ipsum 进行设计可能掩盖您的 ARIA 结构是否真正传达了意图。

认知负荷测试

您无法使用 Lorem ipsum 正确测试认知负荷或阅读理解能力。真正的可用性测试需要真实(或真实感的)内容。

黄金法则

永远不要将 Lorem ipsum 发布到正式网站或应用程序中。 自动化检查(如可访问性 linter 和 SEO 爬虫)会将乱码的伪拉丁文标记为内容错误。更重要的是,真实用户会感到困惑或反感。


何时使用 Lorem Ipsum,何时使用真实内容

正确的选择取决于设计阶段:

阶段 推荐方法
早期线框图 Lorem ipsum——专注布局
中保真度原型 Lorem ipsum 配合真实标题
高保真度原型 尽可能使用真实内容
用户测试 始终使用真实内容
生产环境 绝不使用 Lorem ipsum

在以下情况使用 Lorem ipsum:

  • 您在探索布局选项,不希望内容影响结构决策
  • 您需要填充模板或向客户展示设计系统
  • 您在撰写文档或创建教程截图

在以下情况使用真实内容:

  • 您在进行可用性测试或用户研究
  • 您在决定字体大小、层次结构或文案长度
  • 您在为开发交付设计稿

HTML 生成与设计工具集成

使用 <p> 标签包裹

为网页使用生成 Lorem ipsum 时,HTML 输出通常是最有用的:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>

每个段落都正确包裹,可直接用 CSS 设置样式。

Figma

Figma 有内置的 Lorem ipsum 快捷键:选择文本层,按 Shift + Cmd/Ctrl + L(或使用社区中的"Lorem ipsum"插件)。您也可以使用 Lorem ipsumContent Reel 等插件进行更精细的控制。

Adobe XD

Adobe XD 通过右键 → "编辑" 或键盘快捷键提供 Lorem ipsum 填充功能。第三方插件如 Ipsum 可扩展其功能。

Sketch

Sketch 允许通过 插入 → 文本 → Lorem Ipsum 或通过 Content Generator Sketch Plugin 等插件插入 Lorem ipsum,这些插件可以用主题内容填充文本层。


最佳实践

  1. 始终在设计文件和文档中清晰标注 Lorem ipsum — 使用注释或标注层。
  2. 在用户测试前替换为真实内容 — 切勿用占位文本进行测试。
  3. 使用 HTML 输出集成到网页组件时,以保持正确的语义结构。
  4. 使文字长度与实际相符 — 如果您的标题通常为 5 个词,不要使用 20 个词的 Lorem ipsum 标题。
  5. 结合使用两种方法 — 正文文字使用 Lorem ipsum,但标题、行动号召和标签使用真实(或真实感的)文字。
  6. 永远不要将 Lorem ipsum 提交到生产代码库中。设置 linting 规则或内容审计来捕获它。
  7. 向非设计相关方展示时选择主题化替代方案,以减少混淆。

常见问题

问:Lorem ipsum 是真正的拉丁文吗? 答:它源自真正的拉丁文(西塞罗的《De Finibus》),但用作占位文本的打乱版本在语法上并不正确,也没有实际含义。

问:谁发明了 Lorem ipsum? 答:原始来源是西塞罗(公元前 45 年)。将其用作占位文本的做法归功于 15 世纪的印刷商,可能是阿尔杜斯·马努蒂乌斯。

问:为什么 Lorem ipsum 以"Lorem"开头,而它不是真正的词? 答:"Lorem"是"dolorem"的残片——原文以"dolorem ipsum"开头,被截断了。

问:我可以在商业项目中使用 Lorem ipsum 吗? 答:可以——Lorem ipsum 属于公共领域,文本本身没有版权。

问:Lorem ipsum 有标准长度吗? 答:最常见的标准段落有 5 个句子(约 69 个词)。大多数生成器允许您指定任意长度。

问:Lorem ipsum 会影响 SEO 吗? 答:如果发布到正式页面会。爬虫可能会将其标记为低质量内容。发布前务必替换。

问:最好的 Lorem ipsum 生成器是什么? 答:最好的生成器是最符合您工作流程的那个。我们的工具提供纯文本、HTML 输出、可配置的段落/句子数量,并在需要时以经典开头开始。


Lorem ipsum 之所以能延续 500 多年,是因为它解决了一个真实的问题:让我们能够在不受内容含义干扰的情况下评估视觉设计。在正确的阶段、以正确的方式使用它——它仍然是设计师工具箱中最有用的工具之一。只要记住:它是脚手架,而不是完成的墙壁。在开门迎客之前,请把它替换掉。