警示条

Alert / Banner

也常被叫作：警告条提示条横幅提示AlertBanner页面顶部提示

界面与组件通常止于「主路径」约 2 分钟读完

你可能会这么说

「页面顶部或内容上方有一长条醒目的提示，比如「网络已断开」「正在维护」，它不会自己消失，一直挂着。」

警示条 Alert / Banner

常驻在页面上的醒目提示条，装「用户必须看到」的重要信息，不会几秒就消失。

警示条（Alert / Banner）是常驻在页面上的提示：出现在页面顶部或相关区块上方，不会自己消失，直到用户处理或条件解除（维护结束、网络恢复）。典型场景：网络断开、系统维护、账号需要验证、版本不兼容。判断标准：信息重要到用户不能错过，且持续有效，就用警示条。

它有几种类型，通常配颜色和图标：红色=错误（出事了要处理）、黄色=警告（有风险注意一下）、蓝色=信息（正常通知）、绿色=成功（少见）。但颜色不能是唯一的区分方式——必须配合文字说清「是什么事、要不要你处理、怎么办」，色弱用户才看得懂。文案要说人话：「网络已断开，正在自动重试」比一句「错误！」有用得多。

警示条和轻提示（toast）是反着的：轻提示一闪而过，装「操作成功了」这种轻量结果；警示条一直挂着，装「你必须知道」。把关键错误做成几秒消失的轻提示是灾难；反过来，把每条小成功都挂成警示条，用户很快就无视所有条——警示条用得越滥，越没人看。另外警示条通常要配一个动作：「重试」「了解详情」，或者至少给个关闭入口（关闭前要确认信息真的可以不看了）。

长什么样真实可交互，不是截图

网络已断开，正在自动重试…

保存成功：你的修改已生效

红色那条是错误警示条，会一直挂着直到网络恢复；绿色那条只是轻提示级别的成功反馈。关键错误必须用常驻警示条，不能用几秒就消失的轻提示。

拆开看，里面有这几块

1
内容文案 Message
说清三件事：发生了什么、要不要用户处理、怎么办。
2
类型 Type
错误 / 警告 / 信息 / 成功，用颜色 + 图标 + 文字三重表达，不只靠颜色。
3
动作 Action
「重试」「了解详情」按钮，或至少一个关闭入口。
4
位置 Placement
页面顶部或相关区块上方，要醒目但不挡操作。

常见的有哪几种

错误条Error

出事了，需要用户处理。常驻直到解决。

用在：网络断开、保存失败、加载失败

警告条Warning

有风险，提醒用户注意。

用在：即将过期、维护提醒、额度将尽

信息条Info

正常通知，用户知道即可。

用在：版本更新、功能上线、维护公告

成功条Success

操作成功。少见——普通成功用就地反馈或轻提示就够了。

用在：批量导入完成

容易搞混？这样区分

警示条 ≠ 轻提示 Toast

轻提示自动消失、装轻量结果；警示条常驻、装必须看到的重要信息。关键错误用警示条，几秒消失的轻提示装不下它。

看轻提示

警示条 ≠ 气泡提示 Tooltip

气泡是悬停才出现、移开就没了；警示条一直挂着。必须看到的信息用警示条，补充信息才放气泡。

看气泡提示

警示条 ≠ 弹窗 Modal

弹窗挡住页面、必须处理（阻塞式）；警示条不挡操作，可以放着不管但始终可见。不确定用户是否在页面前时，警示条更温和。

看弹窗

什么时候用得上

网络断开

页面顶部常驻红色警示条，带「重试」，网络恢复后自动消失。

系统维护

维护期间常驻提示，说明恢复时间，不干扰已加载内容的阅读。

保存失败

表单上方警示条说清失败原因和怎么处理，带「重试」动作。

你可以这样跟 AI 说

直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。

【范围】只改 [这个页面] 的警示条，不动其他布局
【要求】
  - 在 [场景：网络断开 / 保存失败 / 维护中] 时，页面顶部显示警示条
  - 警示条**不会自己消失**，持续挂到条件解除（网络恢复、重试成功、维护结束）
  - 文案说清三件事：发生了什么、要不要用户处理、怎么办（如「网络已断开，正在自动重试」）
  - 用颜色 + 图标 + 文字三重表达类型，不只靠颜色
  - 配一个动作按钮（「重试」「了解详情」），点了要真的执行
  - 关键错误**不许**做成几秒就消失的轻提示
【边界】不要新增第三方组件库；不要把普通成功也挂成警示条；不要改页面其他区域
【交付】告诉我改了哪些文件、我怎么触发一次警示条、它会不会自己消失、动作按钮点了干什么、以及哪部分你没验证

这段话最硬的两条：「不会自己消失」和「关键错误不许做成轻提示」——这是警示条和轻提示唯一的分界线，AI 最爱把两者混成一个自动消失的组件。

它说「做好了」，你怎么自己验

这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。

