Modal vs. Separate Page: UX Decision Tree

核心内容

如何在模态框和独立页面之间做出选择？这个决策会影响用户的流程、上下文、查找细节的能力，以及错误频率和任务完成度。

术语区分

• Dialog: "对话"的通用术语（用户 ↔ 系统）
• Overlay: 显示在页面顶部的小内容面板
• Modal: 用户必须与覆盖层交互 + 背景禁用
• Nonmodal: 用户必须与覆盖层交互 + 背景启用
• Lightbox: 调暗背景以聚焦模态框

何时使用模态框

模态框的最大优势是帮助用户保持当前屏幕的上下文，包括：

• 编辑的输入内容
• 滚动位置
• 折叠面板状态
• 过滤器和排序选择

适用于：单一、自包含的任务，用户完成即返回。

何时使用独立页面

• 复杂的多步骤流程
• 需要用户全神贯注
• 参考之前屏幕没有帮助的场景
• 需要比较或复制粘贴的场景（模态框会阻挡）

需要避免的场景

• 🚫 错误消息
• 🚫 功能通知
• 🚫 引导体验
• 🚫 复杂的长时间多步骤任务
• 🚫 多个嵌套模态框

最佳实践

• 默认选择非阻塞对话框（non-modals）
• 允许用户最小化、隐藏或恢复对话框
• 提供退出方式：关闭按钮、ESC 键、或点击框外
• 仅在用户会重视这种干扰时才显示模态框