poxiaoxi博客做APP或网页设计时，经常会遇到一种沟通问题：界面上的东西明明大家都见过，却不知道准确叫什么。
例如页面底部一排“首页、发现、消息、我的”，有人叫底部菜单，有人叫Tab，还有人叫导航栏；点击头像后从右侧滑出来的一块区域，有人叫弹窗，有人叫侧边栏，前端可能直接称它为Drawer。名称不统一时，设计稿评审、需求文档和开发沟通都容易产生误解。
UI组件本身也没有一套全球完全统一的命名标准。Apple Human Interface Guidelines、Google Material Design、Web前端以及不同公司的设计系统之间，都可能使用不同术语。更实际的做法，是理解这些名称背后代表的结构和交互方式。
页面整体区域通常怎么称呼
先从一个网页或APP页面的整体结构来看，常见区域包括Header、Main Content、Sidebar和Footer等。
| 常见名称 | 中文常用叫法 | 主要作用 |
|---|---|---|
| Header | 页头、顶部区域 | 放置Logo、导航、搜索、账号等全局内容 |
| Main Content | 主内容区 | 显示当前页面最主要的信息 |
| Sidebar | 侧边栏 | 辅助导航、筛选、目录或工具入口 |
| Footer | 页脚 | 版权、友情链接、政策、辅助导航等 |
| Section | 内容区块 | 将页面内容按照主题划分成不同区域 |
这些名称更常见于网页设计。APP由于屏幕空间更小，通常会更多使用View、Screen、Page、Navigation等概念。
设计稿中的“页面”也可能叫Screen或View。Screen更强调一个完整屏幕状态，而View在不同技术框架中含义更广，可以是整个页面，也可以只是页面中的一块界面。
导航栏并不是只有一种
“导航栏”可能是UI沟通中最容易混用的名称之一。
在网页中，顶部放置“首页、产品、价格、博客”等链接的区域通常叫Navigation、Navbar或者Navigation Bar。
而在APP中，顶部区域还可能承担返回、页面标题和操作按钮等功能。Apple的设计规范中，类似区域可能被归入Toolbar或Navigation相关组件。
例如：
← 返回 文章详情 ···
这里左侧负责返回，中间是当前页面标题，右侧放置更多操作。这种区域不能简单等同于网站顶部的主菜单。
因此在需求文档中，最好明确写成“顶部导航栏”“主导航”“页面工具栏”，而不是只写“导航栏”。
Tab和导航栏有什么区别
Tab通常翻译为标签页、选项卡或页签。
典型形式是：
推荐 最新 热门 关注
用户点击不同Tab后，在同一个内容区域切换不同内容。
Apple对Tab View的描述也是在同一个区域中展示多个互斥的内容面板，用户通过Tab切换。
因此，Tab更强调“同一区域内切换内容”，而Navigation更强调“去往不同页面或功能区域”。
不过在移动APP中，这两个概念会出现交叉。例如底部的：
首页 搜索 消息 我的
通常可以叫Tab Bar，也可以从功能角度称为Bottom Navigation。Apple设计体系常见Tab Bar的叫法，Material Design中则有Navigation Bar组件。
所以看到“底部Tab”和“底部导航”，很多时候说的是非常接近的界面结构。
Toolbar主要负责页面操作
Toolbar通常译为工具栏。
它和Tab Bar最大的区别，在于Toolbar主要放置针对当前内容的操作，而Tab Bar主要用于切换不同功能区域。
例如一款图片编辑APP底部出现：
裁剪 旋转 滤镜 标记 删除
这更接近Toolbar，因为这些按钮都是作用于当前图片。
Apple当前设计指南也把Toolbar描述为用于提供常用命令、控制、导航和搜索的区域，并明确区分Toolbar与用于不同APP区域导航的Tab Bar。
网页中的富文本编辑器也经常包含Toolbar，例如粗体、斜体、标题、链接和插入图片等工具。
Sidebar和Drawer不要混用
Sidebar通常是长期存在的侧边栏。
例如后台管理系统左侧：
仪表盘 订单管理 商品管理 用户管理 系统设置
如果这块区域长期固定在页面左侧，一般称为Sidebar。
Drawer则更强调“抽屉式出现”。它平时隐藏，触发后从屏幕左侧或右侧滑出，因此中文经常称为抽屉、侧滑菜单或抽屉导航。
例如手机网页点击左上角三条横线后，从左侧滑出的导航菜单，就很典型。
简单判断可以理解为：
一直显示在页面旁边：更接近Sidebar。
需要点击后从边缘滑出：更接近Drawer。
响应式网站中，同一个导航在电脑端可能表现为Sidebar，到手机端又变成Drawer，因此两者也可能代表同一套信息架构在不同屏幕下的不同表现形式。
汉堡菜单其实是一个按钮
网页和APP左上角经常出现三条横线：
☰
它通常被称为Hamburger Menu，也就是汉堡菜单。
严格来说，这个三横图标本身更像是Menu Button，即打开菜单的按钮。真正出现的内容可能是Drawer、Navigation Menu或者其他菜单。
因此开发沟通时，“点击Hamburger Button打开Drawer”通常比“点击汉堡菜单打开菜单”更加精确。
Breadcrumb是什么元素
Breadcrumb就是面包屑导航。
例如：
首页 > SEO工具 > 关键词工具 > 百度关键词规划师
它主要用于表示当前页面在网站层级中的位置，并帮助用户返回上一级。
W3C的ARIA设计模式同样把Breadcrumb定义为按照层级顺序列出当前页面父级页面的一组链接。
面包屑主要用于层级较深的网站，在APP中相对少见，因为移动端通常采用返回导航解决层级问题。
按钮也有不同类型
Button是最基础的交互元素之一，但按钮本身又可以根据重要程度和表现形式继续细分。
常见名称包括：
| 名称 | 常见含义 |
|---|---|
| Primary Button | 当前界面最主要的操作按钮 |
| Secondary Button | 次要操作按钮 |
| Text Button | 没有明显背景的文字按钮 |
| Icon Button | 只显示图标的按钮 |
| Floating Action Button | 悬浮在内容上方的重要操作按钮 |
| Split Button | 主操作与附加菜单组合的按钮 |
例如邮件APP右下角悬浮的“写邮件”圆形按钮，在Material Design体系中通常称为Floating Action Button，也就是FAB。
按钮和普通链接也应该区分。Button通常执行动作，例如提交、删除、保存；Link主要负责跳转到另一个地址或内容位置。
输入框常见名称有哪些
用户输入文字的区域通常叫Input、Text Field或Text Input。
例如：
用户名 [________________] 密码 [________________]
网页HTML中通常由input元素实现，而设计系统中更常见Text Field这样的组件名称。
多行文字输入通常称为Textarea，例如评论框、文章编辑框。
搜索框则通常单独称为Search Field或Search Bar。Apple当前的设计规范中将Search Field定义为让用户输入搜索关键词、查找内容集合的可编辑文本字段。
输入框周围还经常出现几个容易忽略的名称：
Label：字段名称，例如“邮箱地址”。
Placeholder：输入前显示在框内的提示文字。
Helper Text：输入框下面的辅助说明。
Error Message：输入错误后的提示。
Prefix / Suffix：输入框前后固定显示的内容。
Select和Dropdown有什么区别
选择一个地区、语言或者分类时，经常看到点击后出现一组选项的控件。
设计沟通里通常会叫Dropdown，也就是下拉菜单。
但从网页技术角度看，一个标准单选下拉框可能使用HTML的<select>和<option>实现。
Select更偏向“从一组值中选一个值”的表单控件，而Dropdown更偏向描述“内容向下展开”的视觉和交互形式。
如果用户还能直接输入文字，并随着输入获得建议，例如：
城市：[Shang_____] Shanghai Shangrao
这种组件更接近Combobox或Autocomplete。
W3C将Combobox定义为带有关联弹出区域的输入控件，弹出区域可以提供可选择或建议的值。因此Combobox并不只是一个普通的Dropdown。
Checkbox和Radio怎么区分
Checkbox就是复选框，通常用于允许用户选择多个项目：
☑ 微信 ☐ 邮箱 ☑ 短信
Radio Button则是单选按钮，一组中通常只能选择一个：
● 月付 ○ 年付 ○ 三年付
简单理解就是：
可以同时选择多个：Checkbox。
几个选项只能选一个：Radio。
另外还有Switch，也就是开关：
接收消息通知 [ ON ]
Switch更适合表示一个状态立即打开或关闭，例如深色模式、定位权限、消息提醒，而不是从多个选项中选择其中一个。
Chip、Tag和Badge有何区别
这些小型元素外观非常相似，因此也经常被混叫。
Chip通常是一块紧凑、可交互的信息元素，可以表示筛选条件、选择结果或者操作。
例如：
[北京 ×] [上海 ×] [+ 添加城市]
Tag通常更偏内容标签和分类，例如：
SEO 网站建设 JavaScript
Badge通常用于附着在其他元素附近显示状态或数量，例如消息图标右上角的红色“8”。
它们没有绝对统一的视觉边界，但从功能上可以这样理解：
Chip：用户通常可以点、选、删或者筛选。
Tag：主要描述内容属于什么类别。
Badge：主要告诉用户数量、状态或提醒。
Card为什么在界面中很常见
Card就是卡片，是APP和现代网页中非常常见的内容容器。
例如商品列表中的每个商品可能都是一张Card：
┌─────────────────┐ │ 商品图片 │ │ │ │ 商品名称 │ │ ¥199 │ │ 立即购买│ └─────────────────┘
卡片通常把图片、标题、说明、状态和操作组合成一个相对独立的信息单元。
新闻列表、商品列表、仪表盘、视频推荐和用户资料中都经常使用Card。
需要注意的是，Card更多是设计系统中的视觉和内容组织概念，并不是HTML中固定存在的一个<card>标签。
列表和表格并不是一回事
List通常用于连续展示同类项目，例如聊天记录、设置选项、文章列表。
Table则强调行列关系，更适合大量具有相同字段的数据。
例如：
文章A 文章B 文章C
更像List。
而：
产品 价格 库存 产品A 99 20 产品B 199 12
更适合Table。
后台系统还经常出现Data Table或Data Grid。Data Grid通常比普通Table具有更多交互能力，例如排序、筛选、编辑单元格、批量选择和调整列宽。
Accordion是什么组件
Accordion中文通常叫手风琴、折叠面板或折叠列表。
典型形式是：
▼ 什么是GEO？ GEO是生成式引擎优化…… ▶ GEO和SEO有什么区别？ ▶ GEO应该怎么做？
点击一个标题后展开对应内容，再次点击可以收起。
W3C将Accordion描述为一组垂直排列的交互标题，每个标题控制对应内容区域的显示和隐藏。
FAQ、设置页、帮助中心以及参数较多的商品详情页都比较常见。
Carousel和Slider怎么理解
网站首页经常有可以左右滑动的Banner、产品或者内容卡片，这类组件通常称为Carousel，也就是轮播组件。
例如：
← [Banner 1] [Banner 2] [Banner 3] →
下面如果出现：
● ○ ○ ○
这些小圆点一般叫Page Indicator或Pagination Indicator，用于告诉用户当前位于第几张。
Slider这个词需要注意，因为它还有另一种常见含义：用于调整一个连续数值的滑块。
例如：
音量 ─────●─────
这种也叫Slider。
所以设计稿中最好直接写“Banner Carousel”或者“Range Slider”，避免只写Slider。
Pagination指的是什么
传统网页列表底部常见：
上一页 1 2 3 4 5 下一页
这类组件叫Pagination，即分页。
它和Carousel下面的小圆点虽然都可以表示页数，但使用场景不同。
Pagination主要用于长列表和多页搜索结果；Page Indicator则更常见于轮播、APP引导页和可横向滑动的内容。
Dialog和Modal有什么区别
网页中点击“删除”后，页面中央突然出现：
┌──────────────────┐ │ 确定删除这篇文章吗？ │ │ │ │ 取消 删除 │ └──────────────────┘
很多团队会把它叫Modal，也有人叫Dialog或弹窗。
两者含义其实不完全一样。
Dialog更强调这是一个与用户进行交互的对话框。Modal则描述一种交互模式：它出现后，用户需要先处理当前浮层，才能继续操作后面的主界面。
因此，一个Dialog可以是Modal Dialog，也可以设计为非模态Dialog。
日常产品沟通中，两者经常混用，但在设计系统和无障碍开发中最好区分。
Alert适合重要提示
Alert通常用于传达比较重要的信息。
如果提示需要用户立即确认，可能表现为Alert Dialog，例如：
登录已过期 请重新登录后继续操作 [取消] [重新登录]
而普通Alert也可以直接出现在页面内容中：
⚠ 当前服务器正在维护，部分功能暂不可用。
因此，Alert并不一定等于传统意义上的“弹窗”。
Sheet常见于移动端界面
Sheet是移动APP中越来越常见的展示方式。
例如用户点击“分享”后，从屏幕底部向上弹出一个面板：
───────────────── 分享至 微信 复制链接 保存图片 取消 ─────────────────
这种通常称为Bottom Sheet。
它与Dialog都可以覆盖在当前内容上，但Sheet通常从屏幕边缘出现，并且能够容纳更多连续操作或内容。
Apple的设计体系也将Sheets归入Presentation组件。
Popover是附着式浮层
Popover可以理解为与某个触发元素存在明显位置关系的小型浮层。
例如点击头像后，在头像旁边出现：
┌──────────┐ │ 个人资料 │ │ 账号设置 │ │ 退出登录 │ └──────────┘
它与Modal不同，通常不会完全打断当前操作；与普通Menu相比，又可能容纳更加复杂的内容。
桌面网页和平板界面中比较常见。
Tooltip只用于辅助说明
当鼠标移到一个不容易理解的图标上，旁边出现：
? 删除
这块小提示通常叫Tooltip。
W3C将Tooltip描述为与某个元素相关的信息浮层，一般在元素获得键盘焦点或鼠标悬停后出现。
Tooltip主要负责解释当前元素，不适合放置复杂操作。
如果浮层里面有按钮、输入框等需要用户继续交互的内容，就更接近Popover或非模态Dialog，而不是Tooltip。
Toast和Snackbar有什么区别
用户完成一个操作后，页面底部可能短暂出现：
保存成功
很多团队称它为Toast，也就是轻提示。
Material Design中常见的名称是Snackbar。Snackbar用于向用户提供短暂的操作反馈，并且可以附带一个操作，例如：
邮件已删除 撤销
Toast这个名称在Android和大量国内设计系统中同样非常常见，通常更强调短暂显示一条状态信息。
实际项目里二者经常混用，可以简单按照下面理解：
Toast：以短暂提示信息为主。
Snackbar：短暂信息之外，还可能提供一个相关操作。
具体名称仍然要看团队采用的设计系统。
Menu也分很多种类型
Menu就是菜单，但菜单本身包含很多不同形式。
点击“更多”按钮后出现一组操作：
编辑 复制 移动 删除
可以称为Action Menu。
右键某个文件出现的菜单通常叫Context Menu，即上下文菜单。
顶部长期存在的“文件、编辑、查看”则属于Menu Bar。
Apple的设计指南也区分Menu、Context Menu、Pull-down Button、Pop-up Button等多种菜单相关组件。
因此，Menu更像一个组件类别，并不是只有一种固定样式。
Stepper也有两种常见含义
Stepper在UI设计中容易产生歧义。
一种是数量步进器：
[-] 2 [+]
用户通过加减按钮改变数值。
另一种是步骤指示器：
① 账号信息 —— ② 身份验证 —— ③ 完成
这种也经常叫Stepper、Steps或Progress Steps。
因此需求中如果出现Stepper，最好写清楚到底是“数字步进器”还是“流程步骤条”。
Progress相关元素有哪些
页面正在上传、下载或处理任务时，会出现不同的进度元素。
Progress Bar是最典型的进度条：
████████░░░░ 65%
Spinner则是不断旋转的加载指示器，通常无法告诉用户具体剩余多少时间。
Skeleton叫骨架屏，会用灰色占位块模拟页面布局：
████████████ ██████ ██████████ ████████████ ██████
Skeleton常用于内容列表加载过程中，让用户提前感知页面结构。
Loading Indicator则是更广义的叫法，Spinner、Progress Bar都可以属于加载状态指示。
Empty State指空状态页面
当页面没有任何数据时，如果只是留下一大片空白，用户往往不知道发生了什么。
因此产品设计中通常会设计Empty State，也就是空状态。
例如：
暂无收藏 收藏的文章会显示在这里 [去发现内容]
类似的状态还有：
Error State：错误状态。
Loading State：加载状态。
Success State：成功状态。
Disabled State：不可操作状态。
这些虽然不是独立按钮或控件，但同样属于产品界面设计中非常重要的元素状态。
Divider和Separator是什么
两个内容区域之间的一条线通常称为Divider或Separator。
例如：
个人资料 ──────────── 隐私设置 ──────────── 退出账号
它的作用主要是建立视觉分组，而不是作为可以操作的元素。
网页设计中还可能直接叫Border，但Border更偏CSS实现方式，Divider更强调设计层面的分隔作用。
Avatar一般就是用户头像
Avatar通常指用户头像。
它可以是照片，也可以是用户名首字母或系统生成的图形。
Avatar附近经常组合：
Username：用户名。
Status Indicator：在线或状态指示。
Badge：身份或通知标记。
Profile Menu：点击头像后出现的账号菜单。
设计系统把这些元素拆分命名后，组件复用会更加容易。
设计沟通为什么要统一名称
很多UI组件单独看并不复杂，真正容易出问题的是同一个团队里每个人使用不同名称。
例如产品经理说“弹窗”，设计师理解成Modal Dialog，开发人员却做成了Bottom Sheet；或者设计稿标注“下拉框”，开发人员实现成普通Select，但产品真正需要的是能够输入和搜索的Combobox。
比较实用的方法，是在项目自己的Design System或组件库中建立统一组件名称。例如明确规定：
底部主导航统一叫Bottom Navigation。
同一区域内容切换统一叫Tabs。
右侧滑出面板统一叫Drawer。
需要阻断操作的确认框统一叫Modal Dialog。
短暂操作反馈统一叫Snackbar。
名称不一定必须和Apple、Material完全一致，关键是团队内部含义保持稳定。
常见UI名称可以这样记
| 英文名称 | 常见中文名称 | 典型用途 |
|---|---|---|
| Navbar / Navigation Bar | 导航栏 | 页面或功能导航 |
| Tab / Tab Bar | 标签页、页签 | 切换同级内容或APP区域 |
| Toolbar | 工具栏 | 提供当前内容相关操作 |
| Sidebar | 侧边栏 | 长期显示辅助导航 |
| Drawer | 抽屉、侧滑面板 | 从屏幕边缘临时展开 |
| Breadcrumb | 面包屑 | 显示页面层级 |
| Button | 按钮 | 执行操作 |
| Text Field | 文本输入框 | 输入文字 |
| Select | 选择框 | 从固定值中选择 |
| Combobox | 组合框 | 输入并选择建议项 |
| Checkbox | 复选框 | 多项选择 |
| Radio Button | 单选按钮 | 互斥选项中选择一个 |
| Switch | 开关 | 开启或关闭状态 |
| Card | 卡片 | 组织独立内容单元 |
| Accordion | 折叠面板 | 展开和收起内容 |
| Carousel | 轮播 | 左右切换多组内容 |
| Pagination | 分页 | 切换列表页面 |
| Dialog | 对话框 | 确认、输入或重要交互 |
| Bottom Sheet | 底部面板 | 从底部展示操作或内容 |
| Popover | 浮层 | 附着于触发元素展示内容 |
| Tooltip | 工具提示 | 解释图标或控件 |
| Toast | 轻提示 | 短暂显示操作结果 |
| Snackbar | 消息条 | 反馈信息及相关快捷操作 |
| Badge | 徽标 | 显示数量或状态 |
| Chip | 标签块、选择块 | 筛选、选择或快捷操作 |
| Skeleton | 骨架屏 | 内容加载前占位 |
对于刚开始做产品设计的人，没有必要一次记住所有英文术语。先把Navigation、Tab、Button、Input、Card、Dialog、Drawer、Sheet、Toast等高频名称区分清楚，基本已经能够覆盖大部分APP和网页界面。
遇到不确定的组件时，也不要只根据外观判断。例如一个“小浮层”到底是Tooltip、Menu还是Popover，关键要看它什么时候出现、能不能交互以及里面承载什么内容。组件名称最终描述的不是形状，而是它在界面中的功能和行为。
精彩评论