UI/UX 组件每日一讲

Pagination 用来把长列表、表格或搜索结果拆成可定位的页面。本期 4 张图讲清它与 Infinite Scroll / Stepper 的边界、常见形态，以及使用口诀：内容很多，分段找。

Breadcrumb 用来告诉用户当前页面处在层级结构的哪一层，并提供回到父级的路径。本期 4 张图讲清它和 Tabs / Stepper 的边界、常见形态，以及使用口诀：层级很深才上场。

Tab Bar / Tabs 适合在同一层级的内容之间快速切换。本期 4 张图讲清它与 Segmented / Bottom Nav 的边界、4 种常见形态，以及使用口诀：同级切换，才用 Tabs。

Date Picker 日期选择器适合让用户从日历中选择单个日期或日期范围。本期 4 张图讲清它与 Input / Calendar / Time Picker 的边界、常见形态，以及使用口诀：看关系用日历，记得清可手输。

Slider 滑块用于在一个范围内拖动取值，适合音量、亮度、滤镜强度和价格区间等相对调节。本期 4 张图讲清 Slider 与 InputNumber / Progress Bar 的边界、4 种常见形态，以及使用口诀：范围可拖，精确另填。

Switch 开关用于二选一状态，并在点击后立即生效。本期 4 张图讲清 Switch 与 Checkbox / Radio 的边界、4 种常见形态，以及使用口诀：二选一 + 立即生效，才是 Switch。

Select 选择器适合把较多选项折叠成下拉菜单：选项少于 5 个时更适合 Radio，只有两种立即生效的状态应使用 Switch，答案不固定时交给 Input 或 AutoComplete。本期 4 张图讲清 Select 的定义、边界、常见变体和使用口诀：少量摊开，多项收起；需要立即生效，就别用 Select。

Radio 单选按钮用于一组相关选项中只选一个：它适合少量固定选项的直接比较，不适合多选、即时开关或大量选项。本期 4 张图讲清 Radio 与 Checkbox / Select / Switch 的边界、4 种常见形态，以及使用口诀：一组选一个，Radio 最稳。

Checkbox 复选框用于多选或勾选确认：它可以被取消、通常提交前才汇总生效，不适合单选列表或切换即生效的系统开关。本期 4 张图讲清 Checkbox 与 Radio / Switch 的边界、4 种常见形态（单个确认 / 复选组 / 全选半选 / 禁用态），以及使用口诀：多选先勾，改完再交。

Input 是最基础的表单输入控件：适合短文本自由填写，不适合长段说明、固定选项或开关状态。本期 4 张图讲清 Input 与 Textarea / Select 的边界、4 种常见形态（Text / Password / Search / Textarea），以及最关键的使用要点：Placeholder 不能替代 Label，必要时提供校验与帮助文案。

Skeleton Screen 是 Loading Spinner 的进化版：Spinner 只说「在转」，骨架屏进一步告诉用户即将出现什么形状的内容。本期 4 张图讲清骨架屏的定义、与 Spinner/Progress Bar 的三兄弟对比、4 种常用模板（卡片/列表/文章/个人资料），以及最关键的判断口诀：能量化 → Progress Bar，不能量化 → Spinner，加载内容列表 → Skeleton Screen。

Progress Bar 是等待三件套的最后一块：只要进度可量化，就该用它而非 Spinner。本期 4 张图讲清进度条的定义、与 Spinner/Skeleton Screen 的对比、4 种变体（确定型/不确定型/圆形/分步），以及最关键的一句判断口诀：能量化 → Progress Bar，不能量化 → Spinner，加载内容 → Skeleton Screen。