PORTFOLIO / 2026
2097263105@qq.com ↗
← 返回作品05 / 09

游戏 UI / 双输入交互

FPS 天赋系统

FPS TALENT SYSTEM

GAME UI · PC / CONTROLLER

FPS 天赋系统

面向 PC 与手柄的 FPS 天赋界面设计。从天赋树与技能详情,到输入反馈、信息架构、加点、保存应用与洗点流程,呈现完整的界面与交互方案。

游戏 UI 设计PC / 手柄交互节点状态与操作流程
FPS 天赋系统项目封面
01 / 天赋系统概览 · 点击查看大图

02 / INTERACTION

从输入到反馈,让操作有迹可循

打开、浏览、分配:同一套天赋规则,适配鼠标与手柄两种操作方式。

01

打开系统

输入
PC:T
手柄:Menu / View
状态与反馈
单人模式暂停游戏;多人模式不暂停,仅压暗背景。
结果
默认焦点落在上次节点;首次打开落在中央主节点。
退出
Esc / B:关闭界面并恢复游戏。
02

浏览天赋树

输入
鼠标悬停(Hover)
D-Pad / 左摇杆聚焦(Focus)
状态与反馈
Hover:金色描边。
Focus:青色外环与光晕。
结果
方向导航遵循树结构,不跳到无关节点。
切换
点击 Tab / LB · RB:角色 — 天赋 — 大招。
03

查看与分配

输入
左键 / A:加 1 点
右键 / X:减 1 点
状态与反馈
更新 ● / ○,同步当前效果与下一等级。
结果
校验前置、剩余点数、满级与依赖关系。
失败
保持原点数,并给出原因。

03 / INFORMATION ARCHITECTURE

先建立层级,再展开操作

一级入口

大厅 → 英雄 → 天赋

顶部
英雄、方案、点数、芯片
左侧
三大主干与投入
中央
天赋节点与路径
右侧
效果、重置、费用与操作

↓ 从天赋主界面进入二级功能

二级入口

节点详情

已学习 / 可点亮 / 前置未满足 / 点数不足

二级入口

配置管理

保存 / 覆盖 / 应用差异

二级入口

全部洗点

费用与返还预览 → 结果

三个流程,一致的确认与反馈

01

加点流程

先判断条件,再提交;成功后扣点生效。

  1. 01选择节点
  2. 02读取前置与费用
  3. 03条件全部满足?是 → 继续确认
  4. 04确认并提交
  5. 05扣点并生效
否:指明阻塞条件

战斗中只读;前置未满足时定位前置;点数不足时显示缺口与获取渠道。

提交失败

资源与当前配置保持不变,可重试。成功后保留焦点,并更新后继节点。

02

保存与应用

保存免费,应用独立校验。

  1. 01选择槽位
  2. 02保存 / 差异预览
  3. 03校验通过?是 → 继续确认
  4. 04确认覆盖 / 应用
  5. 05保存 / 整体更新
否:留在原页面

保存名称为 1–12 字,覆盖须确认。应用时校验前置、总点数与芯片;相同配置不收费。

取消 / 失败

取消不覆盖,失败不部分应用。保存免费;应用发生移除时消耗 1 枚芯片。

03

全部洗点

先预览,再确认,再整体更新。

  1. 01打开重置
  2. 02预览返还与成本
  3. 03投入 > 0 且芯片足?是 → 继续确认
  4. 04确认 / 长按 1 秒
  5. 05返还并清空
否:不执行重置

未投入时提示无需重置且不收费;芯片不足时说明缺口与获取渠道。

取消 / 提交失败

取消或松开长按保持原方案,服务失败不扣资源。原稿示例:成功后可用 16、投入 0、芯片 1。

FPS 天赋系统:场景模拟与界面细节
04 / 场景模拟与界面细节 · 点击查看大图
FPS 天赋系统:节点状态与游戏模式
05 / 节点状态与游戏模式 · 点击查看大图
FPS 天赋系统:天赋系统 UI
06 / 天赋系统 UI · 点击查看大图
FPS 天赋系统:天赋系统场景模拟
07 / 天赋系统场景模拟 · 点击查看大图

以上为 UI 设计与场景模拟展示;场景底图含 AI 生成素材。

下一个项目 / NEXT PROJECT中式梦核恐怖游戏↗