产品开发与设计常用名词手册
收录产品开发、UI/UX 设计、前端交互等领域常见名词,按场景分类整理,便于查阅与沟通对齐。
读了 16 分钟
更新于 7 月 16 日
一、页面结构与布局类
| 名词 |
英文 |
含义 |
| 头部 |
Header |
页面顶部区域,通常包含 Logo、导航、搜索框等 |
| 底部 |
Footer |
页面底部区域,常放版权信息、友情链接、备案号 |
| 导航栏 |
Navbar / Navigation Bar |
主导航菜单,可能横向或纵向 |
| 面包屑 |
Breadcrumb |
显示当前页面在站点层级中的位置,如"首页 > 分类 > 详情" |
| 侧边栏 |
Sidebar |
页面侧边的纵向区域,常用于二级导航或筛选 |
| 主体区 |
Main / Content |
页面主要内容所在区域 |
| 容器 |
Container |
限制内容宽度的包裹层,常用于响应式布局 |
| 栅格 |
Grid |
用于对齐与排版的网格系统,如 12 栅格 |
| 卡片 |
Card |
信息块单元,通常有边框/阴影,可独立展示一条内容 |
| 区块 |
Section / Block |
页面横向划分的一个内容段落 |
| 模态框 |
Modal / Dialog |
覆盖在页面上的弹出窗口,需用户交互后关闭 |
| 抽屉 |
Drawer |
从屏幕边缘滑出的面板,常用于详情或表单 |
| 弹层 |
Popover / Popup |
点击或悬停触发的小浮层 |
| 提示框 |
Tooltip |
鼠标悬停时显示的简短文字提示 |
| 标签页 |
Tab / Tabs |
切换不同视图的标签组 |
二、视觉与品牌元素类
| 名词 |
英文 |
含义 |
| 横幅 |
Banner |
页面中的大幅图或广告条,通常位于顶部或内容流中 |
| 启动页 |
Splash Screen |
App 启动时显示的过渡页,通常含 Logo |
| 引导页 |
Onboarding |
新用户首次使用时的功能引导轮播 |
| 蒙层 |
Mask / Overlay |
覆盖在内容上的半透明层,用于聚焦或禁用底层交互 |
| 占位图 |
Placeholder |
图像未加载时显示的占位元素 |
| 骨架屏 |
Skeleton |
用灰色块模拟页面结构的加载占位,提升感知速度 |
| 头像 |
Avatar |
用户身份标识的小图 |
| 图标 |
Icon |
表意小图形,如搜索、设置、返回 |
| 主视觉 |
Key Visual / KV |
营销活动中的核心视觉图 |
| 切图 |
Slice / Asset |
设计稿导出的图片素材 |
| 色板 |
Color Palette |
设计中使用的颜色集合 |
| 主题 |
Theme |
整套视觉风格,如深色模式、浅色模式 |
三、交互与反馈类
| 名词 |
英文 |
含义 |
| 加载 |
Loading |
数据或页面准备中的状态提示,常见转圈、进度条 |
| 进度条 |
Progress Bar |
显示任务完成进度的横条 |
| 吐司 |
Toast |
短暂浮现的提示消息,自动消失,不阻断操作 |
| 轻提示 |
SnackBar |
底部弹出的操作反馈条,常带一个行动按钮 |
| 下拉刷新 |
Pull to Refresh |
移动端下拉触发数据刷新的交互 |
| 上拉加载 |
Load More / Infinite Scroll |
滚动到底部自动加载下一页 |
| 懒加载 |
Lazy Load |
资源(图片/组件)进入可视区时才加载 |
| 预加载 |
Preload / Prefetch |
提前加载用户即将访问的资源 |
| 防抖 |
Debounce |
在事件停止触发一段时间后才执行,如搜索框 |
| 节流 |
Throttle |
限制事件触发频率,如滚动事件每 200ms 执行一次 |
| 悬停 |
Hover |
鼠标指针停留在元素上的状态 |
| 聚焦 |
Focus |
元素接收到键盘输入焦点的状态 |
| 点击区域 |
Hit Area / Tap Target |
可点击元素的有效响应范围 |
| 拖拽 |
Drag & Drop |
鼠标按住拖动并释放的交互方式 |
| 滑动 |
Swipe |
触屏上的手指滑动操作 |
| 手势 |
Gesture |
多指操作,如缩放、旋转 |
| 空状态 |
Empty State |
列表无数据时的展示页,常带插图与引导按钮 |
四、表单与输入类
| 名词 |
英文 |
含义 |
| 输入框 |
Input / Text Field |
单行文本输入控件 |
| 文本域 |
Textarea |
多行文本输入控件 |
| 下拉选择 |
Select / Dropdown |
点击展开候选项的单选/多选控件 |
| 单选 |
Radio |
一组选项中只能选一个 |
| 多选 |
Checkbox |
一组选项中可选多个 |
| 开关 |
Switch / Toggle |
二态切换控件,如开启/关闭通知 |
| 滑块 |
Slider |
拖动调节数值的控件 |
| 步进器 |
Stepper |
通过 +/- 按钮调整数量的控件 |
| 日期选择器 |
Date Picker |
选择日期的控件 |
| 上传 |
Upload |
选择并发送文件到服务器 |
| 校验 |
Validation |
提交前对输入内容的合法性检查 |
| 占位符 |
Placeholder |
输入框内的提示文字 |
| 自动完成 |
Autocomplete |
输入时自动联想候选项 |
五、按钮与行动点类
| 名词 |
英文 |
含义 |
| 主按钮 |
Primary Button / CTA |
页面中最希望用户点击的按钮,通常高亮 |
| 次按钮 |
Secondary Button |
次要操作按钮,通常描边或浅色 |
| 文字按钮 |
Text Button |
无背景边框,仅文字可点击 |
| 图标按钮 |
Icon Button |
仅图标无文字的按钮 |
| 悬浮按钮 |
FAB (Floating Action Button) |
浮于内容之上的圆形按钮,常见于 Material Design |
| 行动号召 |
CTA (Call To Action) |
引导用户完成目标动作的元素,如"立即购买" |
| 幽灵按钮 |
Ghost Button |
透明背景、仅描边的按钮 |
| 禁用态 |
Disabled State |
按钮不可点击时的灰色状态 |
六、列表与内容展示类
| 名词 |
英文 |
含义 |
| 列表 |
List |
纵向排列的内容项集合 |
| 网格 |
Grid View |
以网格方式排列内容,如商品九宫格 |
| 轮播 |
Carousel / Slider |
自动或手动切换的横向滚动内容 |
| 走马灯 |
Marquee |
横向循环滚动的文字或图 |
| 表格 |
Table |
行列结构化数据展示 |
| 标签 |
Tag / Chip |
标记属性的彩色小块,如"新品""Hot" |
| 徽标 |
Badge |
角标数字或小圆点,如未读消息数 |
| 缩略图 |
Thumbnail |
图片/视频的小尺寸预览 |
| 详情页 |
Detail Page |
展示单条内容完整信息的页面 |
| 卡片流 |
Card Stream |
以卡片形式纵向滚动的内容流 |
| 时间线 |
Timeline |
按时间顺序排列的事件列表 |
| 分页 |
Pagination |
将长内容拆分为多页的导航控件 |
七、导航与信息架构类
| 名词 |
英文 |
含义 |
| 底部导航 |
Bottom Navigation / Tab Bar |
App 底部的主导航栏,通常 3~5 个入口 |
| 抽屉菜单 |
Drawer Menu / Hamburger Menu |
点击汉堡图标展开的侧边菜单 |
| 标签栏 |
Tab Bar |
顶部或底部的标签切换栏 |
| 返回 |
Back |
返回上一页的操作或按钮 |
| 首页 |
Home |
应用或站点的主入口页 |
| 落地页 |
Landing Page |
营销活动中用户首次到达的页面 |
| 中台 |
Middle Platform |
沉淀通用能力、支撑多条业务线的架构 |
| 信息架构 |
IA (Information Architecture) |
内容的组织、标注与导航结构设计 |
| 站点地图 |
Sitemap |
站点所有页面的层级结构图 |
| 用户旅程 |
User Journey |
用户完成目标所经历的步骤序列 |
八、状态与反馈系统类
| 名词 |
英文 |
含义 |
| 默认态 |
Default State |
元素未被操作时的初始状态 |
| 悬停态 |
Hover State |
鼠标悬停时的状态 |
| 激活态 |
Active State |
元素被按下时的状态 |
| 选中态 |
Selected State |
元素被选中的状态 |
| 禁用态 |
Disabled State |
不可交互的状态 |
| 加载态 |
Loading State |
数据请求中的状态 |
| 错误态 |
Error State |
操作失败或数据异常的状态 |
| 成功态 |
Success State |
操作完成后的反馈状态 |
| 空状态 |
Empty State |
无数据时的展示状态 |
| 离线态 |
Offline State |
无网络连接时的状态 |
| 骨架屏 |
Skeleton Screen |
加载过程中模拟页面结构的占位 |
| 进度反馈 |
Progress Feedback |
告知用户任务进度的视觉反馈 |
九、用户与权限类
| 名词 |
英文 |
含义 |
| 注册 |
Sign Up / Register |
创建账号 |
| 登录 |
Sign In / Login |
已有账号进入系统 |
| 登出 |
Sign Out / Logout |
退出当前账号 |
| 第三方登录 |
OAuth Login |
用微信、GitHub 等账号登录 |
| 权限 |
Permission |
用户可执行的操作范围 |
| 角色 |
Role |
一组权限的集合,如管理员、普通用户 |
| 鉴权 |
Authentication |
验证用户身份 |
| 授权 |
Authorization |
授予用户访问资源的权限 |
| 多因素认证 |
MFA / 2FA |
密码 + 验证码等多重身份验证 |
| 个人中心 |
Profile / Account Center |
用户管理个人信息与设置的入口 |
十、产品与研发流程类
| 名词 |
英文 |
含义 |
| 需求文档 |
PRD (Product Requirements Document) |
描述产品功能与交互的详细文档 |
| 原型 |
Prototype |
可交互或静态的产品示意 |
| 线框图 |
Wireframe |
低保真的页面结构草图 |
| 视觉稿 |
Mockup / Visual Design |
高保真的视觉设计图 |
| 交互稿 |
Interaction Design |
描述元素行为与跳转关系的稿子 |
| 设计系统 |
Design System |
组件、规范、 token 的统一体系 |
| 组件库 |
Component Library |
可复用的 UI 组件集合 |
| 设计 token |
Design Token |
颜色、间距、字号的变量化定义 |
| 灰度发布 |
Canary Release / Gray Launch |
小比例用户先体验新版本 |
| A/B 测试 |
A/B Testing |
对照实验比较两个版本效果 |
| 敏捷开发 |
Agile |
短周期迭代、持续反馈的研发模式 |
| 迭代 |
Iteration / Sprint |
一个固定周期的开发单元 |
| MVP |
Minimum Viable Product |
最小可用产品,验证核心假设 |
| OKR |
Objectives and Key Results |
目标与关键结果,目标管理工具 |
| KPI |
Key Performance Indicator |
关键绩效指标 |
| DAU / MAU |
Daily / Monthly Active Users |
日活 / 月活 |
| 留存率 |
Retention Rate |
用户在一段时间后仍活跃的比例 |
| 转化率 |
Conversion Rate |
完成目标动作的用户占比 |
| 跳出率 |
Bounce Rate |
只访问一个页面就离开的用户占比 |
十一、开发与工程类
| 名词 |
英文 |
含义 |
| 前端 |
Frontend |
用户直接交互的部分,如 Web、App |
| 后端 |
Backend |
服务器端的逻辑与数据层 |
| 接口 |
API |
不同系统间交互的约定 |
| 接口联调 |
API Integration |
前后端对接接口、调试数据 |
| 组件 |
Component |
可复用的 UI 单元 |
| 页面路由 |
Router |
管理 URL 与页面对应关系 |
| 状态管理 |
State Management |
跨组件共享数据,如 Redux、Pinia |
| 静态资源 |
Static Asset |
不需服务端处理的文件,如图片、CSS |
| CDN |
Content Delivery Network |
内容分发网络,加速静态资源访问 |
| SSR / CSR |
Server / Client Side Rendering |
服务端 / 客户端渲染 |
| 响应式 |
Responsive |
页面根据屏幕尺寸自适应 |
| 自适应 |
Adaptive |
针对特定断点提供不同布局 |
| 断点 |
Breakpoint |
响应式布局中切换样式的屏幕宽度阈值 |
| 国际化 |
i18n |
多语言支持 |
| 无障碍 |
a11y |
让残障人士也能使用的设计 |
| SEO |
Search Engine Optimization |
搜索引擎优化 |
| 埋点 |
Tracking / Analytics |
在关键行为处采集用户数据 |
| 灰度 |
Feature Flag |
通过开关控制功能可见范围 |
| 回归测试 |
Regression Test |
验证新代码未破坏已有功能 |
| CI / CD |
Continuous Integration / Delivery |
持续集成与持续交付 |
十二、性能与体验指标类
| 名词 |
英文 |
含义 |
| 首屏 |
Above the Fold |
用户第一眼看到的屏幕区域 |
| 首屏时间 |
FCP (First Contentful Paint) |
首次绘制内容的时间 |
| 可交互时间 |
TTI (Time to Interactive) |
页面可响应用户输入的时间 |
| 最大内容绘制 |
LCP (Largest Contentful Paint) |
视口内最大元素绘制完成时间 |
| 累计布局偏移 |
CLS (Cumulative Layout Shift) |
衡量视觉稳定性的指标 |
| 帧率 |
FPS (Frames Per Second) |
每秒渲染帧数,60fps 流畅 |
| 白屏 |
White Screen |
页面加载中无内容的空白状态 |
| 卡顿 |
Jank / Lag |
画面不流畅的感知 |
| 防抖节流 |
Debounce / Throttle |
见交互类 |
附:常用缩写速查
| 缩写 |
全称 |
含义 |
| UI |
User Interface |
用户界面 |
| UX |
User Experience |
用户体验 |
| IA |
Information Architecture |
信息架构 |
| IxD |
Interaction Design |
交互设计 |
| CTA |
Call To Action |
行动号召 |
| PRD |
Product Requirements Document |
产品需求文档 |
| BRD |
Business Requirements Document |
商业需求文档 |
| MRD |
Market Requirements Document |
市场需求文档 |
| MVP |
Minimum Viable Product |
最小可行产品 |
| KPI |
Key Performance Indicator |
关键绩效指标 |
| OKR |
Objectives and Key Results |
目标与关键结果 |
| DAU / MAU |
Daily / Monthly Active Users |
日活 / 月活 |
| GMV |
Gross Merchandise Volume |
成交总额 |
| AARRR |
Acquisition / Activation / Retention / Referral / Revenue |
海盗指标 |
| LTV |
Life Time Value |
用户生命周期价值 |
| CAC |
Customer Acquisition Cost |
获客成本 |
| ROI |
Return on Investment |
投资回报率 |
| ABT |
A/B Testing |
A/B 测试 |
| FAB |
Feature / Advantage / Benefit |
属性优势利益 |
| BML |
Build / Measure / Learn |
精益创业循环 |
总结
产品开发与设计涉及多角色协作,统一术语有助于:
- 沟通对齐:产品、设计、开发、测试对同一概念有相同理解
- 文档规范:PRD、设计稿、验收单使用一致的表述
- 降低返工:避免因词义歧义导致的理解偏差
- 新人上手:快速融入团队话语体系
建议团队在内部 Wiki 维护一份按业务定制的术语表,并随产品演进持续更新。
miracle
前端、后端、部署、客服都是我一个人。写这里的东西都是真踩过的坑，不是抄来的教程。