这个控件叫:Action Sheet/动作菜单/行动列表

作者:龙爪槐守望者

原文地址:zhuanlan.zhihu.com/p/28489711

转载无限欢迎,但请注明「作者」和「原文地址」。感谢您对作者版权的尊重。


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

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

v2-4700e90cdb82e82059eb66cc5669c3f0_r.jpg

Action Sheet

如何使用

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

v2-bc39db54d538264f1b3084e575495dba_r.jpg

列表模式和宫格模式

选项较少可使用列表模式,选项过多时,不建议在列表模式中滚动,因为选项的触发横向区域很大,在滚动过程中很容易不小心误点了其中一个。
宫格模式适用于选项非常多的情况,并且能以图标形式展现选项,常见于分享到其他社交 App 或使用第三方 App 打开文件的场景。使用宫格模式建议将相关选项分组,如果某组的数量太多,可以在屏幕右边缘露出部分图标,暗示可以横向滑动查看更多选项。
注意:Action Sheet 中的选项点击后会立即执行任务,而不是仅仅填写一个选项,它不能用在表单中,表单单选应当使用 Picker、Segment Control、Radio Button 等控件。

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

v2-3f1a1986433d69ad5affe03aa1a1fae0_r.jpg

Action Sheet 和 Alert

  • 不同屏幕尺寸的呈现样式
    在 iPhone 屏幕上,为了便于单手持握时操作,Action Sheet 通常占据屏幕底部区域。在屏幕较大的 iPad 上,如果继续显示在屏幕底部,注意力切换和手指移动的路径会很长,频繁使用会比较累,因此 iPad 的 Action Sheet 通常在触发区域附近以 Popover(弹出式气泡)呈现。
    关闭 Action Sheet 可以通过点击“取消”按钮和空白区域。Action Sheet 以 Popover 呈现时不需要“取消”按钮,因为点击宽广的空白区域关闭更方便。

v2-c98b7e2e640d2fd4006b22d01f01143c_r.jpg

iPhone 和 iPad 的 Action Sheet

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

v2-a52354875d621965ffc801053e6913bd_r.jpg

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

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

v2-33686c85ad997fa28a2002fbe09d39f3_r.jpg

豆瓣 App 改版前后

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

v2-9d6eb41acbea8000131fcfc29000e142_r.jpg

LOFTER 改版前后

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

相关资料

v2-e81a7037b3b29f9805df5a863f76f31c_r.jpg

Modal bottom sheet

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

v2-9d3f92b7d4a18dfdad2a4a31a6563d1a_r.jpg

 

  • Action 图标不等同于分享图标
    吆喝科技曾用 A/B Test 帮助墨迹天气优化分享按钮的点击率,在准备的 4 个分享图标方案中,方案 2 拨得头筹,相对于原始方案点击率暴涨近 20\\\%!(详见www.appadhoc.com/blog/mojitianqi-fenxiangtubiao/ )

v2-fe26beafe2ef34d94e9ddcfb3825ef48_r.jpg

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

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


v2-d30ebb6a34d298d4cfc02ae7fdc6b265_r.jpg

Apple 对 Action 图标的定义

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

v2-3f05289426b05ed5a6dbca98e4bfeb15_r.jpg

跨云传输

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

v2-2a1f37384de66f8a362c444892ee2a83_r.jpg

从 Action Sheet 演化出 Activity View


更多文章,欢迎访问 uicircle.club

微信公众号:uicircle

成为会员

UIcircle Member

Local Groups

UIcircle 会员

目前仅需 39 元即可加入我们

成为会员后,您可以

  • 加入内部的 Slack Channel 及微信群
  • 报名参与我们的工作坊、分享会等各种线下活动
  • 其他会员福利,如周边礼物、软件折扣等

如有疑问,可以先 了解我们

加入我们