正确使用控件-底部浮层（下）

Google Material Design设计规范和iOS设计规范中，都有从底部向上出现的浮层组件。在Android中，是底板（Bottom Sheet）；在iOS规范中，是上拉菜单（Action Sheets）和活动视图（Activity Views）。上周介绍了iOS中的两个控件，本周介绍MD中的底板组件。

Google Material Design Guideline

在MD规范中，底板分为两种：固定底板和模态底板。它们的区别，主要在状态是否固定——固定底板的状态是固定的，和应用界面在同一层级；而模态底板的状态是临时的，其层级位于应用界面之上。举个栗子：

另外，我们看一下MD规范给出的各部件的高度示意图，可以发现，模态底板的高度是很高的（16DPs)；原图中没有给出固定底板的高度示意，我添加了一下（蓝色部分,0DPs）：

MD规范中各部件的高度示意图

也就是说，如果两种底板同时出现，模态底板是压在固定底板的上面的（你想多了，呵呵呵）。

另外还有一个区别：模态底板出现的时候，页面会自带蒙层；固定底板出现的时候没有蒙层。

下面详细说一下两种底板。

固定底板（Persistent Modal Sheet）

固定底板主要用于以下两种情况：

1. 在当前页展示新内容；

2. 展示与主要内容同等重要的新内容。

固定底板示例

对于不同尺寸的设备，MD规范也给出了详细的说明：

对于手机，不论正常或者横置的情况，固定底板都占满100%的宽度。

对于平板，则要依据内容的多少决定固定底板是否占满100%宽度：

平板上固定底板占满100%的宽度

对于PC，MD规范建议设计师考虑把固定底板移到屏幕左侧：

PC上的固定底板

知识运用

请回答以下两个问题，这将帮你更好理解这周的主题。

1. 底部浮层这个控件，无论是iOS还是安卓应用中都使用较为频繁。这种控件在这两个系统中有一个最显而易见的区别，请思考一下是什么？

2. 请思考一下，在什么情况下，比较适合使用底部浮层这种控件？

---

本文为小密圈“交互小殿堂”本周主题“场景思维”的节选内容。文章后半部分将介绍流程的完整性。感兴趣的朋友可加入小密圈“交互小殿堂”查看原文。

关于小密圈“交互小殿堂”

交互小殿堂设置了6个主题，帮助你系统学习交互：

- 场景思维（2周）

- 心理模型（1周）

- 流程设计（5周）

- 正确使用控件（15周）

- 测试方案（3周）

- 用研（3周）

以上这些专题，将每周固定发布在我的小密圈“交互小殿堂”。

同时，为了让大家更好地掌握每周的专题，安排每周的计划如下：

- 周一在小密圈“交互小殿堂”独家发布一篇主文，介绍本周主题；

- 周二至周五解答圈友们关于本周主题的问题；

- 周六分享优秀交互设计案例，并带领大家解析设计亮点；

- 周日公布文末问题的答案。

6个专题结束后，会为大家提供7个需求，供大家实战，锻炼之前学到的技能。

具体的安排如下：

第一周，给出需求说明和重点提示；

第一周剩下的几天以及第二周，大家根据需求进行交互方案设计；

第三周集中点评大家的方案，给出建议。

欢迎加入，和大家一起系统学习交互。

加入小密圈方法

点击链接加入http://t.xiaomiquan.com/MBiq7qV

现在圈子刚刚建立，实行短暂优惠：

两人一起报名，享8折优惠；

三人一起报名，享7折优惠；

四人一起报名，享6折优惠；

五人及五人以上一起报名，享5折优惠；

最后顺提一句，讨论会使我们更清楚地认识这个控件。欢迎大家留言讨论。