Material Design — 底部动作条（Bottom Sheets）

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚！

写完底部导航的文章以后，发现自己竟然用了3个小时，而这三个小时中有两个小时在斟酌：这句话我该怎么翻译？

ok，fine，学交互的时候还能学英语，这感觉也是蛮好的。

底部动作条（Bottom Sheets）

Material Design链接：底部动作条

底部动作条

底部动作条从屏幕底部向上滑出，以显示更多的内容。

持久底部动作条（Persistent bottom sheets）融入app 来展示所支持的内容。

模态底部动作条（Modal bottom sheets） 主要用于移动设备，也可以展示其他app的深度链接的内容。

交互

只有当用户有发起的动作时才出现。

海拔

持久底部动作条：与应用程序相同的海拔

模态底部动作条：高于app

替代

Simple dialogs

Menus

用法

底部动作条有两种主要类型：

持久底部动作条（Persistent bottom sheets）展示的是App中的内容。

模态底部动作条（Modal bottom sheets）是Menus或Simple dialogs的替代品，它们还可以展示其他app的深度链接的内容，主要用于移动端。

可以用海拔来区分模态底部动作条与持久底部动作条。模态底部动作条停留在比app内容更高的高度；而持久底部动作条与app保持在相同的海拔，并与其内容融为一体。

在空间不受限制的较大的屏幕上，使用替代的表面和组件，例如Menus或Simple dialogs可能比底部动作条更合适。

左：模态底部动作条    右：持久底部动作条

持久底部动作条（Persistent bottom sheets）

持久底部动作条用来展示app里用来补充主页面的内容。即使不常用，仍然要保持可见状态，并且需与应用程序保持在同一高度，并融入其内容。

用法

·在一个独特的表面上引入新内容

·展示最主要的内容

与悬浮动作按钮搭配能纵向移动

移动端

无论是竖屏还是横屏，持久底部动作条都是完整的宽度。

平板/pc

持久底部动作条要么是完整的宽度，要么是嵌入的。这取决于它们包含内容的宽度、整体的UI、底层的内容和风格的选择。

左：完整的宽度    右：嵌入的

在pc端的桌面，持久底部动作条可以转变为其他的动作条样式。

在pc端，左侧显示内容可能更加合适

模态底部动作条（Modal bottom sheets）

模态底部动作条可代替Menus或Simple Dialogs，可以展示其他app的深度链接的内容。它们出现在其他UI元素之上，必须被关闭才能与底层内容交互。当一个模态底部动作条滑到屏幕上时，屏幕的其余部分就会变暗，把焦点集中在动作条上。

左：包含列表    右：包含网格

用法

模态底部动作条可以:

·作为Menus或Simple Dialogs的替代，展示列表或网格中的动作；

·当Menu没有明显的入口时，显示快捷菜单；

·优先考虑所包含的元素的可见性。

模态底部动作条可以显示长名称的菜单项，带说明的菜单项，带icon的菜单项。

当显示菜单项时，完全扩展的模态底部动作条与app 导航栏的最底端要保持最小8dp的距离。

左：带icon    右：带说明性文字

深度链接

模态底部动作条可以用来展示另一个app的内容或控件，这个需要占完整的宽度。（这个iOS是做不到的...）

可以不打开词典app就直接展示其中的内容

不离开右边的app能直接展示左边的app内容

模态底部动作条可能包含在另一个app中进行深度导航的链接，这些链接可能是：

·允许用户在另一个app中访问多个层级。

·回到他们开始的层级。

但是，这些深层链接可能不允许用户在打开的app中导航：它们可能只停留在初始层级，更深入，或者返回到初始层级。

或者，深层链接可以将用户从底部动作条导航到另一个视图。

为了使底部动作条中的的深层链接向上导航，通过溢出菜单提供一个明确的链接来打开app。底部动作条中的动作可能会导致打开父级app，比如使用“添加联系人”操作。

（这一段根本没看懂...也不知道自己翻译的是个啥...希望大神来指点我一下

However, these deep links may not allow the user to navigate upward in the hierarchy: they may only stay at the initial level, go deeper, or travel back to the initial level.

Alternatively, deep links may navigate the user away from the bottom sheet entirely, into another view.

To enable upward navigation from the bottom sheet’s deep links, offer an explicit link to open the application via an overflow menu. Actions within the deep-linked bottom sheet may result in opening the parent application, such as with an “add contact” action.）

左：全展开的模态底部动作条返回应该为“X”    右：app到下一层级时返回用箭头

移动端

模态底部动作条主要用作移动端的组件，无论是竖屏还是横屏，都是完整的宽度。

左：长列表可滚动，最多16:9    右：不能与导航栏重叠，保留一个区域让用户取消它

平板/pc（并不适用）

考虑在大屏幕上选择别的组件替代模态底部动作条，因为模态底部动作条可能会远离用户点击或触摸到的地方，它会将用户的注意力分散到屏幕的两个不同部分。

由于桌面空间的约束更少，它可以支持多种方式来替换模态底部动作条。

比如用Menu，点击后就在视觉焦点部分出现

大屏幕中的模态底部动作条可使用适当的样式来增加额外的空间。

左：网格底部动作条    右：长列表底部动作条

行为

1、底部动作条可以通过向下滑动底部动作条来关闭；

2、通过点击一个明显的控制按钮，例如在app导航栏中的“X”，或者触摸Android系统的后退按钮；

3、模态底部动作条也可以通过点击动作条以外的区域关闭。