Lorem Ipsum — — 用在 UI 介面設計上的假文假字。

Image for post
Image for post
原文刊載於個人網站 https://riven.design/1940

什麼是 Lorem Ipsum

做 UI 設計的時候,應該多少都看過或用過「Lorem Ipsum」 — — 又稱 Dummy text 或 Placeholder text,中翻是假文假字,是一串沒有意義的文字,來模擬介面排版看起來的樣子。

Image for post
Image for post
Lorem Ipsum 用於代替真實文案

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

維基百科中譯:尋之欲之,乃因其苦,但事實中有痛苦可以帶來巨大的…以一小例子為例,有沒有人…劇烈運動,可以為他帶來好處?…)

Lorem Ipsum 的用途

而就跟距今約五百年前的使用方式相同,我們 UI 設計師仍會將 Lorem Ipsum 使用在模擬原型上,像是預先設計好的版面,但還尚未填入真實文案,而可能的狀況則是有客戶沒給資料、或是僅設計為複製用的版型等等。

Image for post
Image for post
Lorem Ipsum 就像歷史本文,就算看不懂內容也能知道那上面有東西。–《海賊王》
Image for post
Image for post
開發期間太過功能性的文字讀起來很出戲餒

使用 Lorem Ipsum 的缺點

從 Lorem Ipsum 歷史上五百多年來在印刷產業上的存在,可以知道在書籍這樣大量文字排版應該是沒什麼問題了,但如果我們今天拿來在平面設計、UI/UX 設計上使用,可能很快就會遇到一些問題。

詞不達意的設計

通常在製作如名片、海報或 Banner 等平面設計的案件時,會需要先拿到真實的資訊再進行排列組合,比如說這間公司的標語、宣傳內容或行銷文案等等,如果這時候客戶說資訊還沒出來,請你先進行設計,當然我們可以先透過假資料或 Lorem Ipsum 去做,但就比較難去發想與編排適合的設計樣式及風格。

還要另外解釋這是什麼

而如果是網頁、App 等這樣的數位產品,使用 Lorem Ipsum 可以快速填滿畫面,但容易會發生只有自己知道那是暫訂文案的區塊,在給別人看的時候,別人就有可能無法理解這些文字代表的是什麼,這時候就還得花額外功夫去解釋。

中文的使用難題

Lorem Ipsum 產生的假文字通常是一段一段的英文,這如果用在一般的中文介面設計上會造成幾個困擾,像是文字重心與所佔空間的不相同,以及排版時字數與長度上的誤差等等,而且如果原本是個中文語言的介面,突然滑一滑看到 Lorem Ipsum 也是滿出戲的。

用塊狀字型結束這回合

簡單暴力的方法,相信明眼人都能夠看得出來這是暫時擋著用的文字。

Image for post
Image for post
在 Adobe Xd 中直接將文字(英文)套用塊狀字型
Image for post
Image for post
滑到下面按 Download the Redacted Font 就可以下載。
Image for post
Image for post
英文與中文在介面上的視覺佔比不同
Image for post
Image for post
提醒此字型要套用在英文文字上才會有效。

中文 Lorem Ipsum 的使用方式

那麼說到中文的 Lorem Ipsum,我們也有類似的工具可以產生假文假字嗎?

Image for post
Image for post
輸入主題與大概字數就會自動產生相關文字
Image for post
Image for post
將唬爛文字用於 UI 介面上意外合適。

數字專用字型 Norum Ipnum

而除了英文與中文之外,介面上最常出現的應該就是數字了,剛好前陣子全球知名的創新設計公司 IDEO 就發佈了數字專用的假字字型 Norum Ipnum, 讓提案階段的討論可以更聚焦在介面設計上,而不是那些無關痛癢的數字們。

Image for post
Image for post
Use These ‘Dummy Numbers’ When Prototyping With Data
Image for post
Image for post
套用了 Norum Ipnum 的數字

重點總結

回想當初第一次看到 Lorem Ipsum 時,還像個傻子一樣直接複製貼上到介面上使用,結果只是徒增溝通麻煩而已。

Image for post
Image for post

Written by

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design

Get the Medium app