易混淆对比
23 组长得像、容易叫错的术语，放在一起看区别。
UI 组件
页面上的具体控件，从按钮、输入框到对话框和筛选栏。
悬停缩略图，看看每个部分叫什么
基础
06表单输入
23输入框
Input
让用户输入一行简短文字的框，比如姓名、手机号、邮箱、标题，是表单里最常见的控件。多行文本框
Textarea
可以输入多行文字的输入框，按回车会换行，适合备注、评论、问题描述这类较长的内容。数字输入框
Input Number
只能输入数字的输入框，带加减按钮，可以限制最小值、最大值和每次加减的步长。下拉选择
Select
点击后展开选项列表，从中选一项或多项，收起时只占一个输入框的位置，适合选项较多的情况。复选框
Checkbox
可以打勾和取消的小方框，用来从一组选项里选多个，或单独勾选「同意协议」这类确认项。单选框
Radio
一组圆形的选项，只能选中其中一个，选了新的会自动取消原来的，适合 2~5 个互斥选项。开关
Switch
像电灯开关一样的滑动小控件，表示某个功能开启或关闭，拨动后通常立即生效。滑块
Slider
在一条横轨上拖动圆形滑块来选择数值或范围，适合音量、亮度、价格区间这类不要求精确的调节。日期选择器
Date Picker
点击输入框后弹出一个小日历，让用户点选日期或日期范围，避免手动输入格式不统一。上传
Upload
让用户从电脑或手机里选择文件、图片并传到服务器的控件，可以点按钮选择，也可以把文件拖进来。表单
Form
把多个输入控件、字段名、校验提示和提交按钮组织在一起，用来收集并提交用户填写的信息。搜索框
Search Box
带放大镜图标的输入框，输入关键词后按回车或点搜索按钮，在页面、列表或全站中查找内容。穿梭框
Transfer
左右两个列表加中间的箭头按钮，把项目从「可选」一侧移到「已选」一侧，用来批量挑选。级联选择
Cascader
一个下拉框，展开后按层级一列一列往右选，比如先选省、再选市、最后选区县。评分
Rate
一排五颗星（或其他图标），点亮几颗表示几分，既能让用户打分，也能只读展示平均分。分段控制器
Segmented Control
几个紧挨着排成一条的选项按钮，同一时间只能选中一个，用来在少量视图或模式之间快速切换。筛选栏
Filter Bar
放在列表或表格上方的一排查询条件，如关键字、状态、日期范围，用来缩小要看的数据范围。时间选择器
Time Picker
选一个具体时刻（几点几分）的输入控件，点开后在「时 / 分」几列里滚动选择，或者从一列按固定间隔排好的时刻里挑。颜色选择器
Color Picker
用来挑颜色的控件：平时是一个显示当前颜色的小色块，点开后在色盘和色相条上取色，也能直接输入色值或点预设颜色。验证码输入框
OTP Input
填短信或邮件验证码的一排小格子，每格一位数字，输完一格自动跳到下一格，常见于登录、注册和敏感操作前的二次验证。富文本编辑器
Rich Text Editor
像一个简易版 Word 的编辑区：上方一排工具按钮，能给文字加粗、设标题、插列表、链接和图片，所见即所得，保存的是带格式的内容。标签输入框
Tag Input
能输入多个短词的输入框：敲一个词按回车，它就变成框里的一个小标签，接着输入下一个，点标签上的 ✕ 就删掉。对话输入框
Chat Input
聊天和 AI 对话界面底部的输入区：一个随内容长高的文本框，加上附件、发送（生成时变成停止）等按钮，回车发送、Shift+回车换行。
导航
12顶部导航栏
Navbar
侧边菜单
Sidebar Menu
面包屑
Breadcrumb
标签页
Tabs
一排可点击的标签，点哪个就在下方显示对应的内容面板，用来在同一位置切换几块平级的内容。分页
Pagination
把大量数据分成多页显示，用页码和上一页、下一页按钮在各页之间跳转。步骤条
Steps
用一排带编号的节点和连线，显示一个多步骤流程的全部步骤，以及用户当前做到了第几步。下拉菜单
Dropdown Menu
页脚
Footer
锚点导航
Anchor
列出当前页面各章节标题的小目录，点击跳到对应位置，滚动时自动高亮当前所在章节。命令面板
Command Palette
按快捷键（常见是 Ctrl+K 或 ⌘K）弹出的搜索框，输入关键字就能快速跳转页面或执行操作。底部标签栏
Bottom Tab Bar
手机应用和移动网页底部固定的一排 3~5 个图标加文字，用来在几个最主要的页面之间切换。菜单栏
Menubar
数据展示
13表格
Table
用行和列排列多条结构相同的数据，每行一条记录、每列一个字段，方便横向比较、排序和筛选。列表
List
把多条内容纵向一条接一条排列，每条通常是标题加一两行说明，适合逐条浏览和点击进入详情。卡片
Card
一块带边框或阴影的独立矩形区域，把一组相关的图片、标题、说明和操作收在一起，自成一体。头像
Avatar
用圆形或圆角方形的小图片代表一个人或一个账号，没有图片时显示姓名首字或默认图标。徽标
Badge
叠在图标、头像或按钮右上角的小红点或小数字，提醒用户这里有未读消息或新内容。标签
Tag
放在文字旁边的小块圆角标记，用几个字表示分类、状态或属性，例如「已发货」「前端」。轮播图
Carousel
在同一块区域里轮流展示多张图片或卡片，可以自动切换，也可以左右滑动或点圆点切换。树形控件
Tree
用可以逐级展开的缩进列表展示有上下级关系的数据，比如组织架构、文件夹目录、分类。统计数值
Statistic
用大号数字突出显示一个关键指标，上面是指标名称，常带单位、涨跌箭头和对比说明。图表
Chart
把数字画成折线、柱子、扇形等图形，用来展示趋势、对比和占比，让数据一眼就能看懂。代码块
Code Block
用等宽字体和语法高亮展示一段代码的区域，通常带语言标签、行号和一键复制按钮。日历
Calendar
按月或按周排成网格的日期视图，直接在格子里显示每天的日程、事件或数据。地图
Map
在页面里嵌入一块可以拖动、缩放的地图，用标记点显示门店、地址或配送位置，点击标记弹出详情。
反馈
11文字提示
Tooltip
鼠标悬停或键盘聚焦在某个元素上时，在旁边弹出的一小段深色说明文字，移开即消失。气泡卡片
Popover
点击或悬停某个元素后，在它旁边弹出的小卡片，可以放标题、几行说明甚至按钮。对话框
Modal
在页面正中弹出的窗口，背后加遮罩，用户必须处理完或关闭它才能继续操作页面。抽屉
Drawer
从屏幕边缘滑出的面板，在不离开当前页面的情况下查看详情或填写表单。轻提示
Toast
操作后在屏幕顶部或底部短暂出现的一行小提示，几秒后自动消失，不打断用户。警告提示
Alert
固定显示在页面或区块内的带色提示横条，用来说明当前状态、风险或需要注意的事项。通知提醒框
Notification
从屏幕角落（通常是右上角）弹出的消息卡片，带标题和正文，用来提醒新消息或后台任务结果。进度条
Progress
用一条逐渐填满的横条或圆环，显示任务完成了多少，让用户知道还要等多久。加载中
Spinner
一个不停旋转的小图标，表示正在处理或等待数据，但不知道具体还要多久。骨架屏
Skeleton
数据加载完成前，先用灰色块画出页面内容的大致轮廓，加载完再替换成真实内容。结果页
Result Page
付款、提交、注册这类操作完成后显示的整页反馈：一个大图标、一句结果标题、一行说明和「下一步」按钮，告诉用户成了没有、接下来做什么。
布局容器
03营销
09首屏横幅
Hero Section
落地页或官网最上面的一大块区域，用大标题、一句说明和主按钮，第一眼讲清产品是什么。特性网格
Feature Grid
官网上介绍产品功能的一块区域：一组图标、小标题和一两行说明，按两列或三列整齐排开，让访客快速扫完主要卖点。行动号召区
CTA Section
官网页面结尾（或中间）一块醒目的区域，一句标题加一个主按钮，在访客看完介绍后再推一把，让他注册、试用或联系销售。价格表
Pricing Table
官网上并排列出几档套餐的区域，每档写清价格、适合谁、包含哪些功能和一个购买按钮，常把推荐的一档突出显示。常见问题
FAQ Section
把访客最常问的问题和答案集中列出来的区域，官网上通常是一组可以点开的问题，放在价格表后面、页脚前面。客户评价
Testimonial
官网上展示真实客户原话的区域，每条是一段引用加上说话人的头像、姓名、职位和公司，用别人的口碑让新访客相信产品。Logo 墙
Logo Wall
官网上一排或几排客户、合作伙伴的公司标志，通常做成灰色，配一句「这些团队在用」，快速说明谁在用这个产品。数据亮点
Stats Band
官网上一整条横向区域，并排放三四个大号数字和一行说明（例如「正在营业的店铺」），用有来源的具体数字说明产品的规模或效果。步骤说明区
How It Works
官网上用 3~4 个编号步骤说明「怎么开始用」的区域，每步一个序号、小标题和一句说明，让访客知道上手要做哪几件事。