實驗室
把介面效果拆開重做一遍:它由什麼構成、精確到多少的數值、以及一句能把它複現出來的提示詞。這裡每一個樣板都是活的 —— 可以碰、可以重播、可以讀原始碼。
拆解與提示詞是英文的 —— 提示詞本來就該用英文餵給模型。
- 動效1 條效果碰它一下会动的东西。时长、缓动曲线、精确到像素的位移 —— 决定一个交互是「活的」还是「只是有动画」的那部分。磁吸按鈕
- 捲動驅動5 條效果把捲軸當時間軸。用滾輪擦洗一段轉場、而不是讓它按計時器自己播完,是「會回應你」和「只是有動畫」的分界線 —— 也是開銷最容易失控的地方。捲動疊層轉場捲動吸附捲動驅動的 3D 環形輪播捲動驅動的場景切換
- 背景1 條效果渐变、噪点、漂移的光。所有待在内容后面、负责定调子又不抢注意力的东西。極光漂移
- 文字2 條效果标题处理、逐字进场、可变字体的花活。一个页面的气质大半由文字决定,而这大半又只用到三四个属性。流光標題逐字錯峰入場
- 材質1 條效果玻璃、纵深、会反光的描边。一个矩形怎样才不再是矩形、而开始像一个物体。互動式流體扭曲