界面黑话手册

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

第 8 章 · 案例Cases

五个常见场景,左边是常见做法,右边是更好的做法,都可以直接操作。

案例 1 · 删除一条记录

场景 用户在列表里点了某一条的“删除”。

  • 每次删除都弹出“确定要删除吗?”
  • 直接删除,弹出带“撤销”的 Toast,8 秒内可以撤回。真正无法撤回的操作才弹确认框,标题写出对象,按钮写“删除”和“保留”。

为什么 确认框弹多了,人就会条件反射地点“确定”,它保护不了任何人。能撤销的操作用 Toast 加“撤销”,用户一眼看到结果,随时能反悔;只有真正无法撤回的操作才值得打断他,而且标题要写出删的是什么。

案例 2 · 一个要跑 3 分钟的任务

场景 用户点“运行”,任务要跑大约三分钟。演示把 3 分钟压缩成约 12 秒。

  • 点了没任何反应,用户连点几次,后台起了好几个任务。
  • 按钮转圈并锁定,Toast 确认已开始,状态行显示已运行时间,完成时给出结果。失败的结果不自动消失,带“重试”和“查看日志”。

为什么 每一步都在回答用户心里的一个问题:点到了吗?(转圈)在跑吗?(已运行时间)结束了吗?(结果)出错了吗?(不自动消失,附带下一步)。按钮宽度不变、不能重复点,则避免了误触。

案例 3 · 注册表单什么时候报错

场景 用户在注册表单里填邮箱。试试输入 abc,再点到别处。

  • 刚输入第一个字就标红,提示只写“格式错误”。
  • 离开输入框时再检查,提示写清楚怎么改(“邮箱里缺少 @”),改对之后错误提示立即消失。

为什么 人还没打完就标红,等于在对方说话时打断他;只写“格式错误”,又让人自己去猜哪里错。离开输入框再检查,说清楚怎么改,改对立刻放行,这三点让表单像一个耐心的帮手。

案例 4 · 手机 App 的主导航怎么选

场景 一个手机 App 有 4 到 6 个一级入口,该用底部标签栏还是汉堡菜单?

  • 汉堡菜单:所有入口被藏起来,使用率低。
  • 底部标签栏:3 到 5 个常用入口,其余收进“我的”。

为什么 底部标签栏让入口永远可见,一次点击就到,单手也够得着;汉堡菜单把入口藏起来,用户要先想起它。一级入口不超过 5 个时用底部标签栏;更多或者很少用的入口收进“我的”或抽屉里。

案例 5 · 保存:自动保存还是保存按钮

场景 一个应用里既有文档,又有设置页。

  • 一个表单里,开关立即生效,文本框要点“保存”,没有任何提示。
  • 写文档用自动保存并显示“保存中… / 已保存 14:03”。设置表单用明确的“保存”按钮,有未保存的改动时提醒。开关立即生效。两种方式不混在同一个表单里。

为什么 用户对“有没有存上”的焦虑,来自不确定。自动保存配上状态文字,就消除了这种不确定;设置表单有保存按钮,提醒未保存的改动,改动和生效之间的距离才看得见。开关像电灯,拨了就亮。同一个表单里混用两种方式,用户就没法猜哪个已经生效了。

给 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.