Material Design 设计语言-Android（自译）

概述

Material Design（原质化设计）是谷歌开发的一种视觉设计语言，它遵循了优秀设计的经典原则，同时还结合了创新理念和新的技术。

一、目标（Goals）

• 创造（Create） ：创造一种视觉语言，将经典的优秀设计原则与技术和科学的创新和可能性相结合。
• 统一（Unify）： 开发一个单一的底层系统，在平台、设备和输入方法之间统一用户体验。
• 定制（Customize） ：拓展 Material 的视觉语言，为创新和品牌传达提供一个灵活的基础。

二、原则（Principles）

1、Material（原质化） 即隐喻

Materia Design 的灵感来自物理世界及其质感，包括它们如何反射光线、投射阴影。实体的表面和边缘提供基于纸墨效果的视觉体验，熟悉的质感让用户可以快速地理解和认知。

2、清晰、形象、深思熟虑

Material Design 在排版、网格、空间、比例、颜色和图像的设计上，借鉴了传统的印刷设计。力求构建出鲜明、形象、有意义的用户界面，使用户沉浸其中。

3、有意义的动效

动效是通过微妙的反馈和连贯的过渡，来集中用户注意力并保持交互的连续性。当元素出现在屏幕上时，随着交互的触发，这些元素会发生外观上的变化，并且周围的场景也会发生改变。

4、基础灵活

原质化设计系统旨在实现品牌表达。它整合了一个可定制的代码库，允许无缝实现组件、插件和设计元素。

5、跨平台

Material Design 使用跨Android、iOS、Flutter和Web的共享组件，跨平台维护相同的UI。

三、布局（Layout）

原则

1、可预测的

UI应使用直观且可预测的布局，具有一致的UI区域和空间组织。

2、一致性

布局应该使用一致的网格、关键字和填充。

3、响应式

布局是自适应的，并对来自用户、设备和屏幕元素的输入作出反应。

响应式布局网格

Material Design响应式布局网格可自适应屏幕尺寸和方向，确保布局的一致性。

响应式布局网格由三种元素组成：列（Columns）、水槽（Gutters）和边距（Margins）。

列

界面内容放置在列的范围内。

列宽是使用百分比，而非固定值来定义，以便于内容可以灵活地适应任何屏幕大小。网格中显示的列数由屏幕大小确定。

水槽

水槽是列与列之间的空隙。它们有助于分离内容。

水槽的宽度是每个断点范围内的固定值。为了更好地适应屏幕，水槽宽度可以在不同的断点处更改。更宽的水槽更适合更大的屏幕，因为它们在列之间会有更多的空白。

边距

边距是内容与屏幕左右边缘之间的空隙。

边距宽度定义为每个断点范围的固定值。为了更好地适应屏幕，边距宽度可以在不同的断点处改变。更宽的边距更适合更大的屏幕，因为它们在内容的周边会有更多的空白。

间距

1、8dp网格

所有组件都与移动设备的8dp网格线的网格对齐。

如上图，应用栏与悬浮按钮都与网格保持对齐。

2、4dp网格

图标、排版和组件中的元素可以与4dp网格对齐。

如上图，底部导航栏的元素与4dp网格对齐。

3、空隙

空隙是指UI元素之间的空间。它是一种替代间距的方法，以8dp或4dp的增量测量。

空隙应与响应布局网格结合使用，以在设计中一致地放置元素。

4、垂直间距

垂直间距是指标准元素的高度，例如应用栏或列表项。这些元素的高度应与8dp网格对齐。

触摸热区

热区规格

触摸热区适用于通过触摸和非触摸交互的任何设备。为了平衡信息密度和可用性，触摸热区应至少为48 x 48 dp，并且它们之间至少还要有8dp的空间。

点击热区

在非接触式用户界面上（如WEB端、桌面端等），点击热区应至少为24 x 24 dp，其间至少还要有8 dp的空间。

四、启动屏幕（Launch screen）

当APP启动时，显示启动屏幕，而非空白屏幕。显示启动屏幕可以弱化长时间加载/等待的感觉，并且有可能增加用户体验的乐趣。

但如果APP正在运行，则不应显示启动屏幕。

有两种类型的启动屏幕：

• 占位符启动页显示APP实际UI的界面，即非交互式预览。此启动屏幕适用于APP启动和APP内的活动转换。
• 品牌发布屏幕提供短暂的品牌曝光，可提高品牌识别度。

五、新手引导（Onboarding）

