界面黑话手册

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

第 2 章 · 浮层Overlays

浮在页面上方的东西,主要区别是会不会挡住页面。

文字提示Tooltip

悬浮提示气泡提示hover tipmacOS Help tag
WebTooltip
iOS—
AndroidTooltip

鼠标停在上面一会儿,冒出的一小行说明文字。

一般怎么表现

  • 悬停约 0.5 秒后出现,鼠标离开就消失。
  • 键盘聚焦到控件上时也要出现。
  • 只放短文字,里面不能有按钮或链接。
  • 手机没有悬停,所以不能靠它传达关键信息。

怎么用好

  • 给纯图标按钮加上名字(“复制链接”)。
  • 禁用的按钮用它说明为什么不能点。

常见误用

  • 把必须读到的内容只放在 tooltip 里。
  • 在 tooltip 里放按钮。要放就改用 Popover。

气泡卡片Popover

弹出层浮层卡片Ant Design:气泡卡片
WebPopover
iOSPopover (iPad)
Android—

点一下出现的小卡片,里面可以放按钮和表单。

一般怎么表现

  • 由点击触发,贴着触发它的元素出现。
  • 里面可以放按钮、选项、输入框。
  • 点外面或按 Esc 关闭,这叫 light dismiss。
  • 不挡住页面,其余部分仍可操作。

怎么用好

  • 放轻量的选择或设置,比如筛选条件。
  • 关闭后把焦点还给触发按钮。

常见误用

  • 在里面放长表单。内容一多就该改用抽屉或对话框。

菜单Menu

下拉菜单 Dropdown menu右键菜单 Context menuiOS 长按菜单
WebDropdown menu · Context menu
iOSMenu (long-press: context menu)
AndroidMenu

一列命令,选中哪一项就立刻执行哪一项。

一般怎么表现

  • 点按钮、右键或长按时出现。
  • 一项一个命令,可以带图标和快捷键。
  • 用分隔线给命令分组。
  • 危险命令用红字,放在最后。选了就执行,菜单随之关闭。

怎么用好

  • 每项都是动词开头(“重命名”“复制”)。
  • 支持键盘上下键和回车。

常见误用

  • 用菜单让用户“选一个值”。选值是 Select 的事。

对话框Modal / Dialog

弹窗模态框ModalDialog
WebModal · Dialog
iOSAlert · Sheet
AndroidDialog

盖住整个页面的窗口,用户必须先处理它。

一般怎么表现

  • 背后有半透明遮罩(Scrim / Overlay / Backdrop),页面不能操作。
  • 焦点被锁在对话框里,Esc 可以关闭。
  • 标题说清要做什么决定,按钮写动作。
  • iOS 的小提示框叫 Alert,Material 里就叫 Dialog。

怎么用好

  • 只用于必须马上做的决定。
  • 按钮写动作(“删除”“保留”),不要写“确定”“取消”。

常见误用

  • 用它展示不重要的信息。每多一个弹窗,用户就多一分烦躁。

抽屉 / 面板Drawer / Sheet

侧边面板 Side panelSide sheet底部面板 Bottom sheetiOS Action sheet
WebDrawer
iOSSheet · Action sheet
AndroidSide sheet · Bottom sheet

从屏幕边缘滑出的面板,不离开当前页就能看详情或编辑。

一般怎么表现

  • 桌面上从右边滑出,手机上从底部升起。
  • 手机上的 Bottom sheet 可以拖到半屏或全屏。
  • 可以是模态(带遮罩),也可以是非模态。
  • iOS 的 Action sheet 是从底部出来的一列操作选项。

怎么用好

  • 用来看详情、改一条记录,用户还能看到背后的列表。
  • 手机上优先用 Bottom sheet,而不是居中的弹窗。

常见误用

  • 在抽屉里再开抽屉。层级超过一层,说明该整页跳转了。
给 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.