「这个控件叫什么」系列之动作菜单/动作面板

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

往期回顾：

1. 《「这个控件叫什么」系列之小红点+索引导航+分段控件》
2. 《「这个控件叫什么」系列之加载占位图+页面指示器》
3. 《「这个控件叫什么」系列之步进器+SWITCH》
4. 《「这个控件叫什么」系列之TOAST》
5. 《「这个控件叫什么」系列之虚拟键盘/软键盘/SOFT KEYBOARD》

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对应的控件

Android有2个使用场景和Action Sheet相似的控件。第一个是Modal Bottom Sheet（模态底部菜单），和Action Sheet最大的区别是没有“取消”按钮，因为Android有物理Back导航键。
（详见：https://material.io/guidelines/components/bottom-sheets.html#bottom-sheets-modal-bottom-sheets ）

△  Modal bottom sheet

另一个是Simple dialogs（简易对话框），从屏幕中央弹出，没有“取消”按钮，通过点击空白区域关闭。微博、豆瓣的Android版使用了这个控件。
（详见：https://material.io/guidelines/components/dialogs.html#dialogs-simple-menus ）

△  微博iOS和Android对比

• Action图标不等同于分享图标

吆喝科技曾用A/B Test帮助墨迹天气优化分享按钮的点击率，在准备的4个分享图标方案中，方案2拨得头筹，相对于原始方案点击率暴涨近20%！（详见http://www.appadhoc.com/blog/mojitianqi-fenxiangtubiao/ ）

△  墨迹天气优化分享按钮的4个方案

一方面我们可以得出用户对分享图标认知比较集中，对Apple原生的图标很熟悉的结论。事实上Apple规范中对此图标的定义是唤起模态视图（Modal View）的Action图标，并非特指分享功能。

△  Apple对Action图标的定义

• iOS支持非相册文件上传

普遍认为iOS上传内容时，Action Sheet只有选择相册、打开摄像头拍照这两个选项。事实并非如此，网盘类App使用标准的API，能从在Action Sheet中选择iCloud或者其他网盘跨云传输，突破了只能上传本机内容的限制。

△  跨云传输

• 为什么把Activity View称为宫格模式

熟读iOS规范的读者会发现，iOS 10规范新增了Activity View控件（ https://developer.apple.com/ios/human-interface-guidelines/ui-views/activity-views/ ），通过阅读多个版本的iOS规范，我发现Activity View是从Action Sheet演化出来的，除了由系统本身使用，布局是宫格而非列表外，并没有其他不同。再考虑到用于分享功能的宫格Action Sheet大家非常熟悉，因此把Activity View归为宫格模式。

△  从Action Sheet演化出Activity View

欢迎关注作者的微信公众号：

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备：http://hao.uisdc.com