UXD作品集知识课堂 ▎揭秘交互/服务作品集中的字体排版技巧

字体排版所涉及的不只是选择出色的字体。使用有效的字体可以增强界面的可用性，可读性，可访问性和层次结构。本文将会分享一些UI排版方面的技巧和行业标准。

01

印刷术语

了解印刷术语为我们的排版奠定了基础。将诸如字距调整，色彩引导和字重之类的印刷术语视为杠杆，我们可以利用它们来创建更具可读性和美观性的界面设计。

·Tracking

Tracking或字母间距是指均匀增加或减少一系列字符之间的水平间距。

·Baseline

Baseline是一行文本所在的不可见行。

·Leading

Leading是两种Baseline之间的垂直间距，通常被称为行高。

·Weight

Weight是指字体笔划的相对粗细。

·Serif/Sans Serif

Serif是通常附着在特定字体、一系列字母或符号末尾的细线或笔画，一般称为衬线字体，而不包含衬线的字体是无衬线字体。

02

层次结构

一般的界面都会有文字。大多数UI设计由一些标准元素组成：文本，矩形框，按钮和图标。我们使用这些元素可以创建或改造界面。

层次结构可以让用户更容易快速地找到重要信息，从而提高界面的可扫描性和可读性。例如：对于最重要的文本，我们可以使用更大胆的字体与排版方式来引起人们的关注；对于不太重要的信息，降低文本排序层级，使用较小、较浅的字号与色号是更好的选择。

03

最佳行距

行距概念可以追溯到手动排版印刷时期。其专业名词“leading”本义是指分隔文本行的细铅条。现在，行距对于确保我们的文本在不同设备上易于阅读至关重要。以下是一些关于行距设定的启发方法：

·在字体上测试不同的比例来寻找最佳的点。比如在130％-180％之间进行测试，来获得区间内最佳的可读性和可访问性。需要注意：若间距过大，会容易丢失阅读连贯性；而间距太小则会很难阅读。

·更改字体或大小时，需要检查行距。不同的字体具有不同的最大高度，因此需要仔细检查行间距以提高文本的可读性。

·文本行长度。文本行长度不可过长，长行文本可能会使界面看起来很混乱。

·较小字体的排版。较小的字体应具有更大的间距，因为较小的字体更难阅读，因此需要预留出额外的空间使其更易于解析。

04

优先考虑可读性

为确保我们的字体易于理解，并且适合视力障碍与听力障碍等残障人士使用，我们应该遵循Web Content Accessibility Guidelines（WCAG）的标准。

这里有一些标准可以优化我们的UI的可读性：

· 字号使用经验法则。字号大小至少应为16。显然，这是针对于特定设备的标准，但它的使用频率极高。而在电视界面上则文本应该更大。

· 注意文本与背景间的颜色对比度。所有文本和背景之间的颜色对比度必须至少为4.5：1。

· 不要仅依靠颜色来传达信息。例如，错误状态不仅应显示为红色，还应使用警告图标和描述性文字来告知发生的问题。

· 调整文字大小来进行查看。将文字调整为200％的大小，来确保不会影响阅读的内容与使用功能。

· 避免使用文字图片。如非必要（例如徽标），尽量不要使用文字图片。

05

限制字体数量

混合使用太多不同的字体可能会使我们的界面显得支离破碎和草率。

不要在界面中引入新字体，而应使用字体系列。 同一家族的字体在共同使用时，可以使界面灵活又一致。

06

定义字体比例准则

要为UI项目创建排版时的比例准则，请按以下步骤操作：

· 选择要使用的字体。获得高质量UI字体的地方有Google字体或Adobe字体。

· 确定基本字体大小。首先，为文本主体建立最常用的字体比例，例如16pt，然后确定合适的行高。

· 行高。如前所述，为了获得最佳可读性，请在130％-180％之间进行测试。这个比率并不总是准确的，但是它是一个开始的参考，并可以根据需要进行调整。

· 定义比例。比例可以为我们的排版提供一致性，节奏性和层次性。要为H1，H2，H3，正文，标题，按钮等设置排版比例，我们需要用一个比例值乘以基本字体大小。常见的类型的缩放比例为1.250x，1.414x，1.5x，1.618x。

· 在设备上测试。在多种设备上用不同的比例来测试字体，以决定正确的值。

07

使用可识别的单词和短语

这些排版的规则和方法可以极大地提高界面的可读性和美观性。但是，如何让界面中的遣词造句更加通俗易懂呢？为了整合文本内容，增强阅读性与可理解性，我们需要遵循以下规则：

· 避免行话。在设计应用程序时需要考虑目标受众，避免使用行业特定的术语，例如“缓冲”或“配置”等等。

· 使用现在时语法。例如：将“message has been sent”改为“message sent”。

· 保持精简。审核、删除界面中的不精简的语术，使界面简洁明了。例如：将“只有高级会员才能访问此功能”改为“加入高级访问权限”。

· 语句描述从目标开始。从目标开始，描述指令的目标以及实现目标所需要采取的行动。例如：将“将照片拖到垃圾箱中以将其从此相册中删除”改为“要将照片从此相册中删除，请将其拖至垃圾箱中”。

·保持称谓一致。与用户打交道时，请务必保持第一人称或第二人称。例如：将 “在我的帐户编辑你的位置”改为“在你的帐户编辑你的位置”。

08

强调重要信息

当一些文本比页面上的其他文本更重要时，我们必须强调其重要性，从重量，大小，颜色或其他元素上将其突出区别出来。

我们可以通过颜色和视觉上的重量来展现版式的主次。通过使用较浅、较小的字体来承载次要的文本，从而将人们的注意力集中到更大胆，更生动的文本上。这样能够提高界面的可扫描性，并允许用户可以不用思考的快速进行所需操作。

09

考虑语言支持

在UI排版中，不同的语言体系对于界面的文本的布局影响深远。在应用界面的初始设计中，就要对不同的语言支持进行考虑。

· 注意词汇的长度。它可能会因语言而异，即使是类似字形的语言（如英语和德语）也可能有所不同。例如：英文中“ New”在法语中表达为“ Nouveau”，其字义相同，但字符空间就截然不同。

· 在某些语言中，对齐方式就显得更为重要。例如阿拉伯语和希伯来语，因为它们以从右到左出现的字符显示。在相同的字体大小下，这些字体可能看起来比拉丁字体小，因此需要调整行距和对齐方式，以使其在所有语言的UI中都能正常工作。

10

使用系统字体

排版通常很难做到完全准确，在对其产生疑问时，可以使用系统字体。iOS和Android具有支持各种权重，大小，样式和语言的本机系统字体，因此我们可以在任何应用程序中使用它们来提升阅读体验。

在iOS上，他们有旧金山（SF）和纽约（NY）两种通用字体。而在Android上，它们的主要字体是Roboto，Noto是Roboto未涵盖的所有语言的默认字体。

当我们将文本样式与系统字体一起使用时，我们还将获得对“动态排版”和更多辅助功能的支持，这使读者可以选择自己喜欢的文本大小，从而提供了更大的灵活性。