警告提示
Alert
初级通用警告提示(Alert)是在页面中醒目展示风险、错误或重要状态的提示区域,通常包含原因和下一步建议。它帮你让用户看见会影响当前任务的问题,比如导入文件格式不对时,说明哪些行需要修改。
你可能会说:「这个错误不能只闪一下,能不能留在页面上,告诉用户哪里出了问题、接下来怎么改?」
动手看看客户名单导入提醒
切换提示类型,看看同一份导入文件遇到不同问题时怎么说明原因和下一步。也可以悬停提示里的操作入口,或用 Tab 键聚焦它。
风险警告适合还能继续、但可能改动现有数据的情况。这里先说清会覆盖什么,再让用户查看重复记录。
要点警告提示怎样帮用户处理问题?
- 1
把提示放在问题发生的地方
你在后台导入数据时发现文件有错误,把警告提示放在导入区域附近,用户就能把提示和刚才的操作联系起来。如果问题影响整个页面,再放到页面顶部会更容易被看到。
- 2
说清影响和接下来的动作
只写「导入失败」,用户还得猜原因。写出「第 3 行缺少邮箱地址,请修改文件后重新上传」,就把发生了什么、要做什么连在了一起;如果暂时无法处理,也可以说明数据是否已保存。
- 3
按问题状态决定何时消失
有些提示需要一直显示到问题解决,比如支付配置未完成;有些可以在用户处理后移除。你和 AI Agent 讨论组件时,最好说清触发条件、消失条件,以及关闭提示后问题是否仍然存在。
容易混淆的地方
警告提示通常留在页面里,让用户能边看信息边处理任务;轻提示(Toast)会短暂出现,更适合告知「已复制」这类无需进一步处理的结果。弹窗会打断当前操作,适合必须先作决定的情况。这里的 Alert 指界面提示区域,不是浏览器自带的 alert() 对话框。
什么时候用
适合用
- 后台保存设置失败,用户还停留在表单上,需要看见失败原因并修改后重试。
- 文件上传完成校验后发现部分数据无效,需要在导入区域列出问题并提供修改方向。
- AI 工具当前无法连接模型服务,需要持续告知用户回复暂时不可用。
不适合用
- 用户点击复制后只需要知道操作已成功,用短暂出现的轻提示就够了。
- 删除整个项目之前需要用户明确选择继续还是取消,用确认弹窗更合适。
- 表单里某个输入框的值不符合格式,只影响这个字段时,直接在字段旁显示校验信息更容易定位。
练一练选一个答案,看看解释
你在做一个数据导入页面。用户上传表格后,系统发现有 12 行缺少必填字段,用户需要修改文件再上传。你会怎样呈现这个结果?
让 AI 帮你做复制给 AI Agent 直接用
请在数据导入区域加入警告提示(Alert):上传文件校验失败时,显示未通过的行数、主要错误原因和查看问题行的入口。提示保留到用户重新上传并通过校验;不要用自动消失的轻提示替代。