为什么是 Lorem Ipsum？占位文本的历史与现代应用

什么是 Lorem Ipsum？

如果你看过任何设计稿、原型或模板，几乎一定见过这段文字：

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

这段看似拉丁语、又似是而非的文字，就是 Lorem Ipsum——设计行业最广泛使用的占位文本（placeholder text）。它的作用是填充版面，让设计师和客户专注于视觉布局，而不是被实际内容分散注意力。

Lorem Ipsum 的历史起源

古罗马的渊源

Lorem Ipsum 并非无意义的胡言乱语。它的原文来自古罗马哲学家西塞罗（Cicero）于公元前 45 年撰写的《善恶之极》（De finibus bonorum et malorum）第一卷第 32 章节。原文讨论的是伦理学中”善与恶的极致”。

原文开头是：

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

翻译大意是：“没有人会因为热爱痛苦本身而追求痛苦，只是因为偶尔有些情况，劳苦和痛苦能带来巨大的快乐。“

16 世纪的意外

据考证，Lorem Ipsum 的使用可以追溯到 16 世纪。一位不知名的印刷工将西塞罗的文本打乱，制作成一本字体样书（specimen book），用来展示不同字体的效果。这段文字从此在印刷行业流传。

1960 年代：Letraset 的推动

Lorem Ipsum 真正流行起来，要归功于 1960 年代的 Letraset 公司。他们生产的干式转印字体 sheets（让设计师可以像贴纸一样把文字转印到设计稿上）中，有一张就印着 Lorem Ipsum 文本。这让无数设计师第一次接触到这段文字。

1980 年代：桌面出版的普及

随着 Aldus PageMaker 等桌面出版软件的兴起，Lorem Ipsum 被内置为默认占位文本，进一步巩固了它的地位。如今，几乎所有设计软件（Figma、Sketch、Adobe XD）和内容管理系统都内置了 Lorem Ipsum 生成器。

为什么用 Lorem Ipsum？

1. 避免内容干扰设计

设计稿如果使用真实文案，客户往往会纠结于文字内容，而非视觉布局。Lorem Ipsum 的”似拉丁语”特性让它看起来像文字，但无法阅读，迫使观众关注设计本身。

2. 模拟真实文本的视觉特征

拉丁语单词的平均长度、字母分布与英语等欧洲语言接近，能很好地模拟真实文本的视觉效果——行宽、行高、段间距。相比之下，“测试测试测试”或”abcabc”无法真实反映排版效果。

3. 行业标准

Lorem Ipsum 已成为设计行业的通用语言。客户和团队成员一看到这段文字，就明白”这是占位文本，最终内容待定”，避免了误解。

现代设计中的应用

原型设计

在 Figma、Sketch 等工具中，Lorem Ipsum 用于填充按钮、卡片、列表等组件，快速验证布局。

<!-- HTML 原型 -->
<div class="card">
  <h3>Lorem ipsum dolor</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Sed do eiusmod tempor incididunt ut labore.</p>
  <button>Read more</button>
</div>

字体测试

设计师用 Lorem Ipsum 测试不同字体的可读性、字重、字距，因为它包含丰富的字母组合。

响应式布局验证

在不同屏幕尺寸下，Lorem Ipsum 能快速填充内容，验证文本如何换行、截断、重排。

/* 使用 CSS 生成占位文本 */
.placeholder::before {
  content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
}

Lorem Ipsum 的争议

”真实内容优先”运动

近年来，一些设计师主张放弃 Lorem Ipsum，改用真实内容。他们的论点是：

占位文本掩盖了内容长度的不确定性
真实内容会影响设计决策（长标题、短描述、特殊字符）
客户可能误以为占位文本就是最终内容

折中方案

许多团队采用混合策略：

早期原型：使用 Lorem Ipsum 快速迭代布局
设计评审：替换为接近真实的示例内容
最终交付：使用客户提供的真实文案

其他占位文本方案

1. Bacon Ipsum

以培根为主题的占位文本，适合需要一点幽默感的项目。

Bacon ipsum dolor amet flank pork chop ribeye, prosciutto pork belly bresaola.

2. Hipster Ipsum

充满”潮人”词汇，适合时尚、生活方式类设计。

Craft beer ethical sriracha, fixie banh mi farm-to-table.

3. 程序生成的随机文本

// 简单的占位文本生成器
const words = ['lorem', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur', 
               'adipiscing', 'elit', 'sed', 'do', 'eiusmod'];

function generateLorem(count = 50) {
  return Array.from({ length: count }, () => 
    words[Math.floor(Math.random() * words.length)]
  ).join(' ');
}

console.log(generateLorem(20));
// "dolor lorem ipsum adipiscing elit sed consectetur..."

4. Cupcake Ipsum、Zombie Ipsum 等

各种主题的占位文本层出不穷，但 Lorem Ipsum 仍然是事实标准。

中文占位文本的挑战

对于中文设计，Lorem Ipsum 的视觉效果与中文差异很大——拉丁字母是方块状，中文字符更宽更密。常见的中文占位方案包括：

“这里是正文内容”：简单直接，但视觉单调
随机汉字：模拟真实中文排版
古文片段：如《滕王阁序》《兰亭集序》，既有文学性又能模拟排版

<!-- 中文占位示例 -->
<p>豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，
   控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，
   徐孺下陈蕃之榻。</p>

总结

Lorem Ipsum 已经存在了 500 多年，从古罗马哲学家的手稿，到 16 世纪印刷工的字体样书，再到现代设计软件的默认占位文本。它的持久生命力源于一个简单的事实：它解决了设计师的真实问题——在不分散注意力的前提下，模拟真实文本的视觉效果。

无论你是坚持传统使用 Lorem Ipsum，还是采用真实内容优先的策略，占位文本都是设计工作流中不可或缺的工具。

需要生成 Lorem Ipsum？试试 CodeKit 上的 Lorem Ipsum 生成器——支持自定义段落数、字数，一键复制，所有生成在浏览器中完成。