交互设计规范之动作面板

  • 经验类型规范/资料
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-禁止演绎
1225 0 0 2021-09-18
  • 动作面板 
  • Action Sheet


一.定义

由用户操作后触发的一种特定的模态弹出框,呈现一组与当前情景相关的两个或多个选项


二.用途

由用户某个操作行为触发

提供一系列在当前情景下可以完成当前任务的操作

在用户完成一项可能有风险的操作前获得用户的确认。


三.类型

宫格式、列表式

1.宫格式

宫格模式适用于选项比较多的场景,使用宫格模式建议将相关选项分组,若数量太多,支持横向滑动查看更多选项。

【交互说明】

1)从屏幕底部边缘向上展开,至上而下收起;

2)提供「取消」按钮。点击「取消」按钮或蒙层可关闭动态面板;

3)可在顶部对执行对象进行描述,包括图片、文本形式,最多1行;

4)选项一般为2-5个,支持左右滑动查看更多选项;

5)弹框高度做自适应。

2.列表式

选项较少时可使用列表模式,选项过多时,不建议在列表模式中滚动,因选项的出发横向区域很大,容易误点。

【交互说明】

1) 点提供「取消」按钮。点击「取消」按钮或蒙层可关闭动态面板;

2)点击热区为整个列表项;

3)弹框高度做自适应;

4)最好使用红色文字来表示可能存在破坏性的操作;

5)避免选项过多,避免滚动。

6)可在顶部对执行对象进行描述,包括图片、文本等形式。

【交互说明】

1) 选中选项后需点击确认按钮才生效,否则不改变原有状态;

2)点击确认按钮、蒙层或关闭按钮都可关闭动态面板;

3)点击热区为整个列表项;

4)图标可选是否展示。

Powered by Froala Editor

全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票