UI/UX 组件每日一讲

Card 卡片适合把一个对象的内容、媒体和操作收在同一个容器里。本期 4 张图讲清它与 List / Modal 的边界、常见形态，以及使用口诀：一块内容，一个对象。

Sidebar 侧边栏适合把多入口、常切换的导航长期放在界面一侧。本期 4 张图讲清它与 Drawer / Tab Bar 的边界、常见形态，以及使用口诀：多入口、常切换，才上侧边栏。

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，必要时提供校验与帮助文案。