移动端组件-Actionsheet 动作面板

Actionsheet 动作面板

动作面板展示了与用户触发的操作直接相关的一系列选项。

结构

遮罩

表明 Actionsheet 是一个模态视图，可以通过遮罩让屏幕变暗，关注选项。点击遮罩区域，可以收起操作面板

描述

可以简单描述当前选项

操作选项

取消

取消按钮在最下方，让用户在改变主意的时候离开。

1.png

用法

何时使用

操作面板将次操作隐藏在页面外，直到需要的时候才出现。

使用操作面板来：

• 提供完成一项任务的不同方法。
  操作面板提供一系列在当前情景下可以完成当前任务的操作，而这样的形式不会永久占用页面 UI 的空间。

• 在用户完成一项可能有风险的操作前获得用户的确认。
  操作面板让用户有机会停下来充分考虑当前操作可能导致的危险结果，并为他们提供了一些其它的选项。

关于操作选项

• 使用红色文字来表示可能存在破坏性的操作，且在操作列表的底部使用。

越靠近列表顶部的操作越容易引起用户注意，潜在风险的操作离列表底部越远，用户在操作的时候就越不容易误点它。

2.png

• 操作面板中的按钮数限制在 5 个之内，包括“取消”按钮。

如果你的操作列表中存在过多按钮，用户没法快速扫描可选项。

3.png

内容

• 选项的命名简介、明确

• 不要使用icon来表明选项

  
  4.png

类型

默认类型

5.png

拓展：分享和操作

• 内容为网格列表

关注公众号“设计有一思”