废土生存系
Post-Apocalyptic Survival四款游戏共享一种"文明废墟中拾荒"的视觉气质:锈蚀金属、手写标记、磷光绿屏、胶带修补。它们的 UI 不是被"设计"出来的,而是被"使用过的"——每个界面都带着磨损与岁月,让玩家在打开菜单的瞬间就感受到物资匮乏与生存压力。对应界面:商店卡片边框底色、战斗沉浸 HUD、主界面机械按钮、图鉴磨损做旧。
辐射系列 PIP-BOY CRT
核心语言:磷光绿 CRT 终端 + 机构黄双色调。Pip-Boy 3000 是腕戴式信息设备,屏幕以阴极射线管的磷光绿为主色(#30FF50),辅以 Vault-Tec 机构黄(#FFB000)作为强调色。等宽字体、扫描线叠层、网格边框将信息"物理容器化"——每个面板都有硬边框和可见角接,信息像档案柜里的实体卡片一样被装入方框。表面不做"干净"处理——锈迹、污渍、划痕是系统性的"受控腐蚀"层,与乐观的机构黄共同构成"封存的核时代乐观主义"美学。
地铁系列 GAS MASK POV
核心语言:防毒面具视角内的沉浸式 diegetic HUD。地铁系列将所有 UI 信息嵌入角色佩戴的防毒面具圆弧内——计时器、过滤器状态、弹药数都贴合在面具镜片的物理曲面上。镜片会因呼吸起雾、因战斗破裂,玩家需要手动擦拭。手电筒照明是交互的核心:光锥扫过黑暗时才显出可读信息,黑暗中 UI 也在暗处。弹药数贴合在面具的物理弧面上,背包查看需要低头"看向"角色胸前——所有交互都是 diegetic(叙事内嵌)的,UI 不叠加于画面之上,而是存在于角色的物理身体上。
潜行者 PDA INDUSTRIAL
核心语言:苏式工业风 PDA + 粗糙金属面板。潜行者的 PDA 是变异区里最重要的信息终端:俄文乱码装饰、磁带录音机质感、粗糙金属面板与磨损按钮。异常探测器的脉冲圈在黑暗中一圈圈扩散,势力声望用苏式机构简洁列表呈现。PDA 的界面总带着"随时可能故障"的不稳定感。势力声望用简洁列表呈现,日志条目以磁带录音质感播放,地图以粗糙等高线与手绘标注呈现——整个 PDA 像"从废墟里捡回来的",而非"出厂全新的"。
最后生还者 HAND-DRAWN SURVIVAL
核心语言:手写涂鸦 + 胶带修补 + 极简克制 HUD。顽皮狗的 UI 哲学是"少即多"——步行时 HUD 几乎完全消失,可交互物品仅以一条白色细线圈标示。制作菜单的素材与成品分列两栏,当前物品高亮为白底灰透明,克制到极致。HUD 圆形生命条贴边放置,不干扰画面中心。UI 的每个元素都像"用胶带临时粘上去的",带着物资匮乏的真实手感。Part II 进一步极简化:圆形生命条更细、更贴边,制作菜单更克制—— Naughty Dog 的设计哲学是"UI 越少,沉浸越深"。
赛博科幻系
Cyberpunk Sci-Fi四款游戏代表"技术渗透肉体"的视觉谱系:全息投影边框、霓虹配色、人体扫描、神经可视化。它们的 UI 不是屏幕上的层,而是空间中的光——浮空、故障、扫描、入侵,每帧都在暗示"你的身体已被数据化"。对应界面:战斗全息 HUD、商店终端质感、关卡数据面板、图鉴 3D 扫描展示。
赛博朋克 2077 HOLO GLITCH
核心语言:全息投影浮空 UI + 故障艺术 + 红青双色霓虹。夜之城的 UI 不贴在屏幕上,而是悬浮在空气中——电话面板、任务日志、对话选项都是全息投影,边缘带 chromatic aberration(色差)和 scanline 故障条纹。血量/护甲以青色光弧呈现,黑客入侵时的代码瀑布与 ICE 防御层级用红色警告。Glitch 效果不是随机损坏,而是"数字世界的不稳定存在"的视觉隐喻。血量/护甲以青色光弧呈现,技能栏图标带霓虹发光边框,对话选项以全息文字浮在角色面前。整个 UI 体系暗示:在 2077 年的夜之城,信息不是被"显示"的,而是被"投影"在空气中的光。
看门狗系列 PHONE AR HACK
核心语言:手机终端界面 + 黑客代码流 + AR 增强现实。看门狗把玩家的手机变成万能黑入终端:ctOS 系统界面以深绿底色呈现,黑客入侵时的代码瀑布流从屏幕顶部倾泻,信号干扰效果用 RGB 错位与噪声纹理模拟。AR 投影把信息叠加在真实世界上——人物头像浮空标注、可黑入对象以青色光圈标出、摄像头视角带信号噪点。UI 的每个元素都在暗示"你正在入侵这个系统"。入侵成功时界面闪烁绿光确认,入侵被追踪时红色警告条从屏幕边缘逼近——UI 状态本身即是游戏机制。
Deus Ex 系列 AUG MEDICAL
核心语言:人体扫描界面 + 器官改造树 + 医疗蓝绿色调。Deus Ex 的改造诊所用蓝绿色调(#5EA8D8)构建"科技医疗"的冷静感。Praxis 改造树以人体扫描图为骨架——骨骼、肌束、神经路径在半透明人体模型上发光,每个改造节点钉在对应解剖位置。LIMB 诊所的界面像一台高级医疗扫描仪,冷光、精密、无感情。UI 在暗示一个核心命题:你的身体是可编辑的数据。改造节点以 Praxis 点数解锁,每解锁一个节点,人体模型上对应区域的肌束/骨骼会发光——UI 的"进度"即角色的"肉体改造"。
Observer NEURAL BIO
核心语言:神经可视化 + 脑内界面 + 生物机械融合。Bloober Team 的 Observer 把玩家变成一名"神经警察"——直接侵入死者的意识,在他们的记忆、恐惧与谎言中搜证。UI 是"脑内的界面":脑电波图形在暗紫色背景上波动,恐惧等级以生物读数呈现,记忆碎片以 3D 全息扫描展示。赛博朋克的冷硬与生物恐怖的有机性在此融合——界面像活的,像在呼吸。记忆碎片以 3D 全息形式在空间中漂浮,玩家可以旋转、放大、深入——每次"查看记忆"都是一次意识潜入。UI 的紫色光晕与赛博朋克的青/红霓虹形成对比:它不是"技术"的光,而是"生物"的光。
复古终端系
Retro Terminal四款游戏从不同年代提取"过时技术作为美学归宿"的设计语言:DOS 绿字黑屏、极简红白黑、70 年代磁带科幻、PS1 时代低多边形 CRT。它们证明了一件事——技术限制本身就是一种设计风格,而且是情感最强的那种。对应界面:成就终端字体、战斗警告色、主界面复古按钮、全局扫描线特效。
Pony Island DOS GREEN-ON-BLACK
核心语言:老式 DOS 界面 + 黑底绿字 + 伪代码装饰。Pony Island 把玩家关进一台被恶魔附身的街机里,整个游戏以 DOS 操作系统的外壳运行。绿底黑字(实为黑底绿字 #30FF50)的终端窗口、伪代码命令行、灰度像素小马与故障图像混合——它用最原始的计算机界面语言制造恐怖。玩家需要"修改游戏代码"来逃出,代码编辑界面以伪汇编语言呈现,无需编程知识但充满"我在黑入系统"的紧张感。恶魔会通过修改游戏代码来阻挠你——UI 本身就是战场。
Superhot MINIMAL RED-WHITE
核心语言:极简三色 + 粗体无衬线 + MSDOS 式系统外壳。Superhot 的美术总监 Marcin Surma 确立了三色法则:白色环境、红色敌人、黑色武器——除此之外别无他色。UI 以 MSDOS 风格的系统外壳呈现,但比原始终端更"风格化、更可理解"。粗体无衬线大字、红色警示条、极简状态信息——一切都为了把注意力锁死在"时间仅随你移动而流动"这一核心机制上。UI 文字极少——系统壳用粗体大写传递关键状态,战斗界面几乎无文字,全靠红/白/黑三色的空间对比传达信息。
Alien: Isolation 70s RETROFUTURE
核心语言:70 年代复古未来 + 琥珀 CRT + 磁带存档机。《异形:隔离》把 1979 年雷德利·斯科特电影的视觉语言重建为完整设计系统:粗壮等宽终端字体、琥珀磷光(#FFB000)与绿色双色调、扫描线雾化、闪烁光标——全部呈现在永远不干净的 CRT 底色上。动作追踪器以模拟雷达圆扫描呈现,存档用磁带录音机,开门用菲林扫描仪——每一台设备都"有重量、有气味、有年代"。动作追踪器只显示移动物体的距离方向而非精确位置——如果异形停止移动,它就从屏幕上消失。这种"不完整信息"本身即是恐怖的引擎。
Signalis PS1 CRT PIXEL
核心语言:低多边形 CRT + 扫描线 + 像素字体 + 红色警报灯。Rose Engine 的 Signalis 刻意降分辨率——低多边形 3D 环境 + 2D 精灵动画 + 像素字体,配合 CRT 后处理(扫描线、胶片颗粒、色调分级)营造"冷战东德科幻恐怖"氛围。视觉语言本身就是叙事:劣化屏幕、闪烁灯光、被腐蚀的文字和抽象梦境序列传达心理 deterioration(精神退化)。UI 以红色警报灯为核心情绪信号,故障文字、乱码是故意的。存档界面像一台冷战时期的东德终端机——方形 CRT、扫描线、像素字符,一切都在暗示"系统正在崩溃,你正在被同化"。
独立策略系
Indie & Strategy四款独立游戏代表了"信息即设计"的极致:极简像素战棋网格、横版卷轴状态栏、工业管道建造面板、竖屏卡牌遗物列表。它们的 UI 不做氛围渲染,只做一件事——把信息用最少的像素最清晰地推到你眼前。对应界面:战斗竖屏信息排布、顶部状态栏、商店列表卡片、图鉴网格列表切换。
Into the Breach PIXEL GRID INFO
核心语言:极简像素战棋 + 清晰网格信息 + 完全透明博弈。开发者 Matthew Davis 和 Justin Ma 在测试中发现"必须把'谁在做什么'展示得特别清楚"——于是所有攻击以循环抛物线/点线/箭头标注,敌人意图在回合开始前完全公开。8×8 小网格让每一步都是精密推演。UI 的最高追求是"零认知负担"——你需要的信息全在屏幕上,一目了然。攻击轨迹用不同线型区分:抛物线=抛射、点线=远程、箭头=近战推进,颜色编码区分友/敌/建筑。
Dead Cells SIDESCROLL HUD
核心语言:横版卷轴顶部状态栏 + 血条/金币/技能三段排布。Dead Cells 的 HUD 是 roguelite 横版的教科书:顶部一行容纳所有关键信息——左侧血条(红/黄/绿三色分段)、中部金币计数、右侧三个技能槽。角色/暂停界面在 Update 5 后拆分为 Options/Equipment/Inventory 三屏,加入变异选择与游玩时长。整个 HUD 紧贴屏幕顶边,不遮挡卷轴动作的视野中心,所有数值一目了然。变异选择界面简洁到只有图标和数值——"看一眼就懂"是 Motion Twin 的设计信条。
Mindustry INDUSTRIAL PIPE
核心语言:工业风建造 UI + 管道连接感 + 资源面板。Mindustry 的建造以传送带和管道连接为核心——UI 反映了这种"物质流动"的设计哲学。圆盘快捷建造 Mod 让高频建造不停顿,核心库存即时可用。资源面板在底部以列表呈现铜/铁/硅等数值,建筑图标设计为工厂模块的迷你俯视图。整个 UI 像一张工业蓝图,每个数字都是一个管道的流量读数。建筑放置时自动连接相邻的输入/输出口——连线即数据流,玩家不需要额外的"连接"操作,只管放置。
Slay the Spire CARD LIST SIMPLE
核心语言:竖屏卡牌/遗物列表 + 简洁数值 + 分支地图导航。杀戮尖塔把所有信息压缩为竖屏列表:顶部血条 + 金币 + 药水栏三槽,卡组以纵向列表浏览,遗物以图标行排列。地图是可缩放的分支节点图——骷髅(精英)、篝火(休息)、问号(事件)、商店($)各有明确图标。点击卡牌放大显示完整 tooltip,拖拽出牌。UI 的核心理念是"每个工具都在伸手可及处",信息密度高但层级清晰。药水栏三个槽位提醒"药不是传家宝,该喝就喝"——UI 本身在教导玩家行为模式。
汇总矩阵
Cross-Reference Matrix将 16 款游戏的核心视觉语言、色彩体系、字体策略与对应界面模块交叉对比,一表掌握全部参考点。
| 游戏 | 范式 | 核心视觉语言 | 主色调 | 字体策略 | 对应界面 |
|---|---|---|---|---|---|
| 辐射系列 | 废土生存 | 磷光绿 CRT 终端 + 机构黄 + 网格边框[1] | #30FF50 / #FFB000 / #0A0C08 | 等宽 + 粗壮平板衬线 | 商店/成就/关卡 — 卡片边框底色 |
| 地铁系列 | 废土生存 | 面具视角 diegetic HUD + 镜片擦拭[3] | #FFB225 / #FF5D3A / #0A0C08 | 等宽暗光体 + 手写 | 战斗 — 沉浸感 HUD |
| 潜行者 | 废土生存 | 苏式 PDA + 粗糙金属 + 异常脉冲圈[5] | #46C9A5 / #9AA090 / #RUST | 俄文等宽 + 乱码装饰 | 主界面 — 机械按钮/背景氛围 |
| 最后生还者 | 废土生存 | 极简克制 + 手写涂鸦 + 胶带修补[6] | #E9E5D6 / #9AA090 / #TAPE | 无衬线小号 + 手写体 | 图鉴 — 磨损做旧细节 |
| 赛博朋克 2077 | 赛博科幻 | 全息浮空 UI + Glitch 故障 + 色差[8] | #FF003E / #00F0FF / #0C0E0C | 等宽科技体 + 霓虹大写 | 战斗 HUD — 全息血条/锁定圈/技能栏 |
| 看门狗系列 | 赛博科幻 | 手机终端 + 代码瀑布 + AR 浮空标注[10] | #46C9A5 / #00F0FF / #FF003E | 等宽终端 + 小号无衬线 | 商店/主界面 — 终端屏幕质感 |
| Deus Ex 系列 | 赛博科幻 | 人体扫描 + 改造树 + 医疗蓝绿[11] | #5EA8D8 / #1A3A3A / #FFB225 | 等宽医疗扫描体 | 关卡/图鉴 — 数据面板布局 |
| Observer | 赛博科幻 | 神经可视化 + 脑电波 + 3D 全息记忆[12] | #B48CE8 / #FF5D3A / #5EA8D8 | 等宽生物读数 + 手写残留 | 图鉴 — 3D 全息扫描展示 |
| Pony Island | 复古终端 | DOS 绿字黑屏 + 伪代码 + 灰度像素[13] | #30FF50 / #000000 / #FF003E | 等宽终端 + 伪汇编 | 成就 — 终端字体/乱码装饰 |
| Superhot | 复古终端 | 三色极简 + 粗体无衬线 + MSDOS 壳[14] | #FF003E / #FFFFFF / #000000 | 粗体无衬线大写 | 战斗 — 警告色运用 |
| Alien: Isolation | 复古终端 | 70s 复古未来 + 琥珀 CRT + 磁带存档[15] | #FFB000 / #30FF50 / #0C0E0C | 粗壮等宽终端 + 全大写 | 主界面 — 复古机械按钮 |
| Signalis | 复古终端 | PS1 低多边形 + 扫描线 + 乱码 + 红警报[17] | #FF5D3A / #9AA090 / #0C0E0C | 像素字体 + 腐蚀乱码 | 全局 — 扫描线/故障特效 |
| Into the Breach | 独立策略 | 极简像素战棋 + 8×8 网格 + 完全透明博弈[19] | #46C9A5 / #FF5D3A / #FFB225 | 像素体 + 小号无衬线 | 战斗 — 竖屏信息排布 |
| Dead Cells | 独立策略 | 横版顶部状态栏 + 血条/金币/技能三段[21] | #FF5D3A / #FFB225 / #5EA8D8 | 无衬线小号 + 像素数字 | 战斗 — 顶部状态栏布局 |
| Mindustry | 独立策略 | 工业管道连接 + 建造圆盘 + 资源面板[22] | #5EA8D8 / #FF5D3A / #9AA090 | 等宽数字 + 小号标签 | 商店/关卡 — 列表卡片 |
| Slay the Spire | 独立策略 | 竖屏卡牌/遗物列表 + 分支地图 + 简洁数值[23] | #FF5D3A / #FFB225 / #5EA8D8 | 无衬线小号 + 数字优先 | 图鉴/成就 — 网格/列表切换 |
界面模块映射总览 INTERFACE MODULE MAPPING
主界面
参考潜行者 PDA的粗糙金属面板与机械按钮做背景氛围;参考Alien: Isolation的 70 年代复古机械按钮;参考看门狗的终端屏幕质感。
战斗 HUD
参考地铁的面具视角 diegetic HUD 做沉浸感;参考赛博朋克的全息血条/锁定圈/技能栏发光做战斗状态;参考Superhot的红色警告色运用;参考Into the Breach的竖屏网格信息排布;参考Dead Cells的顶部状态栏。
商店界面
参考辐射 Pip-Boy的网格边框 + 磷光绿底色做卡片边框;参考看门狗 ctOS的三栏终端面板做商店布局;参考Mindustry的工业列表卡片做商品呈现。
天赋系统
参考Deus Ex的 Praxis 改造树节点分支与人体扫描节点;参考Dead Cells的装备升级锻造槽位与稀有度分级;参考Slay the Spire的卡牌升级路径可视化。天赋树以分支节点连接,每个节点对应一项装备强化或技能解锁。
关卡选择
参考辐射 Pip-Boy的网格化嵌套边框做关卡卡片;参考Deus Ex的数据面板布局;参考Mindustry的工业列表卡片;参考Slay the Spire的分支地图导航。
成就系统
参考Pony Island的 DOS 终端字体与乱码装饰;参考辐射的机构黄边框与磷光绿底色;参考Slay the Spire的竖屏数值列表。
图鉴系统
参考最后生还者的手写涂鸦与胶带做磨损做旧;参考Deus Ex的数据面板布局与人体扫描式分类;参考Observer的 3D 全息扫描展示;参考Slay the Spire的网格/列表切换。
设计检查清单
Design Checklist将 16 款游戏的调研结论提炼为可操作的检查项——在落地任何界面模块前,用这组问题自检。
① 色彩一致性
□ 是否从四系中选定一个主范式(废土/赛博/复古/独立)作为全局色彩基底?
□ 辅助色是否限定在 3–5 色以内,且有明确语义(友方/敌方/警告/资源)?
□ 是否避免了跨范式混用(如废土锈蚀 + 赛博霓虹 = 视觉冲突)?
□ 色板是否已在所有界面模块(商店/战斗/图鉴/成就/关卡)中统一?
② 字体策略
□ 标题与正文是否双字体系统(如粗壮衬线标题 + 等宽正文)?
□ 等宽字体是否用于数值/终端/代码场景?
□ 像素字体是否仅用于特定复古模块(如成就/全局特效)?
□ 字号层级是否 ≤ 4 级,避免碎片化?
③ 质感与氛围
□ 卡片边框是否带有物理质感(锈蚀/铆钉/磨损/胶带)而非纯平面?
□ 扫描线/故障特效是否仅在特定场景触发(加载/事件/Boss),不全局常驻?
□ Diegetic 元素(面具/PDA/终端)是否融入世界观而非浮于其上?
□ 是否有至少 1 处"可交互的物理质感"(擦拭镜片/磁带存档/按钮按压)?
④ 信息层级
□ 战斗 HUD 是否遵循 Into the Breach 原则——所有决策所需信息一目了然?
□ 状态栏是否贴边放置(Dead Cells 模式),不遮挡核心视野?
□ 图鉴是否支持网格/列表双视图切换(Slay the Spire 模式)?
□ 数值展示是否简洁到极致——每个数字都有语义图标?
⑤ 界面模块映射
□ 商店界面是否参考了 辐射网格边框 + 看门狗终端面板?
□ 战斗 HUD 是否融合了 地铁沉浸感 + 赛博全息发光 + Superhot 警告色?
□ 天赋系统是否参考了 Deus Ex 改造树 + Dead Cells 锻造槽 + Slay the Spire 升级路径?
□ 图鉴是否采用了 Deus Ex 数据面板 + Observer 3D 扫描布局?
□ 成就系统是否使用了 Pony Island 终端字体 + 乱码装饰?
⑥ 全局一致性
□ 所有模块是否共享同一色板、字体、边框圆角、间距系统?
□ Hover/Active/Disabled 状态是否四系统一(如统一用琥珀色高亮)?
□ 动画时长是否≤ 0.3s(即时反馈),避免过度装饰?
□ 移动端是否做了 触控优化(目标 ≥ 44px,禁用 hover 位移)?