应该新手引导是一种虚拟的打开体验，帮助用户开始使用APP。它应该为某类用户达到特定的目标而设计。

用户场景：

• 用户已经安装了应用程序，且不需要马上查看促销信息
• 用户渴望在不阅读说明手册的情况下，先试用APP
• 用户还不熟悉APP的用户界面，并且准备了解它

目标：

• 欢迎用户并激发他们马上体验APP的兴趣
• 帮助用户隐性或显式地理解APP如何使用
• 推动用户在前七天使用APP，提高参与度和留存率

类型

有三种新手引导的样式：自我选择、快速入门和引导页。

组件

一、应用栏：底部 （App bars: bottom）

底部的应用栏在移动屏幕底部用于显示导航和关键性操作。

底部应用栏提供了访问抽屉导航的入口，以及最多可放置4个操作按钮，包括悬浮操作按钮（FAB）。

原则

1、可操作的

底部的应用栏突出显示重要的屏幕操作，并且让浮动操作按钮更显眼。

2、灵活的

底部应用栏的布局和操作会根据屏幕的需要而变化。

3、人体工学

底部应用栏可以通过移动设备上的手持位置轻松到达。

何时使用

应该：

• 仅限移动设备
• 访问底部抽屉导航
• 屏幕有2～5个操作

避免：

• 已有底部导航栏的APP
• 屏幕只有1个或没有操作

布局

底部应用栏基于FAB的存在及其在栏中的位置，有三种不同的布局。这些布局决定了可以包含在栏中的操作数。

1、FAB居中

在主屏幕上使用底部应用栏，其中包含抽屉导航控件和突出操作按钮（例如FAB）。可以在栏的另一侧放置最少1个，最多2个附加操作。

2、FAB位于边缘

在次级页面上使用FAB，需要悬浮操作按钮和3～4个其他操作。

3、无FAB

当不需要悬浮操作按钮时，底部应用栏可以防止更多菜单里的操作，并且在相对边缘上最多可以放置4个操作图标。

悬浮操作按钮

若有悬浮操作图标，那么悬浮操作按钮（FAB）将以以下列两种方式，显示在底部应用栏上：

1. 重叠：FAB的水平高于底部应用栏（基于Z轴），并且对条形的形状没有影响。
2. 插入：FAB与底部应用栏处于同一水平，并且栏形状改变，以便于FAB可刚好放在底部应用栏中的凹槽中。

特别注意

1、覆盖

底部应用栏可以被键盘和其他临时元素覆盖。如果你的APP需要长时间/经常遮住底部应用栏，则应使用其他的组件。

2、导航

底部应用栏可以显示菜单图标以打开底部导航抽屉，但该栏本身不应包含任何导航操作（例如返回上一页面或关闭页面的图标）。APP的导航应放置在其他组件中，例如顶部应用栏或嵌入在屏幕上。

3、与顶部应用栏配对

与底部应用栏一起使用时，顶级应用栏可以提供向上的导航和其他操作。在整个APP中，应该在两个栏上明确组织和划分操作。

• 将单个导航菜单控件放在底部应用栏中（用于访问）
• 将单个更多菜单控件放于底部应用栏的边缘操作
• 将搜索操作（例如搜索图标）放置在整个应用中一致的位置
• 破坏性操作放置在顶部应用栏中，例如“删除”

4、Snackbars

Snackbars 和Toasts 应在垂直于底部应用栏上方的位置进行动画处理显示，避免遮盖底部应用栏。

二、应用栏：顶部 （App bars: top）

顶部应用栏显示与当前屏幕相关的信息和操作。

原则

1、持久性

顶部应用栏始终显示在APP中每个页面的顶部，并且可以在滚动时消失。

2、引导性

顶部应用栏提供了引导用户浏览应用的可靠方式。

3、一致性

顶部应用栏的位置和内容应一致，以提高熟悉度。

类型

常规的顶部应用栏

上下文操作栏

上下文操作栏为所选项提供操作。顶部应用栏可以转换为上下文操作栏，保持可操作状态直到执行操作或将其取消。

布局

对于从左往右看的语言，建议在顶部应用栏中放置元素是：

• 将导航放在最左侧
• 将标题放在导航的右侧
• 将上下文操作放在导航的右侧
• 将更多菜单放在最右侧

对于从右往左看的语言，应该翻转放置位置。

1、两种表现方式

突出的顶部应用栏可包含更长的标题、背景图片，或为顶部应用栏提供更强的存在感。

在突出型的顶部应用栏中使用背景图片的注意事项：

2、导航图标

