给一个后台工单列表出稿时,右侧详情区我填的是拉丁文占位。评审会上五个人,有三位盯着那段文字问"这文案就是这样吗",另一位问"这段要不要加粗"。而真正的文案当时还压在市场部手里,说下周给。
另一次是我自己偷懒:标题位随手打了"标题占位"四个字,前端照着这四个字的宽度定了列宽,上线后真实标题有 13 个字,第一行直接把表格撑歪了。这两件事合起来教会我一件事——占位文本不是"随便填点字",它填的是体量,而体量是要算的。
占位文本只解决"装不装得下"这一件事
我现在给它的定位很窄:替代的不是文案,是文案的长度。它能提前定下来三件事——正文要几行、卡片要多高、表格列宽给多少;它定不下来三件事——语气、术语的真实长度、以及断词会落在哪。第四点最阴,因为断词位置只在真实文字出现时才暴露。
至于评审会上那三位盯着拉丁文提问的同事,我认为那是占位文本失效的信号:读者把它当内容读了。我的处理不是换一种占位文字,而是分两版走——讨论结构那一版用拉丁文,故意让人不看意思;讨论落位那一版直接换成中文占位,字数按真实文案的等量给。
段数与句数怎么换成体量
我用的生成方式能设两档:段落数量 1 到 20,每段句子数 1 到 10,另外可以选是否以经典那句开头,以及切拉丁文还是中文占位。真正做版面前我要的是"这版会产出多少字",所以我拿经典那段自己量了一次:连续四句共 69 个词、445 个字符,平均每句 17.2 词、平均每词 6.39 个字符;第一句单独是 19 词、123 字符。用这组均值乘出来的对照如下,它只是尺度参考,不是承诺。
| 设定 | 句子数 | 约合词数 | 约合字符数 |
|---|---|---|---|
| 1 段 × 1 句 | 1 | 17 | 111 |
| 1 段 × 5 句 | 5 | 86 | 556 |
| 3 段 × 3 句 | 9 | 155 | 1001 |
| 8 段 × 4 句 | 32 | 552 | 3558 |
| 20 段 × 10 句 | 200 | 3450 | 22240 |
最后一行是我拿来压测列表页滚动用的,平时给一个卡片填正文,我用的是 1 段 × 2 到 3 句。取量的顺序我反过来了:先量真实文案的汉字数,再除以每段想给的句数,把设定倒推出来,而不是"看着像三段就填三段"。这一步我通常是 Lorem Ipsum 生成器 和记事本之间来回两次,因为每段的句数要能被真实内容对齐。
中文占位和拉丁占位测不出同一个版面
这是我觉得最容易翻车的地方。每行能装多少,算法是"内容宽除以单字宽",中文每个字约占 1 个字号宽,拉丁文字母平均约半个字号。以 360px 容器、14px 字号、行高 1.6(约 22.4px)为例:中文每行约 25 字,拉丁每行约 51 字符,按每词 6.4 个字符算约 7 词。
| 占位内容 | 体量 | 按每行容量算 | 实际占高 |
|---|---|---|---|
| 一句中文占位 | 41 汉字 | 1.64 行,进 2 行 | 约 45px |
| 拉丁经典第一句 | 123 字符 | 2.41 行,进 3 行 | 约 67px |
| 正文 200 汉字 | 200 字 | 8 行 | 约 179px |
| 正文 80 个拉丁词 | 约 590 字符(含空格) | 11.6 行,进 12 行 | 约 269px |
两个后果我踩过好几回。第一,中文没有空格,浏览器能按字断行,几乎不会横向溢出;拉丁文只能在空格处断,遇到网址、长标识符、型号编码这类不带空格的串,最后一行会提前空出来,真实行数比按字符估的多一到两行。第二,同一段内容用拉丁文摆和用中文摆高度不一样,所以只做一版等于没测。卡片如果按预留 3 行(67px)做,200 汉字要 179px,多出来的 112px 要么溢出要么被截断——这正是评审该当场决定"给几行、要不要展开"的时刻,而不是上线后补样式。
我自己定的三条规矩
一、高危位置不用占位文本。标题、按钮文字、表格单元格、导航项这几处,我直接放候选里最长的那条真实文字,哪怕它还没定稿。占位文本只放正文段落这种"长度可以近似"的位置。
二、不用 x、TODO、"这里是标题"这类字符。它们体量接近零,会让做界面的人按零宽去定列,问题全部延到上线那天。要填就填够字数。
三、成批贴进模板前统一加工。我用 文本行操作 给每行加前后缀,前缀填 <p>、后缀填 </p>,几十行占位一次就能变成可以直接粘进模板的片段;再交给 字数统计 核对占位汉字数和真实文案汉字数的差,差在三成以内我认为这版占位测得准,差得更多就重来。
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>此处放入与版面等量的中文,不必急着确定措辞。</p>
最后那行中文占位是我自己写的,41 个汉字,专门用来跟拉丁版对着跑:同一套 CSS、同一个宽度,两版并排放,哪一版溢出一眼就看出来了。
Q:占位文本能直接交上线吗?
不能。它只保证体量对,语气、术语、关键信息都得换掉;留着它上线,检索侧还会把这些段落当成无意义内容。
Q:为什么不干脆等真实文案?
因为版面必须现在定。等文案就意味着行数、卡片高度、列宽全部悬着,前端要么不做要么返工。占位文本换来的是"现在就能撞出行数问题"。
反过来说,如果真实文案两天内能到,而版面上要放的只有标题和按钮,那就不值得用占位——直接留空或者放最长候选,成本更低。
Q:中文占位和拉丁占位要都跑一遍吗?
产品要发两种语言版本就必须都跑;只做中文版本,也建议用拉丁版跑一次极端宽度,因为不带空格的长串最能暴露溢出。
Q:段数和每段句数到底怎么定?
先量真实文案的汉字数,除以容器每行容量得到行数,再按"每段我准备给几行"倒推句数。我一直避免按"看着像三段"来填,那种填法几乎每次都要返工。
Q:评审还是有人盯着占位文字提问怎么办?
我会当场把那一版换成中文占位,把讨论拉回结构。如果换完还是纠缠措辞,说明真实文案的截止日该往前挪,问题不在占位文本上。
回到那次评审会。后来我交的是两版:一版全是拉丁文,一版按真实字数等量替换成中文占位,卡片高度那张表就是我拿 360px 容器一行一行算出来后贴到设计稿旁边的。市场部的文案最后到了 11 个字一条,比拉丁版占的宽度小,但比"标题占位"四个字大得多——表格列宽按 11 字那版定的,上线那天没有撑歪。占位文本的作用就在这里:它不是替文案存在,而是让版面在错误发生之前先把错误摆出来。