B端 - 弹窗设计
· 阅读需 3 分钟
弹窗
中断用户操作,对当前操作进行强制反馈的交互形式
分类
- 模态弹窗
- 需要做出对应交互,,模态才会消失
- 对话弹窗、内嵌表单弹窗、分布表单弹窗、文件选择弹窗、复杂信息展示
- 非模态弹窗
- 不打扰用户,短暂停留
- 通知提醒、全局提示、警告提示、气泡卡片、文字提示
做一个思维导图总结
结构拆解
- 模态层
- 关闭入口
- 弹窗主体
模态层
颜色
多层级
避免多层级
- 流程优化
检查流程是否足够精准,可否通过精简流程,减少不必要的多层模态的使用
- 内容量优化
内容量较少的时候,可以采取下拉菜单进行优化,解决多层模态层叠加的问题
- 弹窗形式选择
当涉及到很多交互时,不建议直接使用弹窗
处理多层模态
整体注意:
-
多层模态超过两层,最好展示固定的遮罩颜色
-
模态过 多时,给出最大值,如超过 3 层只展示固定颜色即可
如何选择弹窗、抽屉、新建页
- 页面内容量
内容量维度:新建页 > 抽屉页 > 弹窗
深度较深(长度较长):抽屉形式最佳
宽度较宽:弹窗形式更合理
深度深且宽度宽:新建页面更合适
- 页面连贯性
抽屉 < 弹窗 < 新建页
- 页面切换成本
当一个二级页面使用频率过高,即用户需要在 AB 页面之间来回切换,此时需要考虑 切换成本