Material Design 设计语言（八）操作条

 操作条（Sheets）

一、操作条：底部（Sheets：bottom）

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

原则

1、支持

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

2、灵活

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

3、人体工学

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

类型

1、标准底部操作条

标准底部操作条与屏幕的主UI区域共存，允许同时查看并与两个区域交互。

当主UI区域中的内容经常滚动或平移时，它们通常用在屏幕上保持功能或辅助内容可见。

2、模态底部操作条

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

3、扩展底部操作条

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

• 持续显示跨应用功能，例如购物车

• 从一组项目中收集或处理用户选择，例如图库中的照片

• 支持任务，例如聊天和评论

• 项目之间的间接导航，例如播放列表中的视频             

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

• 浮动操作按钮仅用于操作，并且它们不响应用户与屏幕其余部分的交互。它们可以转换为更大的页面，以允许用户完成操作。

• 扩展底部操作条会直接转换为更大的表面，并可以更新其内容以反映用户交互。

组合

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

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

二、操作条：侧边（Sheets：side）

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

原则

1、支持

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

2、灵活

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

3、关联

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

模态侧边操作条

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

交互

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

• 轻点黑色蒙版

• 向操作条的固定边缘（左侧或右侧）滑动

– 推 荐 阅 读 –

Material Design 设计语言（七）列表

Material Design 设计语言（六）菜单

Material Design 设计语言（五）卡片和纸片

Material Design 设计语言（四）按钮