Typography in Mobile Apps——UI設計師的必修課

-卷首-

本篇文章聊了聊在移動應用（通常指手機 APP）中如何編排文字。是的，是篇譯文，所有內容都是基於西文環境的。近來有一些設計師朋友和學生總會問到我為什麼這類文章都是基於西文的，這似乎對身在中文世界的我們不太實用。

其實，我想說~

第一，國內這類文章的資源有限，可以說非常之少。

第二，雖然這些文章基於西文體系，但對中文排印依然有不小的指導意義（字重、字體、行長、行高、對比、層級、易認性、易讀性……等等等等，都是相通的~人類眼睛都是一樣的嘛，視覺感受也是趨同的，無非在一些具體的參數上會有細小差異，但其根本原理是通的）

原文地址：https://medium.com/thinking-design/xd-essentials-typography-in-mobile-apps-7048abfb1cc5

傳達 / 溝通在設計中起著至關重要的作用——您的產品必須清楚地傳達其意圖和目的。當我們談論傳達時，通常意味著文本，因為您 APP 中的文本的目的是建立應用程序和用戶之間的連接，並幫助您的用戶實現目標。排版在這個過程中起著至關重要的作用; 良好的排版使閱讀的行為毫不費力，而糟糕的排版會趕走你的用戶。

您如何利用排版為您和您的用戶所用，而不是讓他們覺得難受？不幸的是，關於移動版排版的最佳做法有很多矛盾的意見，每種情況都不會有一套嚴格的規則。不過，您可以通過以下幾種方法來確保排版符合內容，並提高移動設備的可讀性。

字型大小、行長和間距

為移動設備設計時，最重要的考慮因素之一是字體大小，行長和間距。文字必須足夠大才能輕鬆閱讀，行與行之間應有足夠的空間。

- 字體大小

字型大小大小對於在屏幕上的閱讀體驗至關重要！用戶在閱讀過小的文字時時更耗費時間的。太小的文本可能會導致讀者疲勞，因為當一次要閱讀太多字元時，通常很難找到文本行的開頭和結尾。因此，用戶將略過大部分信息。這對於移動設備尤其如此，小小的字母出現在小而明亮的屏幕上是讓用戶很頭疼的。

左：幾乎重疊的文字。右：良好的間距有助於可讀性。

圖片來源：Apple

但是，太大的文字也會導致問題。如果行長太短，眼睛就不得不經常回去（找下一行的開頭，譯者注），這會打破讀者的節奏。這使得信息更加難以消化。

為了使你的文字清晰可辨，你需要在字型大小和行長之間找到平衡。

小竅門： 字型大小的選擇沒有公式，但你可以參照「蘋果」和「谷歌」的設計指南，他們非常實用，你可以將它們作為設計起點。

對於 iOS，您應該使用至少 11pt 的文字，以便在正常的觀看距離內無障礙地閱讀，而無需縮放。

Android 的最小可讀字體大小為12 sp，但強烈建議至少使用 14 sp 作為主文本。

- 行長

通常而言，就視覺舒適度上來說最佳行長大約是 50-60 個字元，包括空格。這個參數對於桌面應用是很好的，因為 60 個字元幾乎不會碰到屏幕的邊緣，但是在大多數移動設備上（手機）60 個字元就超出了屏幕的邊界。在移動屏幕上也有 60 個字元為一行的，但通常字體都太小，無法容易地閱讀。

手機屏幕上沒有普遍接受的測量標準，但是行長的一個很好的經驗法則是使用每行 30-40 個字元。

左：一行擁有太多的字元導致視線難以「跟蹤」。

圖片來源：usertesting

實用提示：字體大小通常比行長更重要，因此您應該先確定良好的字體大小。如果它可以與最佳行長相結合，那顯然是理想的解決方案。

- 間距

當談到手機屏幕時，空間是一個重要的考慮因素：屏幕尺寸越小，就越要給文字以足夠的空間讓它們「呼吸」。通過增加文本空間（增加行高或字母間距）你就可以讓用戶閱讀體驗良好以便他們你的軟體做更好的交互。

實用提示：當文字較小時，適當增加他們的間距會更加易讀。因此，在行間增加一些額外的間距（大約 10％ 或 20％）是比較理想的。

左：幾乎重疊的文字。右：良好的間距有助於可讀性。

圖片來源：Apple