导航图标是可选的。当它出现在应用栏中时，它会与 Bar 的左侧对齐。它可以是：

• 菜单图标，用于打开导航抽屉
• 一个向上箭头，用于浏览APP的层次结构
• 后退箭头，返回上一个页面

3、标题

应用栏标题可用于描述：

• 用户当前所在的屏幕
• 用户当前所在的部分
• 正在使用的应用程序

4、操作项和更多菜单

将最常用的操作放在左侧，更少使用的操作依次向右放置。任何不适合应用栏的剩余操作项都可以放入更多菜单。

5、滚动

在滚动时，顶部应用栏可以保留在原位，也可以通过以下方式进行转换：

• 向上滚动时隐藏顶部应用栏
• 向下滚动时显示顶部应用栏

上下文操作栏

用法

顶部应用栏可以转换为上下文操作栏，以便于为所选项目提供上下文操作。例如，当用户从图库中选择照片时，顶部应用栏将转换为具有与所选照片相关的操作的上下文应用栏。

当顶部应用栏转换为上下文操作栏时，会发生以下更改：

• 栏的填充色发生变化
• 导航图标被替换为关闭图标
• 应用栏标题文字转换为上下文操作栏文字
• 顶部应用栏操作将替换为上下文操作

关闭后，上下文操作栏将转换回顶部应用栏。

布局

当顶部应用栏转换为上下文操作栏时，栏应该更改颜色以指示状态的更改。

三、底部导航 （Bottom Navigation）

底部导航栏使用户可以在APP中的主要页面之间自由切换。

底部导航栏位于屏幕的底部，通常显示3～5个入口。每个入口都由一个图标和一个文本标签（可选）表示。点击底部导航图标时，用户将被带到与该图标关联的页面。

原则

1、人体工学

在手持移动设备上，底部导航栏很容易被触及。

2、一致性

若使用底部导航栏，其将显示在每个屏幕的底部。

3、关联性

通过底部导航栏进入的页面，应同等重要。

何时使用

应该：

• 优先级最高的页面/功能，应该从APP的任何位置都可以访问的
• 支持3～5个入口
• 仅限手机和平板使用

避免：

• 单个任务，例如查看单个电子邮件
• 用户首选项或设置

布局

根据入口数量：

• 3个入口 ：显示所的图标和文本标签。
• 4-5个入口 ：只有选中的入口才显示图标和文本标签。未选中的显示图标，如果空间允许，则可以同时放置文本标签。

注：国内APP一般很少遇到文本很长的状态，如果做国外APP项目的，可以参考上图这种方式。

标记

底部导航图标可以在右上角加标记。这些标记可以包含动态信息，例如许多待处理请求。

1. 标记
2. 带有数字的标记
3. 具有最多字符数的标记

四、按钮（Buttons）

按钮允许用户只需轻按一下即可进行操作并做出选择。

按钮传达用户可以采取的操作。它们通常被用在整个UI中，例如：

• 对话框
• 模态窗口
• 列表
• 卡片
• 工具栏

原则

1、易读性

按钮应该明确表明可以触发一个动作。

2、可查找

按钮应该很容易在其他元素中找到，包括其他按钮。

3、清晰

按钮的操作和状态应该清晰。

类型

1、文本按钮（重要性低）

文本按钮通常用于不太重要的操作。

2、线框按钮（重要性中）

由于带有一个底框，线框按钮用于比文本按钮强调性更强。

3、填充按钮（重要性高）

填充按钮强调性更强，因为使用了颜色填充和阴影。

4、切换按钮

切换按钮通过布局和间距，对一组操作进行分组。它们的使用频率低于其他3种按钮类型。

层级

1、一个突出的按钮

一个布局应包含一个突出显示的按钮，以清楚地衬托出其他按钮在层级中的重要性较低。这个高度强调的按钮最引人注意。

2、其他按钮

在APP的布局中，可以同时显示多个按钮，因此高度强调的按钮可以伴随中等和低强调按钮，这些按钮常用来执行不太重要的操作

使用多个按钮时，请确保一个按钮的可用状态，不会看起来像另一个按钮的禁用状态。

位置

同一个页面中，使用多种按钮类型可用于表示不同的强调程度。

以上布局使用了：

1. 重要性最高的悬浮操作按钮
2. 重要性较高的紫色填充按钮
3. 重要性低的文本按钮

五、悬浮操作按钮（FAB）

悬浮操作按钮（FAB）表示屏幕的主要操作。

