弹窗和抽屉和气泡卡片到底有什么区别

这三个组件都是「浮层」，都会在当前页面上方弹出内容。但用错地方，体验会很差。 🔹 弹窗（Modal / Dialog） 出现在页面正中间，背景变暗，强制用户处理完才能继续操作。 适合：确认删除、重要提醒、强制选择。 注意：不要什么都用弹窗，打断感很强。 🔹 抽屉（Drawer） 从屏幕边缘滑出的面板，通常从右侧或底部出来。 适合：查看详情、编辑信息、筛选条件，内容比弹窗更多但不值得跳新页面。 注意：宽度不要超过页面一半，保持用户对原页面的感知。 🔹 气泡卡片（Popover） 一个小气泡，依附在触发元素旁边。 适合：简短的提示、快捷操作、少量选项。 注意：内容不要太多，放不下就用抽屉或弹窗。 💡 选择公式： 内容少 + 轻操作 → 气泡卡片 内容中等 + 不想离开当前页 → 抽屉 需要用户必须处理 → 弹窗 📚下面这份《UIUX 学习指南》，是我花 1 年时间整理，萃取苹果、谷歌等大厂设计智慧搭建而成的： • 体系完整又系统，从视觉、交互到用研、产品，覆盖 UI/UX 全链路 • 不管是零基础入门、中级进阶还是冲资深，都能精准适配 • 每天花 5～10 分钟，就能稳步搭建起专业认知框架 👇文末加入「UIUX 学习指南」，用每天 5～10 分钟的坚持，换取终身受用的“设计竞争力”。 你会发现，那些焦虑和迷茫，都在稳步提升中烟消云散。