嗨囉，我是設計師 Riven 🙂
今天我們要來聊聊的是 UI 設計上的「假文假字」，或也許你曾經看過這串英文詞彙「Lorem Ipsum」 — — 都是指暫時透過無意義文字來填滿畫面，並模擬排版設計的樣子，但你知道嗎？這個作法竟然有超過五百年的歷史！而且這些看似隨機產生的字母，竟然是有實際內容的～
而除此之外，我也會在這篇文章當中跟大家分享在 UI 介面設計上，填充中文與數字的假文假字作法。
什麼是 Lorem Ipsum
做 UI 設計的時候，應該多少都看過或用過「Lorem Ipsum」 — — 又稱 Dummy text 或 Placeholder text，中翻是假文假字，是一串沒有意義的文字，來模擬介面排版看起來的樣子。
而從歷史上來看，Lorem Ipsum 最早出現是在西元 15 世紀時，用於製作印刷用的樣品書當中，而在進入電腦數位螢幕的時代後，這樣的傳統也承襲下來，而且不只會用在印刷排版上，還會出現在我們現在比較常看到的網頁、App 等數位螢幕 UI 的介面上。
而我們可以在 Lorem Ipsum 網站中產生這些填充文字。
但根據美國拉丁學者 Richard McClintock 的研究，Lorem ipsum 原來起源於西賽羅《善惡之盡》第一章，而為了讓字母頻率與現在英語接近，以及減少可讀性，有在原文中進行刪修，最後就變成以下這段常見的 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.
（維基百科中譯：尋之欲之，乃因其苦，但事實中有痛苦可以帶來巨大的…以一小例子為例，有沒有人…劇烈運動，可以為他帶來好處？…）
而除了在網頁上產生文本並複製貼上外，我們也可以在 UI 設計軟體中安裝相關 Plugin 來高效率完成這件事情，比如說 Adobe Xd 中有 Lorem Ipsum Plugin for Adobe XD 這個外掛可以用。
Lorem Ipsum 的用途
而就跟距今約五百年前的使用方式相同，我們 UI 設計師仍會將 Lorem Ipsum 使用在模擬原型上，像是預先設計好的版面，但還尚未填入真實文案，而可能的狀況則是有客戶沒給資料、或是僅設計為複製用的版型等等。
而透過 Lorem Ipsum 我們可以預先測試字型、大小與排版，同時也能避免設計師還要另外撰寫文案的困擾⋯⋯有時候為了讓介面看起來更逼真，我也曾經花了許多時間填上文字，畢竟如果畫面上都是「這是標題」、「填入內容」等文字，老實說使用起來還滿讓我出戲的 😅 這點不知道大家怎麼看～
使用 Lorem Ipsum 的缺點
從 Lorem Ipsum 歷史上五百多年來在印刷產業上的存在，可以知道在書籍這樣大量文字排版應該是沒什麼問題了，但如果我們今天拿來在平面設計、UI/UX 設計上使用，可能很快就會遇到一些問題。
詞不達意的設計
通常在製作如名片、海報或 Banner 等平面設計的案件時，會需要先拿到真實的資訊再進行排列組合，比如說這間公司的標語、宣傳內容或行銷文案等等，如果這時候客戶說資訊還沒出來，請你先進行設計，當然我們可以先透過假資料或 Lorem Ipsum 去做，但就比較難去發想與編排適合的設計樣式及風格。
文案對設計師來說也是很重要的設計依據，乘載了包含情緒、感受以及想像等等資訊，所以說若是遇到這類實際文案從缺的狀況時，Lorem Ipsum 就較不適用，建議還是要去爭取先獲得真實文案再進行設計比較好。
還要另外解釋這是什麼
而如果是網頁、App 等這樣的數位產品，使用 Lorem Ipsum 可以快速填滿畫面，但容易會發生只有自己知道那是暫訂文案的區塊，在給別人看的時候，別人就有可能無法理解這些文字代表的是什麼，這時候就還得花額外功夫去解釋。
當然啦，如果對方一看到「Lorem Ipsum..」就知道是什麼東西，那就好做事了；但依照我的個人經驗，這通常會變成是個在會議上幫對方補充新知的聊天話題⋯😇
中文的使用難題
Lorem Ipsum 產生的假文字通常是一段一段的英文，這如果用在一般的中文介面設計上會造成幾個困擾，像是文字重心與所佔空間的不相同，以及排版時字數與長度上的誤差等等，而且如果原本是個中文語言的介面，突然滑一滑看到 Lorem Ipsum 也是滿出戲的。
因此，我想在這邊提出幾個更適用於 UI 介面設計使用的 Lorem Ipsum 技巧，期待能夠給各位讀者們一些實際幫助。
用塊狀字型結束這回合
簡單暴力的方法，相信明眼人都能夠看得出來這是暫時擋著用的文字。
除了塊狀字之外，還有潦草書寫的樣式，作為代替真實文字用的字型滿方便的，特別是在做 UI Wireframe 的時候～
而這套字體我們可以在 GitHub 上找到由 Christian Naths 所維護管理的 redacted-font 專案中下載字型檔案，安裝至電腦後就可直接在設計軟體中使用。
只是說，這樣長條塊狀的字體，還是比較適用於英文語系的文字，我們如果今天做的是中文介面，就必須注意到字體的比例，通常中文字在視覺上是比較接近於正方形的。
（ 國_國 ）
那這樣的話，如果讀者目前正在做的是中文語系的 UI 介面，需要填充塊狀字型的話，我這邊會推薦另一個 GitHub 上的專案 BLOKK，這套字型的話比較偏寬扁，比較接近中文字的字寬。
而這類塊狀文字用套用字型的方式做，好處還滿多的！比如說調整文字量、大小等等都可以比照介面上原本的文字區塊辦理，如果是自己畫一個向量長方形，那在編輯上就會很費工。
中文 Lorem Ipsum 的使用方式
那麼說到中文的 Lorem Ipsum，我們也有類似的工具可以產生假文假字嗎？
說來好笑，但我覺得之前在臉書上流行過的 唬爛產生器 還滿好用的，網路上很多人開玩笑說這拿來交報告很好用，但我覺得這個拿來做 UI Wireframe 更好用⋯
而產生出來的看似有意義卻無意義的文字，閱讀起來剛好介於看得懂與看不懂之間，而且也省去設計師要自己想文案的麻煩。
數字專用字型 Norum Ipnum
而除了英文與中文之外，介面上最常出現的應該就是數字了，剛好前陣子全球知名的創新設計公司 IDEO 就發佈了數字專用的假字字型 Norum Ipnum， 讓提案階段的討論可以更聚焦在介面設計上，而不是那些無關痛癢的數字們。
而這套字型下載安裝後，我們就可以在如 Adobe Xd 這樣的 UI 設計軟體上，輸入數字並直接轉換成模擬用的文字；目前一共有兩款，第一個有點像是古老的楔形文字，第二個則是很像小時候太陽能計算機快沒電時顯示的數字，如果你不知道那台是什麼，就當我沒說吧⋯⋯
重點總結
回想當初第一次看到 Lorem Ipsum 時，還像個傻子一樣直接複製貼上到介面上使用，結果只是徒增溝通麻煩而已。
而這篇文章就是希望可以幫助大家理解 Lorem Ipsum 的由來，最早是用於印刷排版的大量內文使用，而現代如果我們設計師要使用在 UI 介面上，勢必要讓它適應在數位體驗上面才行。
所以這次幫大家整理了 Lorem Ipsum 套用在 UI 設計上會遇到的幾個課題，以及包括塊狀字型在內的相關解決方法，同時補充了中文與數字的假文假字的做法與工具，期待可以跟大家一起把設計做好，提早下班～ 😄
我是 Riven，我們下次見啦～掰掰！