悬浮操作按钮（FAB）在屏幕上执行主要或最常见的操作。它出现在所有屏幕内容的最前面，通常是一个圆形，中间有一个图标。FAB有三种类型：常规、迷你和扩展。

原则

1、主要的

FAB表示屏幕上的主要操作。

2、建设性

FAB应执行建设性的操作（例如创建、分享或探索）。

3、关联性

FAB应与其页面内容相关。

类型

1、常规 FAB

当屏幕宽度大于460dp时，，默认FAB（56x56dp）。

2、迷你 FAB

迷你FAB应该用在较小的屏幕上。当屏幕宽度为460dp或更小时，常规 FAB（56dp）的容器会转换为迷你FAB（40dp）。

迷你FAB还可用于与其他屏幕元素建立视觉连续性。

3、扩展 FAB

扩展FAB更宽，并包含文本标签，图标可选。

位置

在移动设备上，扩展FAB应放置在右下角或底部中心。

注：避免在底部应用栏上方使用扩展FAB，因为这样会占用大量屏幕空间。如果它们必须是一对组合，则扩展FAB应在滚动时折叠。

用法

悬浮操作按钮（FAB）可以在当前页面上触发操作，也可以执行跳转到新页面的操作。

FAB执行重要的建设性操作，例如：

• 创建
• 收藏
• 分享
• 启动进程

避免使用FAB执行不重要或破坏性的操作，例如：

• 存档或删除
• 警报或错误
• 限制性的任务，如截断文本

调整音量或字体颜色等的控件更适合用在工具栏。

快速展开

按下FAB后，以快速展开的形式显示3～6个相关动作。

若超过6个操作，则应使用其他操作来呈现它们而不是 FAB。

1、按下后，FAB 发出相关动作

2、按下后，FAB 转换为包含相关操作的菜单（仅限Android）

在Android上按下后，FAB可以转换为包含相关操作的菜单。黑色蒙版表示暂时禁用了操作菜单之外的功能。菜单始终显示在屏幕上，直到触发操作或点击黑色蒙版。

六、卡片（Cards）

卡片包含有关单个主题的内容和操作。

原则

1、涵盖

一张卡片可以被看作为一个单独的包含单元。

2、独立

一张卡片可以在上下文中独立，而不依赖周围的元素。

3、个体

一张卡片不能与另一张卡片合并，也不能分成多张卡片。

布局

卡片容器是卡片中唯一必需的元素。下图显示的所有其他元素都是可选的。布局可因内容而变。

1.容器

卡片容器容纳所有卡片上的元素，它们的大小由这些元素占据的空间决定。

2.缩略图（可选）

卡片可以包含缩略图以显示虚拟人物、标记或图标。

3.标题文字（可选）

标题文本可以是相册或文章名称等内容。

4.子标题（可选）

子标题文本可以是文本元素，例如文章署名或标记位置。

5.媒介（可选）

卡片可以包括各种媒介，如照片和图形，例如天气图标。

6.支持文本（可选）

支持文本可以是文章摘要或餐厅描述等文本。

7.按钮（可选）

卡片可以包括操作按钮。

8.图标（可选）

卡片可以包括操作图标。

操作

卡片可以转换为显示其他内容。

1、展开以完成层级之间转换填充整个屏幕

2、展开卡片以显示信息

七、纸片（Chips)

纸片是表示输入、属性或操作的紧凑元素。

用法

纸片允许用户输入信息、进行选择、过滤内容和触发操作。

纸片应该作为一组多个交互元素动态显示。与按钮不同的是，按钮应该是一致的、熟悉的动作调用，用户希望在相同的常规区域中显示为相同的动作。

原则

1、紧凑

纸片是代表离散信息的紧凑组件。

2、关联

芯片应该与它们所代表的内容或任务，有明确而有用的关系。

3、集中

芯片应该使任务更容易完成，或者内容更容易排序。

类型

1、输入型

输入型纸片表示在字段中使用的信息，例如实体或不同的属性。

输入型纸片可根据用户的输入变换文本。

2、选择型

在包含至少两个选项的集合中，选择纸片代表单个选择。

选择单个纸片会自动取消选择该组中的其他纸片。

3、筛选型

筛选型纸片代表选项集合的过滤器。

当用户开始选择纸片时，筛选型纸片建议可以动态变化。

4、操作型

操作型纸片触发与主要内容相关的动作。

点击操作型纸片会触发上下文操作。

八、对话框（Dialogs）

对话框通知用户有关任务的信息，可以包含关键信息、需要做的决策和涉及多个任务。

