UI/UX 组件每日一讲

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。

Loading Spinner 是进度未知时的等待指示器——只告诉用户「系统在处理」，不告诉剩余时长。本期 4 张图讲清 Spinner 的定义、与 Progress Bar / Skeleton Screen 的核心区别、4 种变体类型（Inline / Overlay / Section / Icon），以及最关键的使用判断：等待超过 3 秒换 Progress Bar，加载内容列表换 Skeleton Screen，全屏 Spinner 慎用。

Badge 是贴附在宿主组件上的小型状态标识——不独立存在，必须依附载体。本期 4 张图讲清 Badge 的定义、与 Notification Dot / Status Indicator 的核心区别、4 种变体类型，以及最关键的使用判断：数字为零时隐藏它，用户看完后立即清零。

Snackbar 是操作级反馈条，和 Toast 最关键的区别是：它可以带一个操作按钮（撤销、重试）。本期4张图讲清 Snackbar 的定义、与 Toast 的核心区别、3 种变体类型，以及最重要的使用判断标准：当用户可能后悔、需要一条退路时，选 Snackbar 而不是 Toast。

Tooltip 是最安静的提示组件——鼠标悬停时出现、离开即消失，专门解释图标和缩写。本期4张图讲清 Tooltip 的定义、与 Toast/Popover 的核心区别、5种位置变体，以及最关键的一条使用判断标准：只传递一句话的信息量。