1 篇博文 含有标签「drawer」

弹窗​

中断用户操作，对当前操作进行强制反馈的交互形式

分类​

• 模态弹窗
  • 需要做出对应交互，，模态才会消失
  • 对话弹窗、内嵌表单弹窗、分布表单弹窗、文件选择弹窗、复杂信息展示
• 非模态弹窗
  • 不打扰用户，短暂停留
  • 通知提醒、全局提示、警告提示、气泡卡片、文字提示

做一个思维导图总结

结构拆解​

• 模态层
• 关闭入口
• 弹窗主体

模态层​

颜色​

多层级​

避免多层级​

• 流程优化

检查流程是否足够精准，可否通过精简流程，减少不必要的多层模态的使用

• 内容量优化

内容量较少的时候，可以采取下拉菜单进行优化，解决多层模态层叠加的问题

• 弹窗形式选择

当涉及到很多交互时，不建议直接使用弹窗

处理多层模态​

整体注意：

• 多层模态超过两层，最好展示固定的遮罩颜色

• 模态过多时，给出最大值，如超过 3 层只展示固定颜色即可

如何选择弹窗、抽屉、新建页​

• 页面内容量

内容量维度：新建页 > 抽屉页 > 弹窗

深度较深（长度较长）：抽屉形式最佳

宽度较宽：弹窗形式更合理

深度深且宽度宽：新建页面更合适

• 页面连贯性

抽屉 < 弹窗 < 新建页

• 页面切换成本

当一个二级页面使用频率过高，即用户需要在 AB 页面之间来回切换，此时需要考虑 切换成本