給一個後台工單列表出稿時,右側詳情區我填的是拉丁文佔位。評審會上五個人,有三位盯著那段文字問「這文案就是這樣嗎」,另一位問「這段要不要加粗」。而真正的文案當時還壓在行銷部手裡,說下週給。
另一次是我自己偷懶:標題位隨手打了「標題佔位」四個字,前端照著這四個字的寬度定了欄寬,上線後真實標題有 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 字那版定的,上線那天沒有撐歪。佔位文字的作用就在這裡:它不是替文案存在,而是讓版面在錯誤發生之前先把錯誤擺出來。