消滅 Lorem 吧！仿真內容的介面設計
從前我也是 Lorem Ipsum 的愛用者，不管在製作 wireframe 還是 mockup，我都喜歡使用 Lorem Ipsum 來填滿畫面上需要文字的地方。
但現在我盡可能地的避免使用它，取而代之的是使用真實（或近乎真實）的內容來做設計。
關於 Lorem Ipsum
Lorem Ipsum 是一段沒有意義的文字，方便設計師模擬文字在畫面上填滿時的樣子，也就是設計師用於排版時使用。這裡擷取一段 Lorem 文字：
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium ante erat, vitae sodales mi varius quis. Etiam vestibulum lorem vel urna tempor, eu fermentum odio aliquam. Aliquam consequat urna vitae ipsum pulvinar, in blandit purus eleifend.
雖然他沒有什麼意思，但它呈現了語句的節奏性，讓我們看起來像是一段一段文字方塊。
過去都會透過下面幾種方法使用 Lorem Ipsum ：
- 找到網頁，直接複製貼上
- 使用 Lorem Ipsum 產生器
想了解更多可以透過這個連結：http://www.lipsum.com/
為什麼我不再使用 Lorem Ipsum
問題一：設計上的謬誤
有位男子走進深夜食堂對著老闆說到：「老闆我要一碗牛肉麵。」
老闆：「啊，我今天還沒準備牛肉… 。」
男子：「沒關係，你可以先把麵煮好，牛肉之後再加。」
老闆：「… 請你出去。」
很多時候設計師會收到奇怪的需求，例如：
同事 ：「我需要設計一張文宣，上面要宣傳這次活動，然後我希望看起來專業。」
設計：「那文案呢？有文案可以看看嗎？」
同事：「還沒出來欸… 你先把日期、地點放上去排一下。」
設計：「你來排。」
上述的事情都跟設計有關，只是我很喜歡拿吃的作比喻。
今天的牛肉部位口感偏軟，那是不是麵條要更彈牙有嚼勁呢，牛肉麵中的各項元素都到位，才能完成一碗終極的牛肉麵。
文案的重要性
文案對設計師而言也是一個重要的元素 ，而文字本身也是有表情的，文字可以承載訊息讓觀看的人感受到我們要表達的不管是情感、個性等等，最後與畫面上各種元素相互作用而形成完整的視覺，帶給觀看的人完整的體驗。
1. 2018/09/17，我們結婚了
2. 恭喜，您獲得紅色炸彈乙枚。 2018/09/17，即將引爆。
上述兩種文案給人不同感受，而設計師會透過文字給他們的感覺設計介面與視覺。
備註：當然，在設計系統式與重複組件較多的網站，因為既有的 guideline 規範，文案對介面設計的影響力較不大。
如果是活動宣傳式的網站，文案影響力就大大增加。
解釋完文字的重要性後，回到 Lorem Ipsum 上。
當設計師沒拿到文案開始做設計，所以會使用 Lorem Ipsum 當做假想文案排版，這就好像煮牛肉麵時沒牛肉，先拿豬肉燉的湯當湯底，牛肉就先用豆腐代替，等牛肉煮好就放上去。
使用 Lorem Ipsum 是一種延後的處理方式，就好像木工畫好記號，等等再來釘釘子。
如果在 mockup 用上 Lorem Ipsum 並交出去開發，那就是一個不負責任的設計方式。
問題二：Lorem 到底代表什麼
使用 Lorem 設計後，我腦中知道這段 h1 的 Lorem 代表什麼意思，但在開會討論時…
不管是討論 wireframe 或是 mockup 我需要特別解釋這一頁的功能是什麼，並解釋 h1 字這邊顯示的是公司名稱，然後 h2 字是顯示公司的標語，再來這邊是描述公司目前的狀態等等。
問題三：中文字與拉丁字母的差異
完成畫面之後，與 mockup 有些差距。
中文字與拉丁字母所佔的空間不同，中文字是以方形建構字體分佈，而拉丁字母（英文）則是以基線 baseline 發展每一個字體，會依照字母不同而在空間上有不同的分佈。
不同的空間分佈在視覺上會造成不同的視覺重心。
所以我使用 Lorem Ipsum 進行中文排版時，最終中文內容的成品會與 mockup 有些差距。
問題四：容易忽略文本極端情形
設計時如果使用 Lorem 在標題上，或許會忽略真實內容的文本長度。
用 Lorem Ipsum 給我快速完成 mockup 與 Wireframe 的能力，我不用去想內容是什麼，產生一串文字作為假設會有的內容，然後開始調整文字與介面之間的比例。
真的不要用 Lorem Ipsum 嗎？
每一個工具都有存在的目的，Lorem Ipsum 在排版上還是很好用，但要在對的時機使用，我認為原則上只要會涉及和使用者互動的情形，都是不適合的使用時機。
可使用：純粹展示 UI 的動態互動
網路上會有很多酷炫的 UI 轉場動畫與互動，如果只是要呈現畫面與元件如何移動或轉場，可以使用 Lorem Ipsum。
除了 Lorem Ipsum 的選項，我還推薦替代方案：
1. BLOKK
2. Redacted Font (由 R+ 分享)
BLOKK 如其名是一款塊狀的字型，我認為這個更適合取代 Lorem，因為 BLOKK 減少許多不必要的雜訊。
Redacted Font 可以說是 BLOKK 的進化版本，受到 BLOKK 啟發但修正了 BLOKK 字母寬度過大的問題，平均了字母的寬度；除此之外也提供了 Regular、Script、Script Light 與 Script Bold 等不同字體，在呈現上有更多樣的選擇。
Lorem 乍看之下還是像文本，雖然比較擬真，但是會讓使用者試圖閱讀文本而模糊了展現轉場動畫的目的。
如果文本都變成塊狀，使用者了解這部分是文字，但不會閱讀而會花更多時間仔細觀察轉場動畫。
可使用：非常確定取代大篇幅文本（英文）
使用前提：英文排版。
如果純粹是長篇文章但內容卻還沒準備好，你可以先透過 Lorem 設計 h1、h2 … 超連結等等字級大小與樣式。如果你稍微有玩排版樣式，那就要做好心理準備套用真實的文案後的細節調整。
不要用：製作 Mockup 與 wireframe 時
切記，貪圖一時方便，未來還是要還的。
使用 Lorem 製作 mockup 與 wireframe 後，不管是開會還是後期開發，你都需要向工程師與其他成員解釋這裡的 Lorem 與那裡的 Lorem 代表什麼，與其花這些時間，不如一開始就使用具有意義的真實資料。
不要用：Prototype 時
Prototype 時就是要測試整體的流程與互動，這時候再使用 Lorem Ipsum，使用者還需要先了解這段文字代表什麼意思。
千萬不要使用，你不會想要開會討論會變成解碼大會。
沒有真實資料怎麼辦？
自己想文案先擋擋
老實說自己想文案真的很累，尤其是文筆很差的在下。
畫 wireframe 的時候，自己想文案的好處在於釐清頁面的目的與畫面上所需元件有哪些，也會發現功能上的缺漏。
這部分我推薦：Storyframes before wireframes
如果在畫 wireframe 前，先確立了畫面的 stories，那麼 wireframe 上的每個頁面，功能與目的會更明確。
畫 mockup 的時候，透過想文案，設計師更清楚如何安排視覺與畫面的版面，因為文案與畫面是同步的，所以製作出來的畫面更協調。
好用的 Craft Plugin （英文）
Craft 是由 Invision 所開發的 Sketch Plugin。
當 Craft 推出的時候，我立馬捨棄 Lorem 成為忠實使用者。
注意：Craft 內建的內容沒有支援中文。內建文本
內建的文本讓你可以快速地套用在 Text layer 上，有貼心地分類文本類型：人名、日期、地區名等等。
還是找不到你想要的內容嗎？
另外還可以透過 Craft 瀏覽網頁點擊網頁元件後直接套用文字，網頁改版設計時真的很方便。
絕對要注意：使用 Craft 時還是要注意極端文本的情形，例如：名字總是會有超級長的呀，所以設計時還是要想清楚極端值的處理。
最後
因為這篇最主要是要探討使用 Lorem Ipsum 所衍生的問題，對 Craft 這個 Plugin 沒有太多介紹，之後會再介紹 Craft。
