·滑条 Slider
① 液态融合 Liquid Goo
手柄和填充像水银连在一起，拖动时"拉丝"
怎么做：SVG 滤镜 feGaussianBlur + feColorMatrix 套在"填充+手柄"的父层，两者同色才会融合。一个页面只用一个 filter id，多实例会互相干扰。
② 玻璃透镜 Liquid Glass
手柄是一块透镜，把下面的数值刻度"放大"了
LIQUID GLASS
0255075100
40
0100
怎么做：backdrop-filter 做玻璃，手柄内嵌数值。前提：底下必须有内容可折射（那排暗数字），空背景上用玻璃等于白做。
③ 品牌胶囊 课件首选
厚轨道 + 圆胖手柄 + 数值胶囊跟随 + 按下放大
推荐理由：投屏清晰、低端设备不掉帧、数值一眼可见。轨道 14px 带内阴影做凹槽，手柄白底 + 4px 描边 + 投影＝三层结构。
④ 刻度磁吸 Stepped
有明确档位时用，拖到附近自动吸过去
怎么做：用原生 step 做吸附，别自己写磁吸逻辑；当前档位的刻度变高变深。
⑤ 双滑块区间 Range
选一个范围，中间那段才是填充
要点：防止两手柄交叉（强制留 5 的间距）；两个 input 各自可 Tab 并各带标签。
⑥ 垂直推子 Vertical
只在音量、亮度这类天然竖直的语义上用
别滥用：横向是通用约定。实现用 appearance:slider-vertical 或 writing-mode。
⑦ 渐变温度条 Gradient
轨道本身就是色标，手柄颜色跟着值走
怎么做：轨道铺渐变色标，JS 把当前值对应的色写进 --tc，手柄和数值胶囊一起变色。
⑧ 声波水位 Wave
填充是会流动的水波，只在拖动时流动
怎么做：两条正弦波反向平移；水位用 transform 而不是改 height。闲置 0.7 秒后自动停，不一直耗电。
① 实心 / ② 描边 / ③ 幽灵 最常用三件套
一个界面里最多用两级：主行动实心，次要的描边或幽灵
规范：最小高度 48px（拇指）；圆角跟着主题走；一屏只允许一个"实心主按钮"，否则主次不分。
④ 渐变光晕 Glow
扫光掠过，用来强调"这一步很关键"
怎么做：135° 渐变 + 同色投影；::after 做一道扫光，hover 时从左侧滑到右侧。别给每个按钮都加，光晕是稀缺资源。
⑤ 立体按压 儿童向
有"厚度"，按下去真的会往下沉
怎么做：底部用 5px 实色阴影当"厚度"，按下时 translateY(4px) 同时把阴影压到 1px —— 手感来自这两个数同时变。
⑥ 圆图标 / FAB
图标按钮必须 ≥44px，圆角不是借口做小
规范：纯图标按钮必须带 aria-label，否则读屏用户完全不知道这是什么。
状态：禁用 / 加载中
禁用要能一眼看出"点不了"，加载中要能看出"在忙"
规范：禁用降低不透明度到 0.4 左右并去掉阴影；加载中保留按钮宽度，别让布局跳动。
·开关 Switch
·分段控件 Segmented
① 胶囊滑块 默认
底槽 + 白色滑块在里面滑，稳且不抢眼
怎么做：一个绝对定位的 .ink 用 translateX 平移（只走合成层），不要给每个按钮做背景切换 —— 那样没有滑动感。
② 实心填充 强调
滑块用主色，选中项更跳
什么时候用：分段控件是这一屏的主导航时用实心；只是个小筛选就用①的白胶囊。
③ 下划线 轻量
没有底槽，只有一条底部指示线
适合：选项多（4 个以上）或页面已经很满时；下划线比胶囊省空间。
④ 带图标 儿童向
图标在上文字在下，不识字也能选
规范：图标别替代文字，图标 + 文字一起上最不容易点错。
⑤ 竖向 侧栏
左侧竖排导航，同样有滑动
注意：竖向时滑块改为 translateY，宽高要按按钮实际尺寸算。
·复选 / 单选
① 描边圆角 默认
最通用：描边 + 聚焦时描边变主色 + 外发光
规范：聚焦态必须有三重提示（描边色 + 外发光 + 光标），只改一个弱视用户看不出来。错误态用红色描边 + 文字说明，别只变红。
② 浮动标签 省空间
标签在框内，聚焦时缩到上方
怎么做：input 必须有 placeholder=" " 才能用 :not(:placeholder-shown) 判断有无内容；label 放在 input 之后才能用相邻选择器。
③ 下划线 极简
只有一条底线，聚焦时从左往右画出主色线
怎么做：底线用 border，主色线用一个 scaleX(0→1) 的元素叠上去。注意：这种输入框聚焦区域小，不适合表单很长时。
④ 带图标 + 清除 常用
左侧图标点明用途，右侧一键清空
🔍
规范：清除按钮 ≥30px；空内容时隐藏（避免误触）；点击后焦点要回到输入框。
⑤ 字数计数
右侧实时计数，超限变红
8/20
规范：计数必须在输入时就更新，别等失焦；接近上限提前变黄，超了才变红。
⑥ 多行文本域
圆角、固定最小高度、不显示拖拽把手
怎么做：resize:none 关掉拖拽把手（手机上拖不动，还容易误触），高度靠 JS 自适应或给足最小高度。
·步进器 Stepper
① 内嵌式 默认
加减在框内，整体是一个控件
规范：加减按钮 44×44（拇指）；到边界时按钮置灰而不是消失（消失会让布局跳动）。
② 圆形加减 儿童向
大圆钮，数字也更大 —— 给孩子调数量用
要点：数字用 22px 大字号，孩子一眼能读到。
③ 主色加减
加减用主色实心，视觉更重
注意：置灰态不要只用主色降透明，要换成灰底灰字，才像"不可用"。
④ 带单位 / 长按连发
按住不动会连续加减（试一下长按 +）
怎么做：pointerdown 后延时 400ms 启动 120ms 的定时器连发；松手/移出立即停。别忘了同时保留键盘可用性。
·标签 Chip
① 状态色标签
不同语义给不同颜色，一眼分状态
已上架待验收
已完成紧急不做
规范：颜色要有稳定语义（绿=好、红=急、蓝=进行中），全站统一，别一个页面一个意思。
② 可点选标签 筛选
点一下选中（填充），再点取消
无障碍：用 aria-pressed 表达选中态，纯 class 切换读屏用户听不到。
③ 可删除标签
用在"已选条件"，点 ✕ 移除
平行四边形
四上
已上架
规范：✕ 的实际可点区域要 ≥28px（视觉 22px 靠 padding 撑），否则手指点不中。
④ 带图标 / 点标记
小图标放在文字前，信息更密
进行中
已通过
狸狸子
空心描边
注意：圆点用 currentColor，颜色跟着标签走，不用单独维护一套色。
⑤ 长条标签 列表用
左侧一条色带，适合放进列表或卡片
课时 1 · 认识平行四边形
课时 2 · 底和高
课时 3 · 认识梯形
怎么用：列表项需要"分类色"时用它，比整块背景色克制得多。
·进度 Progress
① 线性进度 默认
带百分比和两端说明
规范：进度必须有文字（百分比或"第 3/6 步"），单靠一条颜色说不清；细版（5px）只用在次要位置。
② 条纹流动 进行中
条纹在动 = 还在跑，停下来用户会以为卡了
注意：只在"真的在动"时用；完成后要换成静止的实心条，否则一直动很烦。
③ 分段格子 闯关
一格一步，孩子最直观 —— 课件闯关就用它
第 3 / 6 关
适合：总数固定且不多（≤10）；格子数太多就退回线性条。
④ 环形进度 成绩 / 完成度
中间放数字，适合展示"得分"
怎么做：stroke-dasharray 设周长（2πr），dashoffset 从满到 0；SVG 旋转 -90° 让起点在正上方。
⑤ 阶梯进度 流程
每步一个圆点，走到的变色 —— 用于多步流程
要点：连接线要在圆点下层（z-index），并且第一段不画线；当前步用"空心描边"区别于已完成。
·加载 Loading
① 三点跳动 轻量
最省空间的"我在忙"
生成中…
要点：三个点用递增延迟（0.14s）才有波浪感；位移别超过 8px，太大显得急躁。
② 环形旋转 通用
单色转圈 / 双色转圈
怎么做：一个圆 + border-top 换成主色，rotate 就行，不用图片、不用 SVG，最稳。
③ 不确定进度条 不知道要多久
不知道百分比时，用它代替假的进度
什么时候用：真不知道要多久（等接口）。别用假进度条骗人——走到 99% 卡住比没有更让人恼火。
④ 骨架屏 体验最好
先把版式画出来，内容到了再填 —— 比转圈体感快
要点：骨架的块要和真实内容尺寸一致，否则内容加载完会跳一下；微光扫过用 background-position 动画（只走合成层）。
⑤ 带文字的加载块
转圈 + 一句话说明在干什么
正在混淆课件…
规范：等待超过 1 秒就必须给文字说明，只转圈用户会以为卡死。
⑥ 按钮内加载
按钮变成"正在处理"，同时禁止再点
要点：加载中按钮宽度保持不变（不然布局会跳）；文字从"提交"变成"生成中"，让用户知道发生了什么。
·提示 Toast
① 顶部通栏 强提示
整条主色，用在"必须立刻看到"的场景
什么时候用：网络断开、验证结果这类"影响当前操作"的事。普通成功提示别用它，太重。
② 底部 Snackbar 最常见
深色条 + 一个操作按钮，几秒后自己消失
规范：停留 4–6 秒（带操作按钮时给 8 秒）；同时只允许一条，新的顶掉旧的，别叠成一摞。
③ 四种语义 成功/错误/警告/信息
图标 + 颜色 + 文案，三重编码（色盲也能分清）
✓课件已保存2026-09-20 15:02
!口令不正确请核对后重试
!图形已拖到边缘再往外就看不到了
i拖动顶点只改角度四条边长度不变
无障碍：不能只靠颜色区分 —— 图标和文案要一起变，否则红绿色盲完全分不出成功和失败。
④ 可关闭的提示条
右上角 ✕，用户可以主动关掉
i
开启后：拖橙色顶点调形状，拖绿色顶点调底长
规范：✕ 可点区域 ≥30px；关掉后同一条不再出现（记住用户的选择）。
⑤ 内联说明条 页面内
不是弹出来的，是页面里本来就有的说明
i
底上有无数个点，每个点都能画一条高 —— 所以高有无数条。
适合：课件里的知识点提示。它不打断操作，比弹窗友好得多。
⑥ 实时演示 点一下试试
点击下面按钮，看提示弹出和消失
怎么做：一次只保留一条；新提示进来时旧的先淡出；进场用 translateY + opacity（走合成层）。
·卡片 Card
① 基础信息卡 列表项
左图标、中标题、右状态
▱
平行四边形和梯形的认识6 页 · 4 课时
已上架
No.8
规范：整卡可点区域 ≥44px；标题 14.5px 加粗，副标题 12px 弱化，层级靠字号 + 颜色双重区分。
② 带封面图 商品卡
封面 + 角标 + 右下角小图标
No.8▱▶
平行四边形和梯形的认识拉动变形看三条特征
¥4.99
要点：角标用半透明黑底（不管封面什么颜色都看得清）；右下角小图标暗示"能打开"。
③ 带操作行
底部一排按钮，主次分明
规范：操作行里最多两个主色按钮，其余用浅底；按钮高度 42px 起。
④ 玻璃卡 Glass
毛玻璃 + 高光边，放在深色或有图的背景上
◇
本周上架2 件 · 已完成 1 件
进度 50%
前提：玻璃必须放在有内容的背景上（图或渐变），纯色背景上等于白做。文字对比度要自己再核对一遍。
⑤ 统计数字卡
大数字 + 小标签 + 涨跌
要点：数字用 27px 以上 + 紧字距（letter-spacing:-.5px）才有"数据感"；涨跌用箭头 + 颜色 + 文字三重表达。
⑥ 可折叠卡
点标题展开内容
这个课件怎么用？›
① 认识平行四边形：拖顶点看变形
② 底和高：三角板贴底画高
③ 认识梯形：三种形态一键切换
④ 练习闯关：5 题
怎么做：用 max-height 过渡（不要用 display:none，那样没有动画）；箭头旋转 90° 表示展开。
⑦ 横向滑动卡组
一排卡片横向滑，手机上很常见
要点：卡片宽度固定（210px）制造"还能往右滑"的暗示；别让卡片宽度刚好占满一屏。
·标签栏 / 步骤条
① 下划线滑动 默认
底部指示线滑过去，最通用
内容区跟着切换…
怎么做：指示线用 translateX + width 两个属性一起过渡（不要只动 left，会抖）。
② 胶囊标签栏
底槽 + 白滑块，比下划线重一点
什么时候用：标签是这一屏的主导航；只是个筛选就用①的下划线。
③ 横向滚动标签栏
标签多到放不下时，可以左右滑（试试横向拖）
要点：选中项要自动滚到可见区域；两端留一点渐变遮罩，暗示"还能滑"。
④ 竖向步骤条 流程
左边圆点 + 连接线，右边文字 —— 适合多步流程
✓研读教材四上 · 平行四边形和梯形
✓搭骨架六页 · 通用绘制层
3做课件正在做：底和高动画
4教学设计4 课时 × 四板块
5上架下载站 + 素材站
要点：连接线画在圆点下层且最后一项不画；当前步用"空心描边"区别于已完成。
⑤ 底部导航
图标 + 文字，选中变色
规范：3–5 个，超过就该换成别的导航；图标必须配文字（纯图标导航的点击率明显更低）。
⑥ 中间凸起导航 强调主行动
中间那颗按钮凸出来，用于"最重要的那个动作"
注意：凸起按钮只能放"唯一的主行动"（新建、开始）。放次要功能会让用户以为是广告。
·徽章 / 评分 / 空状态
① 徽章角标 Badge
数字、圆点、不同颜色
▦3
◑8
◕
✓12
要点：角标要有一圈和卡片同色的描边（2px），压在深色内容上才不糊；99+ 要截断显示。
② 头像
圆 / 方、单 / 组
狸狐🦊
AB
C+3
要点：头像组用负 margin 叠起来，每颗加和卡片同色的描边；"+N"那颗用中性色。
③ 评分 · 星星 可点
点亮时有弹一下的手感
★★★★★
4 分 · 拖一拖或点一下
怎么做：选中时 scale(1.18) 回弹（不是慢慢放大）；半星用两层宽度裁剪做，别用半个字符。
④ 评分 · 表情
低龄或反馈场景用它，比星星好懂
适合：孩子不会抽象打分，表情最直接。选中态要有描边 + 底色 + 放大三重变化。
⑤ 空状态 Empty
没有内容时，别只留一片空白
📭
这里还没有商品
做完课件后点「上架」，
它就会出现在这个列表里。
三要素：一个图标（或插画）+ 一句话说清"为什么空" + 一个能解决的按钮。少了任何一个都让人不知所措。
⑥ 小节标题 / 复制行
列表分组、口令复制这类小件
已上架共 8 件
FOX-0Qo8
要点：复制按钮点了要给反馈（变"已复制"），不然用户不知道到底复制了没有。