移动端表格控件_移动端控件（二）-浮层（Action sheet）

什么是浮层

Action sheet是对控制或（操作）行动做出响应的一种特殊警示样式，它提供了一组前后操作相关的两个或多个选项。Action sheet一般用于让人们发起某项任务，或在执行可能具有破坏性操作之前进行请求确认。在手机端，Action sheet通常从屏幕底部向上滑出；在pad或者PC端，它可以向气泡一样弹出。——iOS Human Interface Guidelines

安卓和iOS规范中，关于浮层的描述有所不同。Action sheet （活动面板）是iOS规范中的叫法，浮层底部一般有“取消”按钮；而安卓的则有三种：Standard bottom sheet（标准浮层）、 Modal Bottom Sheet（模态浮层），Expanding bottom sheets（拓展型浮层）。https://material.io/components/sheets-bottom/#

底部浮层能承载较多内容，而且仅覆盖当前屏幕的一部分，相比于弹窗也不会对用户心流有很大的干扰，操作也非常便捷。适合呈现与当前任务相关的多个选项。

• iOS常见浮层形式：

在iOS规范中，出现在页面底部的浮层有两种：上拉菜单（Action Sheets）和活动视图（Activity Views）。上拉菜单，是当用户激发一个操作的时候，出现的浮层。“使用上拉菜单让用户可以开始一个新任务或者对破坏性操作进行二次确认。”常见场景有：分享、更多（操作选项）、删除确认、设置面板等等

活动视图（Activity Views）中的“活动”，指的就是浮层里包含的每一个操作。活动视图里包含的操作，必须是在对当前场景有用的操作。

安卓浮层：

安卓的模态浮层是我们见的最多的一种浮层类型，这种浮层为用户提供了一组选择，同时阻段了与浮层外其它区域的交互。标准浮层与屏幕的主UI区域共存，并允许同时查看和与这两个区域进行交互，还可以向上滑动浮层变为全屏状态。安卓的模态浮层安卓的模态浮层

拓展型的浮层通常附着在底部，点击可展开查看内容，常见应用场景有添加购物车、删除（添加）图片等等。

消失机制

四种：点击取消按钮、下滑浮层取消，点击控件外区域这三种都是让浮层消失，单击操作选项则是在消失同时执行对应选项任务。（安卓通常没有取消按钮）

注意事项

iOS：

• 需要提供一个“取消”按钮
• 重要选项，突出展示（如标红标蓝）
• 避免在操作表中使用滚动操作。如果操作表上有太多选项，则用户必须滚动查看所有选项。滚动需要额外的时间来做出选择，并且很难做到无误地点击按钮。（这一点跟安卓不一样，安卓是支持滚动的）

andriod：

• 底部浮层出现时，背景要有蒙层，否则可能使用户误解他们可以与屏幕其余部分进行交互
• 浮层展开为全屏状态时，顶部应该为“关闭”或“收起”按钮，而非“返回”按钮

• 浮层高度通常不应该超过屏幕高度的50%。内容占50%-100%时应该只展示50%，支持滑动查看更多；当内容超过100%时，上滑应该切换至全屏状态（顶部有关闭or收起按钮）

参考文献：

https:// developer.apple.com/des ign/human-interface-guidelines/ios/views/action-sheets/ https:// material.io/components/ sheets-bottom/#theming
iOS和Android规范解析：底部浮层（上）
iOS和Android规范解析——底部浮层（下）
这个控件叫：Action Sheet/动作菜单/动作面板/行动列表