第 13 章提示与错误

这一章统一规定界面上的反馈方式与文案风格。遇到看不懂的提示、弹窗、报错, 来这里对照一下就知道它在说什么。

反馈的四种形态

四种反馈形态 ① 状态栏文字 —— 不打断,常驻 本地开发 · app_dev 正在导出… 已写入 129,480 行(24.1 MB) 用在:进度、结果概要、连接状态 ② 轻提示(Toast) —— 不打断,2.5 秒后淡出 已提交 7 处修改 · 128 ms 出现在窗口顶部中间,不遮挡操作 ③ 确认弹窗 —— 打断,只为不可撤销的操作 有未提交的修改 当前标签有 7 处未提交的修改。 取消 放弃修改 提交并继续 ④ 错误面板 —— 打断,要你看清原因 提交失败 第 2 条语句执行失败 [错误 1062] SQLSTATE 23000 Duplicate entry 'a@b.c' for key 'uniq_email' 事务已回滚,你的修改都还在暂存区里,尚未生效。 结构固定: · 标题一句话说清发生了什么 · 原始错误原文 · 相关的那条 SQL · 数据现在是什么状态 · 下一步能做什么
图 13-1 四种反馈形态,从最轻到最重。
形态用在哪是否打断
状态栏文字进度、结果概要、连接状态
轻提示(Toast)复制成功、提交成功、导出完成否,几秒后自动消失
确认弹窗破坏性操作前的确认
错误面板需要用户看清原因的错误
一条总原则

能用状态栏和轻提示解决的,不要弹窗。

弹窗会打断你的思路。所以「复制成功」这种不需要决定的事,只用一条飘过的提示就够了。

轻提示的文案

场景文案
提交成功已提交 7 处修改 · 128 ms
复制成功已复制 12,480 行(2.1 MB)
导出完成导出完成:129,480 行 → articles.csv + 「在 Finder 中显示」按钮
导入完成导入完成:成功 12,480 行,失败 0 行
已断开连接已断开
重连成功已重新连接
只读拦截(单条)只读模式:已跳过 1 条写操作语句

确认弹窗

只在不可撤销可能丢数据的操作前出现。

场景有确认吗确认方式
删除连接普通确认按钮
关闭有未提交改动的标签三选一:提交 / 放弃并关闭 / 取消
放弃多于 5 条改动普通确认
截断表手动输入表名
删除表手动输入表名
覆盖已存在的导出文件普通确认
关闭只读模式普通确认
清空查询历史 / Console Log普通确认
按钮措辞必须具体

确认弹窗的按钮不要用「确定 / 取消」,要用能说明后果的词:

应该这样: [ 取消 ] [ 放弃修改 ] [ 提交并继续 ]

不要这样: [ 取消 ] [ 确定 ]

「确定」什么?用户在这个位置需要停顿半秒想一下,而这一停往往就能避免一次误操作。

错误面板

错误面板结构 提交失败 第 2 条语句执行失败 [错误 1062] SQLSTATE 23000 Duplicate entry 'a@b.c' for key 'uniq_email' 服务器返回的原文 出错的那条语句: UPDATE `app_dev`.`users` SET `email` = 'a@b.c' WHERE `id` = 42; 事务已回滚,你的修改都还在暂存区里,尚未生效。 附加说明(按错误码给): 有一行的值与已有数据重复。 查看详细输出 关闭 重试 ① 标题 一句话说清 发生了什么 ② 原始错误 错误码 · SQLSTATE · message ③ 相关 SQL ④ 数据现在 是什么状态 ⑤ 下一步 能做什么
图 13-2 错误面板的五段结构。每个错误面板都按这个顺序组织。

四条必须遵守的规则

  1. 服务器返回的错误原文不翻译、不改写、不截断。 翻译过的错误信息会让你没法拿去搜索。所以哪怕是英文原文,也原样贴出来。
  2. 错误码与 SQLSTATE 必须显示。格式统一为 [错误 1062] SQLSTATE 23000
  3. 必须说明数据现在是什么状态。这是最容易被忽略、也最重要的一条。例如:
    • 事务已回滚,你的修改都还在暂存区里,尚未生效。
    • 提交超时,事务状态未知,请在数据库中手动核对这几行的数据。
    • 导出中断,文件不完整。
  4. 能给出下一步动作就提供按钮重试重新连接查看详细输出

常见错误的附加说明

错误码含义面板里额外加的一句
1045认证失败请检查用户名与密码。
1049数据库不存在请检查连接配置里的数据库名,或留空。
1130主机不允许该账号不允许从当前 IP 连接,请检查数据库的访问白名单。
1062唯一键冲突有一行的值与已有数据重复。
1064语法错误请检查这条语句。
1205锁等待超时有其他事务长时间持有锁,稍后重试。
1213死锁事务已被回滚,请重试。
2006 / 2013连接丢失连接已断开,正在尝试重新连接。
SSH 认证失败请检查 SSH 用户、密钥或密码。

加载与空状态

加载与空状态 首次读取数据:骨架占位(不是转圈图标) 翻页 / 排序 / 过滤:保留旧数据 + 半透明遮罩 id name 1张三 2李四 3王五 加载中… 超过 10 秒时,状态栏文字后面会附带一个「取消」按钮: 正在读取… 已用 12.4 秒 取消 空结果的两种说法要分清楚: 查询成功,0 行,耗时 3 ms 这是「查询成功但没有返回行」 这张表里没有符合条件的数据 这是「有数据但被过滤掉了」
图 13-3 加载状态与空状态。
场景表现
首次读取数据网格区域显示骨架占位(不是转圈图标)——骨架能预示内容的形状
翻页 / 排序 / 过滤保留旧数据并叠加半透明加载遮罩,避免闪烁
网络慢(超过 1 秒)状态栏显示耗时
超过 10 秒状态栏文字附带「取消」按钮
空结果明确区分「没有数据」和「查询成功但没返回行」

危险状态的视觉提示

危险状态提示 有未提交改动:橙色条 + 标签橙点 + 提交按钮角标 ● 有 7 处未提交的修改(3 新增 · 2 修改 · 2 删除) 查看详情 提交修改 7 只读连接:锁图标 + 连接颜色带 + 状态栏「· 只读」 🔒 app_prod · MySQL 8.0.36 · utf8mb4 · 只读 连接异常:红点 + 内容区灰色遮罩 + 「重新连接」按钮 连接已断开 重新连接 结构视图可能过期:顶部黄色提示条 + 「刷新」按钮 这张表的结构可能已经改变,显示的内容可能不是最新的。 刷新 点「刷新」重新读取结构。 不自动刷新,避免在你正在看的时候列表跳动。
图 13-4 四种危险状态的视觉提示。
状态表现
有未提交改动状态栏橙色条 + 标签标题的橙点 + 提交按钮上的角标数字
只读连接锁图标 + 连接颜色带 + 状态栏 · 只读
连接异常红点 + 内容区灰色遮罩 + 「重新连接」按钮
结构视图可能过期顶部黄色提示条 + 「刷新」按钮

文案规范

语气

术语统一

统一用不要用
数据库 / 库schema
标签Tab / 页签
表数据视图数据浏览器 / Grid
变更暂存 / 未提交的修改pending change
提交保存 / Commit
放弃撤销 / Discard
快速查看Quick Look
连接数据源 / 会话
界面语言

界面是中文的,但 SQL 关键字与协议术语保持英文—— SELECT 不翻译成「查询」,SQLSTATE 不翻译成「SQL 状态」。 这些词你在文档、报错、聊天里看到的都是英文,翻译了反而对不上。