UI 设计全流程

先用一句话锁死美术基调,再把它变成可执行的设计语言 —— 否则后面每个界面都会各画各的。

本作基调:「SCP 机密档案终端 × 战锤 grimdark」。具体落成五条:灰黑为骨、血红点睛、等宽数据、终端化框架、涂改即机制。其中最关键的是叙事钩子 ——「涂改即机制」:凡是未知 / 未鉴定 / 未解锁的信息,一律用黑条涂改(可悬停解密),把界面缝进"一份正在泄密的收容档案"里。连命名都统一进这套叙事:背包=物资清单、任务=工单、关卡=站点档案、死亡=归档。

基调定了,怎么稳定产出"长一个样"的概念图与色彩?靠 AI 生图管线 + 一套硬性色板红线。

ControlNet / ComfyUI 概念锚配方:先用 PIL 画一张控制图 —— 不同颜色代表不同功能区(UI 分区),或一张人形姿势图(角色立绘);交给本地 ComfyUI 的 ControlNet 按布局生成厚涂图,再用 luma matte 抠成透明 *_cut.png 贴进页面。控制强度是经验值:UI 布局要严格 → cn-strength ~0.85;角色立绘别太死板 → ~0.6(0.8 会僵)。

色板红线:底色恒为灰黑(守住 grimdark 身份);红 = 危险 / 主操作、琥珀 = 数值 / 财富;其余语义色只服务对应系统、点缀不铺面。为色盲可读,绝不只靠色相,必配图标或文字。字体:中文 Noto Sans CJK / 思源黑体 + 拉丁数字 Share Tech Mono / IBM Plex Mono —— 刻意避开微软雅黑(授权问题)。

把基调拆成"积木",一次做好、到处复用 —— 这是 12 个屏幕能保持一致的原因。

核心是共享样式 ui-theme.css:它把色板 / 字体 tokens + 组件 + 动效关键帧沉淀成一份文件,新页只需一行 <link> 即可复用;换主题色甚至能搬到别的项目。组件就是积木:面板头(红封条)、数值条、背包格、涂改黑条、交互提示、表格…… 都在 StyleGuide 里规范、在 UI_Template 起手模板里搭。共 12 屏布局预览,可切换比对。

动效不是装饰,是信息。每个效果都有名字、有时长、有用途。

动效库分 6 组、约 26 个命名效果:入场转场(浮入 / 滑入 / 缩放入 / 解码 / 切屏故障)、强调反馈(辉光脉冲 / 错误抖动 / 命中闪白 / 状态闪烁 / 数值滚动)、环境状态(扫描线 / 呼吸 / 全息闪 / 受击红晕 / 常驻微摆)等。纪律很硬:克制、短(≤600ms)、必须有信息含义;战斗 HUD 动效最小化;全部受 prefers-reduced-motion 控制;正文绝不叠扫描线 / 重噪点以保可读。这些关键帧同样沉淀在 ui-theme.css,实装时一一映射到 UMG Animation。

把基调 + 组件 + 动效组合成完整的一屏,检验"感觉对不对"。

语气统一为终端冷峻、官僚、克制:开机屏走 SCP 全息徽记 + 系统自检、加载屏是反向上行的"下行深度计"、任务 HUD 与撤离红警各司其职。每一屏都在强化同一个体验 —— 你不是在操作一个游戏菜单,而是在读一台正在运行的收容站终端。

HTML 预览成立后才进 UE。关键是不把设计"重画一遍",而是把 token 与组件结构化地映射过去。

第一步:建中央 UCSUITheme 数据资产(颜色 / 画刷 / 字体 token),所有 UMG 控件取它,禁止逐控件硬编码颜色字号。第二步:组件按下表映射到 UMG。性能上,噪点 / 扫描线用一张静态贴图叠 RetainerBox,不给每个控件挂 shader;危险 / 聚焦统一复用交互描边材质 M_InteractOutline_PP 的红;动效用 UMG Animation,曲线对齐设计阶段的时长与缓动。