警告提示Alert
提示与状态反馈在页面中持续显示提示或风险
警告提示直接放在相关内容附近,用来说明状态、风险或异常,不会像弹窗一样阻断操作。重要程度要通过标题、图标和文字共同表达,不能只靠颜色。
新功能上线 · 编辑器已支持深色模式×
发布成功 · 线上版本已生效×
体验环境 · 数据每日 0 点重置×
提交失败 · 2 处填写有误,请检查后重试×
什么时候用
- 表单提交失败:把错误汇总钉在表单上方⚠ 2 处填写有误,请检查后重试邮箱密码
- 系统维护 / 升级公告:全局生效,人人都得看到📢 本周六 02:00-04:00 系统维护,期间暂不可用
- 危险操作区域:提前说清后果,而不是事后报错⚠ 删除后不可恢复,操作前请确认已备份删除项目
- 页面状态提醒:草稿未发布、体验版、权限受限ⓘ 当前是未发布草稿,仅自己可见
什么时候不用
- 只是「保存成功」这种瞬时反馈 → 用 轻提示 Toast✓ 保存成功一句话的成功,用不着一直挂着
- 需要用户做选择 → 用 弹窗 Modal 或 气泡确认框 Popconfirm⚠ 确定要删除吗?想好了再点下面的按钮删除
- 一页挂三四条 → 等于一条都没有⚠ 密码即将过期⚠ 有 3 条未读公告ⓘ 新功能已上线
- 营销广告伪装成警告 → 用户会不再信任提示🎉 限时 5 折!马上升级会员
组成结构 · Anatomy
当前为体验环境 · 数据每日 0 点重置,请勿存放重要内容×
1提示条本体Alert整条横幅,类型决定底色和边框
2图标Icon一眼区分提示 / 警告 / 错误
3文案内容Content标题加说明,讲清发生了什么、怎么办
4关闭按钮Close可选,只有允许关掉的提示才放
常见变体 · Variants
提示Info
新功能上线 · 支持深色模式
有事要温和告知,不紧急也不是坏消息
成功Success
发布成功 · 线上已生效
好结果需要一直可见,而不是弹一下就完
警告Warning
体验环境 · 数据每日重置
有风险但还没出错,提前给用户提个醒
错误Error
提交失败 · 请检查后重试
已经出错,必须让用户看到原因和办法
典型使用场景
表单错误汇总
提交失败 · 2 处填写有误,请检查后重试
系统维护公告
系统维护 · 本周六 02:00-04:00 暂停服务,请提前保存工作×
危险操作前置警告
危险区域
删除项目 · 删除后无法恢复,请确认已备份数据
草稿未发布提醒
未发布草稿 · 当前内容仅自己可见,发布后对外公开×
夏季活动方案(草稿)