HIG / Views / Action Sheets

辛小仲 2020-10-21

433

原文：Human Interface Guidelines/Views/Action Sheets

链接：https://developer.apple.com/design/human-interface-guidelines/ios/views/action-sheets/

作者：Apple Design

译者：辛小仲（说明：文字部分会按照自己的主观理解进行翻译，并非根据字面意思直译过来的）

Action Sheets

Action Sheets操作列表/动作面板是操作类组件之一。

Action Sheet操作列表/动作面板。

用法

Action Sheet常用于：

场景1：响应操作。响应当前界面触发的下一步操作
场景2：确认操作。重要常规操作需要用户进行确认，一般常规操作不需要用户确认；而危险操作一般都要用户确认

【重要说明：IOS14及以后，在第一个场景下：若是在navigation bar和toolbar点击按钮(通常是图标按钮)触发的下一步操作，统一用「Pull-Down Menus」替换「Action Sheet」使用；若是在context view内容视图中点击按钮(通常是文字按钮)触发的下一步操作，视情况使用「Action Sheet」或「Alert」。】

从包含关系而言，场景1包含场景2。

相关阅读：

《HIG Controls Pull-Down Menus》

Navigation bar触发操作。

Context view触发操作。

确认破坏性行为。

结构

取消操作

不管是上述的场景1还是场景2，都属于操作确认，因此有必要提供“取消”按钮，“取消”按钮放置在操作表底部。

点击后取消操作并关闭浮层。（点击遮罩层也是）

危险操作

若是破坏性(危险)行为，文字可以用红色突出，并且放置在操作表顶部。

点击后执行操作并关闭浮层。

交互

进场

Action Sheet在小屏幕(移动端)上从屏幕底部向上滑出进场；在较大的屏幕(平板或pc端)上，将以popover的形式进场。

出场

与上反之。

Action Sheet进场/出场(移动端)。

与Alert区别

从结构交互上来说，action sheet和alert主要区分如下：

都有点击关闭按钮和其他操作按钮，此外，action sheet有描述文案(可选)；alert可包含标题和副标题(可选)
都有遮罩层，action sheet点击遮罩层取消操作并关闭浮层，alert点击遮罩层无反应
action sheet从屏幕底部滑入/出，alert从屏幕中间出现/消失

Action sheet和alert都可以应用在「确认操作(常规确认+危险操作)」场景，个人认为：

若是最后由toolbar点击某按钮触发的「危险操作」，则用action sheet(与触发按钮离得近)
若是最后由navigation bar点击某按钮触发的「危险操作」，则用alert(与触发按钮离得近)
若是最后由context view内容视图点击按钮触发的「常规确认」，3个操作以上则用action sheet，2～3个操作则用alert(alert若高度太长的话影响体验)
若是最后由context view内容视图点击按钮触发的「危险操作」，则用action sheet

(PS：以上仅为个人观点。)