【功能控件】动作菜单/动作面板交互设计

2022-06-07 分类：网站建设

鉴于国内交互设计名词混乱不统一，很多设计师不知道如何用专业术语称呼一个控件，因此我开了《这个控件叫什么》专题，梳理控件的名称和使用事项，希望能为推动交互设计发展，做出一点微小的贡献。

Action Sheet(动作菜单/动作面板/行动列表)是由用户操作后触发的一种特定的模态弹出框，呈现一组与当前情境相关的两个或多个选项。用户可以使用Action Sheet启动某个任务，或者确认是否开始执行某个可能具有破坏性的操作。Action Sheet属于iOS规范，近年来Android平台也出现了类似功能的控件。

△ Action Sheet

如何使用

提供完成一项任务的多个选项

移动设备屏幕空间是宝贵的，不可能把所有选项都罗列在一个页面上，如果反其道而行把相关程度非常高的操作分割到多个页面上，又会造成操作繁琐体验不连续的感觉。Action Sheet能承载较多内容，而且仅覆盖当前屏幕的一部分，即不会对用户心流有很大的干扰，操作也非常便捷。适合呈现与当前任务相关的多个选项。

△ 列表模式和宫格模式

选项较少可使用列表模式，选项过多时，不建议在列表模式中滚动，因为选项的触发横向区域很大，在滚动过程中很容易不小心误点了其中一个。

宫格模式适用于选项非常多的情况，并且能以图标形式展现选项，常见于分享到其他社交App或使用第三方App打开文件的场景。使用宫格模式建议将相关选项分组，如果某组的数量太多，可以在屏幕右边缘露出部分图标，暗示可以横向滑动查看更多选项。

注意：Action Sheet中的选项点击后会立即执行任务，而不是仅仅填写一个选项，它不能用在表单中，表单单选应当使用Picker、Segment Control、Radio Button等控件。

危险操作二次确认

用户在使用过程中，出现删除、未保存退出等可能产生潜在风险的行为时，应当弹出Action Sheet，让用户有机会停下来充分考虑当前操作可能导致的危险结果，并将危险操作用红色标注，为他们提供其它替代的安全选项。Action Sheet是可以连续弹出的，例如第一个Action Sheet中选择删除，第二个Action Sheet中确认删除。此外，如果危险的情况并非由用户主动发起或者严重影响系统本身的完整性，应该使用Alert(这是Alert和Aciton Sheet大的区别)。