UI/UX 组件每日一讲

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种位置变体，以及最关键的一条使用判断标准：只传递一句话的信息量。

Toast 是一种短暂出现、自动消失的轻量反馈组件——不遮挡内容、不需要用户响应，只告诉你「做完了」。本期介绍 Toast 的定义、与 Alert 的区别、4 种常见类型，以及什么时候该用、什么时候不该用。