SPT · INTERFACE NOTES

别只跟 AI 说「加个弹窗」

三十一集看下来,他教的不是六十个组件,是一张六格的表。缺哪一格,AI 就替你做主。

来源 SpicyTater-31 集 · 16 集有字幕整理 2026-10-22

01六格的表

每集结尾都有一句几乎一样的话:以后别只告诉 AI「加个弹窗」,把组件名称、触发方式、出现位置、用户是否必须完成操作一起说清楚。

换了集,换的只是那几格的名字。叠起来是同一张表:

01
名称

这东西叫什么

AI 自己猜,猜成最近似的那种

02
触发

什么动作让它出现

做成 hover,手机用户永远碰不到

03
位置

从哪儿冒、贴着谁

飘到页面中央,跟触发点失去关系

04
边界

能放多少,能不能放按钮

塞进去一个表单,容器被撑变形

05
结束

怎么收起,收起后回到哪

关掉就没了,用户不知道刚才在哪

06
例外

手机、键盘、减少动效怎么办

桌面完美,触屏全废

这六格是「说清一个交互」的最小完整集。缺哪一格,AI 就会替你做主——而它做主的方式,通常是选那个最省事的默认值。

同一张表,换集换叫法5 条
弹层
组件名称 · 触发方式 · 出现位置 · 是否必须完成操作
导航
组件名称 · 放置位置 · 需要切换的内容 · 当前选项如何高亮
拖拽
交互名称 · 拖动方向 · 可拖动区域 · 目标位置 · 松手后的反馈
空间卡片
排列方式 · 怎么浏览 · 选中哪张怎么展示 · 关闭后回到哪里
菜单
底色怎么移动 · 子项怎么折叠 · 面板怎么收起 · 徽标什么时候清

02句式 · 十类

下面每条都是他片子里「跟 AI 说」的那一段,按类整理。前面粗体是组件名,后面是那句话。

A 弹层6 种
1Tooltip提示气泡

给图标、按钮或字段补一句很短的说明,悬停或键盘聚焦时出现,不适合放复杂操作。

2Popover气泡面板

贴着触发位置出现,能承载更多内容,可以放按钮,点击后查看一小段补充信息。

3Dropdown下拉

从一组选项或操作里做选择,点按钮展开列表,选完自动收起。

4Drawer抽屉

既要保留原页面做参考、又要展开详情或编辑,面板从侧边滑入。

5Bottom sheet底部面板

移动端,从屏幕底部向上展开,常用操作放到拇指更容易够到的位置。

6Modal模态框

需要确认内容或做出决定,居中的模态框加遮罩,处理完之前无法继续操作页面。

他补的那一句:名字、触发方式、出现位置、是否必须完成操作——四个一起说。

B 导航7 种
1Tabs标签页

同一页里有几组并列内容要快速切换,点哪个标签显示对应内容。

2Segmented分段控件

选项更少、布局更紧凑,两三视图之间切换。

3Breadcrumb面包屑

层级深的网站,用一条路径告诉用户当前在哪一层,能快速返回上一级。

4Pagination分页

内容太多一页放不下,拆成多页翻。

5Stepper步骤条

把流程拆成有先后顺序的几步,让用户知道后面还剩几步。

6Sidebar侧栏

功能和栏目多的后台或桌面端,主要入口固定左侧,持续高亮当前页。

7Bottom nav底部导航

手机端,把 3–5 个最常用入口固定在底部。

原片第 5 条把 stepper 和 sidebar 念串了,按语义拆开。这类口误正是「只靠听会漏」的地方。

C 拖拽6 种
1Drag and drop拖放

把一个对象拖到指定区域,松手完成放置或移动。

2Sortable拖拽排序

拖某一项,其他项自动让位,松手保存新顺序。

3Slider滑块

拖滑块在连续范围里调数值、进度或选项。

4Resize调大小