「考慮使用段落間距，因為段落可能在較小的屏幕上看起來更長。這個額外的空間讓讀者覺得文本不是太密集，而且會更容易閱讀。「

?

?—?Carrie Cousins

iOS 應用中的良好間距示例。

圖片來源：Medium

- 顏色對比

在設計移動設備時，對比度特別重要，因為在戶外使用設備時可能會受眩光影響。

關於顏色對比的兩個最常見的誤解是：

第一個誤解是太多的對比度會讓眼睛更難受，大概灰色陰影更容易接受。因此，我們在灰色或白色背景上使用灰色文字。但是，與背景顏色太相似的文字卻很難閱讀。見下圖。

這個頁面的中性灰色在室內看起來很不錯，但是在室外看起來並不好，因為屏幕上的低對比度與屏幕眩光一樣，使得文字難以閱讀。

圖片來源：usertesting

第二個誤解是對比度越高越好。下圖為例。在實踐中，具有太大對比度的文本也可能難以閱讀。對於黑暗背景配以淺色文字尤其如此。例如，迫使用戶在黑色背景上長時間閱讀白色文本可能會使用戶的眼睛不適。

視力再好的人，在黑色背景上盯著白色文字太長時間也會感到眼睛疲勞。

再強調一下：在 APP 中排版，最重要就是要考慮可讀性。而設計師常常喜歡使用低對比度的色彩搭配，因為低對比度使得外觀美觀而和諧，但美觀並不總是具有最佳的可讀性。當文本很難閱讀時，用戶體驗一定不會好到那裡去，設計似乎也沒起到它該有的作用。

實用提示： 合適的對比度是一件棘手的事情。由於屏幕之間差異，在設計師的顯示器上看起來不錯的顏色在用戶的屏幕上可能會有很大的不同。然而，這並不是代表沒有希望。這有一個很好的參考：W3C』s Web Content Accessibility Guidelines.

W3C 設置對比度的最低標準：顏色與另一種顏色的差異（通常寫為 1：1 或 21：1，比率越大，相對亮度的差異越大）。W3C建議正文文字和圖像文字的對比度如下：

與其背景相比，小文本的對比度應至少為 4.5：1。比例為 7：1 是優選的。

大文本（14點/ 18點或以上）與背景的對比度應該至少 3：1。

這些文本行不符合顏色對比度建議，難以閱讀。

這些文本行遵循顏色對比度建議，它們是清晰可辨的。

為文字確保足夠的對比度，以獲得最佳的可讀性。您可以使用對比度工具來快速測量它們。

一個 APP，一個字體！

您應該嘗試在整個 APP 中使用單一字體。混合幾種不同的字體會使你的應用程序看起來破碎並很 LOW。當設計一個應用程序時，想想如何通過字重和字型大小使排版牛逼起來，而不是用很多不同的字體。

左：混合幾種不同字體，很 LOW…… 右：使用一種字體，用不同的樣式和大小。

圖片來源：Apple

實用提示：最安全的做法是使用系統默認字體。

蘋果公司使用 SF 字體家族，在所有平台上提供一致的閱讀體驗。Roboto 和 Noto 字體是Google Android 和 Chrome 上的標準字體。

iOS 使用舊金山作為拉丁語，希臘語和西里爾字母的系統字體。

圖片來源：Apple

Roboto字體。

圖片來源：Material Design

如果您的設計不考慮標準字體，那麼請考慮選擇易讀的字體。保證字體在不同設備上的可讀性非常重要。在這裡您可以找到大量易讀的字體：Adobe Typekit

圖片來源：Adobe Typekit

測試的重要性

不要忘記測試。一旦您設計完成，絕對有必要在時下最流行的設備上進行測試。您測試的設備越多，您將越了解不同用戶使用不同設備時看到的情況。如果任何一個測試參與者在閱讀文字時遇到麻煩，那麼，可以肯定的是，當設計流到一般用戶手中時他們也一定會遇到相同的問題。

實用提示：您應該使用「A / B 測試」來了解您的排版方式。

註：「A/B 測試」，即提供兩個不同版本給用戶選擇，以測試功效。

結論

正如 Oliver Reichenstein 在他的文章中所說的那樣，網頁設計 95％ 的工作是排版：

「優化排版就是優化可讀性、可訪問性、可用性，以及整體圖形平衡。

此文展現了可讀性的重要性。排版是設計的骨幹。通過優化您的排版，您也改善了您的 UI。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！