应用排版

层级通过字体粗细、大小、行高和字母间距的差异来传达。更新后的排版缩放将样式组织成六个角色,其命名旨在描述其用途:display(显示)、title(标题)、label(标签)、body(正文)、numeral(数字)和 arc(弧形)。新角色与屏幕尺寸无关,可更容易应用于各种用例。

显示样式

显示样式用于显示大型短文本字符串,以展示高度概览性的焦点信息、重要指标、置信度或富有表现力的品牌瞬间。

  • DisplayLarge 是最大的标题。显示样式是屏幕上最大的文本,保留用于简短、高度概览性的焦点信息、重要指标、置信度或富有表现力的品牌瞬间,这些内容得益于突出的缩放和样式。
  • DisplayMedium 是第二大的标题。显示样式是屏幕上最大的文本,保留用于简短、高度概览性的焦点信息、重要指标、置信度或富有表现力的品牌瞬间,这些内容得益于突出的缩放和样式。
  • DisplaySmall 是最小的标题。显示样式是屏幕上最大的文本,保留用于简短、高度概览性的焦点信息、重要指标、置信度或富有表现力的品牌瞬间,这些内容得益于突出的缩放和样式。

标题

标题是用于导航的分层文本,例如页面、章节标题或子章节标题(如 TitleSmall)。

  • TitleLarge 是最大的标题。标题小于显示样式。它们通常保留用于中等强调的较短文本,不建议用于交互式组件,而是用于页面标题或副标题。
  • TitleMedium 是中等标题。标题小于显示样式。它们通常保留用于中等强调的较短文本,不建议用于交互式组件,而是用于页面标题或副标题。
  • TitleSmall 是最小的标题。标题小于显示样式。它们通常保留用于中等强调的较短文本,不建议用于交互式组件,而是用于页面标题或副标题。

标签

标签用于组件级别的文本,描述交互后会发生的动作。标签最常见和广泛的应用是按钮内嵌的文本。

  • LabelLarge 是最大的标签。标签用于显示标题按钮上的标签等突出文本,应用于交互式组件。
  • LabelMedium 是中等标签,也是最常用的标签。标签用于显示按钮上的主要标签等文本,应用于交互式组件。
  • LabelSmall 是小标签。标签用于显示按钮上的次要标签、紧凑按钮上的标签等文本,应用于交互式组件。

正文

正文保留用于内容文本,例如正文段落、复杂数据可视化中使用的文本、时间戳和元数据。

  • BodyLarge 是最大的正文。正文文本通常用于长篇写作,因为对于小文本尺寸效果很好。对于较长的文本部分,建议使用衬线或无衬线字体。
  • BodyMedium 是第二大的正文。正文文本通常用于长篇写作,因为对于小文本尺寸效果很好。对于较长的文本部分,建议使用衬线或无衬线字体。
  • BodySmall 是第三大的正文。正文文本通常用于长篇写作,因为对于小文本尺寸效果很好。对于较长的文本部分,建议使用衬线或无衬线字体。
  • BodyExtraSmall 是最小的正文。正文文本通常用于长篇写作,因为对于小文本尺寸效果很好。对于较长的文本部分,建议使用衬线或无衬线字体。

数字

数字文本样式用于数字,通常限制在几个字符。在较大的显示尺寸下可以具有更强的表现力。提供灵活度,可在最小化本地化和字体缩放问题的情况下扩展宽度轴。

  • NumeralsExtraLarge 是数字的最大角色。数字默认使用表格间距。它们突出并表达一览即懂的数字,通常仅限于两三个字符,无需本地化,例如充电屏幕或时间选择器。
  • NumeralsLarge 是数字的第二大角色。数字默认使用表格间距。它们是大型数字字符串,仅限于较大的时间显示,无需本地化,例如倒计时或时间选择器。
  • NumeralsMedium 是数字的第三大角色。数字默认使用表格间距。它们是中等大小的数字,仅限于短数字字符串,无需本地化,例如步数计数或时间选择器。
  • NumeralsSmall 是数字的第四大角色。数字默认使用表格间距。它们用于在较小尺寸下需要强调的数字,无需本地化,例如日期和时间选择器。
  • NumeralsExtraSmall 是数字的最小角色。数字默认使用表格间距。它们用于需要容纳较长数字字符串的数字,无需本地化,例如运动中指标。

