前端 UI 组件专业术语科普指南
在前端开发与 UI 设计中，准确的术语能帮助团队高效沟通。本文整理了常见的前端专业名词，涵盖弹窗交互、页面布局及状态反馈等核心概念，帮助初学者快速建立专业认知。
🪟 核心弹窗与交互组件
除了大家熟知的"弹窗"，在专业语境下，根据交互方式的不同，它们有更精确的分类：
Modal（模态弹窗）
- 定义：一种强制性的交互模式。
- 特点 ：出现时会遮住或禁用背景页面，用户必须先处理该弹窗（如点击确认、取消或关闭），才能继续操作主界面。
- 场景：登录注册框、删除确认、系统警告。
Dialog（对话框）
- 定义：在 HTML5 语义中涵盖了模态和非模态的弹窗。在很多组件库中，它常作为 Modal 的底层实现或同义词使用。
Drawer（抽屉）
- 定义：从屏幕边缘（上、下、左、右）滑出的面板。
- 特点：作用和 Modal 类似，但视觉上更轻量，通常用于展示辅助信息或复杂的筛选条件。
Toast / Snackbar（轻提示）
- 定义：非阻断性的消息提示。
- 特点 ：通常出现在页面顶部或底部，展示操作结果（如"保存成功"），几秒后会自动消失，无需用户手动关闭。
Tooltip（工具提示）
- 定义：鼠标悬停（Hover）在某个元素上时浮现的解释性小框，用于补充说明该元素的功能。
Popover / Popconfirm（气泡卡片/确认框）
- 定义：点击或悬停时弹出的浮层，内容比 Tooltip 更丰富，可包含按钮、表单等交互元素。
🏗️ 页面布局与结构术语
这些词汇描述了页面的"骨架"和内容的组织方式：
Layout（布局）
- 指页面的整体排版结构，决定了各个区域如何分布。
Container（容器）
- 用来包裹内容的"框"，通常用于限制内容的最大宽度，防止在超大屏幕上内容无限拉伸。
Card（卡片）
- 现代 UI 设计的基石。将图片、标题、简介等相关信息聚合在一个带阴影或边框的矩形容器中（如商品列表项）。
Navbar / Header（导航栏/页眉）
- 通常固定在页面顶部，包含 Logo、主导航菜单等核心入口。
Sidebar（侧边栏）
- 位于页面左侧或右侧，常用于放置次级导航、目录或筛选工具。
Footer（页脚）
- 页面最底部的区域，通常放置版权信息、友情链接或备案号。
Breadcrumb（面包屑导航）
- 显示当前页面在网站层级中的位置，例如："首页 > 电子产品 > 手机"。
🎨 交互状态与视觉反馈
描述元素在不同操作情况下的视觉表现：
Hover（悬停态）
- 鼠标指针移到元素上方时的样式变化（例如按钮颜色变深），提示用户该元素可点击。
Active / Click（激活态/点击态）
- 鼠标按下那一瞬间的样式，给予用户即时的操作反馈。
Disabled（禁用态）
- 元素不可点击或操作时的状态，通常表现为灰色或半透明，提示用户当前无法使用该功能。
Placeholder（占位符）
- 输入框内灰色的提示文字（如"请输入用户名"），当用户开始输入内容后会自动消失。
Badge（徽标）
- 通常是一个带数字的小红点或角标，用于提示未读消息数量或通知状态。
Skeleton / Shimmer（骨架屏）
- 在数据加载完成前，页面上显示的灰色闪烁的"轮廓占位"，用于缓解用户的等待焦虑。
📱 宏观概念
Responsive Design（响应式设计）
- 指网页能自动适应电脑、平板、手机等各种不同尺寸的屏幕，保证良好的阅读体验。
SPA（单页面应用）
- 打开网站后，所有的跳转都在一个页面内完成，不需要反复刷新整个网页，体验流畅（如各类后台管理系统）。
Component（组件）
- 前端开发的核心思想。将页面拆分成一个个独立、可复用的"积木块"（如一个按钮、一个搜索框都是一个组件）。