用法

对话框是一种模态窗口，出现在APP内容的前面，以提供关键信息或要求做出决定。对话框在出现时禁用其它功能，同时对话框必须保留在屏幕上，直到确认、解除或执行必要的操作为止。

对话是刻意中断的行为，应该谨慎使用它们。

原则

1、聚焦

对话框需引起用户注意，以确保其内容得到解决。

2、直接

对话应直接用于沟通信息并专门用于完成任务。

3、帮助

对话框应出现以响应用户任务或操作、以及相关或上下文信息。

何时使用

对话框应该用于：

• 阻止APP正常运行的错误
• 需要特定用户任务、决策或确认的关键信息

类型

1、警示对话框(Alert dialog)

警报对话框会用紧急信息，详细信息或操作中断用户。

2、简单对话框(Simple dialog )

简单对话框可以显示在选择时立即可操作的项目。没有文字按钮。

由于简单的对话框也是中断的，因此应谨慎使用它们。或者，下拉菜单以非模态、破坏性较小的方式提供选项。

3、确认对话框(Confirmation dialog )

确认对话框使用户能够在提交选择之前提供最终确认，以便于让他们在需要时改变主意。

如果用户确认了一个选择，则执行该操作。否则，用户随时可以取消对话框。例如，用户可以收听多个铃声，但只在触摸“确定”时进行最终选择。

4、全屏对话框（Full screen dialog）

全屏对话框将一系列任务分组，例如创建包含事件标题、日期、位置和时间的日历条目。因为它们占据整个屏幕，所以全屏对话框是唯一可以显示其他对话框的对话框。

九、Snackbars

Snackbars 通知用户APP已执行或将执行的操作/任务，并且只是暂时出现在屏幕的底部。一次只能显示一个 Snackbars。

原则

1、信息化

Snackbars 提供应用程序进程的更新。

2、临时性

Snackbars 暂时出现，并且自行消失，不需要用户手动解除。

3、关联性

Snackbars放置在UI的最合适区域。

类型

Snackbars 可以是纯文本，也可以包含单个操作。因为它们会自动消失，所以操作按钮不应该是“解除”或“取消”。

1、文字型

Snackbars包含与正在执行的过程直接相关的文本标签。在移动设备上，文本标签最多可包含两行文本。

2、操作型

Snackbars可以显示单个文本按钮，允许用户对APP当前进程执行操作。Snackbars 不可以是访问核心用例，使APP可用的唯一方法。

如果操作很长，则可以在第三行显示。

Snackbars 出现时没有警告，也不需要用户交互。它们会在4-10秒内自动从屏幕上消失。

十、条幅（Banners）

条幅显示突出的消息和相关的可选操作。

条幅用来展示重要、简洁的消息，并为用户提供解决（或解除条幅）的操作。它需要用户手动关闭。

条幅应显示在屏幕的顶部，或者顶部应用栏下方。它是持久的和非模态的，允许用户随时忽略它们或与它们交互。

原则

1、适当中断

Banners 是中断性的，但它包含的信息及其出现的上下文相匹配，中断程度相对Dialogs较低的。

2、明确

横幅传达简洁的信息，如果用户与他们互动会发生什么。

3、集中

Banner 包含了单个消息和用户可以采取的特定操作。

特别注意

按钮

1. 条幅中的按钮应直接与其中内容相关，并清楚地表示条幅的操作
2. 为清晰起见，按钮必须标有文字，而不是仅仅使用图标
3. 条幅最多可以包含两个文本按钮，左侧放置取消操作，右侧放置确认动作
4. 在条幅内容下方放置按钮，如果有足够的空间放在同一行，则放在同一行

插图

条幅可以使用插图来来丰富内容。如下图：图标可以帮助传达条幅的消息。

位置

1、条幅和顶部应用栏

条幅放在屏幕顶部应用栏的下方。它可以是固定的，也可以随内容滚动，具体取决于环境。

2、条幅和搜索栏

当有搜索栏的情况下，条幅会显示在搜索栏的下方。

3、条幅和底部导航栏

当存在底部导航时，条幅应保留在屏幕顶部。

十一、列表（Lists）

列表是以垂直排列的方式显示多行文本或图像的单一元素。

原则

1、合乎逻辑

列表应按逻辑方式排序，以便于内容易读，例如按字母顺序、数字、按时间顺序或按用户首选项。

2、可操作

列表以一种方式呈现内容，使得识别集合中的特定项目并对其进行操作变得容易。

