实验室
把界面效果拆开重做一遍:它由什么构成、精确到多少的数值、以及一句能把它复现出来的提示词。这里每一个样板都是活的 —— 可以碰、可以重播、可以读源码。
拆解与提示词是英文的 —— 提示词本来就该用英文喂给模型。
- 动效1 条效果碰它一下会动的东西。时长、缓动曲线、精确到像素的位移 —— 决定一个交互是「活的」还是「只是有动画」的那部分。磁吸按钮
- 滚动驱动5 条效果把滚动条当时间轴。用滚轮擦洗一段转场、而不是让它按定时器自己播完,是「会回应你」和「只是有动画」的分界线 —— 也是开销最容易失控的地方。滚动叠层转场滚动吸附滚动驱动的 3D 环形轮播滚动驱动的场景切换
- 背景1 条效果渐变、噪点、漂移的光。所有待在内容后面、负责定调子又不抢注意力的东西。极光漂移
- 文字2 条效果标题处理、逐字进场、可变字体的花活。一个页面的气质大半由文字决定,而这大半又只用到三四个属性。流光标题逐字错峰入场
- 材质1 条效果玻璃、纵深、会反光的描边。一个矩形怎样才不再是矩形、而开始像一个物体。交互式流体扭曲