拖容器边缘或角点,改面板、图片或编辑区的宽高。

5Marquee框选

空白处按住拖出选择框,一次选中多个对象。

6Drag to upload拖拽上传

文件拖进指定区域上传,上传区要给出悬停和释放反馈。

D 后台菜单 · 这集最细6 种
1滑动高亮

选中底色从旧位置移到新位置,宽度跟着文字长度调整,落下轻微回弹。是底色在动,不是整列文字跟着晃。快速切换时从当前位置接着走。

2就地展开子菜单

点分类箭头转过来,子项依次出现,后面的栏目同时往下让位。别把整条侧栏越撑越长。只保留一组展开。

3顶部下落面板

点某项,下方展开一块宽面板;换到另一项,外面的面板保留里面的内容平滑切换。别只靠鼠标悬停——点击和键盘也要能打开。

4底部悬浮停靠栏

鼠标靠近哪个哪个放大,相邻图标轻轻让位。放大不能盖住旁边的入口,也不能挡住正文按钮。

5命令面板

输入关键词列表实时缩小,上下键移动,确认才跳转,关闭回到刚才的位置。打拼音时的回车是选字,不能顺便执行命令。

6状态点与徽标

有新消息显示小点,待处理用数字,数量更新时数字滚到新值。真正查看以后才清除,不是鼠标一经过就消失。

这一集的价值在于:它讲的不是「长什么样」,全是「什么时候不该」。

E 无限画布5 种
1平移缩放

区分「拖画布」和「拖卡片」,以指针位置为中心缩放,设合理缩放范围。

2框选成组

说清选框是「碰到就算选中」还是「完全框住才算」,成组后怎么进内部编辑、怎么取消组合。普通拖=框选,按住空格拖=平移。

3连线绑定

线绑两端卡片,拖动时持续更新路径,支持重连和删除。画一条线 ≠ 功能接通。

4自动排布

按内容类型选排列,考虑实际大小和间距,避开重叠,平滑移动,提供撤销;只选中几张就只整理选中的。

5小地图

角落放缩略图,标出当前视口,支持点击定位、拖动视口框,再加一个「显示全部」。

F 空间卡片6 种

扇形展开 / 纵深叠牌 / 圆柱环绕 / 球面排布 / 螺旋排布 / 波浪矩阵。

共同句式:先说排列方式,再说怎么浏览,再说选中哪张怎么展示,最后说关闭后回到哪里。

G 任务反馈4 种
1分阶段反馈

能拿到准确进度就显示百分比,拿不到就显示当前阶段。别让进度条自己跑到 99% 然后一直卡着。

2结果逐步出现

从占位区平滑过渡到真实内容,别每出现一块就把正在看的位置往下挤。

3取消

不支持取消就说明当前步骤仍在执行,别给一个假的结束状态。

4失败后接着做

只失败一部分就在对应位置提示,保留已完成内容,重试失败部分,只更新这一块,不整页重载。

H 编辑工具3 种
1非破坏性编辑

保留原图,各项效果和参数单独存,支持独立开关和重新调整。

2撤销分组

说清一次完整操作从哪开始到哪结束——不是加两个撤销按钮。拖滑杆时实时预览,松手才记成一次。

3状态快照

存可恢复、可继续编辑的方案,区分「预览」和「应用」,切换前保留未保存的修改。

I 材质与触感3 种
1贴纸卷边

按住边角先卷起露出背面,拖动保留抬起的阴影,松手贴平。不能只把整张图放大一点——卷边、背面、阴影得一起变。

2信封展开

拆成背面、信纸、袋口、封口;点击先翻封口,再让信纸从袋口划出,收起反向。

3小票打印

完整排版的小票从固定出口往下送出,出口遮住还没露出的部分。

收尾那句:文字、导航、按钮保持清楚,把材质和动作留给贴纸、信封和小票就够了。

J 图片交互7 种
1前后对比滑块

