术语库

Spinner

一个不停旋转的小图标，表示正在处理或等待数据，但不知道具体还要多久。

Skeleton

数据加载完成前，先用灰色块画出页面内容的大致轮廓，加载完再替换成真实内容。

Collapse

一组可以点击标题展开或收起内容的面板，用来把较长的内容分段收纳，按需查看。

Carousel

在同一块区域里轮流展示多张图片或卡片，可以自动切换，也可以左右滑动或点圆点切换。

Tree

用可以逐级展开的缩进列表展示有上下级关系的数据，比如组织架构、文件夹目录、分类。

Transfer

左右两个列表加中间的箭头按钮，把项目从「可选」一侧移到「已选」一侧，用来批量挑选。

Cascader

一个下拉框，展开后按层级一列一列往右选，比如先选省、再选市、最后选区县。

Rate

一排五颗星（或其他图标），点亮几颗表示几分，既能让用户打分，也能只读展示平均分。

Statistic

用大号数字突出显示一个关键指标，上面是指标名称，常带单位、涨跌箭头和对比说明。

Chart

把数字画成折线、柱子、扇形等图形，用来展示趋势、对比和占比，让数据一眼就能看懂。

Hero Section

落地页或官网最上面的一大块区域，用大标题、一句说明和主按钮，第一眼讲清产品是什么。

Footer

网页最底部的区域，放版权信息、备案号、常用链接和联系方式，每个页面通常都一样。

Segmented Control

几个紧挨着排成一条的选项按钮，同一时间只能选中一个，用来在少量视图或模式之间快速切换。

Divider

一条细细的横线或竖线，用来把相邻的两块内容隔开，有时中间还嵌一段小字。

Anchor

列出当前页面各章节标题的小目录，点击跳到对应位置，滚动时自动高亮当前所在章节。

Command Palette

按快捷键（常见是 Ctrl+K 或 ⌘K）弹出的搜索框，输入关键字就能快速跳转页面或执行操作。

Floating Action Button

固定悬浮在屏幕右下角的圆形按钮，页面滚动时不动，放当前页面最常用的一个操作。

Toolbar

一横排紧凑的按钮和图标，放在某块内容上方，集中放针对这块内容的常用操作。

Filter Bar

放在列表或表格上方的一排查询条件，如关键字、状态、日期范围，用来缩小要看的数据范围。

Image

在页面上显示一张图片，通常要处理尺寸比例、加载占位、加载失败和点击放大预览。

Code Block

用等宽字体和语法高亮展示一段代码的区域，通常带语言标签、行号和一键复制按钮。

Calendar

按月或按周排成网格的日期视图，直接在格子里显示每天的日程、事件或数据。

Infinite Scroll

用户滚动到列表底部时自动加载下一批内容，不用手动翻页，列表看起来像没有尽头。

Lazy Loading

图片、组件等资源先不加载，等用户快滚动到它或真正需要时才加载，用来加快首屏速度。

Drag to Reorder

按住列表项拖到新位置再松开就能调整顺序，常用于待办事项、菜单配置、图片顺序的调整。

Drag and Drop

把一个东西拖起来放到另一个区域，比如把文件拖进上传框、把卡片拖到看板的另一列。

Optimistic Update

用户操作后界面立即显示成功的结果，同时在后台发请求，如果请求失败再把界面改回来。

Loading State

数据或操作还没完成时给用户的反馈，常见形式有转圈图标、骨架屏、进度条和按钮加载态。

Error State

请求失败、输入有误或页面出错时展示给用户的画面，要说明出了什么问题以及下一步怎么办。

Hover State

鼠标移到元素上方时的样式变化，比如按钮变深、卡片浮起，用来提示用户这里可以点击。