弧形

弧形标题文本用于构成 UI 标识的弯曲文本,例如时间文本和弯曲标签。定制的字体轴专门优化沿曲线的排版,以适应字符位于弯曲屏幕顶部与底部时出现的不同间距。

顶部

  • ArcLarge 用于弧形标题。弧形用于屏幕上沿弯曲路径的文本,保留用于屏幕最顶部或最底部的短标题文本字符串,例如确认叠加层。
  • ArcMedium 用于弧形标题。弧形用于屏幕上沿弯曲路径的文本,保留用于屏幕最顶部或最底部的短标题文本字符串,例如页面标题。
  • ArcSmall 用于有限的弧形文本字符串。弧形用于屏幕上沿弯曲路径的文本,保留用于屏幕底部的短弯曲文本字符串,例如时间文本。

底部

  • ArcLarge 用于弧形标题。弧形用于屏幕上沿弯曲路径的文本,保留用于屏幕最顶部或最底部的短标题文本字符串,例如确认叠加层。
  • ArcMedium 用于弧形标题。弧形用于屏幕上沿弯曲路径的文本,保留用于屏幕最顶部或最底部的短标题文本字符串,例如页面标题。
  • ArcSmall 用于有限的弧形文本字符串。弧形用于屏幕上沿弯曲路径的文本,保留用于屏幕底部的短弯曲文本字符串,例如时间文本。

排版设置

垂直排版依赖于内边距、边框和基线来确保在任何尺寸下文本的可读性。在为排版设置、文本大小调整、密度以及在自适应布局中使用文本做出决策时,应考虑工程方面的因素和平台约定。

使用基线

基线是文本行所处的不可见线条。在 Material Design 中,基线是衡量文本与元素之间垂直距离的重要规范。

文本行位于不可见的基线上

检查可读性

为了增强应用中字体的可读性,请完成这些可读性检查。

表格数字和等宽数字

在数值可能经常变化、动画化或快速变化的地方,例如倒计时器、选择器或正在进行的健身指标,请使用表格数字(也称为等宽数字),而不是比例数字。

使用等宽表格数字使数值在视觉上对齐,以便更好地扫描和对齐,并避免数字或相邻文本跳动。

行高

行高是每行文本之间的空间,与排版大小直接相关。在 Watch 设备上,垂直空间有限,因此行高经过优化以确保可读性,同时最大化在视口内可见的文本行数。

通常最佳的行高比例是排版大小的 1.2 倍(120%),但由于 Wear OS 设备上的空间有限,排版大小的约 1.1 倍(110%)的行高比例就足够了。

额外行高

在 Jetpack Compose 和 Android 上,排版会自动在最后一行获得额外的行高,以防止较长的字符重叠。这就是为什么某些截图测试无法完全对齐的原因。

这使得最后一行具有排版大小的 1.25 倍(125%)的行高比例。请参阅额外行高速查表

额外行高速查表

默认样式(文本大小 / 行高) 每行的默认行高 仅最后一行的额外行高 计算
60 / 60 0 (100%) + 15 (125%) 60 / 75 (15/125%) (60+15)
50 / 50 0 (100%) + 13 (126%) 50 / 63 (13/126%) (50+13)
40 / 44 4 (110%) + 7 (127.5%) 40 / 51 (11/127.5%) (44+7)
30 / 34 4 (113%) + 3 (123.3%) 30 / 37 (7/123.3%) (34+3)
24 / 26 2 (108%) + 4 (125%) 24 / 30 (6/125%) (26+4)
20 / 22 2 (110%) + 3 (125%) 20 / 25 (5/125%) (22+3)
18 / 20 2 (111%) + 3 (125%) 18 / 23 (5/125%) (20+3)
16 / 18 2 (112.5%) + 2 (125%) 16 / 20 (4/125%) (18+2)
15 / 18 3 (120%) + 1 (126.6%) 15 / 19 (4/126.6%) (18+1)
14 / 16 2 (114%) + 2 (128.5%) 14 / 18 (4/128.5%) (16+2)
13 / 16 3 (123%) + 0 (123%) 13 / 16 (3/123%) (16+0)
12 / 14 2 (116.6%) + 1 (125%) 12 / 15 (3/125%) (14+1)
10 / 12 2 (120%) + 0 (120%) 10 / 12 (2/120%) (12+0)