UI提示规范

一、Toast 互斥与覆盖规则

本章覆盖原”提示语优化”的全部规则,未做删减,仅细化表述。

1.1 同类互斥

如果有一个提示语正在显示,其他同类提示语不再显示。即同一类型(如纯文本 toast)同时只会有一条。

1.2 异常持续重显

提示语消失后,如果异常仍然存在,按 1.1 规则显示第一个错误提示语。

1.3 跨类覆盖

如果两类提示语需要出现,后面的覆盖前面。任何时间,只显示一条提示语。

1.4 时长标准

提示语类型 建议时长 说明
成功反馈(纯文案) 1.5s 用户能扫读即可
错误提示(纯文案) 2.5s 需要理解错误原因
带图标的 toast 2.5-3s 用户需要同时处理图标信息
长文案或建议文案 3-4s 按 5 字/秒 估算

1.5 消失条件

  • 手动消失:用户点击 toast 区域 → 立即消失(仅限可点 toast)
  • 自动消失:倒计时结束 → 自然消失
  • 事件驱动消失:底层异常解除 → 立即移除已在显示的对应 toast

二、Loading 规范

2.1 全局 Loading

使用场景:覆盖全屏的操作(页面跳转、登录、提交表单)。

  • 进入接口请求时 → 展示全屏加载指示器
  • 接口返回后(不论成功/失败)→ 移除 Loading
  • 超时兜底:超过 10s 无响应 → 自动移除 Loading 并显示”请求超时,请重试”

2.2 局部 Loading

使用场景:非阻塞的子区域刷新(下拉刷新、列表分页、单个卡片操作)。

  • 仅在操作区域展示小 loading 指示器,不遮挡全局
  • 30s 超时兜底,超时后移除并提示错误(toast 形式)

三、Empty State 规范

场景 展示内容 操作按钮
列表无数据(首次) 插图 + “暂无内容” 可选”去发现”引导
搜索结果为空 插图 + “未找到相关结果” 无,或”换个关键词”
网络不可用 插图 + “网络开小差了” “重新加载”按钮
无权限 插图 + “暂无访问权限” 可选”联系管理员”

共性规则:

  • 一律居中展示
  • 插图风格与 App 整体视觉统一
  • 文案控制在 15 字以内

四、Error State 规范

4.1 网络错误

  • 弱网:toast “网络不太稳定”(轻量提醒,不阻断操作)
  • 断网:全屏错误页或底部 Snackbar + “重试”按钮(阻断需要网络的操作)

4.2 服务器错误(5xx)

  • 单次操作:toast “服务异常,请稍后重试”
  • 频繁触发:防抖处理,15s 内同类错误不重复弹 toast

4.3 客户端错误(4xx)

  • 401:跳转登录页
  • 403:toast “暂无权限”
  • 其他:toast 显示后端返回的 message,或兜底提示”操作失败,请重试”

五、Alert / Dialog vs Toast 选择标准

条件 推荐控件
信息量 ≤ 15 字,无需用户决策 Toast
需要用户确认/取消 Alert(双按钮)
需要用户输入 Dialog(含输入框)
需要展示详细错误信息 Sheet / 半屏弹窗
操作前需要用户知情同意 Alert(含 checkbox)
倒计时自动消失的通知 Toast 或 Snackbar

一句话原则:打扰用户的次数越少越好,能用 Toast 不用 Alert,能用 Snackbar 不用全屏弹窗。

六、提示语优先级体系

6.1 优先级矩阵(由高到低)

优先级 类型 行为
P0 强制更新 / 账号踢下线 全屏阻断弹窗,不可忽略
P1 权限获取 / 确认弹窗 Alert,用户必须决策
P2 操作错误 toast 覆盖 P3/P4,2.5s 后消失
P3 成功反馈 toast 被 P2 覆盖,1.5s 后消失
P4 信息型 toast / 弱提示 被 P2/P3 覆盖

6.2 覆盖规则(结合 1.3)

  • 高优先级出现 → 立即替换当前显示的低优先级提示语
  • 同优先级出现 → 后续替换前序(队列模式 vs 直接覆盖,由业务决定)
  • 低优先级出现时,高优先级正在显示 → 低优先级不显示,等队列

6.3 队列兜底

系统维护一个最长 5 条的提示队列。当 P2-P4 提示语因被覆盖而未展示时,按优先级 > 时间顺序暂存队列中。

七、文案规范

7.1 通用原则

  • 简洁,不带语气词(”哦”、”啦”、”呀”)
  • 统一口径:始终用”登录”而非”登入”/“登陆”
  • 错误提示告知”原因 + 建议操作”,不只有”失败”
  • 成功提示仅在用户需要确认时才展示(不做过度反馈)

7.2 常见文案模板

1
2
3
4
❌ "修改成功啦~"  →  ✅ "修改成功"
❌ "网络错误" → ✅ "网络异常,请检查后重试"
❌ "未知错误" → ✅ "服务异常,请稍后重试"
❌ "你确定要删除吗?" → ✅ "删除后将无法恢复,确定删除?"