Material3设计规范:工具提示(Tooltips)

2025年12月1日
Material Design
Material Design
谷歌的开源设计系统,用于构建美观、易用的产品
已累计原创 12 篇文章查看全部

工具提示用于展示简短的标签文字或提示信息。


一、概览(Overview)

1.  使用要求

  • 使用工具提示为按钮或其他界面元素补充额外的上下文说明。
  • 工具提示分为两种类型:普通工具提示(plain)和富工具提示(rich)。
  • 使用普通工具提示来说明图标按钮本身,或它所代表的操作含义。
  • 使用富工具提示来提供更详细的说明,比如解释某个功能能带来的具体价值。
  • 富工具提示中可以包含可选的标题、链接以及按钮等交互元素。

①普通工具提示(plain) ② 富工具提示(rich)

2. 与 M2 的差异

颜色:采用了全新的颜色映射方案,并且兼容动态配色(dynamic color)。

形状:富工具提示的圆角更大,整体造型更加圆润。



二、规格说明(Specs)

1. 普通工具提示

① 辅助文本 、 ② 容器

普通工具提示的颜色

颜色数值是通过**设计令牌(design tokens)**来实现的。对设计来说,这意味着你日常使用和标注的,是一组与令牌一一对应的颜色值。对开发实现来说,颜色最终是以“令牌”的形式存在,由令牌去引用具体的颜色数值。

浅色与深色主题下,普通工具提示使用的颜色角色:①反相前景色(Inverse on surface)、  ②反相表面色(Inverse surface)


普通工具提示的尺寸规范

普通工具提示的内边距与尺寸规范
属性(Attribute)数值(Value)
容器高度(Container height)最小 24dp (24dp min)
内边距(Padding)8dp


2. 富工具提示

①副标题、 ②容器、 ③辅助文本


2.1 富工具提示的颜色

颜色数值是通过**设计令牌(design tokens)**来实现的。对设计来说,这意味着你在日常设计和标注中使用的,是一组与令牌一一对应的颜色值。对开发实现来说,每一个颜色在代码中都会以“令牌”的形式出现,由这个令牌去引用具体的颜色数值。

浅色与深色主题下,富工具提示使用的颜色角色:①表面前景变体色(On surface variant)、 ② 表面容器色(Surface container)、③表面前景变体色(On surface variant)、④主色(Primary)


2.2 富工具提示的尺寸规范

富工具提示的内边距与尺寸规范
属性(Attribute)数值(Value)
上内边距(Top padding)12dp
下内边距(Bottom padding)8dp
左右内边距(Left and right padding)16dp


会员文章
开通美叶 Pro会员,即可阅读此篇文章的全部内容,同时可阅读全站会员文章

0 人收藏了本文

Material3设计规范:开关(Switch)Material3设计规范:开关(Switch)
Material3设计规范:标签页(Tabs)Material3设计规范:标签页(Tabs)
Material3设计规范:缓动与动效时长(Easing and duration)Material3设计规范:缓动与动效时长(Easing and duration)
Material3设计规范:高度层级(Elevation)Material3设计规范:高度层级(Elevation)
Material3设计规范:动效系统(Motion physics system)Material3设计规范:动效系统(Motion physics system)
Apple HIG:标签栏(Tab bars)Apple HIG:标签栏(Tab bars)
Material3设计规范:颜色角色(Color roles)Material3设计规范:颜色角色(Color roles)
Apple HIG:无障碍(Accessibility)Apple HIG:无障碍(Accessibility)