3、一致性

列表应以一致的格式显示图标、文本和操作。

类型

1、单行列表

单行列表项最多包含一行文本。

2、双行列表

在双行列表中，每行最多包含两行文本。

3、三行列表

三行列表项最多包含三行文本。

列表控件

列表控件用来显示列表项的信息和操作。

1、复选框

复选框可以是主要操作或辅助操作。

2、展开和折叠

通过垂直展开和折叠列表内容，来显示和隐藏现有列表项的详细信息。

3、开关和排序

十二、图像列表（Image Lists）

图像列表在有组织的网格中显示图像集合。

图像列表表示重复模式中的项目集合。它们有助于提高对所持内容的视觉理解。

原则

1、视觉

图像列表允许用户根据图像扫描内容。

2、可比较

图像列表允许用户轻松比较其中的项目。

3、集合

图像列表与周围的内容和布局进行了响应性集成。

类型

1、标准图像列表（Standard image list）

标准图像列表最适合同等重要的项目。它们具有统一的容器尺寸、比例。

标准图像列表可以带或不带文本标签显示。

2、插缝图像列表（Quilted image list）

绗缝图像列表强调集合中的某些项目。他们使用不同的容器大小和比率来创建图像层次结构。

绗缝图像列表不应在图像容器下方显示文本，因为它会破坏布局。

3、编织图像列表（Woven image list）

编织图像列表使用交替的容器比率来创建有节奏布局。编织图像列表最适合浏览对等内容。

4、砌体图像列表（Masonry image list）

砌体图像列表使用动态大小的容器高度来反映每个图像的纵横比。此图像列表最适合用于浏览未裁剪的对等内容。（即常听到的瀑布流形式）

十三、菜单（Menus）

菜单是显示在界面上的临时选项列表。当用户与按钮、操作项或其他控件交互时，它就会出现。

原则

1、快捷

菜单应该易于打开，关闭和交互。

2、关联

菜单内容应该符合用户需求。

3、易读

菜单项应易于浏览。

类型

菜单允许用户从多个选项中进行选择。与选择控件（例如一组单选按钮）相比，它们不是那么地突出，而且占用了更少的空间。

1、下拉菜单

下拉菜单是由图标、按钮或操作项触发的选项列表。它们的位置根据打开它们的元素而变化。

下拉菜单通常位于触发它的元素下方。

2、外露下拉菜单

外露的下拉菜单在选项列表上方显示当前选定的菜单项。有些变体可以支持用户手动输入。

十四、导航抽屉（Navigation Drawer）

导航抽屉提供对目的地和应用功能的访问，例如切换帐户。

原则

1、可识别

导航抽屉的位置和列表的内容可以清楚地看出是导航。

2、有组织

导航抽屉根据用户使用的重要程度（优先级）排序，最前面的是用户频繁使用到的，同时将相关的导航组合在一起。

3、灵活性

导航抽屉可以显示或隐藏，以适应不同的应用程序布局。

类型

1、模态抽屉

模态导航抽屉使用黑色蒙版，阻止其与APP页面内容的其余部分进行交互。它们高于APP中UI的大部分，并且不会影响屏幕的布局网格。

开启和关闭

模态导航抽屉总是通过抽屉外的控件元素来打开，例如顶部应用栏中的导航菜单图标。

同时可以通过以下方式关闭：

• 选择抽屉内的操作项
• 轻点黑色蒙版
• 向抽屉的边缘滑动（例如，从左向右滑动左侧导航抽屉）

2、底部抽屉

底部导航抽屉也是模态抽屉，固定在屏幕底部而不是左边或右边。它们仅用于底部应用栏。

点击底部应用栏中的导航菜单图标即可打开这些抽屉。

在移动设备上打开（纵向）

与其他模态底板一样，底部导航抽屉的初始垂直位置基于是其内容和屏幕高度。

• 如果抽屉内容低于屏幕高度的50％，请始终将抽屉打开至最大高度
• 如果抽屉内容大于屏幕高度的50％，默认将它们打开至50％，然后允许用户将抽屉向上拖动到其全高或屏幕高度

滚动

底部导航抽屉一旦打开到全屏高度，就可以在内部滚动。

当默认打开到屏幕高度的50％时，必须将抽屉拖到屏幕高度，然后才能显示其他项目。在滚动时，抽屉的标题变成了一个顶部应用栏。

十五、操作条：底部（Sheets：bottom）

底部操作条是包含附加内容的列表，其固定在屏幕的底部。

原则

1、支持

