从 Top Gun 到 Tron：用界面讲故事，260 个院线级 UI 镜头全在 Figma 手工完成
The hidden craft of interface design in modern film ft. Jayse Hansen | Config 2026 · Jayse Hansen
全片 26 分钟·真正值得盯屏约 13 分钟·3 个必看点
- 0:12 – 3:53听
影视 FUI 的世界观：把观众当用户
Jayse Hansen 开场定义影视 UI 的真正用户是影院观众，设计只需回答两个问题——如何让故事更清晰、如何让它更有魔力。
在数据过载的时代，讲故事是穿透信息噪音的最短路径。
本段以口头论述铺设方法论框架，无关键画面，适合当播客听。▶ 跳到 0:12讲者 · Jayse Hansen - 3:53 – 7:12看
道具拆穿：银幕高科技屏的真身
揭秘影视道具的制作真相：Top Gun 座舱屏由 iPhone、iPad Pro、iPod Touch 充当，Tron 光轮的三角显示屏是一台嵌入车身的 iPad mini。
院线级『高科技界面』的硬件载体往往就是消费级设备，魔力全在设计与合成。
对照真实道具与成片效果的揭秘画面是本段全部价值所在，只听会完全错过。▶ 跳到 3:53讲者 · Jayse Hansen - 7:12 – 10:50看
Top Gun：军工级真实的协作链
讲述臭鼬工厂保密设施内的主题专家如何提供每个告警与动画时序的真实数据，讲者赴海军航空站学开 F-18 并自建模拟器；UI 动画按真实故障过程精确计时，让 Tom Cruise 在真 F-18 后座不间断演完整个失控段落。
界面时序可以直接服务于表演——真实性是为潜在的飞行员观众逐帧检验而设计的。
本章有值得看的成片片段与座舱画面（642s 处讲者明确指着银幕效果），画面与叙述互相印证。▶ 跳到 7:12讲者 · Jayse Hansen - 10:50 – 14:13看
Mitchells 反转：AI 会怎么设计界面？
与 Top Gun 完全相反的命题：《智能大反攻》追问『接管世界的 AI 自己会怎么设计界面』。美术指导用一只无曲线无倒角的日式咖啡杯示范，把讲者引以为傲的多层 chamfer 草图一路精简到一个三角形。
极简不是删减装饰，而是换一个『非人类』视角重新推导整个设计。
草图逐步精简的过程是视觉演进，782s 的咖啡杯示范是全场最值得盯着画面看的段落。▶ 跳到 10:50讲者 · Jayse Hansen - 14:13 – 16:40略
慢艺术与复刻练习：Turrell 的启示
导演引荐 James Turrell 的『慢艺术』作为美学源头；讲者亲手用矢量复刻其作品，发现看似发光的白矩形里藏着粉、蓝、绿多层非线性渐变高光。
遇到看不懂的设计就亲手复刻它——被迫回答『怎么把这个变成 UI』时才会产出原创视觉语言，而非抄袭。
画面以艺术作品图与渐变分析幻灯片为主，扫一眼 900s 附近的复刻对比图即可，重点在方法论叙述。▶ 跳到 14:13讲者 · Jayse Hansen - 16:40 – 21:16略
Tron Ares：从角色出发的 Figma 设计系统
全片约 260 个 UI 镜头完全在 Figma 中设计、After Effects 合成。UI 系统从角色而非画面出发：Ares 是『匹诺曹式木偶』，控制杆成为贯穿所有设备的骨架，受控/挣脱的叙事状态直接驱动动效规则，Athena 的 HUD 则保持纯机器视觉作为对照。
Figma 已可承载院线级 FUI 生产管线，且叙事状态可以直接翻译成动效规则。
以设计稿与系统图幻灯片为主，重点扫 1151s 的木偶骨架参考与 1217s 的成对反向运动示例，其余听讲解即可。▶ 跳到 16:40讲者 · Jayse Hansen - 21:16 – 25:30听
几何即符号，纯手工像素的收束
圆形在 Tron Ares 的 UI 中被系统性禁用，只在角色与水等自然媒介交互、即将转变的关键时刻出现；讲者坦言全片 UI 未用任何 AI、每个点手工完成，但同时明确表示拥抱 AI，最后回到『把观众当用户』收束全场。
连几何形状本身都可以是叙事符号——手工技艺与拥抱 AI 并不对立。
收束段以观点陈述为主，无强视觉依赖；若有余力可瞥一眼 1347s 用实物光影照片支撑体积全息 UI 的示例。▶ 跳到 21:16讲者 · Jayse Hansen