一、概览（Overview）

1. 设计原则

• 时间选择器是模态的，会覆盖主要内容区域。
• 两种类型：表盘（dial）与输入（input）。
• 用户可以选择小时、分钟，或时间段（periods of time）。
• 要确保在移动设备上，用户可以轻松用手指选择时间。

① 时间选择器表盘（Time picker dial）

② 时间选择器输入（Time picker input）

2. 与 M2 的差异

颜色：新增颜色映射，并兼容动态颜色（dynamic color）

M2（左图）：时间选择器使用了不同的颜色映射

M3（右图）：时间选择器采用兼容动态颜色（dynamic color）的新颜色映射

二、规格（Specs）

1. 解剖结构

1.1 时间选择器表盘（Time picker dial）

① 标题（Headline）

② 时间选择分隔符（Time selector separator）

③ 容器（Container）

④ 时段选择器容器（Period selector container）

⑤ 时段选择器标签文本（Period selector label text）

⑥ 时钟表盘选择器中心点（Clock dial selector center）

⑦ 时钟表盘选择器轨道（Clock dial selector track）

⑧ 文本按钮（Text button）

⑨ 图标按钮（Icon button）

⑩ 时钟表盘选择器容器（Clock dial selector container）

⑪ 时钟表盘标签文本（Clock dial label text）

⑫ 时钟表盘容器（Clock dial container）

⑬ 时间选择器标签文本（Time selector label text）

⑭ 时间选择器容器（Time selector container）

1.2 时间选择器输入（Time picker input）

① 标题（Headline）

② 时间输入字段分隔符（Time input field separator）

③ 容器（Container）

④ 时段选择器容器（Period selector container）

⑤ 时段选择器标签文本（Period selector label text）

⑥ 文本按钮（Text button）

⑦ 图标按钮（Icon button）

⑧ 时间输入字段辅助文本（Time input field supporting text）

⑨ 时间输入字段标签文本（Time input field label text）

⑩ 时间输入字段容器（Time input field container）

2. 颜色

颜色值通过设计令牌（design tokens）来实现。对设计来说，这意味着你使用的是与令牌一一对应的颜色值。对实现来说，颜色值会以令牌的形式存在，由令牌去引用具体的颜色数值。

2.1 时间选择器表盘颜色（Time picker dial color）

用于浅色与深色主题的时间选择器表盘颜色角色：

① 表面变体上的内容色（On surface variant）

② 表面上的内容色（On surface）

③ 最高层级表面容器色（Surface container highest）

④ 表面上的内容色（On surface）

⑤ 第三容器色（Tertiary container）

⑥ 第三容器上的内容色（On tertiary container）

⑦ 高层级表面容器色（Surface container high）