底部操作条是对主界面区域UI进行补充的内容。

2、灵活

底部操作条可以显示各种各样的内容和布局。

3、人体工学

底部操作条很容易在移动设备上触及。

类型

1、标准底部操作条

标准底部操作条与屏幕的主UI区域共存，允许同时查看并与两个区域交互。当主UI区域中的内容经常滚动或平移时，它们通常用在屏幕上保持功能或辅助内容可见。

2、模态底部操作条

模态底部操作条提供了一组选项，同时阻止了用户与主界面进行交互。它是移动设备上的内联菜单和简单对话框的替代方案，为内操作项图标和动作提供了额外的空间。

3、扩展底部操作条

扩展的底部操作条是固定到屏幕底部上面控件，用户触发该控件以访问特征或任务。它可用于：

• 持续显示跨应用功能，例如购物车
• 从一组项目中收集或处理用户选择，例如图库中的照片
• 支持任务，例如聊天和评论
• 项目之间的间接导航，例如播放列表中的视频

与浮动操作按钮不应用于相同的目的：

• 浮动操作按钮仅用于操作，并且它们不响应用户与屏幕其余部分的交互。它们可以转换为更大的页面，以允许用户完成操作。
• 扩展底部操作条会直接转换为更大的表面，并可以更新其内容以反映用户交互。

组合

在移动设备上，扩展底部操作条会影响其他底部对齐的组件。它可能会遮挡底部导航等重要功能，或者当放在浮动操作按钮旁边时也会产生混淆。

以下是何时以及如何将扩展底部操作条与附近组件配对的建议：

十六、操作条：侧边（Sheets：side）

侧边操作条是包含附加内容的列表，其固定在屏幕的左边缘或右边缘。

原则

1、支持

侧边操作条是对主界面区域UI进行补充的内容。

2、灵活

侧边操作条可以显示各种各样的内容和布局。

3、关联

根据屏幕尺寸或用户需要，侧边操作条可以是可见的或隐藏的。

模态侧边操作条

模态侧边操作条显示内容，同时阻止用户与屏幕其余部分进行交互。

交互

当用户触发操作时，会显示模态侧边操作条，例如点按顶部应用栏中的按钮或操作图标。它们会被关闭：

• 轻点黑色蒙版
• 向操作条的固定边缘（左侧或右侧）滑动

十七、日期选择器（Pickers）

日期选择器允许用户选择日期或日期范围。

原则

1、关联

日期选择器可以显示过去、现在或将来的日期 - 与任务相关。

2、明确

清楚地指出重要日期，例如当前和选定日期。

3、直观

为确保选择一天或时间是直观的，请使用常见的选择器模式，例如日历。

类型

1、日历日期选择器

日历选择器可用于选择近期或过去的日期，此时以日历的格式按月查看日期非常有用。它们以对话框的形式显示。

比如：

• 预订餐厅
• 安排会议

它们不适合选择久远的过去或未来很久的的日期，例如输入出生日期或到期日期。（在这些情况下，改用输入选择器 或文本字段。）

日历选择器可以选择单个日期和年份。左右滑动可查看月份，点按年份附近的向下箭头，可垂直滚动选择年份。

2、日期范围选择器

日期范围选择器允许选择一系列日期。它会覆盖整个屏幕。

比如：

• 预订航班
• 预订酒店

点按日历上的开始日期和结束日期即可选择日期范围。上下垂直滚动则可查看月份。

3、日期输入选择器

日期输入选择器允许使用键盘上的数字手动输入日期。用户可以在对话框中输入日期或日期范围。

可以通过编辑图标从日期选择器访问输入选择器。如下：

十八、进度指示器（Progress indicators）

进度指示器指示正在进行的进程的状态，例如APP加载、提交表单或保存更新。它们传达APP的状态并指示页面可用的操作，例如用户是否可以离开当前屏幕。

原则

1、信息化

显示进度指示器或者制作进度动画，是为了反映流程状态。它绝不仅仅是为了装饰或好看。

2、动画

进度指示器使用动画捕捉注意力并告知用户活动的进度。

3、统一

进度指示器应以一致的格式（线性或循环）应用于正在进行的流程（例如加载）

类型

Material Design 提供两种视觉上不同类型的进度指示器：线性和圆形进度指示器。只需要一种类型将代表APP的页面进程。例如，如果刷新操作在一个屏幕上显示圆形指示器，则不同页面的相同操作不应该出现线性指示器。

1、线性进度指示器

线性进度指示器支持固定时间和不固定时间的两种操作。

