我曾经发过一个客户端's主页,其中三段Lorem Ipsum仍然坐在"关于"部分。它已经直播了大约四十分钟,然后他们的营销主管通过电子邮件向我发送了主题行截图"这是什么语言。 "没有人死,但我已经搜索了每个项目的单词 ipsum 此后每次部署之前,我都构建了 洛雷姆异能发生器 在 toolz。dev 上,部分原因是为了停止从五年前的书签中复制虚拟文本。
这是最占位符-文本指南跳过的内容:Lorem Ipsum 的重点不是它看起来很花哨。它就是它 正确形状的正确不可读文本量的, 所以你可以判断一个布局,而无需任何人争论副本。把金额弄错,占位符对你来说- 一个在两个整齐的句子下看起来完美的设计在真实的段落出现时会分崩离析。所以这个指南较少是关于历史的(尽管有一些),而更多的是关于生成实际上与将要取代它的内容相匹配的文本。
Everything都在你的浏览器里运行,没有注册,没有广告在工作流程中,没有任何东西发送到任何地方。
TL;博士: 的 洛雷姆异能发生器 3个滑块构建占位符段落 - 每句多少段落,平均每句,平均每段句子 - 并且随拖随生地再生它以熟悉的"Lorem ipsum odor amet, consectetuer adipiscing elit。"行,并用随机的拉丁语-ish单词填充其余部分,因此每个块看起来都很独特。将其大小适合您 真实的 expected的内容,复制出来,在你发货之前搜索你的项目 "ipsum" 当真实的单词到达时,用the检查它们的长度 字数计数器。
什么是 Lorem Ipsum,为什么是拉丁语?
Lorem Ipsum 是加扰的伪拉丁语用作填充文本,因此设计师可以在真实内容存在之前评估布局。著名的开场 - "Lorem ipsum dolor sit amet, consectetur adipiscing elit..." - 是 Cicero's 的残缺片段 德菲尼布斯·博诺鲁姆和马洛鲁姆(公元前45年)写的一篇关于伦理学的论文,这些词在几个世纪前被切碎和洗成读起来像拉丁文但毫无意义的东西。
的"为什么拉丁"问题有一个很好的答案: 无意义是其中的特点。 1个模型中填满真正的英语,那么评论它的每个人都会读单词,形成对副本的意见,不再看设计,用Lorem Ipsum填充它,没有什么可读的,所以注意力就到了你想要的地方- 间距,类型,层次结构和节奏。约定足够古老(1500年代的打印机以这种方式扰乱类型,Letraset在1960年代传播,桌面出版软件在1980年代烘烤了它),每个利益相关者在看到它时都将其识别为"占位符,而不是最终的"
Toolz。dev生成器的一个诚实的笔记具体来说:它不会逐字复制确切的经典段落,它以可识别的行开头,然后从拉丁风味术语池中随机拉出单词,因此每次身体都是新鲜的而不是相同的西塞罗片段。用于占位符的目的,即加号 - 您可以生成几个看起来都不同的块。
长度控制如何工作?
是使工具实际有用的部分,而且是界面与人们期望的不同之处,没有"给我50个单词"或者"给我3个句子"按钮,而是用三个滑块塑造文本,工具将它们乘以段落:
段计数 (1到20) - 你得到多少段落。
平均。每句话的单词 (5到25) - 目标句子长度。生成器在这个数字周围添加一点随机方差,因此句子在机器人上并不相同,这使得结果读起来像自然的散文节奏而不是表格。
平均。每段的句子 (2至15) - 每段运行多长时间,同样有一些差异。
所以你的粗略字数是 段落×每段×每句×单词10个单词×8个句子处的一段话大约是80个单词,那些设置处的十段话是一篇长篇文章's值体,文字会重新生成你移动任何滑块的瞬间,所以你用眼睛而不是算术来拨打形状,当它看起来正确时,击中 复印。
1个值得知道的现实小触感:大概七句中1个句子以问号结尾,而不是句号,随机的,而且让占位符的墙读起来有点像真实的写作。
如何在 Toolz。dev 上生成占位符文本,一步一步
1步:打开发电机
去 洛雷姆异能发生器。一段话已经在负载上生成,因此您立即有东西需要使用。
2步:设置段落计数
拖动 段计数 to 多么多阻塞你的布局需求。单卡描述是1;一个博客体模型可能是5到8。
3步:塑造句子和段落长度
用 平均。每句话的单词 並 平均。每段的句子 匹配 密度 的你的真实内容简洁的UI文案:短句子、短段落长篇阅读的文章:两者都更长这是人们跳过的步骤,也是让占位符诚实的步骤。
4步:复制
击 复印。文本以纯文本形式登陆剪贴板,并按原样放入 Figma、HTML 模板、CMS 字段或编辑器中。
第 5 步:当您需要干净的石板时重置
的 复位 button 将滑块返回到默认值(1 段,每句 10 个字,每段 8 个句子),移动任何滑块也会重新洗牌,所以如果只想要在相同的设置下使用不同的随机块,就轻推一个滑块,然后轻推回来。
为什么占位符文本跳过,留下盒子空
空文本区域就像太多文本一样糟糕地谎报着你的布局,你无法在任何事情上判断线高,你看不到一张卡片如何包裹,你也无法判断两列网格是否平衡,占位符文本让你评估在设计阶段真正重要的事情:
间距和节奏 - 当元素中有文本时,元素之间的垂直空间是否感觉正确 排版 - 在这种大小和尺寸下主体字体是否可读 层次结构 - 将标题、副标题和主体清晰地分开 包装和溢出 - 当文本有点太长时,固定高度卡片会发生什么响应 - 相同的块如何从桌面回流到狭窄的电话列。
至关重要的是,使用 乱窜 文本而不是草稿副本使审稿人无法批准特定单词,从而无法与真实内容保持联系。
尺寸正确:一张速查表
最常见的错误是在真实的一句话时用三段填满一个槽 - 设计看起来很棒,然后打破真实副本到达的那一刻将生成器瞄准您实际期望的内容:
| 布局槽 | 粗暴的目标 | 滑块起点 |
|---|---|---|
| 按钮/标签 | 2,4 个单词 | 5句单词,抓开头单词 |
| 英雄子目 | 10个20字 | 1段,12个字/句,2个句子 |
| 特色卡 | 1530字 | 1段,10个单词/句子,2个第三句 |
| 博客摘录/元 | 2040字x100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 | 1段,12个字/句,3个句子 |
| 关于部分 | 100个200字 | 2个附3段,12个字/句,6个句子 |
| 文章正文 | 500.1000 字 | 6个和第10段,14个字/句,8个句子 |
然后故意做相反的事情:一旦 "expected" 长度看起来不错,将标题曲动到其长度的两倍,并将段落缩减为两个单词,看看布局在哪里。使用占位符进行压力测试是免费的;使用客户端进行压力测试's 真正的启动内容不是。
占位符文本在哪里获得保留
设计模型。 Figma、Sketch 和 Adobe XD comp 都需要在每个插槽中提供可信的文本卷,才值得评论。
HTML/CSS 原型。 当您在内容之前构建结构时,将生成的段落直接放入您的标记中:
<article>
<h2>Section Heading Goes Here</h2>
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
</article>
响应式测试。 生成短块和长块并确认同一组件两者都保留下来。
电子邮件和演示模板。 时事通讯布局和幻灯片母版需要在每个文本框中放置位置以在编写活动副本之前演示设计。
如果您的真实标题可能会影响布局 - 他们通常会影响 - 考虑手工输入看起来逼真的标题,同时将正文保留为 Lorem Ipsum。 "如何入门"强调布局的方式与 "Lorem Ipsum Dolor 不同,"如果您稍后从这些标题生成 URL 块,则 蛞蝓发生器 将它们变成干净的道路。
唯一规则:永远不要运送它
Placeholder文本已经运送到制作网站, 印刷报纸, 政府表格, 和一次, 难忘,在广播电视上。它发生是因为"我'll取代那个后来"是我们都告诉自己的谎言。两个习惯阻止它:
渐进地替换 - 当内容到达时,逐节将 Lorem Ipsum 替换为真实副本,因此布局看起来总是完整的,但假文本会稳步缩小。并运行最终搜索 - 在任何部署之前,grep 或 Ctrl-F 您的项目为 "lorem" 和 "ipsum。"需要五秒钟,这是正常星期二和带有主题行的电子邮件之间的区别 "这是什么语言。 "
常见问题
该工具是否以 "Lorem ipsum dolor sit amet" 开头??
Close,但并不完全。它以"Lorem ipsum odor amet, consectetuer adipiscing elit。" - 经典行的一个常见的可识别变体 - 打开后,将文本的其余部分填充为随机拉丁风格的单词。打开器就在那里,所以任何查看您的模型的人都会立即将其读取为占位符;随机体意味着您生成的每个块看起来都很独特。
如果没有字数选项,如何控制长度?
You用三个滑块塑造长度:段落数、平均每句单词、平均每段句子。将它们相乘,得到粗略的字数- 例如3段×8句×10个单词大约是240个单词。文本随拖随生,因此您用眼睛来大小。
为什么使用 Lorem Ipsum 而不是真正的英语占位符?
为真正的英语会吸引评论者阅读单词并判断副本,这会分散对设计的注意力。拼写拉丁语故意无法阅读,因此注意力集中在布局、排版和层次结构上 - 正是你在模型阶段试图评估的内容。
"洛雷姆 · 伊普苏姆"是什么意思?
Nothing translatable。它是西塞罗's拉丁语的争吵,故意损坏的片段,来自公元前45年,与词切碎和重新排序,所以它读起来像拉丁语,但没有真正的意义。那种无意义是重点 - 没有什么可读的,所以评论者看布局而不是词。
如何在 Word 或 Figma 中插入 Lorem Ipsum?
Microsoft Word 中,在空白行上键入 =lorem(),然后按 Enter - =lorem(3,5) 给出了三段五句话 Figma 没有内置生成器,因此使用插件或粘贴文本从此工具生成器复制到处都工作相同:文本作为纯文本着陆,并下降到任何编辑器、CMS 字段或设计工具中,保持不变。
Lorem Ipsum 有版权吗?
No。source是西塞罗的一篇2000年前的文本,牢牢地在公共领域,并且加扰的占位符形式已经自由使用了500多年,你可以把它扔进任何项目,没有许可的顾虑。
将 Lorem Ipsum 留在实时页面会伤害我的搜索引擎优化吗?
Yes。if it gets published and indexed, search engines see the meaningless content where your real, relevanted copy that should be, which weakening page's topical signals and can look like thin content。Always replaceeveral block before launch and confirm with a search for "ipsum。"
移动滑块会给我新文本还是相同的文本?
New text。每一个滑块变化都会重新洗牌随机化的单词, 所以轻推一个滑块(或者轻推它并移动它回来)是一个快速的方法, 以获得一个新鲜的块在相同的形状, 只有开头的线保持不变。
真实内容准备好后我该怎么办?
将最终副本放入,然后验证它是否适合您设计的空间。 字数计数器 确认它达到了您的长度目标,如果您将草稿与编辑进行比较,则 文本差异 工具准确地显示了发生了什么变化。
包裹起来
Lorem Ipsum 存活了五个世纪,因为它完美地解决了一个狭隘的问题:它用什么都没有的正确形状填充布局,所以你可以判断设计而不是争论单词,诀窍是用填充 适量 的无 - 与即将到来的真实内容相匹配 - 然后真正记住将其取出。
用生成您的 洛雷姆异能发生器:设置段落计数和句子密度,复制,粘贴,当真实内容落地时,用the 大小 字数计数器请将您的标题转换为干净的 URL 蛞蝓发生器并用以下内容来修改您的修订 文本差异 具。免费、私密,并且完全在您的浏览器中。
