Lorem Ipsum:完整指南
Lorem Ipsum 已成为印刷和 Web 设计行业的标准占位文本超过五个世纪。理解何时以及如何有效使用占位文本可以改善您的设计工作流程并避免常见陷阱。
什么是 Lorem Ipsum?
Lorem Ipsum 是源自西塞罗的拉丁文学作品的占位文本,西塞罗是公元前 1 世纪的罗马哲学家。标准的"Lorem ipsum dolor sit amet..."段落来自他的"de Finibus Bonorum et Malorum"(善恶的极端)的第 1.10.32 和 1.10.33 节,写于公元前 45 年。 与流行的看法相反,Lorem Ipsum 不仅仅是随机文本。虽然它在某种程度上已被打乱(删除、添加和重新排列了单词,使其无意义),但它保留了拉丁语的字母和音节分布,使其类似于现代欧洲语言的结构。这种类似性使其成为测试视觉布局的有效工具,而不会被可读内容分散注意力。 Lorem Ipsum 传统可以追溯到 1500 年代,当时一位不知名的印刷工使用它来创建字体样本书。它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 干转印字母表的发布而普及,并在 1980 年代和 90 年代随着 Aldus PageMaker 等桌面出版软件的出现而真正腾飞,这些软件包含 Lorem Ipsum 作为其默认模型文本。 今天,Lorem Ipsum 在网页设计和开发中无处不在。设计师使用它来模拟文本在最终内容可用之前在布局中的显示方式。开发者使用它来测试排版、响应式设计和内容流。项目经理使用它来在模型和原型中演示内容结构。它的拉丁语起源使其在全球范围内中立——它不会偏向任何特定语言或引入潜在令人反感的内容。 使用占位文本背后的原则很简单:当您设计内容容器时,您需要了解文本在该容器中的行为方式——如何包裹、需要多少空间、如何与其他元素交互——而不会被内容本身的含义分散注意力。真实内容可能会有偏见的设计决策或导致过早的编辑讨论。Lorem Ipsum 允许纯粹专注于视觉和结构方面。 Lorem Ipsum 也有实际好处。它有可预测的单词长度分布(短单词、中等单词、长单词),这有助于测试文本包裹和对齐。它缺乏可理解的含义,可以防止审阅者对内容发表评论,而不是对设计发表评论。它看起来像真实文本,使得利益相关者更容易想象最终产品,而不是"文本在此处"或 XXXX 这样的明显占位符。
何时使用 Lorem Ipsum
Lorem Ipsum 在特定场景中大放异彩,但并不总是正确的选择。理解何时使用它以及何时寻找替代方案可以改善您的设计过程和最终产品。 早期设计和线框图是 Lorem Ipsum 的理想用例。当您规划布局和视觉层次结构时,您需要占位符文本来显示组件看起来如何,而无需编写或等待实际内容。Lorem Ipsum 让您专注于空间、比例和视觉流程,而不会被内容决策分散注意力。它有助于回答"这个标题字体大小在这个宽度下有效吗?"而不是"这个标题说的对吗?" 排版测试严重依赖占位文本。在选择字体、大小、行高、字距和其他排版属性时,Lorem Ipsum 提供了一致的测试材料。您可以看到文本在不同长度下的行为方式:短段落、长段落、带有变化的句子长度的段落。不同的字母频率(Lorem Ipsum 保留类似拉丁语的分布)有助于测试字距和字距。 响应式设计测试受益于 Lorem Ipsum,用于填充内容区域并查看它们如何响应不同的屏幕尺寸。一个在桌面上有三行 Lorem Ipsum 的卡片可能在移动设备上有八行——您需要看到这个以适当地设计。变化的文本长度(短标题与长标题、简短描述与详细描述)揭示了布局在边缘情况下是如何中断的。 客户演示和模型通常使用 Lorem Ipsum,以便在内容最终确定之前显示设计概念。它有助于客户想象最终产品,而不会被临时内容或"占位符文本在此处"这样的明显占位符分散注意力。然而,要小心——一些客户可能认为 Lorem Ipsum 使模型看起来不完整或不专业。在这些情况下,考虑使用更相关的占位符内容(见下文)。 内容管理系统 (CMS) 主题和模板开发需要占位文本来演示主题如何显示不同类型的内容。Lorem Ipsum 填充博客文章模板、产品列表、用户配置文件和其他内容类型,显示所有设计元素,而不需要真实内容。 然而,有些情况下 Lorem Ipsum 并不合适。在后期设计阶段,真实内容可用时,应该用实际文本替换 Lorem Ipsum。真实内容揭示了占位符没有捕获的问题:笨拙的单词中断、意外的换行、真实标题太长或太短。越早发现这些问题越好。 用户测试应该使用真实或现实的内容,而不是 Lorem Ipsum。测试参与者需要理解内容以评估可用性。Lorem Ipsum 可能会混淆测试结果,因为用户无法真正与不可理解的文本交互。对于用户测试,使用与最终产品匹配您域的真实或模拟内容。 内容驱动的设计(内容优先方法)从一开始就应该使用真实内容。如果内容策略正在推动设计决策,您需要实际内容来做出明智的选择。Lorem Ipsum 可能导致设计与内容现实不匹配。 可访问性测试需要真实内容。屏幕阅读器用户和其他辅助技术用户需要有意义的文本来测试可访问性。Lorem Ipsum 对可访问性审计没有帮助,并且可能隐藏问题,如缺失的 alt 文本或标题层次结构不佳。 搜索引擎优化 (SEO) 和性能测试应该使用真实内容。SEO 工具需要实际文本来分析关键字和可读性。性能测试可能需要真实字符分布来准确测量渲染时间。Lorem Ipsum 可能与真实内容有不同的行为,特别是对于国际化(非拉丁字符、从右到左的文本)。
Lorem Ipsum 的最佳实践和替代方案
虽然 Lorem Ipsum 很有用,但遵循最佳实践并了解何时考虑替代方案可以改善您的设计工作流程。 长度变化对测试边缘情况至关重要。不要对每个组件使用相同的 Lorem Ipsum 段落。使用短段落(1-2 句)、中等段落(3-5 句)和长段落(6+ 句)来测试您的设计如何处理不同的内容长度。测试极端情况:单字标题与多字标题、单句描述与多段描述。这揭示了布局中断点和溢出问题。 混合文本元素以测试层次结构。使用 Lorem Ipsum 的组合:标题(短、中、长)、副标题、正文、引用块、列表(有序和无序)、标题、链接、粗体和斜体文本。这种混合更准确地表示真实内容的多样性。 考虑语言长度差异,如果您正在设计国际应用程序。不同的语言有不同的平均单词长度和句子结构。德语单词往往更长,中文字符更密集,阿拉伯语从右到左流动。Lorem Ipsum 基于拉丁语,不能很好地测试这些差异。对于国际项目,考虑使用目标语言的占位符或工具,这些工具生成适合不同语言的文本。 在演示之前替换为真实内容,尤其是在高层利益相关者审查时。虽然设计师理解 Lorem Ipsum,但客户或高管可能将其视为懒惰或不完整的标志。如果真实内容不可用,请使用特定于域的占位符(见下文的替代方案),这些占位符更相关,同时仍然是占位符。 记录占位符文本指示说明。在交接或协作环境中,清楚地标记哪些文本是占位符以及需要替换什么。诸如 [用产品名称替换] 或 <!-- TODO: 真实博客内容 --> 之类的注释可防止 Lorem Ipsum 意外进入生产环境。 自动化占位符生成可改善工作流程。许多设计工具(Figma、Sketch、Adobe XD)具有生成 Lorem Ipsum 的插件。开发框架有库(JavaScript 的 lorem-ipsum、Python 的 Faker、Ruby 的 FFaker)。使用这些工具可节省时间,并确保一致性。 Lorem Ipsum 的替代方案提供了更具上下文的相关性: Cupcake Ipsum、Bacon Ipsum、Hipster Ipsum 和其他主题生成器使用特定主题的词汇生成文本(纸杯蛋糕、培根、时髦术语)。这些可能更有趣、更吸引人,但要小心——新奇性可能会分散对设计的注意力。仅对内部模型使用主题占位符,而不用于客户演示。 真实的样本内容是最准确的占位符。如果您正在设计博客,请使用现有博客文章的摘录。对于电子商务,使用真实产品描述。对于新闻网站,使用实际文章。这种方法在测试中揭示了现实的边缘情况,并且对利益相关者来说看起来更完整。挑战在于获取和管理样本内容。 特定于域的伪内容在真实内容和 Lorem Ipsum 之间取得平衡。对于房地产网站,写通用属性描述("这个迷人的 3 居室位于...")。对于餐厅,写通用菜单项("新鲜捕获的鱼,配以...")。这些看起来像真实内容,但足够通用,不会引发内容讨论。 Faker 库生成现实但虚假的数据:姓名、地址、电话号码、电子邮件地址、日期、公司名称等。这对于测试数据库驱动的应用程序特别有用,您需要看起来像真实数据的占位符数据,但又不使用实际客户信息(隐私问题)。 您自己的内容的早期草稿,即使是粗糙的,也比 Lorem Ipsum 更好,用于设计内容驱动的项目。甚至要点或大纲也可以帮助指导设计决策。这种"草稿内容"方法将内容策略与设计对齐,尽管它需要更多的前期努力。 辅助功能占位符应该包括有意义的标签,即使内容是 Lorem Ipsum。为图像使用适当的 alt 文本("占位符图像"或描述性)、为表单使用标签、使用语义 HTML。不要让占位符成为跳过辅助功能最佳实践的借口。 避免 Lorem Ipsum 进入生产环境。在启动之前,使用 Linter、预提交钩子或手动清单来搜索"lorem"、"ipsum"、"dolor"等。意外的 Lorem Ipsum 看起来不专业,并可能损害 SEO(搜索引擎可能标记占位符文本)。实施检查以捕获这个。
试用工具
Lorem Ipsum生成器
了解更多
常见问题
Lorem Ipsum生成器
常见问题 →