有關UI設計字體(tǐ)和排版的詳細而全面的指南(nán)

有關UI設計字體(tǐ)和排版的詳細而全面的指南(nán)

無論您是進行網頁設計還是應用程序設計，文本内容始終可以占據整個布局的近80％。 因此，了解字體(tǐ)和字體(tǐ)對于UI設計人員(yuán)至關重要。 您必須始終将内容的可讀性放(fàng)在首位，以考慮和權衡選擇的字體(tǐ)和排版。
 
  15xl20160413
 
  字體(tǐ)的基本術語
  了解字體(tǐ)設計的基本術語非常重要。 這些術語通常出現在介紹字體(tǐ)設計的相關文章中(zhōng)。 例如，x高度（X-height）表示從字母基線到最短字母頂部的距離(lí)。 當X高度的比例較大(dà)時，可以增加清晰度。
 
  20xl20160413
 
  漢字字形
  在大(dà)多數情況下(xià)，我(wǒ)們選擇使用系統自己的字體(tǐ)，例如Microsoft Yahei，Arial，Heiface等來定義标題和内容，但是有時，當我(wǒ)們在進行徽标和橫幅設計時，需要将字體(tǐ)轉換爲 來達到更加理想的效果。 這時，我(wǒ)們需要掌握漢字的字符結構和一(yī)些最基本的設計原理。
 
  22xl20160413
 
  襯線和非襯線字符
  西方國家的字母系統分(fēn)爲兩個主要家族：襯線（serif字體(tǐ)）和無襯線（sans serif字體(tǐ)）。  Serif（下(xià)圖爲宋代，Times New Roman）指的是字符筆觸的開(kāi)頭和結尾處的額外(wài)裝飾，并且筆觸的粗細會根據垂直和水平而變化。 相反，無襯線字體(tǐ)（下(xià)圖中(zhōng)的Siyuan Heibody，Helvetica）沒有這些附加的裝飾，并且筆觸粗細大(dà)緻相同。
  襯線字體(tǐ)更易于識别，因此可讀性更高。 相反，無襯線字體(tǐ)更引人注目。 一(yī)般而言，需要強調和突出顯示的小(xiǎo)文本通常使用無襯線字符，而在長文本中(zhōng)，爲了便于閱讀，通常使用襯線字符。 在實際應用中(zhōng)，由于中(zhōng)文宋體(tǐ)和西方襯線體(tǐ)，中(zhōng)國黑人體(tǐ)和西方無襯線體(tǐ)在風格和應用場景上相似，因此通常一(yī)起使用。
 
  5xl20160413
 
  排版建議
  在充分(fēn)了解字體(tǐ)布局技巧之前，您需要确保可以簡單清晰地顯示内容。 出色的文本和布局使我(wǒ)們更願意閱讀，因此最好注意設置的字體(tǐ)和布局是否易于閱讀，然後考慮對其進行美學修改。 我(wǒ)們可以參考以下(xià)英文指南(nán)：5種優秀排版原則，并将這些原則應用于我(wǒ)們的App和Web設計。
  iOS中(zhōng)的系統字體(tǐ)
  随着iOS 9系統和EI Capitan系統的發布，當前的系統字體(tǐ)已更改爲Apple設計的[San Francisco]。  iOS仍在其他地方使用SF UI，在Apple Watch中(zhōng)仍使用SF Compact。
 
  11xl20160413
 
  舊(jiù)金山有兩種類型的大(dà)小(xiǎo)：SF UI文本和SF UI顯示。 文本模式适用于小(xiǎo)于20點的大(dà)小(xiǎo)，顯示模式适用于大(dà)于20點的大(dà)小(xiǎo)。 當您在應用中(zhōng)使用San Francisco時，iOS将在适當的時間自動在文本模式和演示模式之間切換。
  注意：如果使用諸如Sketch或Photoshop之類的工(gōng)具進行設計，則當将字體(tǐ)設置爲20點或更多時，您需要切換到顯示模式。  iOS會根據字體(tǐ)大(dà)小(xiǎo)自動調整San Francisco的單詞間距。
 
  19xl20160413
 
  選擇正文字體(tǐ)
  爲正文選擇正确的字體(tǐ)是最重要的。 确保選擇可讀，幹淨且易于閱讀的字體(tǐ)。 我(wǒ)推薦的常見英文字體(tǐ)是：San Francisco，Helvetica Neue，Avenir Next，Open Sans，Museo Sans。 有中(zhōng)文字體(tǐ)，中(zhōng)文細黑，絲圓粗體(tǐ)。
 
  18xl20160413
 
  字體(tǐ)大(dà)小(xiǎo)
  iPhone，iPad，iWatch上設置的正文字體(tǐ)不應小(xiǎo)于11pt，以便可以正常讀取。 我(wǒ)們建議的正文文字大(dà)小(xiǎo)應爲15-18pt。

