Material Design——Backdrop

#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计，借此加深各种组件的应用~

Material Design链接：Backdrop

一个Backdrop出现在应用程序中的所有其他界面底部, 显示相关信息内容和可操作的内容。

一、使用

背景由两个层组成: 顶层和底层。底层显示操作和上下文, 这些控制并知会顶层的内容。

1.底层；2.顶层。

1.隐藏后, 底层可以提供有关顶层的相关展示信息； 2.显示后, 底层显示与顶层相关的空间。

1.底层的内容可以是导航, 以此更改前面图层上显示的内容；2.底层可以筛选顶层的内容。

△ 原则

· 相关  底层应该保持不变的, 显示与顶层相关的控件和内容。

· 立即  底层可以从任何滚动位置访问。

· 内容性强  在同一时间应该只关注一个层。

二、分析

backdrop由Back layer（底层）、Front layer（顶层）和可选的 subheader （标题）组成。在同一时间，只可在其中一个层操作。

1. Back layer；2. Front layer；3. Subheader (optional)。

△ 顶层操作

顶层总是出现在底层的前面。它以全角显示, 并包含主要内容。

顶层可以包含浏览组件, 例如:1.Text lists（文本列表）；2.Image lists（图像列表）；3.Cards（卡片）；4.Text（文本）。

当界面停留在顶层，底层会包含一个显示图标，点击这个图标，界面就会转换到底层。

△ subheader (optional)

subheader是位于顶层，包含标题以及图标的固定区域。

subheader 可以固定到位, 而在顶层的内容可以独立滚动。

顶层上的 subheader (A) 和可滚动内容区域 (B) 的宽度为1dp。

△ 底层操作

底层显示在应用程序中的最低宽度 (0dp) 中, 填充整个背景。它包含与前一层相关的可操作内容。

底层包含用于导航或筛选的组件, 例如:1.导航； 2.步骤器；3.文本字段； 4.选择控件。这些组件会影响前端层上的内容。

A: 底层的宽度值为0dp。

当底层处于活动状态时,顶层可以包含文本和图像, 或scrim, 作为提供隐藏底层的方法。

1.图标和文本；2. Scrim。

三、行为

△ 触发底层

通过一些交互操作来触发底层。

可以通过点击菜单图标 (1) 来触发底层。

可以通过点击任何输入字段 (1, 2, 3)来触发底层。

Wrong：不要用用滑动手势来触发底层。

左：当显示底层时, 顶层将从视图中滑出；右：底层的高度基于其内容的大小。

△ 隐藏底层

可以通过与顶层交互，或触发任一层上的相关操作来隐藏底层。

可以通过点击底层关闭图标 (1), 整个顶层的 (2)区域, 或顶层箭头 (3) 来隐藏底层。

左：当显示底层时, 顶层内容将变为隐藏状态。右：若要隐藏底层, 请点击顶层的任何位置或点击底层的隐藏图标。要当看不见顶层的时候, 可以点击关闭图标来隐藏底层。

△ 内容滚动

顶部和底部的滚动行为操作有所不同。

Right：顶层内容可以水平滚动。Wrong：不要让顶层内容延伸到卡片之外之外与底层重叠。

左：使用 subheader 在顶层上垂直滚动内容；右：当使用 subheader 时, 在显示底层的同时顶层内容可以保留其滚动位置。

左：如果顶层最小化, 则底层上的内容可以垂直滚动；右：在小区域中向后滚动图层内容时要小心。由于显示的背景是模式, 尽可能多地显示更多内容。

---

END.THANKS FOR YOUR READING~

如有不当，还请多多指教~