新人来收！4个底部浮层的科普知识点

关于底部浮层的定义相信大家很熟悉，底部浮通常称为「浮」或「浮窗」，用给予信息提示，也用展示更的拓展信息。

「角落一」—— 与对话框的「亲属关系」

单从定义上看，底部浮与对框的用是高度相似的，是信息提示或是对当前页面信息的延展，但在具使用场的互操中，二者却大有不同：

1. 触方式

对框以自动触，而底部浮是必须通用户操才以触显示，用户而言底部浮的显示符合心理预期。

2. 关闭方式

对框通常要求用户进行选项操才关闭，关闭方式单一；底部浮的关闭方式更元，对用户而言有更富的选择权。

底部浮对比对框的优势在，它的显示更符合用户的预期且干扰程度也低。

「角落二」—— 多姿多彩的关闭方式

底部浮灵活很强，提供种关闭方式：

1. 触发浮层上的下一步操作

是最常见的关闭方式，底部浮通常为信息的延展，浮内进行互操。

2. 点击浮层外的区域

底部浮不是一个完整的页面，为主页面的二出现，因此出现时通常有黑蒙为遮罩，点击黑蒙的区域将浮关闭回到主页面。

△ 点击黑蒙的任意区域即关闭

3. 下拉浮层达到收起的阈值

底部浮的灵活大，若浮的高度小（未达到屏幕高度的一半），长按浮顶部置是否能够进行拖拽，若浮是能够进行上下拖拽的，么长按此处下滑也将浮进行关闭。

△ 长按浮顶部往下拖拽即关闭

关于收起阈值有两可作为拓展说明：

阈值设

常是以浮层高度半作为临界值。

浮层首屏下滑

若浮层高度较大，上下滑动查看内容时，在浮层首屏继续下滑，可将浮层关闭。此设常见于浏览内容浮层

△ 上下滑动浏览，滑至首屏再往下滑即触发关闭

4. 点击「关闭」按钮

底部浮层可根据业务场景需要来配关闭，也可接放明确关闭按钮，击即可将浮层进关闭。

面对多姿多彩的闭方式，我们在设计的过程里要仔细考虑合适的闭操作，可多思考：若有明确的闭按钮，是否还需要点击黑色蒙层就进行闭？若浮层的容很重要且交互较复杂，是否还需要可拖拽的操作？

「角落三」—— 随时能「长高」

前面我们已经说到，浮层是可进行长按拖拽操作的，长按除了可拉闭，可进行的延伸。于延伸的定义，在此需要设置一个阈值，到达此界值松手即可将此浮层的延伸至最大，若未达到界值松手即恢复原。

△ 长按浮层顶往上拖拽使得延伸

「角落四」—— 二级浮层也不在话下

若浮层容过多，需要对某一点进行特殊说明或者某一容的延展时，可配置二级浮层。

△ 二级浮层可作为一级某容的具体说明或择的补充

总结

浮层作为灵很的一个交互组件，适于丰富的务场景，我们在做设计时可多思考一点，于闭、于操作是否处于需求和体验的绝佳平衡点，共勉之。

欢迎关注作者公众号：「计牛奶盒」