GAME UI DESIGN REFERENCE · 16 GAMES × 4 PARADIGMS

UI 美术设计
参考档案

从废土生存的锈蚀终端到赛博科幻的全息投影,从复古终端的磷光扫描线到独立策略的极简网格——本档案调研全网 16 款标志性游戏的 UI 美术设计,萃取其视觉语言、交互范式与氛围构建手法,映射至塔防游戏的主界面、商店、战斗 HUD、天赋系统、图鉴、成就、关卡选择七大界面模块。

参考游戏 16 款
设计范式 4 大系
界面映射 7 模块
全网调研 24 信源
SEC.01

废土生存系

Post-Apocalyptic Survival

四款游戏共享一种"文明废墟中拾荒"的视觉气质:锈蚀金属、手写标记、磷光绿屏、胶带修补。它们的 UI 不是被"设计"出来的,而是被"使用过的"——每个界面都带着磨损与岁月,让玩家在打开菜单的瞬间就感受到物资匮乏与生存压力。对应界面:商店卡片边框底色、战斗沉浸 HUD、主界面机械按钮、图鉴磨损做旧。

废土生存系 UI 设计参考
> VAULT-13 OS v2.1.4 [HP]██████░░ 78% RAD

辐射系列 PIP-BOY CRT

核心语言:磷光绿 CRT 终端 + 机构黄双色调。Pip-Boy 3000 是腕戴式信息设备,屏幕以阴极射线管的磷光绿为主色(#30FF50),辅以 Vault-Tec 机构黄(#FFB000)作为强调色。等宽字体、扫描线叠层、网格边框将信息"物理容器化"——每个面板都有硬边框和可见角接,信息像档案柜里的实体卡片一样被装入方框。表面不做"干净"处理——锈迹、污渍、划痕是系统性的"受控腐蚀"层,与乐观的机构黄共同构成"封存的核时代乐观主义"美学。

辐射 Pip-Boy UI
Fallout Pip-Boy 终端界面 Fallout Pip-Boy 终端界面
PIP-BOY 3000 — STAT / INV / MAP / RADIO
> VAULT DWELLER // HP 78/100
> RAD: 348 // STIMPAK x2
> ▌ INVENTORY: 12/50 lbs
> ENCUMBERED — AP DRAINED
#30FF50
#FFB000
#0A0C08
#1A1E18
#RUST
字体:等宽字体 + 粗壮平板衬线(标题)
质感:CRT 扫描线、磷光余晖、锈蚀边框、铆钉点缀
布局:网格化嵌套边框,信息容器化
色彩:磷光绿主 + 机构黄强调 + 近黑底
商店、成就、关卡选择的卡片边框和底色
Fallout 1–4 · Pip-Boy 3000/Mark IV[1][2]
FILTER 12:34 MASK OK

地铁系列 GAS MASK POV

核心语言:防毒面具视角内的沉浸式 diegetic HUD。地铁系列将所有 UI 信息嵌入角色佩戴的防毒面具圆弧内——计时器、过滤器状态、弹药数都贴合在面具镜片的物理曲面上。镜片会因呼吸起雾、因战斗破裂,玩家需要手动擦拭。手电筒照明是交互的核心:光锥扫过黑暗时才显出可读信息,黑暗中 UI 也在暗处。弹药数贴合在面具的物理弧面上,背包查看需要低头"看向"角色胸前——所有交互都是 diegetic(叙事内嵌)的,UI 不叠加于画面之上,而是存在于角色的物理身体上。

地铁 防毒面具 HUD
Metro 防毒面具 HUD 界面 Metro 防毒面具 HUD 界面
GAS MASK — FILTER / AMMO / COMPASS
▲ FILTER 02:175.45×39
· · · · · ·
N→NE
[ 镜片裂痕 — 可擦拭 ]
#FFB225
#FF5D3A
#0A0C08
#DUST
视角:第一人称面具内,UI 贴合圆弧曲面
交互:手动擦拭镜片、手电筒照明式信息读取
质感:呼吸雾气、裂纹玻璃、破旧手写
色彩:琥珀黄暗光 + 警示红 + 近黑
战斗界面的沉浸感 HUD 设计
Metro 2033 / Last Light / Exodus[3][4]
PDA v3.2 // ЗОНА RAD 0.42 ⚠ АНОМАЛИЯ ART: ◆

潜行者 PDA INDUSTRIAL

核心语言:苏式工业风 PDA + 粗糙金属面板。潜行者的 PDA 是变异区里最重要的信息终端:俄文乱码装饰、磁带录音机质感、粗糙金属面板与磨损按钮。异常探测器的脉冲圈在黑暗中一圈圈扩散,势力声望用苏式机构简洁列表呈现。PDA 的界面总带着"随时可能故障"的不稳定感。势力声望用简洁列表呈现,日志条目以磁带录音质感播放,地图以粗糙等高线与手绘标注呈现——整个 PDA 像"从废墟里捡回来的",而非"出厂全新的"。

潜行者 PDA 界面
S.T.A.L.K.E.R. PDA 界面 S.T.A.L.K.E.R. PDA 界面
PDA — CONTACTS / MAP / LOG / FACTIONS
▶ ЗОНА — CORDON
[LONERS] Friendly ●●●○○
[DUTY] Neutral ●●○○○
⚠ ANOMALY DETECTED — 40m NE
▌ LAST TRANSMISSION: ...брях... по... силён...
#46C9A5
#9AA090
#151814
#3A3D33
#RUST
字体:俄文西里尔装饰 + 等宽英文字符
质感:粗糙金属面板、磁带质感、信号干扰
布局:列表式信息 + 雷达圈异常探测
色彩:暗灰绿 + 铁锈棕 + 警示红
主界面的机械按钮和背景氛围
STALKER SOC / CS / CoP[5]
CRAFTING → BLADE + BINDING RAG ×2 / BLADE ×1

最后生还者 HAND-DRAWN SURVIVAL

核心语言:手写涂鸦 + 胶带修补 + 极简克制 HUD。顽皮狗的 UI 哲学是"少即多"——步行时 HUD 几乎完全消失,可交互物品仅以一条白色细线圈标示。制作菜单的素材与成品分列两栏,当前物品高亮为白底灰透明,克制到极致。HUD 圆形生命条贴边放置,不干扰画面中心。UI 的每个元素都像"用胶带临时粘上去的",带着物资匮乏的真实手感。Part II 进一步极简化:圆形生命条更细、更贴边,制作菜单更克制—— Naughty Dog 的设计哲学是"UI 越少,沉浸越深"。

最后生还者 手写 UI
最后生还者 制作菜单界面 最后生还者 制作菜单界面
CRAFTING — MINIMAL & SURVIVAL
RESOURCES→CRAFT
RAG ×3BLADE ×1ALCOHOL ×1
▶ HEALTH KIT [READY]
#E9E5D6
#9AA090
#151814
#TAPE
理念:HUD 极简克制,不干扰沉浸
质感:手写涂鸦、胶带修补、磨损做旧
布局:素材/成品双栏,高亮当前选择
色彩:白 + 灰 + 暗棕,低饱和
图鉴卡片的磨损做旧细节
The Last of Us Part I & II[6][7]
废土系共性:四款游戏都将 UI 视为世界观的一部分而非叠加层——Pip-Boy 是角色佩戴的实体设备,防毒面具是玩家眼前的物理镜片,PDA 是变异区里的故障终端,制作菜单是末日幸存者的临时工作台。UI 的磨损、锈蚀、手写痕迹不是装饰,而是叙事。核心配色围绕磷光绿/琥珀黄/铁锈棕/近黑展开,低饱和度营造"使用过的"真实感。
SEC.02

赛博科幻系

Cyberpunk Sci-Fi

四款游戏代表"技术渗透肉体"的视觉谱系:全息投影边框、霓虹配色、人体扫描、神经可视化。它们的 UI 不是屏幕上的层,而是空间中的光——浮空、故障、扫描、入侵,每帧都在暗示"你的身体已被数据化"。对应界面:战斗全息 HUD、商店终端质感、关卡数据面板、图鉴 3D 扫描展示。

赛博科幻系 UI 设计参考
SHARD // ENCRYPTED ICE: RED ⚠ DAEMON DETECTED

赛博朋克 2077 HOLO GLITCH

核心语言:全息投影浮空 UI + 故障艺术 + 红青双色霓虹。夜之城的 UI 不贴在屏幕上,而是悬浮在空气中——电话面板、任务日志、对话选项都是全息投影,边缘带 chromatic aberration(色差)和 scanline 故障条纹。血量/护甲以青色光弧呈现,黑客入侵时的代码瀑布与 ICE 防御层级用红色警告。Glitch 效果不是随机损坏,而是"数字世界的不稳定存在"的视觉隐喻。血量/护甲以青色光弧呈现,技能栏图标带霓虹发光边框,对话选项以全息文字浮在角色面前。整个 UI 体系暗示:在 2077 年的夜之城,信息不是被"显示"的,而是被"投影"在空气中的光。

赛博朋克2077 全息 UI
赛博朋克 2077 全息 HUD 界面 赛博朋克 2077 全息 HUD 界面
HOLO PHONE — CALLS / SHARDS / HACK
QUEST: GIG — FLATHEAD⚠
ICE TYPE: RED3.2s
[ DAEMON: OVERHEAT — UPLOADING... ]
01010111 01100001 01101011 01100101
#FF003E
#00F0FF
#0C0E0C
#1A1E18
#FCEE0A
字体:等宽科技体 + 大写霓虹标题
质感:色差边缘、扫描线、Glitch 故障条纹
布局:浮空面板、无固定边框、自由角度
色彩:霓虹红 + 青蓝 + 黄警告 + 近黑
战斗 HUD 的全息血条、锁定圈、技能栏发光
Cyberpunk 2077[8][9]
ctOS HACK SIGNAL

看门狗系列 PHONE AR HACK

核心语言:手机终端界面 + 黑客代码流 + AR 增强现实。看门狗把玩家的手机变成万能黑入终端:ctOS 系统界面以深绿底色呈现,黑客入侵时的代码瀑布流从屏幕顶部倾泻,信号干扰效果用 RGB 错位与噪声纹理模拟。AR 投影把信息叠加在真实世界上——人物头像浮空标注、可黑入对象以青色光圈标出、摄像头视角带信号噪点。UI 的每个元素都在暗示"你正在入侵这个系统"。入侵成功时界面闪烁绿光确认,入侵被追踪时红色警告条从屏幕边缘逼近——UI 状态本身即是游戏机制。

看门狗 手机黑客界面
看门狗 黑客手机界面 看门狗 黑客手机界面
ctOS PHONE — HACK / SIGNAL / CAM
▶ HACK TARGET●REC
0x4A 0x3B 0x00 0xFF 0x12 0xCD...
SIGNAL: 87%UNLOCKED
⚠ TRACE INITIATED — 8.3s
#46C9A5
#00F0FF
#FF003E
#0C0E0C
字体:等宽终端体 + 小号无衬线
质感:代码瀑布流、RGB 错位、信号噪点
布局:三栏终端面板 + AR 浮空标注
色彩:深绿 + 青蓝 + 警示红 + 近黑
商店和主界面的终端屏幕质感
Watch Dogs 1 / 2 / Legion[10]
AUGMENTATION PRAXIS ×3 LIMB CLINIC SCAN: OK

Deus Ex 系列 AUG MEDICAL

核心语言:人体扫描界面 + 器官改造树 + 医疗蓝绿色调。Deus Ex 的改造诊所用蓝绿色调(#5EA8D8)构建"科技医疗"的冷静感。Praxis 改造树以人体扫描图为骨架——骨骼、肌束、神经路径在半透明人体模型上发光,每个改造节点钉在对应解剖位置。LIMB 诊所的界面像一台高级医疗扫描仪,冷光、精密、无感情。UI 在暗示一个核心命题:你的身体是可编辑的数据。改造节点以 Praxis 点数解锁,每解锁一个节点,人体模型上对应区域的肌束/骨骼会发光——UI 的"进度"即角色的"肉体改造"。

Deus Ex 改造界面
Deus Ex 改造树界面 Deus Ex 改造树界面
AUGMENTATION — PRAXIS / SCAN / TREE
HUMAN SCAN: COMPLETE✓
▶ ARM — TYRANT 67% ▶ EYE — SMART 100%
PRAXIS KITS AVAILABLE: 3
[ SELECT AUGMENTATION NODE ]
#5EA8D8
#1A3A3A
#0C0E0C
#FFB225
字体:等宽医疗扫描体 + 无衬线标签
质感:半透明人体模型、解剖路径发光
布局:改造树钉在扫描骨架上、节点-连线
色彩:蓝绿医疗色 + 冷光白 + 琥珀节点
关卡选择、图鉴的数据面板布局
Deus Ex HR / MD[11]
NEURAL // BIO FEAR LEVEL: 7

Observer NEURAL BIO

核心语言:神经可视化 + 脑内界面 + 生物机械融合。Bloober Team 的 Observer 把玩家变成一名"神经警察"——直接侵入死者的意识,在他们的记忆、恐惧与谎言中搜证。UI 是"脑内的界面":脑电波图形在暗紫色背景上波动,恐惧等级以生物读数呈现,记忆碎片以 3D 全息扫描展示。赛博朋克的冷硬与生物恐怖的有机性在此融合——界面像活的,像在呼吸。记忆碎片以 3D 全息形式在空间中漂浮,玩家可以旋转、放大、深入——每次"查看记忆"都是一次意识潜入。UI 的紫色光晕与赛博朋克的青/红霓虹形成对比:它不是"技术"的光,而是"生物"的光。

Observer 神经可视化
Observer 神经可视化界面 Observer 神经可视化界面
DREAM EATER — NEURAL SCAN
NEURAL DEPTH: L3FEAR 7/10
~~~ EEG 12Hz ~~~ theta wave detected ~~~
MEMORY FRAGMENT3D SCAN
⚠ SUBJECT RESISTING — STABILIZE
#B48CE8
#FF5D3A
#5EA8D8
#0C0E0C
字体:等宽生物读数体 + 手写残留
质感:脑电波图形、有机波动、全息呼吸感
布局:3D 全息记忆碎片 + 层级深入
色彩:暗紫 + 警示红 + 冷蓝 + 近黑
图鉴系统的 3D 全息扫描展示
Observer / System Redux[12]
赛博系共性:四款游戏的 UI 都超越了"屏幕上的层"——它们是空间中的光(全息投影)、侵入中的系统(黑客代码流)、编辑中的肉体(改造扫描树)、潜入中的意识(神经可视化)。核心色彩从暖色(红/黄)到冷色(青/蓝/紫)构成完整霓虹光谱,全部以近黑为底,强调"光从黑暗中浮出"的存在感。Glitch/故障/扫描不是装饰,而是"数字世界脆弱性"的视觉宣言。
SEC.03

复古终端系

Retro Terminal

四款游戏从不同年代提取"过时技术作为美学归宿"的设计语言:DOS 绿字黑屏、极简红白黑、70 年代磁带科幻、PS1 时代低多边形 CRT。它们证明了一件事——技术限制本身就是一种设计风格,而且是情感最强的那种。对应界面:成就终端字体、战斗警告色、主界面复古按钮、全局扫描线特效。

复古终端系 UI 设计参考
C:\PONY\engine.exe RUNNING... ERR: SOUL REQUIRED >_ PONY.EXE

Pony Island DOS GREEN-ON-BLACK

核心语言:老式 DOS 界面 + 黑底绿字 + 伪代码装饰。Pony Island 把玩家关进一台被恶魔附身的街机里,整个游戏以 DOS 操作系统的外壳运行。绿底黑字(实为黑底绿字 #30FF50)的终端窗口、伪代码命令行、灰度像素小马与故障图像混合——它用最原始的计算机界面语言制造恐怖。玩家需要"修改游戏代码"来逃出,代码编辑界面以伪汇编语言呈现,无需编程知识但充满"我在黑入系统"的紧张感。恶魔会通过修改游戏代码来阻挠你——UI 本身就是战场。

Pony Island DOS 界面
Pony Island DOS 终端界面 Pony Island DOS 终端界面
DOS TERMINAL — PONY ISLAND ENGINE
C:\PONY> engine.exe --run
LOADING ASSETS... ████░░ 67%
ERR: SOUL.DLL NOT FOUND
>_
#30FF50
#000000
#FF003E
#9AA090
字体:等宽终端体 + 伪汇编命令行
质感:灰度像素 + 故障条纹 + CRT 余晖
布局:DOS 窗口 + 代码编辑器切换
色彩:磷光绿 + 纯黑 + 错误红
成就系统的终端字体和乱码装饰
Pony Island[13]
SUPERHOT TIME MOVES WHEN YOU MOVE ▼ SYSTEM // SHOOT.Core v2

Superhot MINIMAL RED-WHITE

核心语言:极简三色 + 粗体无衬线 + MSDOS 式系统外壳。Superhot 的美术总监 Marcin Surma 确立了三色法则:白色环境、红色敌人、黑色武器——除此之外别无他色。UI 以 MSDOS 风格的系统外壳呈现,但比原始终端更"风格化、更可理解"。粗体无衬线大字、红色警示条、极简状态信息——一切都为了把注意力锁死在"时间仅随你移动而流动"这一核心机制上。UI 文字极少——系统壳用粗体大写传递关键状态,战斗界面几乎无文字,全靠红/白/黑三色的空间对比传达信息。

Superhot 极简 UI
SUPERHOT 极简菜单界面 SUPERHOT 极简菜单界面
SUPERHOT — SYSTEM SHELL
SUPERHOT
TIME MOVES WHEN YOU MOVE
▼ LEVEL 03 // BAR.CORE
#FF003E
#FFFFFF
#000000
#9AA090
字体:粗体无衬线 + 极少文字
质感:纯色填充、无纹理、无渐变
布局:居中大字 + MSDOS 系统壳
色彩:红 + 白 + 黑,三色即全部
战斗界面的警告色运用
Superhot[14]
SEVASTOPOLO STN MOTION TRACKER ⚠ CONTACT 15m TAPE // SAV

Alien: Isolation 70s RETROFUTURE

核心语言:70 年代复古未来 + 琥珀 CRT + 磁带存档机。《异形:隔离》把 1979 年雷德利·斯科特电影的视觉语言重建为完整设计系统:粗壮等宽终端字体、琥珀磷光(#FFB000)与绿色双色调、扫描线雾化、闪烁光标——全部呈现在永远不干净的 CRT 底色上。动作追踪器以模拟雷达圆扫描呈现,存档用磁带录音机,开门用菲林扫描仪——每一台设备都"有重量、有气味、有年代"。动作追踪器只显示移动物体的距离方向而非精确位置——如果异形停止移动,它就从屏幕上消失。这种"不完整信息"本身即是恐怖的引擎。

Alien Isolation 复古科幻 UI
Alien Isolation 复古终端界面 Alien Isolation 复古终端界面
SEVASTOPOLO — MOTION TRACKER / TAPE
STATION LOG⚠
▶ MOTION TRACK: ● 15m SE MOVING
SAVE TAPE — SIDE A / 00:03:42
▌ ACCESS TUNER — CALIBRATING...
#FFB000
#30FF50
#0C0E0C
#FF5D3A
字体:粗壮等宽终端体 + 全大写
质感:CRT 污渍、扫描线雾化、磁带机械感
布局:雷达圆扫描 + 磁带存档 + 菲林开门
色彩:琥珀 + 磷光绿 + 近黑 + 警示红
主界面的复古机械按钮
Alien: Isolation[15][16]
SIGNAL // LOST ⚠ CONTAINMENT BREACH REPLICANT ID: 740-IL

Signalis PS1 CRT PIXEL

核心语言:低多边形 CRT + 扫描线 + 像素字体 + 红色警报灯。Rose Engine 的 Signalis 刻意降分辨率——低多边形 3D 环境 + 2D 精灵动画 + 像素字体,配合 CRT 后处理(扫描线、胶片颗粒、色调分级)营造"冷战东德科幻恐怖"氛围。视觉语言本身就是叙事:劣化屏幕、闪烁灯光、被腐蚀的文字和抽象梦境序列传达心理 deterioration(精神退化)。UI 以红色警报灯为核心情绪信号,故障文字、乱码是故意的。存档界面像一台冷战时期的东德终端机——方形 CRT、扫描线、像素字符,一切都在暗示"系统正在崩溃,你正在被同化"。

Signalis PS1 CRT 界面
Signalis 库存界面 Signalis 库存界面
SIGNALIS — CRT // ALERT
⚠ SIGNAL: LOST
ERR0R: C0NTA1NM3NT BR34CH
R3PL1C4NT 1D: 740-1L
● ALERT ● ALERT ●
#FF5D3A
#9AA090
#0C0E0C
#1A1E18
字体:像素字体 + 乱码腐蚀文字
质感:CRT 扫描线、胶片颗粒、低多边形
布局:极简信息 + 红色警报灯为核心
色彩:红警报 + 灰 + 近黑,冷峻东德风
全局的扫描线和故障特效
Signalis[17][18]
复古系共性:四款游戏都把技术限制当作设计语言——DOS 绿字、三色极简、70 年代琥珀 CRT、PS1 像素扫描线。它们不追求"现代精致",反而在过时技术的纹理中找到最强的情感共鸣。扫描线、像素化、故障条纹这些"技术瑕疵"被升格为美学特征,证明了一个核心洞察:UI 的"不完美"比"完美"更有记忆点。
SEC.04

独立策略系

Indie & Strategy

四款独立游戏代表了"信息即设计"的极致:极简像素战棋网格、横版卷轴状态栏、工业管道建造面板、竖屏卡牌遗物列表。它们的 UI 不做氛围渲染,只做一件事——把信息用最少的像素最清晰地推到你眼前。对应界面:战斗竖屏信息排布、顶部状态栏、商店列表卡片、图鉴网格列表切换。

独立策略系 UI 设计参考
MECH-A VEK

Into the Breach PIXEL GRID INFO

核心语言:极简像素战棋 + 清晰网格信息 + 完全透明博弈。开发者 Matthew Davis 和 Justin Ma 在测试中发现"必须把'谁在做什么'展示得特别清楚"——于是所有攻击以循环抛物线/点线/箭头标注,敌人意图在回合开始前完全公开。8×8 小网格让每一步都是精密推演。UI 的最高追求是"零认知负担"——你需要的信息全在屏幕上,一目了然。攻击轨迹用不同线型区分:抛物线=抛射、点线=远程、箭头=近战推进,颜色编码区分友/敌/建筑。

Into the Breach 像素战棋 UI
Into the Breach 战棋 UI 界面 Into the Breach 战棋 UI 界面
GRID INFO — VISION / DAMAGE / PATH
◎·▼· ·↓·◎
VEK ATTACK: → [2 DMG] BUILDING
#46C9A5
#FF5D3A
#FFB225
#0C0E0C
字体:像素体 + 小号无衬线
质感:纯色像素、无纹理、网格即设计
布局:8×8 小网格 + 攻击轨迹可视化
色彩:绿(友)+红(敌)+黄(建筑)+黑底
战斗界面的竖屏信息排布
Into the Breach[19][20]
HP 45/100 328 [1] SWORD [2] BOW [3] TRAP SKILL BAR

Dead Cells SIDESCROLL HUD

核心语言:横版卷轴顶部状态栏 + 血条/金币/技能三段排布。Dead Cells 的 HUD 是 roguelite 横版的教科书:顶部一行容纳所有关键信息——左侧血条(红/黄/绿三色分段)、中部金币计数、右侧三个技能槽。角色/暂停界面在 Update 5 后拆分为 Options/Equipment/Inventory 三屏,加入变异选择与游玩时长。整个 HUD 紧贴屏幕顶边,不遮挡卷轴动作的视野中心,所有数值一目了然。变异选择界面简洁到只有图标和数值——"看一眼就懂"是 Motion Twin 的设计信条。

Dead Cells 横版 HUD
Dead Cells HUD 界面 Dead Cells HUD 界面
TOP HUD — HP / GOLD / SKILLS
45/100
●328
#FF5D3A
#FFB225
#5EA8D8
#0C0E0C
字体:无衬线小号 + 像素数字
质感:像素风、鲜艳色块、无纹理
布局:顶部一行:血条 + 金币 + 技能槽
色彩:红血 + 金币 + 蓝技能 + 黑底
战斗顶部的状态栏布局
Dead Cells[21]
CORE DRILL SMELT Cu: 240 Fe: 180 Si: 95

Mindustry INDUSTRIAL PIPE

核心语言:工业风建造 UI + 管道连接感 + 资源面板。Mindustry 的建造以传送带和管道连接为核心——UI 反映了这种"物质流动"的设计哲学。圆盘快捷建造 Mod 让高频建造不停顿,核心库存即时可用。资源面板在底部以列表呈现铜/铁/硅等数值,建筑图标设计为工厂模块的迷你俯视图。整个 UI 像一张工业蓝图,每个数字都是一个管道的流量读数。建筑放置时自动连接相邻的输入/输出口——连线即数据流,玩家不需要额外的"连接"操作,只管放置。

Mindustry 工业建造 UI
Mindustry 工业建造界面 Mindustry 工业建造界面
INDUSTRIAL — RESOURCES / BUILD / FLOW
Cu: 240 Fe: 180 Si: 95 Ti: 12
[E] BUILD ▶ [Q] ROTATE ▶ [E] LINK
#5EA8D8
#FF5D3A
#9AA090
#151814
字体:等宽数字 + 小号无衬线标签
质感:建筑俯视图标、管道连线
布局:底部资源条 + 建造圆盘菜单
色彩:蓝资源 + 红低量 + 灰标签 + 暗底
商店和关卡选择的列表卡片
Mindustry[22]
CARD RELIC HP 60 145g

Slay the Spire CARD LIST SIMPLE

核心语言:竖屏卡牌/遗物列表 + 简洁数值 + 分支地图导航。杀戮尖塔把所有信息压缩为竖屏列表:顶部血条 + 金币 + 药水栏三槽,卡组以纵向列表浏览,遗物以图标行排列。地图是可缩放的分支节点图——骷髅(精英)、篝火(休息)、问号(事件)、商店($)各有明确图标。点击卡牌放大显示完整 tooltip,拖拽出牌。UI 的核心理念是"每个工具都在伸手可及处",信息密度高但层级清晰。药水栏三个槽位提醒"药不是传家宝,该喝就喝"——UI 本身在教导玩家行为模式。

Slay the Spire 卡牌列表 UI
杀戮尖塔 卡牌地图界面 杀戮尖塔 卡牌地图界面
VERTICAL — HP / GOLD / DECK / MAP
♥ 60/75 ● 145g
DECK: 20 | RELICS: 7
#FF5D3A
#FFB225
#5EA8D8
#0C0E0C
字体:无衬线小号 + 数字优先
质感:卡牌圆角 + 图标行 + 无纹理
布局:竖屏:顶部状态 → 中部手牌 → 底部地图
色彩:红血 + 金币 + 蓝卡牌 + 黑底
图鉴和成就的网格/列表切换
Slay the Spire[23]
独立系共性:四款游戏都践行"信息即设计"——不做氛围渲染,只用最少的像素最清晰地传递信息。Into the Breach 用 8×8 网格实现"零认知负担",Dead Cells 用顶部一行容纳所有状态,Mindustry 用管道连接感组织建造,Slay the Spire 用竖屏列表压缩全部数值。它们的设计哲学与前三系(废土/赛博/复古)的最大差异是:UI 不叙事,UI 只传递信息——清晰到极致本身就是美。
SEC.05

汇总矩阵

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 年代复古机械按钮;参考看门狗的终端屏幕质感。

主界面 UI 参考 — 潜行者 PDA + Alien Isolation 复古机械
潜行者 PDA 粗糙金属面板 Alien Isolation 70年代复古机械界面
主界面背景氛围 + 机械按钮

战斗 HUD

参考地铁的面具视角 diegetic HUD 做沉浸感;参考赛博朋克的全息血条/锁定圈/技能栏发光做战斗状态;参考Superhot的红色警告色运用;参考Into the Breach的竖屏网格信息排布;参考Dead Cells的顶部状态栏。

战斗 HUD 参考 — 地铁面具 + 赛博全息 + Superhot 警告色
地铁 防毒面具视角 HUD 赛博朋克 全息血条与锁定圈
战斗沉浸感 + 全息状态 + 警告色

商店界面

参考辐射 Pip-Boy的网格边框 + 磷光绿底色做卡片边框;参考看门狗 ctOS的三栏终端面板做商店布局;参考Mindustry的工业列表卡片做商品呈现。

商店界面参考 — 辐射网格 + 看门狗终端 + Mindustry 列表
辐射 Pip-Boy 网格边框 看门狗 ctOS 三栏终端
卡片边框 + 商店布局 + 商品呈现

天赋系统

参考Deus Ex的 Praxis 改造树节点分支与人体扫描节点;参考Dead Cells的装备升级锻造槽位与稀有度分级;参考Slay the Spire的卡牌升级路径可视化。天赋树以分支节点连接,每个节点对应一项装备强化或技能解锁。

天赋系统参考 — 装备升级树与改造节点
Deus Ex Praxis 改造树 Dead Cells 装备升级锻造
装备升级 + 改造树 + 技能解锁

关卡选择

参考辐射 Pip-Boy的网格化嵌套边框做关卡卡片;参考Deus Ex的数据面板布局;参考Mindustry的工业列表卡片;参考Slay the Spire的分支地图导航。

关卡选择参考 — 辐射网格 + 分支地图导航
Slay the Spire 分支地图导航 Mindustry 工业列表卡片
关卡卡片 + 分支导航 + 列表布局

成就系统

参考Pony Island的 DOS 终端字体与乱码装饰;参考辐射的机构黄边框与磷光绿底色;参考Slay the Spire的竖屏数值列表。

成就系统参考 — DOS终端 + 机构黄边框 + 竖屏列表
Pony Island DOS 终端字体 辐射 机构黄边框与磷光绿
终端字体 + 乱码装饰 + 数值列表

图鉴系统

参考最后生还者的手写涂鸦与胶带做磨损做旧;参考Deus Ex的数据面板布局与人体扫描式分类;参考Observer的 3D 全息扫描展示;参考Slay the Spire的网格/列表切换。

图鉴系统参考 — 手写涂鸦 + 3D全息扫描 + 网格列表切换
最后生还者 手写涂鸦与胶带 Observer 3D 全息扫描展示
磨损做旧 + 扫描分类 + 网格列表切换
全局特效参考:Signalis 的 CRT 扫描线 + 故障条纹可作为全局叠层特效,在特定事件(如 Boss 出场、成就解锁)时触发闪烁与乱码,增强戏剧性。而 赛博朋克 2077 的 Glitch 色差效果可用于加载界面与场景切换,暗示"数字世界的不稳定性"。
SEC.06

设计检查清单

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 位移)?

终极原则:16 款游戏给出的最大启示是——UI 不是叠加层,UI 是世界观的延伸。辐射的 Pip-Boy 是角色佩戴的设备,地铁的面具是玩家眼前的物理镜片,潜行者的 PDA 是变异区里的故障终端。无论选择哪个范式,让 UI 成为游戏世界的一部分而非浮于其上的界面,才是最好的美术设计。