字型粗細
  當我(wǒ)們設置較大(dà)的字體(tǐ)以獲得更好的可讀性時，我(wǒ)們還應該相應地減少字體(tǐ)的字體(tǐ)粗細（厚度），考慮使用“淺”，“細”或“超細”。 超重字體(tǐ)會過于醒目，這将影響其他内容的顯示。
  當字體(tǐ)大(dà)小(xiǎo)爲12-18pt時，使用常規，18-24pt，使用淺色，24-32pt，使用細化，當字體(tǐ)大(dà)小(xiǎo)超過32pt時，建議使用Ultralight。 以上是推薦值。 您應該根據不同字體(tǐ)的顯示效果進行設置，以使文字内容清晰細膩，從而保持良好的閱讀體(tǐ)驗。
 
  7xl20160413
 
  現代字體(tǐ)具有多種字重設置：常規，輕，細和超輕
  合理設置行高，以便文本可以呼吸
  前導應設置在字體(tǐ)大(dà)小(xiǎo)的120％到145％之間。
 
  3xl20160413
 
  在右邊的示例中(zhōng)，行高設置爲與100％的字體(tǐ)高度相同，而在左邊的示例中(zhōng)，我(wǒ)将其設置爲145％。 它們的顯示效果有非常明顯的差異。 當單詞數量進一(yī)步增加時，您會發現閱讀行距太短的大(dà)段落會很累。 合理設置行高也是一(yī)項空白(bái)技術，可以增強用戶的閱讀體(tǐ)驗。
  每行45-90個字符
  行長是指單行文本的長度。 如果一(yī)行中(zhōng)的單詞過多，則文本内容将難以閱讀。 英文字符通常适合45-90個單詞，而中(zhōng)文35-60個單詞适合。 合理的線長使用戶在兩行之間跳動時感到輕松愉快，否則會增加閱讀負擔。
 
  8xl20160413
 
  字體(tǐ)樣式
  字體(tǐ)樣式對于提高可讀性和快速浏覽非常重要。 一(yī)般原則是，修改後的文本不應超過整個文本的10％。 如果通過修改強調所有文本，則不強調。 當然，不應一(yī)次使用三種以上的強調樣式。 換句話(huà)說，不要在同一(yī)段文本中(zhōng)同時使用它，顔色，字體(tǐ)更改，大(dà)小(xiǎo)，下(xià)劃線，斜體(tǐ)，粗體(tǐ)。
 
  12xl20160413
 
  找到合适的字體(tǐ)
  大(dà)多數商(shāng)業字體(tǐ)價格昂貴，但也有許多免費(fèi)的出色字體(tǐ)。 您隻需要從中(zhōng)選擇自己喜歡的字體(tǐ)并将其應用于您的設計即可。 這裏有一(yī)些出色的字體(tǐ)網站。
  Google字體(tǐ)（需要階梯）
  在Google字體(tǐ)，您可以免費(fèi)下(xià)載自己喜歡的字體(tǐ)，并根據需要在項目中(zhōng)使用它們。 由于在iOS中(zhōng)使用其他字體(tǐ)的唯一(yī)方法是将字體(tǐ)文件導入系統，因此Google字體(tǐ)的下(xià)載功能非常有用。  Google字體(tǐ)包含1400多種不同的字體(tǐ)，其中(zhōng)包括最著名的：Open Sans和Roboto字體(tǐ)，它們是Android系統使用的默認字體(tǐ)。
 
  1xl20160413
 
  您可以在Mac上使用SkyFonts将字體(tǐ)自動同步到桌面。
 
  2xl20160413
 
  如果您需要直接在網站中(zhōng)使用Google Web字體(tǐ)，則可以選擇360代理來訪問Google的免費(fèi)字體(tǐ)庫。 以下(xià)說明非常簡單。
 
  6xl20160413
 
  打字工(gōng)具
  具有許多出色的字體(tǐ)。 這對于剛剛起步的人非常有用。 我(wǒ)非常喜歡Proxima Nova和Museo字體(tǐ)。 它還包括中(zhōng)文字體(tǐ)，例如Siyuan Heibody。
 
  17xl20160413
 
  有字體(tǐ)
  對于需要使用許多中(zhōng)文字體(tǐ)的用戶，擁有字體(tǐ)是一(yī)個不錯的選擇。 目前，它是中(zhōng)國優秀的Web字體(tǐ)服務平台，包含大(dà)量優秀的中(zhōng)文字體(tǐ)。
 
  10xl20160413
 
  其他資(zī)源
  字體(tǐ)和排版是一(yī)門值得進一(yī)步探索的藝術。 每種字體(tǐ)的形成和發展都有着深遠的曆史。 當您設計的作品也可以稱爲藝術品時，這對您來說是最大(dà)的肯定。
  文字版式指南(nán)
  這是英文文本排版指南(nán)，但是其中(zhōng)提到的内容和大(dà)多數意見對于中(zhōng)文字體(tǐ)的選擇和排版也很有意義。 值得一(yī)讀。
 
  16xl20160413
 
  字體(tǐ)設計的基礎：單詞是發自内心的
  漢字是如何發展的？ 我(wǒ)們曾經從哪些字體(tǐ)演變而來？ 今天的字體(tǐ)是基于我(wǒ)們祖先的字體(tǐ)？  ...通過本文，我(wǒ)們可以對漢字有一(yī)些基本的認識。
 
  21xl20160413
 
  哪種字體(tǐ)最适合快速閱讀
  本文詳細介紹了中(zhōng)英文字體(tǐ)的搭配建議，具有重要的參考價值。
 
  13xl20160413
 
  類型很漂亮
  是關于字體(tǐ)的非常著名的博客網站，提供了大(dà)量有關字體(tǐ)研究的文章，适合從初學者到高級設計師閱讀。 同時還提供了一(yī)個名爲“ Word Talk Word Chang”的播客。