应用排版

层次结构通过字体粗细、大小、行高和字母间距的差异进行传达。更新后的字体比例将样式分为六种角色,这些角色的名称描述了各自的用途:显示、标题、标签、正文、数字和弧形。这些新角色与屏幕尺寸无关,可在各种用例中更轻松地应用。

显示样式

显示字体用于简短的大号文本字符串,以显示一目了然的重要信息、重要指标、置信度或富有表现力的品牌时刻。

  • DisplayLarge 是最大的标题。显示文字是屏幕上最大的文字,仅供简短、高度可一览无余的主打信息、重要指标、置信度或富有表现力的品牌时刻使用,这些内容可受益于醒目的比例和样式。
  • DisplayMedium 是第二大的标题。显示文字是屏幕上最大的文字,仅供简短、醒目的重要信息、重要指标、置信度或富有表现力的品牌时刻使用,这些内容可受益于醒目的比例和样式。
  • DisplaySmall 是最小的标题。显示文字是屏幕上最大的文字,仅供简短、高度可一览无余的主打信息、重要指标、置信度或富有表现力的品牌时刻使用,这些内容可受益于醒目的比例和样式。

标题

标题是分层文本,用作寻路机制,例如页面、版块标题或子版块标题(如果是 TitleSmall)。

  • TitleLarge 是最大的标题。标题的字号小于显示内容。通常仅供重要程度中等、长度较短的文字使用,不建议用于互动组件,而建议用于网页标题或副标题。
  • TitleMedium 是中等大小的标题。标题的字号小于显示内容。通常仅供重要程度中等、长度较短的文字使用,不建议用于互动组件,而建议用于网页标题或副标题。
  • TitleSmall 是最小的标题。标题的字号小于显示内容。通常仅供重要程度中等、长度较短的文字使用,不建议用于互动组件,而建议用于网页标题或副标题。

标签

标签用于描述组件级文本,该文本描述了如果与组件互动会发生什么操作。标签最常见且广泛使用的应用场景是用于按钮中嵌套的文本。

  • LabelLarge 是最大的标签。标签用于显示醒目的文本,例如标题按钮上的标签,适用于互动组件。
  • LabelMedium 是中等标签,也是最常用的标签。标签用于显示文字,例如按钮上的主要标签,适用于互动式组件。
  • LabelSmall 是小标签。标签用于显示文本,例如按钮上的辅助标签、紧凑型按钮上的标签,适用于互动式组件。

正文

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

  • BodyLarge 是最大的正文。正文通常用于撰写较长的文本,因为非常适合小号文字。对于较长的文字段落,建议使用衬线字体或无衬线字体。
  • BodyMedium 是第二大的正文。正文通常用于撰写较长的文本,因为非常适合小号文字。对于较长的文字段落,建议使用衬线字体或无衬线字体。
  • BodySmall 是第三大正文。正文通常用于撰写较长的文本,因为非常适合小号文字。对于较长的文字段落,建议使用衬线字体或无衬线字体。
  • BodyExtraSmall 是最小的正文。正文通常用于撰写较长的文本,因为非常适合小号文字。对于较长的文字段落,建议使用衬线字体或无衬线字体。

Numeral

数字文本样式用于数字,通常仅限于几个字符。可以在较大的显示尺寸下采用更具表现力的属性。 可灵活扩展宽度轴,同时最大限度地减少本地化和字体缩放问题。

  • NumeralsExtraLarge 是数字的最大角色。数字默认使用等宽间距。它们突出显示并表达仅限两个或三个字符的概览数字,无需本地化,例如充电界面或时间选择器。
  • NumeralsLarge 是数字的第二大角色。默认情况下,数字使用等宽间距。它们是大型数字字符串,仅限于显示时间的大型显示屏,无需本地化,例如计时器倒计时或时间选择器。
  • NumeralsMedium 是数字的第三大角色。默认情况下,数字使用等宽间距。它们是中等大小的数字,仅限于短字符串的数字,不需要本地化,例如步数或时间选择器。
  • NumeralsSmall 是数字的第四大角色。默认情况下,数字使用等宽间距。它们适用于需要在较小规模上强调的数字,例如日期和时间选择器,这些数字不需要本地化。
  • NumeralsExtraSmall 是数字的最小角色。数字默认使用等宽间距。它们适用于需要容纳较长数字字符串的数字,例如锻炼期间的指标,这些数字不需要本地化。

Arc

弧形标题文字用于构成界面上指示牌的弯曲文字,例如时间文字和弯曲标签。一种定制的字体轴,专门用于优化沿曲线的文字,并适应当字符位于曲面屏幕顶部(与底部相比)时出现的不同间距。

热门

  • ArcLarge 适用于弧形标题。弧形文字是指沿屏幕上的弯曲路径排列的文字,仅供屏幕顶部或底部(例如确认叠加层)的简短标题文字字符串使用。
  • ArcMedium 适用于弧形标题和标题。Arc 用于屏幕上沿弯曲路径显示的文字,专用于屏幕顶部或底部非常简短的标题文本字符串,例如网页标题。
  • ArcSmall 适用于弧度有限的文本字符串。弧形是用于屏幕上沿弯曲路径显示的文字,专用于屏幕顶部简短的弯曲文字字符串,例如时间文字。

底部

  • ArcLarge 适用于弧形标题。弧形文字是指沿屏幕上的弯曲路径排列的文字,仅供屏幕顶部或底部(例如确认叠加层)的简短标题文字字符串使用。
  • ArcMedium 适用于弧形标题和标题。Arc 用于屏幕上沿弯曲路径显示的文字,专用于屏幕顶部或底部非常简短的标题文本字符串,例如网页标题。
  • ArcSmall 适用于弧度有限的文本字符串。Arc 适用于屏幕上沿弯曲路径显示的文字,专用于屏幕底部简短的弯曲文字字符串,例如号召性用语。

排版

竖排文字依靠内边距、边界框和基准来确保文字在任何尺寸下都清晰可辨。在排版、调整文本大小、设置密度以及在自适应布局中使用文本时,请考虑工程方面的因素和平台的惯例。

使用基准

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

一行文字位于不可见的基线上

检查可读性

如需提高应用中显示的字体的可读性,请完成以下可读性检查。

等宽数字和单宽数字

在值可能会经常变化、动画显示或快速变化的位置(例如倒计时器、选择器或持续的健身指标)使用等宽数字(也称为等宽数字),而不是比例数字。

使用等宽表格数字可使值在视觉上保持对齐,从而更易于扫描和对齐,并避免数字或相邻文本跳动。

行高

行高是指每行文本之间的空间,与字号直接相关。在手表上,垂直空间有限,因此系统会优化行高,以确保文字清晰易读,同时尽可能增加视口内可见的文本行数。

通常,行高比最好是字号的 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)