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

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

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最大的区别)。

△ Action Sheet和Alert

不同屏幕尺寸的呈现样式

在iPhone屏幕上，为了便于单手持握时操作，Action Sheet通常占据屏幕底部区域。在屏幕较大的iPad上，如果继续显示在屏幕底部，注意力切换和手指移动的路径会很长，频繁使用会比较累，因此iPad的Action Sheet通常在触发区域附近以Popover(弹出式气泡)呈现。

关闭Action Sheet可以通过点击“取消”按钮和空白区域。Action Sheet以Popover呈现时不需要“取消”按钮，因为点击宽广的空白区域关闭更方便。

△ iPhone和iPad的Action Sheet

清晰准确的描述

如果一个页面有多个唤起Action Sheet的对象，例如文件列表，点击某个文件弹出Action Sheet后遮盖了页面，用户不知道当前操作的文件是哪个，也许就会引发误操作。因此，在页面有多个唤起对象或选项本身不够明晰的情况下，提供清晰准确的描述是非常有必要的。

△ Dropbox对操作对象(文件)的图文描述

合理的视觉强调手法

出于业务方面的考虑，有时我们希望用户更多的点击其中某个选项。例如豆瓣为了更好的把内容引入广播里传播，特地在Action Sheet把“推荐广播”放到第一位独占一行，但是线性图标和浅色的文字比起下面的面性图标看上去反倒是让“推荐广播”像Action Sheet的描述说明而不是可以点击的按钮。

△ 豆瓣App改版前后

还有LOFRER把最重要的选项“转载到我的LOFTER”做成了纯文字样式，下面的彩色图标比较抢眼，用户会误以为“转载到我的LOFTER”是描述而不是选项。

△ LOFTER改版前后

好在后来的版本豆瓣和LOFTER都改过来，想要某个选项更突出应该采取合理的视觉强调手法。

相关资料

Android对应的控件

如何建站：

建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了