# 科幻界面（FUI / HUD）

镜语 · 版式与界面 / 色调与氛围

- 别名：FUI、HUD、虚构界面、Fictional User Interface、电影界面、全息界面
- 口语：「像钢铁侠头盔里的界面」「科幻电影里一堆线和数字的屏幕」「锁定目标的那种扫描框」
- 一句话：电影和游戏里的虚构界面：细线框、等宽数字、扫描和不停刷新的数据
- 是什么：FUI（Fictional User Interface，虚构界面）指电影、剧集和游戏里为角色设计的界面，HUD 是其中叠在视野上的抬头显示。它为叙事服务而不为真实可用：细线框、准星、等宽数字、扫描线和不停刷新的数据让观众一眼读出「高科技」
- 缺了就不像：1px 青色细线框；等宽字体与刷新数字；准星与对焦框
- 加了更像：扫描线；切角与刻度；雷达或波形；橙色警示
- 适合用在：科技类视频片头、数据口播的画面包装、游戏感的个人主页；影视作品中的电脑、飞船、头盔视角；活动倒计时、发布会开场等需要「系统启动」感的段落
- 看哪里：看头像上的扫描线和四角括号准星，周围的数字在不断刷新；所有边框都是 1px 青色细线，角落带切角和刻度。把鼠标移到作品格上，准星会锁定并显示目标信息
- 注意：真实产品不要照搬：太多闪烁和细字在真实使用中难以阅读；数据最好与内容相关，乱码和随机数字堆满会显得廉价
- 描述示例：做一个科幻 FUI／HUD 风格的人物档案界面：近黑的深青背景带细网格，所有框线是 1px 青色 #5ff 细线，角落有切角、括号和刻度标记；头像上叠加扫描线、旋转的圆形准星与四角对焦框；文字全部使用等宽字体、大写英文标签加中文，数字不断刷新；有雷达扫描、进度条和小型波形图；少量橙色作为警示强调；整体冷静、精密、像电影里的头盔显示
- 易混：
  - [暗色界面](https://idea.ameng.dev/terms/dark-ui.md)：暗色界面要长期好用，FUI 只需在几秒镜头里让观众读懂
  - [赛博朋克](https://idea.ameng.dev/terms/cyberpunk.md)：赛博朋克是城市世界观，FUI 是其中屏幕上的界面
- 相关：[扫描线](https://idea.ameng.dev/terms/scanlines.md)、[乱码解码](https://idea.ameng.dev/terms/scramble-text.md)、[故障错位](https://idea.ameng.dev/terms/glitch.md)、[机甲](https://idea.ameng.dev/terms/mecha.md)

## 来源与延伸阅读

- [HUDS+GUIS · 影视与游戏界面合集](https://www.hudsandguis.com/)
- [Web Design Museum · 2Advanced Studios v3 2001（Futuristic 标签）](https://www.webdesignmuseum.org/gallery/2advanced-studios-v3-2001)

网页版（含演示）：https://idea.ameng.dev/terms/fui