• 时间确定的进度条宽度从轨道的0到100％增加，与流程/任务的进度同步。
• 时间不确定的进度条宽度在轨道上不断增长和缩小，直到流程/任务完成。

2、圆形进度指示器

圆形进度指示器通过沿顺时针方向沿不可见圆形轨道循环旋转来显示进度。它们可以直接应用于元素上，例如按钮或卡片。

在Android上，“滑动到刷新”手势会默认显示一个圆形进度指示器，指示正在刷新UI。

圆形进度指示器支持固定时间和不固定时间的两种操作。

• 当指示器从0度移动到360度时，固定时间的圆形指示器用颜色逐渐填充不可见的圆形轨道。
• 时间不确定的圆形指示器在沿着看不见的轨道移动时会变大和缩小。

十九、选择控件（Selection controls）

选择控件允许用户完成所选的任务，例如选择选项或打开或关闭设置。选择控件位于屏幕上，要求用户做出决定或声明设置或对话框等首选项。

原则

1、熟悉的

选择控件已经在用户界面中使用了很长时间，应该按预期使用。

2、易读

如果选择了选择控件，则应该一目了然，并且选定的项目应该比未选择的项目在视觉上更突出。

3、高效

选择控件可以轻松比较所有选项。

类型

1、复选框

复选框允许用户从一组中选择一个或多个项目。复选框可用于打开或关闭选项。

2、单选框

单选框只允许用户从一组中选择一个选项。当用户需要查看所有可用选项时，请使用单选按钮。如果可以折叠可用选项，请考虑使用下拉菜单，因为它占用的空间更少。

3、开关

开关可以用来切换打开或关闭单个设置的状态。它们是调整移动设置的首选方式。

二十、滑块（Slider）

滑块沿矩形条反映一系列值，用户可从中选择单个值。它们非常适合调整音量，、亮度或图片滤镜调整等设置。

滑块可以在矩形条的两端具有反映一系列值的图标。

原则

1、可调整

滑块仅用于从一系列值中选择选项。

2、即时性

与滑块交互时，应立即显示更改。

3、无障碍

滑块应提供可供用户选择的全部选择。

类型

1、连续滑块

使用连续滑块允许用户进行不需要特定值的有意义选择。

2、离散滑块

离散滑块在按下拇指时显示数值标签，允许用户输入精确值。

二十一、标签（Tabs）

选项卡标签组织并允许在相关且处于相同层次结构的内容组之间进行导航。

每个选项卡中应包含与集合中其他选项卡不同的内容。例如，标签可以呈现新闻的不同部分，不同类型的音乐或不同的文档主题。

原则

1、可扩展

由于标签可以水平滚动，因此UI可以根据需要使用多个标签。

2、信息化

选项卡将内容组织到类别中，以帮助用户轻松查找不同类型的信息。

3、同一行

选项卡标签之间彼此相邻显示。

类型

1、固定标签

固定选项卡同时显示集中的所有选项卡。最适合快速切换相关内容，例如地图设置切换。

点按单个标签，可在固定标签之间导航，或在内容区域中向左或向右滑动。

特别注意

固定标签的宽度相等，可以按以下方式计算：

• 屏幕宽度除以标签数量
• 按照最宽标签的宽度

使用固定标签时，请确保可以在移动设备上看到它们，而不会截断文本。一次不要使用4个以上的固定标签。

聚合固定标签

聚合固定标签在屏幕上不是平均分配。可以在标签栏中居中放置，也可右对齐或左对齐。

应在更宽水平布局中使用聚合固定选项卡，例如横屏模式。

2、可滚动标签

当一组选项卡在屏幕上不够完全展示时，请使用可滚动选项卡。可滚动选项卡可以使用更长的文本标签和更多的选项卡。它最适合在触摸界面上浏览。

二十二、文本字段（Text fields）

文本字段可以让用户在UI中输入文本。它们通常出现在表单和对话框中。

原则

1、突出

文本字段应该突出并指示用户可以输入信息。

2、明确

文本字段状态之间应该可以明确区分。

3、高效

文本字段应使用户能够轻松理解所请求的信息，并修改错误。

类型

1、背景填充型文本字段

背景填充型的文本字段在视觉上比线框型的文本字段更具强调效果，使其在被其他内容和组件环绕时更突出。

2、线框型文本字段

线框型文本字段相比填充型文本字段视觉上更弱。当很多文本字段放在一起时，线框型文本字段较弱的视觉效果有助于简化布局。