这东西叫什么
AI 自己猜,猜成最近似的那种
三十一集看下来,他教的不是六十个组件,是一张六格的表。缺哪一格,AI 就替你做主。
每集结尾都有一句几乎一样的话:以后别只告诉 AI「加个弹窗」,把组件名称、触发方式、出现位置、用户是否必须完成操作一起说清楚。
换了集,换的只是那几格的名字。叠起来是同一张表:
这东西叫什么
AI 自己猜,猜成最近似的那种
什么动作让它出现
做成 hover,手机用户永远碰不到
从哪儿冒、贴着谁
飘到页面中央,跟触发点失去关系
能放多少,能不能放按钮
塞进去一个表单,容器被撑变形
怎么收起,收起后回到哪
关掉就没了,用户不知道刚才在哪
手机、键盘、减少动效怎么办
桌面完美,触屏全废
这六格是「说清一个交互」的最小完整集。缺哪一格,AI 就会替你做主——而它做主的方式,通常是选那个最省事的默认值。
下面每条都是他片子里「跟 AI 说」的那一段,按类整理。前面粗体是组件名,后面是那句话。
给图标、按钮或字段补一句很短的说明,悬停或键盘聚焦时出现,不适合放复杂操作。
贴着触发位置出现,能承载更多内容,可以放按钮,点击后查看一小段补充信息。
从一组选项或操作里做选择,点按钮展开列表,选完自动收起。
既要保留原页面做参考、又要展开详情或编辑,面板从侧边滑入。
移动端,从屏幕底部向上展开,常用操作放到拇指更容易够到的位置。
需要确认内容或做出决定,居中的模态框加遮罩,处理完之前无法继续操作页面。
他补的那一句:名字、触发方式、出现位置、是否必须完成操作——四个一起说。
同一页里有几组并列内容要快速切换,点哪个标签显示对应内容。
选项更少、布局更紧凑,两三视图之间切换。
层级深的网站,用一条路径告诉用户当前在哪一层,能快速返回上一级。
内容太多一页放不下,拆成多页翻。
把流程拆成有先后顺序的几步,让用户知道后面还剩几步。
功能和栏目多的后台或桌面端,主要入口固定左侧,持续高亮当前页。
手机端,把 3–5 个最常用入口固定在底部。
原片第 5 条把 stepper 和 sidebar 念串了,按语义拆开。这类口误正是「只靠听会漏」的地方。
把一个对象拖到指定区域,松手完成放置或移动。
拖某一项,其他项自动让位,松手保存新顺序。
拖滑块在连续范围里调数值、进度或选项。
拖容器边缘或角点,改面板、图片或编辑区的宽高。
空白处按住拖出选择框,一次选中多个对象。
文件拖进指定区域上传,上传区要给出悬停和释放反馈。
选中底色从旧位置移到新位置,宽度跟着文字长度调整,落下轻微回弹。是底色在动,不是整列文字跟着晃。快速切换时从当前位置接着走。
点分类箭头转过来,子项依次出现,后面的栏目同时往下让位。别把整条侧栏越撑越长。只保留一组展开。
点某项,下方展开一块宽面板;换到另一项,外面的面板保留里面的内容平滑切换。别只靠鼠标悬停——点击和键盘也要能打开。
鼠标靠近哪个哪个放大,相邻图标轻轻让位。放大不能盖住旁边的入口,也不能挡住正文按钮。
输入关键词列表实时缩小,上下键移动,确认才跳转,关闭回到刚才的位置。打拼音时的回车是选字,不能顺便执行命令。
有新消息显示小点,待处理用数字,数量更新时数字滚到新值。真正查看以后才清除,不是鼠标一经过就消失。
这一集的价值在于:它讲的不是「长什么样」,全是「什么时候不该」。
区分「拖画布」和「拖卡片」,以指针位置为中心缩放,设合理缩放范围。
说清选框是「碰到就算选中」还是「完全框住才算」,成组后怎么进内部编辑、怎么取消组合。普通拖=框选,按住空格拖=平移。
线绑两端卡片,拖动时持续更新路径,支持重连和删除。画一条线 ≠ 功能接通。
按内容类型选排列,考虑实际大小和间距,避开重叠,平滑移动,提供撤销;只选中几张就只整理选中的。
角落放缩略图,标出当前视口,支持点击定位、拖动视口框,再加一个「显示全部」。
扇形展开 / 纵深叠牌 / 圆柱环绕 / 球面排布 / 螺旋排布 / 波浪矩阵。
共同句式:先说排列方式,再说怎么浏览,再说选中哪张怎么展示,最后说关闭后回到哪里。
能拿到准确进度就显示百分比,拿不到就显示当前阶段。别让进度条自己跑到 99% 然后一直卡着。
从占位区平滑过渡到真实内容,别每出现一块就把正在看的位置往下挤。
不支持取消就说明当前步骤仍在执行,别给一个假的结束状态。
只失败一部分就在对应位置提示,保留已完成内容,重试失败部分,只更新这一块,不整页重载。
保留原图,各项效果和参数单独存,支持独立开关和重新调整。
说清一次完整操作从哪开始到哪结束——不是加两个撤销按钮。拖滑杆时实时预览,松手才记成一次。
存可恢复、可继续编辑的方案,区分「预览」和「应用」,切换前保留未保存的修改。
按住边角先卷起露出背面,拖动保留抬起的阴影,松手贴平。不能只把整张图放大一点——卷边、背面、阴影得一起变。
拆成背面、信纸、袋口、封口;点击先翻封口,再让信纸从袋口划出,收起反向。
完整排版的小票从固定出口往下送出,出口遮住还没露出的部分。
收尾那句:文字、导航、按钮保持清楚,把材质和动作留给贴纸、信封和小票就够了。
两张图对齐叠放,拖分割线改变露出范围,不要把图片一起拉伸。
说清是「跟随移动的窗口」(手电筒),还是「划过就不恢复的擦除」(刮刮卡)。
方块多大、按什么顺序出现、什么时候换下一张。
以指针为中心,周围图像轻微扭曲,向外扩散后消失。扭的是图像内容,不是在上面画几个圆圈。
按住边角卷起露出背面,拖动保留阴影。
限制画面里同时保留的数量,别把整页挡住。
高光跟随指针,限制亮度和覆盖范围,移出后平滑淡出,文字和主体始终要看得清。
这四句在十六集里出现了几十次,是他整套方法的骨架。
那是需求的名字,不是需求。
他只讲边界,不讲外观。一集两分钟,外观一句带过,什么时候别用讲半天。
手机、键盘、中文输入法、减少动效——这四样是九成返工的来源。
进度、未读数、时长,都要绑真实状态。
这十集的字幕接口反复返回别的视频,改用截图:每集等距取 6–12 帧,拼成一张长图读。
头部和内容先重叠,滚到位置就钉住。
别整块重绘。
原话就这么说的。
点了空格就地补上,不弹新页面。
别让人找。
列表里图不抢戏。
page loader / skeleton / shimmer / spinner / progress bar / circular progress / button loading。
顺序是有逻辑的:整页等待 → 占位保住布局 → 高光说明还在加载 → 估不出时间 → 进度可计算 → 空间有限处 → 防重复点击。
收尾句:以后不要只告诉 AI「加一个加载动画」,把动效类型 + 预计等待时间 + 具体使用场景一起说清楚。
边界说清:这几集口播才是主体,画面只是演示。字幕拿不到,所以只能给清单,给不出完整句式。这一节是画面读出来的,不是听出来的。
SPT 教的是人怎么给 AI 下指令;Vitrine 里存的是机器读的结构。两边是同一件事的两个端口。
所以画布那层的交互表单,就按这六格做——填完六格,既是一句能发给 AI 的话,也是一个能导出的 interaction 对象。