有关UI设计字体和排版的详细而全面的指南

有关UI设计字体和排版的详细而全面的指南

无论您是进行网页设计还是应用程序设计，文本内容始终可以占据整个布局的近80％。 因此，了解字体和字体对于UI设计人员至关重要。 您必须始终将内容的可读性放在首位，以考虑和权衡选择的字体和排版。
 
  15xl20160413
 
  字体的基本术语
  了解字体设计的基本术语非常重要。 这些术语通常出现在介绍字体设计的相关文章中。 例如，x高度（X-height）表示从字母基线到最短字母顶部的距离。 当X高度的比例较大时，可以增加清晰度。
 
  20xl20160413
 
  汉字字形
  在大多数情况下，我们选择使用系统自己的字体，例如Microsoft Yahei，Arial，Heiface等来定义标题和内容，但是有时，当我们在进行徽标和横幅设计时，需要将字体转换为 来达到更加理想的效果。 这时，我们需要掌握汉字的字符结构和一些最基本的设计原理。
 
  22xl20160413
 
  衬线和非衬线字符
  西方国家的字母系统分为两个主要家族：衬线（serif字体）和无衬线（sans serif字体）。  Serif（下图为宋代，Times New Roman）指的是字符笔触的开头和结尾处的额外装饰，并且笔触的粗细会根据垂直和水平而变化。 相反，无衬线字体（下图中的Siyuan Heibody，Helvetica）没有这些附加的装饰，并且笔触粗细大致相同。
  衬线字体更易于识别，因此可读性更高。 相反，无衬线字体更引人注目。 一般而言，需要强调和突出显示的小文本通常使用无衬线字符，而在长文本中，为了便于阅读，通常使用衬线字符。 在实际应用中，由于中文宋体和西方衬线体，中国黑人体和西方无衬线体在风格和应用场景上相似，因此通常一起使用。
 
  5xl20160413
 
  排版建议
  在充分了解字体布局技巧之前，您需要确保可以简单清晰地显示内容。 出色的文本和布局使我们更愿意阅读，因此最好注意设置的字体和布局是否易于阅读，然后考虑对其进行美学修改。 我们可以参考以下英文指南：5种优秀排版原则，并将这些原则应用于我们的App和Web设计。
  iOS中的系统字体
  随着iOS 9系统和EI Capitan系统的发布，当前的系统字体已更改为Apple设计的[San Francisco]。  iOS仍在其他地方使用SF UI，在Apple Watch中仍使用SF Compact。
 
  11xl20160413
 
  旧金山有两种类型的大小：SF UI文本和SF UI显示。 文本模式适用于小于20点的大小，显示模式适用于大于20点的大小。 当您在应用中使用San Francisco时，iOS将在适当的时间自动在文本模式和演示模式之间切换。
  注意：如果使用诸如Sketch或Photoshop之类的工具进行设计，则当将字体设置为20点或更多时，您需要切换到显示模式。  iOS会根据字体大小自动调整San Francisco的单词间距。
 
  19xl20160413
 
  选择正文字体
  为正文选择正确的字体是最重要的。 确保选择可读，干净且易于阅读的字体。 我推荐的常见英文字体是：San Francisco，Helvetica Neue，Avenir Next，Open Sans，Museo Sans。 有中文字体，中文细黑，丝圆粗体。
 
  18xl20160413
 
  字体大小
  iPhone，iPad，iWatch上设置的正文字体不应小于11pt，以便可以正常读取。 我们建议的正文文字大小应为15-18pt。

字型粗细
  当我们设置较大的字体以获得更好的可读性时，我们还应该相应地减少字体的字体粗细（厚度），考虑使用“浅”，“细”或“超细”。 超重字体会过于醒目，这将影响其他内容的显示。
  当字体大小为12-18pt时，使用常规，18-24pt，使用浅色，24-32pt，使用细化，当字体大小超过32pt时，建议使用Ultralight。 以上是推荐值。 您应该根据不同字体的显示效果进行设置，以使文字内容清晰细腻，从而保持良好的阅读体验。
 
  7xl20160413
 
  现代字体具有多种字重设置：常规，轻，细和超轻
  合理设置行高，以便文本可以呼吸
  前导应设置在字体大小的120％到145％之间。
 
  3xl20160413
 
  在右边的示例中，行高设置为与100％的字体高度相同，而在左边的示例中，我将其设置为145％。 它们的显示效果有非常明显的差异。 当单词数量进一步增加时，您会发现阅读行距太短的大段落会很累。 合理设置行高也是一项空白技术，可以增强用户的阅读体验。
  每行45-90个字符
  行长是指单行文本的长度。 如果一行中的单词过多，则文本内容将难以阅读。 英文字符通常适合45-90个单词，而中文35-60个单词适合。 合理的线长使用户在两行之间跳动时感到轻松愉快，否则会增加阅读负担。
 
  8xl20160413
 
  字体样式
  字体样式对于提高可读性和快速浏览非常重要。 一般原则是，修改后的文本不应超过整个文本的10％。 如果通过修改强调所有文本，则不强调。 当然，不应一次使用三种以上的强调样式。 换句话说，不要在同一段文本中同时使用它，颜色，字体更改，大小，下划线，斜体，粗体。
 
  12xl20160413
 
  找到合适的字体
  大多数商业字体价格昂贵，但也有许多免费的出色字体。 您只需要从中选择自己喜欢的字体并将其应用于您的设计即可。 这里有一些出色的字体网站。
  Google字体（需要阶梯）
  在Google字体，您可以免费下载自己喜欢的字体，并根据需要在项目中使用它们。 由于在iOS中使用其他字体的唯一方法是将字体文件导入系统，因此Google字体的下载功能非常有用。  Google字体包含1400多种不同的字体，其中包括最著名的：Open Sans和Roboto字体，它们是Android系统使用的默认字体。
 
  1xl20160413
 
  您可以在Mac上使用SkyFonts将字体自动同步到桌面。
 
  2xl20160413
 
  如果您需要直接在网站中使用Google Web字体，则可以选择360代理来访问Google的免费字体库。 以下说明非常简单。
 
  6xl20160413
 
  打字工具
  具有许多出色的字体。 这对于刚刚起步的人非常有用。 我非常喜欢Proxima Nova和Museo字体。 它还包括中文字体，例如Siyuan Heibody。
 
  17xl20160413
 
  有字体
  对于需要使用许多中文字体的用户，拥有字体是一个不错的选择。 目前，它是中国优秀的Web字体服务平台，包含大量优秀的中文字体。
 
  10xl20160413
 
  其他资源
  字体和排版是一门值得进一步探索的艺术。 每种字体的形成和发展都有着深远的历史。 当您设计的作品也可以称为艺术品时，这对您来说是最大的肯定。
  文字版式指南
  这是英文文本排版指南，但是其中提到的内容和大多数意见对于中文字体的选择和排版也很有意义。 值得一读。
 
  16xl20160413
 
  字体设计的基础：单词是发自内心的
  汉字是如何发展的？ 我们曾经从哪些字体演变而来？ 今天的字体是基于我们祖先的字体？  ...通过本文，我们可以对汉字有一些基本的认识。
 
  21xl20160413
 
  哪种字体最适合快速阅读
  本文详细介绍了中英文字体的搭配建议，具有重要的参考价值。
 
  13xl20160413
 
  类型很漂亮
  是关于字体的非常著名的博客网站，提供了大量有关字体研究的文章，适合从初学者到高级设计师阅读。 同时还提供了一个名为“ Word Talk Word Chang”的播客。