跳到正文

警告提示

Alert

初级通用

警告提示(Alert)是在页面中醒目展示风险、错误或重要状态的提示区域,通常包含原因和下一步建议。它帮你让用户看见会影响当前任务的问题,比如导入文件格式不对时,说明哪些行需要修改。

你可能会说:「这个错误不能只闪一下,能不能留在页面上,告诉用户哪里出了问题、接下来怎么改?」

动手看看

导入客户名单
四月客户名单.csv
待导入
检测到 12 条重复客户继续导入会覆盖这些客户的手机号。请先核对重复记录,再决定是否继续。
查看重复记录
第 4、9 行的日期格式无效请将「签约日期」改为 YYYY-MM-DD,保存 CSV 后重新上传;当前文件无法导入。
重新上传文件
提示类型

切换提示类型,看看同一份导入文件遇到不同问题时怎么说明原因和下一步。也可以悬停提示里的操作入口,或用 Tab 键聚焦它。

风险警告适合还能继续、但可能改动现有数据的情况。这里先说清会覆盖什么,再让用户查看重复记录。

要点

  1. 1

    把提示放在问题发生的地方

    你在后台导入数据时发现文件有错误,把警告提示放在导入区域附近,用户就能把提示和刚才的操作联系起来。如果问题影响整个页面,再放到页面顶部会更容易被看到。

  2. 2

    说清影响和接下来的动作

    只写「导入失败」,用户还得猜原因。写出「第 3 行缺少邮箱地址,请修改文件后重新上传」,就把发生了什么、要做什么连在了一起;如果暂时无法处理,也可以说明数据是否已保存。

  3. 3

    按问题状态决定何时消失

    有些提示需要一直显示到问题解决,比如支付配置未完成;有些可以在用户处理后移除。你和 AI Agent 讨论组件时,最好说清触发条件、消失条件,以及关闭提示后问题是否仍然存在。

容易混淆的地方

警告提示通常留在页面里,让用户能边看信息边处理任务;轻提示(Toast)会短暂出现,更适合告知「已复制」这类无需进一步处理的结果。弹窗会打断当前操作,适合必须先作决定的情况。这里的 Alert 指界面提示区域,不是浏览器自带的 alert() 对话框。

什么时候用

适合用

  • 后台保存设置失败,用户还停留在表单上,需要看见失败原因并修改后重试。
  • 文件上传完成校验后发现部分数据无效,需要在导入区域列出问题并提供修改方向。
  • AI 工具当前无法连接模型服务,需要持续告知用户回复暂时不可用。

不适合用

  • 用户点击复制后只需要知道操作已成功,用短暂出现的轻提示就够了。
  • 删除整个项目之前需要用户明确选择继续还是取消,用确认弹窗更合适。
  • 表单里某个输入框的值不符合格式,只影响这个字段时,直接在字段旁显示校验信息更容易定位。

练一练

你在做一个数据导入页面。用户上传表格后,系统发现有 12 行缺少必填字段,用户需要修改文件再上传。你会怎样呈现这个结果?

让 AI 帮你做

请在数据导入区域加入警告提示(Alert):上传文件校验失败时,显示未通过的行数、主要错误原因和查看问题行的入口。提示保留到用户重新上传并通过校验;不要用自动消失的轻提示替代。

接下来学什么