界面黑话手册

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

第 1 章 · 导航Navigation

用户在哪、能去哪。

顶栏Navbar / Header

Top barApp bar页头
WebNavbar · Header
iOSNavigation bar
AndroidTop app bar

页面最上面那一条,放全局入口。

一般怎么表现

  • 网页顶栏放 logo、主导航、搜索和账号入口。
  • iOS 的 Navigation bar 更简单:中间是标题,左边是返回,右边是一两个操作。
  • Android 的 Top app bar 一般是菜单图标、标题和几个图标按钮。
  • 一般固定在顶部,滚动时不消失,或者只在下滑时收起。

怎么用好

  • 只放全局、常用的入口,其余往下一级放。
  • 当前所在位置要能看出来。

常见误用

  • 把二十个链接全塞进顶栏,每个都像主入口。

侧栏Sidebar / Side nav

侧边导航左侧菜单
WebSidebar · Side nav
iOSSidebar (iPadOS)
AndroidNavigation drawer · Navigation rail

贴在窗口左边的竖向导航,适合模块多的桌面应用。

一般怎么表现

  • 宽度固定,当前项高亮。
  • 可以折叠成只显示图标的窄栏,Material 里展开的叫 Navigation drawer,窄栏叫 Navigation rail。
  • 入口多时可以分组,加小标题。
  • 窄屏上通常变成抽屉,或者换成底部标签栏。

怎么用好

  • 折叠后图标要配 tooltip 或无障碍文字。
  • 分组不超过 5 到 7 个,顺序按使用频率排。

常见误用

  • 在侧栏里同时放导航和操作按钮,用户分不清哪个是页面、哪个是命令。

底部标签栏Tab bar

底部导航Bottom navigationTab bar
Web—
iOSTab bar
AndroidNavigation bar (formerly Bottom navigation)

手机 App 最底下那一排一级入口。

一般怎么表现

  • 3 到 5 个入口,每个都是图标加文字。
  • 当前项高亮,切换时不跳新页面,各个标签各自记住自己的位置。
  • 单手拇指够得着,所以是手机一级导航的首选。
  • Material 3 里它改名叫 Navigation bar,和 iOS 的 Tab bar 是同一类东西。

怎么用好

  • 入口控制在 5 个以内,名字一两个字。
  • 徽标只给真正需要处理的东西。

常见误用

  • 在里面放“发布”之外的操作类按钮,或者把不同层级的页面混在一起。

标签页Tabs

选项卡页签Tab
WebTabs
iOS—
AndroidTabs

同一页里几个平级视图之间的切换。

一般怎么表现

  • 点标签只换下面的内容,不跳转页面。
  • 当前项用下划线或底色标出来。
  • 键盘上用左右方向键切换。
  • 标签太多会横向滚动,这是信号:超过 6 个就该换方案。

怎么用好

  • 标签名用名词,短,彼此平级。
  • 默认选中最常用的那一个。

常见误用

  • 用标签页表示步骤(第一步、第二步),或者在标签里再套标签。

面包屑Breadcrumb

路径导航
WebBreadcrumb
iOS—
Android—

告诉你现在在哪一层,并能一键回到上层。

一般怎么表现

  • 写成“首页 › 分类 › 当前页”,最后一项是当前页,不可点。
  • 前面的每一级都是链接。
  • 层级深的网站最常用。
  • 手机上通常只留一个“‹ 上一层”。

怎么用好

  • 用在层级清楚的内容站、文档站和商品分类里。
  • 路径太长时把中间折叠成“…”。

常见误用

  • 把它当成浏览历史。它显示的是层级,不是你点过的页面。

汉堡菜单 + 抽屉导航Hamburger menu / Navigation drawer

三道杠(☰)侧滑菜单
WebHamburger menu
iOS—
AndroidNavigation drawer

一个 ☰ 图标,点开后从侧边滑出整套导航。

一般怎么表现

  • 入口平时是藏起来的,点图标才出现。
  • 从左边滑出,盖住内容,旁边有遮罩。
  • 点遮罩、点关闭或按 Esc 收起。
  • 省地方,代价是入口看不见,使用率会下降。

怎么用好

  • 入口超过 5 个,或者大多数很少用到时才用。
  • 常用的 3 到 4 个入口另外放在可见的地方。

常见误用

  • 把唯一的主导航藏进去。用户不会去找看不见的东西。

命令面板Command palette

⌘K 菜单Quick switcher快速跳转(类似 Spotlight)
WebCommand palette
iOS—
Android—

按 ⌘K 呼出的搜索框,输几个字就能跳转或执行操作。

一般怎么表现

  • 浮在页面中上方,带遮罩,打开时光标已经在输入框里。
  • 输入时实时筛选,上下键选择,回车执行。
  • 结果里常带快捷键提示,帮用户慢慢学会。
  • Esc 关闭。

怎么用好

  • 把最常用的命令和页面都放进来,搜索支持模糊匹配。
  • 给它一个看得见的入口,比如搜索框旁边的 ⌘K 提示。

常见误用

  • 让它代替可见的导航。新用户不知道有它。
给 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.