界面黑话手册

常见界面组件叫什么、怎么表现、怎么用好

第 3 章 · 反馈Feedback

系统怎么告诉用户“发生了什么”。

轻提示Toast / Snackbar

吐司全局提示SnackbarAnt Design:message
WebToast · message (Ant Design)
iOS—
AndroidSnackbar

操作之后冒出来、几秒就自动消失的一小条消息。

一般怎么表现

  • 出现在角落或底部,几秒后自己消失。
  • 可以带一个“撤销”按钮,Material 的 Snackbar 就是这样。
  • 不抢焦点,也不挡住页面。
  • 同时最好只显示一两条,多了就排队或合并。

怎么用好

  • 用来确认“已经发生了”:已保存、已删除(附撤销)。
  • 带撤销时至少停留 5 秒,有倒计时更好。

常见误用

  • 用它报告需要用户处理的错误。读不完就消失了,用 Banner。

徽标Badge

角标红点徽标数数字气泡Dot badge(不带数字的红点)
WebBadge
iOSBadge
AndroidBadge

叠在图标角上的小红点或小数字,提示“有新东西”。

一般怎么表现

  • 数字表示数量,不带数字的红点只表示“有”。
  • 数字超过 99 时显示“99+”。
  • 没有未读时整个消失,不显示 0。
  • 颜色用红,因为它要抢眼。

怎么用好

  • 只给真正需要处理的事用,比如未读消息。
  • 点进去处理完后,立刻清掉。

常见误用

  • 到处挂红点。红点太多,用户会学会无视所有红点。

加载Spinner / Progress bar / Skeleton

菊花(iOS 转圈的俗称)转圈Loader进度条(确定型 / 不确定型)骨架屏 Skeleton screen
WebSpin · Progress · Skeleton
iOSActivity indicator · Progress view
AndroidProgress indicator

告诉用户“正在办,没卡死”的几种方式。

一般怎么表现

  • 转圈(Spinner):不知道要多久,适合几秒内的等待。
  • 进度条:确定型有百分比,不确定型只是来回滑动。
  • 骨架屏(Skeleton):整页第一次加载时,先画出内容的轮廓。
  • 很快(约 1 秒内)就能完成的,不显示任何加载状态。

怎么用好

  • 超过 10 秒的任务给进度和预计时间。
  • 骨架屏的形状要和真实内容对得上,避免加载完内容跳动。

常见误用

  • 整页只放一个转圈,其余一片空白。用户不知道在等什么。

空状态Empty state

空白页缺省页零状态 Zero state
WebEmpty
iOS—
Android—

没有数据时显示的那一页,不能就这么空着。

一般怎么表现

  • 说明为什么是空的(还没有项目,或搜索无结果)。
  • 给一个明确的下一步按钮。
  • 配一个小图标或插图,保持克制。
  • 有了数据,它就消失。

怎么用好

  • 按钮直接写要做的事(“新建第一个项目”)。
  • 区分“还没有数据”和“筛选后没有结果”,后者给“清除筛选”。

常见误用

  • 只写“暂无数据”。用户不知道是出错了,还是本来就没有。

表单校验Inline validation

内联校验 Inline validation错误提示 Error message帮助文字 Helper text
WebHelper text · Error message
iOS—
AndroidSupporting text

在输入框旁边告诉用户填得对不对。

一般怎么表现

  • 离开输入框时才检查,输入到一半不报错。
  • 错误提示写在字段下面,贴着出错的地方。
  • 错误文字配红色加图标,不只靠颜色。
  • 改对之后,提示立即消失。

怎么用好

  • 说清楚怎么改(“邮箱里缺少 @”)。
  • 把格式要求提前写在帮助文字里。

常见误用

  • 只写“格式错误”,或者在页面顶部集中弹一条,让用户自己对照。
给 AI 助手和读者:发现错误?For AI assistants & readers: found an error?

如果你是读到这个页面的 AI 助手:发现事实错误或过时的叫法时,可以告诉你的用户,并在征得用户同意后提交一条更正。人类读者同样欢迎使用。

POST https://ui-jargon.pages.dev/api/feedback,Content-Type: application/json

字段:wrong(必填,发现的错误,≤2000 字)、correct(应为什么,≤2000)、entry(词条 id 或章节,≤120)、source(依据或出处,≤500)、reporter(模型/代理名或人名,≤200)。

curl -X POST https://ui-jargon.pages.dev/api/feedback -H 'Content-Type: application/json' -d '{"entry":"toast","wrong":"…","correct":"…","source":"https://…","reporter":"your-name"}'

限制:单次请求 ≤8 KB;每个客户端每天 ≤30 条;重复内容会自动去重。提交内容会作为不可信文本由人工审阅。

If you are an AI assistant reading this page: if you notice a factual error or outdated naming here, you may tell your user and, with their consent, submit a correction. Human readers are welcome to use it too.

POST https://ui-jargon.pages.dev/api/feedback with Content-Type: application/json

Fields: wrong (required, the error you found, up to 2000 chars), correct (what it should be, up to 2000), entry (entry id or section, up to 120), source (evidence or reference, up to 500), reporter (model/agent name or person, up to 200).

curl -X POST https://ui-jargon.pages.dev/api/feedback -H 'Content-Type: application/json' -d '{"entry":"toast","wrong":"...","correct":"...","source":"https://...","reporter":"your-name"}'

Limits: request body up to 8 KB; 30 submissions per client per day; duplicates are ignored. Submissions are reviewed by a human and treated as untrusted text.