两张图对齐叠放,拖分割线改变露出范围,不要把图片一起拉伸。

2遮罩揭示

说清是「跟随移动的窗口」(手电筒),还是「划过就不恢复的擦除」(刮刮卡)。

3像素转场

方块多大、按什么顺序出现、什么时候换下一张。

4水波扭曲

以指针为中心,周围图像轻微扭曲,向外扩散后消失。扭的是图像内容,不是在上面画几个圆圈。

5贴纸揭角

按住边角卷起露出背面,拖动保留阴影。

6图片拖尾

限制画面里同时保留的数量,别把整页挡住。

7悬停反光

高光跟随指针,限制亮度和覆盖范围,移出后平滑淡出,文字和主体始终要看得清。

03他反复说的四句

这四句在十六集里出现了几十次,是他整套方法的骨架。

1别只说「加一个 X」

那是需求的名字,不是需求。

2用和不该用一起说

他只讲边界,不讲外观。一集两分钟,外观一句带过,什么时候别用讲半天。

3例外先说

手机、键盘、中文输入法、减少动效——这四样是九成返工的来源。

4能拿到真数据就别编

进度、未读数、时长,都要绑真实状态。

04补扫十集

这十集的字幕接口反复返回别的视频,改用截图:每集等距取 6–12 帧,拼成一张长图读。

30 布局 · 最实用6 条
1重叠,然后吸顶

头部和内容先重叠,滚到位置就钉住。

2只更新变化的那个词

别整块重绘。

3留白是最高级的设计

原话就这么说的。

4点哪一天,就补哪一天

点了空格就地补上,不弹新页面。

5导航旁边留一个主操作

别让人找。

6只留封面,不打断正文

列表里图不抢戏。

03 加载7 种

page loader / skeleton / shimmer / spinner / progress bar / circular progress / button loading。

顺序是有逻辑的:整页等待 → 占位保住布局 → 高光说明还在加载 → 估不出时间 → 进度可计算 → 空间有限处 → 防重复点击。

收尾句:以后不要只告诉 AI「加一个加载动画」,把动效类型 + 预计等待时间 + 具体使用场景一起说清楚。

其余八集清单
06 展开
expand / accordion / dropdown / treeview / sidebar expand / radio menu。差别不在动画,在层级怎么摊开、一次摊开几个。
10 图表
brush selection / 十字线跨轴 / 数据提示框 / 图例筛选 / 数据细节 / 拖拽缩放
11 App 动画
列表逐项、卡片堆叠、滚动吸附等十种
13 App 图片
图片过渡 / 首图展开 / 文字流式 / 方向感应 / 靠近放大 / 手势 / 折叠
15 官网
滚动驱动叙事 / 产品转盘 / 暗场切换。Apple 式产品页的做法。
21 编排
时间戳顺序 / 切换结果 / 输入即变 / 曲线 / 步进 / 状态覆盖。讲多个组件怎么串。
27 导航
dock / card nav / bubble menu / showcase menu / hover preview
31 电影感
走进画面 / 快移稳停 / 调低调子 / 慢慢展开 / 入口要清楚。讲镜头,不讲组件。

边界说清:这几集口播才是主体,画面只是演示。字幕拿不到,所以只能给清单,给不出完整句式。这一节是画面读出来的,不是听出来的。

05和手上东西的关系

SPT 教的是人怎么给 AI 下指令;Vitrine 里存的是机器读的结构。两边是同一件事的两个端口。

给谁看
他:人给 AI 下指令
我们:机器读的结构
形态
他:一段话
我们:一个 JSON 节点加 interaction
说什么
他:名称·触发·位置·边界·结束·例外
我们:component·on·layout·props·do·guard

所以画布那层的交互表单,就按这六格做——填完六格,既是一句能发给 AI 的话,也是一个能导出的 interaction 对象。

看完就关。有想改的,回来跟我说。
丽晴 · 2026-10-23