要亲眼看到这些，才算数

触发场景（断网 / 保存失败），警示条出现，等几秒它还在（不会自己消失）。
文案说清了「发生了什么、要不要处理、怎么办」，不是一句「错误！」。
颜色之外还有图标和文字能区分类型，色弱也能看懂。
动作按钮（如「重试」）点了真的执行，条件解除后警示条消失。
普通成功（如保存成功）没有也挂成警示条，用的是就地反馈或轻提示。
警示条不遮挡操作：能关、能无视，但始终可见。

它常这么糊弄你

「已加警示条」——但它是几秒后自动消失的轻提示，关键信息用户没看到就没了。
文案只写「错误！」——错在哪、怎么办一个字没有。
只靠颜色区分类型——色弱用户分不清这是错误还是警告。
把「保存成功」也挂成警示条——用多了用户开始无视所有条。
警示条没有动作按钮也没有关闭入口——用户只能干看着。

警示条能验到「主路径」层：亲手触发一次断网或失败场景，看它挂着不消失、文案说人话、按钮真能用，就验完了。

考考你选一个你觉得对的

用户保存时网络断了，数据没存上。怎么提示最合适？

想再深挖一点靠谱出处

alert role（警示条语义）MDN ↗

# 警示条 (Alert / Banner)

> 常驻在页面上的醒目提示条，装「用户必须看到」的重要信息，不会几秒就消失。

**你可能会这么说**：页面顶部或内容上方有一长条醒目的提示，比如「网络已断开」「正在维护」，它不会自己消失，一直挂着。

警示条（Alert / Banner）是常驻在页面上的提示：出现在页面顶部或相关区块上方，不会自己消失，直到用户处理或条件解除（维护结束、网络恢复）。典型场景：网络断开、系统维护、账号需要验证、版本不兼容。判断标准：信息重要到用户不能错过，且持续有效，就用警示条。 它有几种类型，通常配颜色和图标：红色=错误（出事了要处理）、黄色=警告（有风险注意一下）、蓝色=信息（正常通知）、绿色=成功（少见）。但颜色不能是唯一的区分方式——必须配合文字说清「是什么事、要不要你处理、怎么办」，色弱用户才看得懂。文案要说人话：「网络已断开，正在自动重试」比一句「错误！」有用得多。 警示条和轻提示（toast）是反着的：轻提示一闪而过，装「操作成功了」这种轻量结果；警示条一直挂着，装「你必须知道」。把关键错误做成几秒消失的轻提示是灾难；反过来，把每条小成功都挂成警示条，用户很快就无视所有条——警示条用得越滥，越没人看。另外警示条通常要配一个动作：「重试」「了解详情」，或者至少给个关闭入口（关闭前要确认信息真的可以不看了）。

**也叫**：警告条、提示条、横幅提示、Alert、Banner、页面顶部提示

## 你可以这样告诉 AI

```text
【范围】只改 [这个页面] 的警示条，不动其他布局
【要求】
  - 在 [场景：网络断开 / 保存失败 / 维护中] 时，页面顶部显示警示条
  - 警示条**不会自己消失**，持续挂到条件解除（网络恢复、重试成功、维护结束）
  - 文案说清三件事：发生了什么、要不要用户处理、怎么办（如「网络已断开，正在自动重试」）
  - 用颜色 + 图标 + 文字三重表达类型，不只靠颜色
  - 配一个动作按钮（「重试」「了解详情」），点了要真的执行
  - 关键错误**不许**做成几秒就消失的轻提示
【边界】不要新增第三方组件库；不要把普通成功也挂成警示条；不要改页面其他区域
【交付】告诉我改了哪些文件、我怎么触发一次警示条、它会不会自己消失、动作按钮点了干什么、以及哪部分你没验证
```

## 怎么验证他真的做到了

通常止于层级：**主路径** — 真实用户的正常操作能走通，不靠特殊参数

- [ ] 触发场景（断网 / 保存失败），警示条出现，等几秒它还在（不会自己消失）。
- [ ] 文案说清了「发生了什么、要不要处理、怎么办」，不是一句「错误！」。
- [ ] 颜色之外还有图标和文字能区分类型，色弱也能看懂。
- [ ] 动作按钮（如「重试」）点了真的执行，条件解除后警示条消失。
- [ ] 普通成功（如保存成功）没有也挂成警示条，用的是就地反馈或轻提示。
- [ ] 警示条不遮挡操作：能关、能无视，但始终可见。

常见糊弄：
- 「已加警示条」——但它是几秒后自动消失的轻提示，关键信息用户没看到就没了。
- 文案只写「错误！」——错在哪、怎么办一个字没有。
- 只靠颜色区分类型——色弱用户分不清这是错误还是警告。
- 把「保存成功」也挂成警示条——用多了用户开始无视所有条。
- 警示条没有动作按钮也没有关闭入口——用户只能干看着。

来源：https://mickerbook.com/reference/t/alert/