有關UI設計字體和(and)排版的(of)詳細而全面的(of)指南

有關UI設計字體和(and)排版的(of)詳細而全面的(of)指南

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

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