EagleUp Game:桌面 RPG 游戏 UI 设计

桌游的触感与数字界面设计的交汇之处。

游戏 UI 设计·桌面 RPG 电子游戏混合 UI·游戏开发 HUD 设计·游戏设计系统风格指南

Style guide, lobby, HUD

Deliverables

UI/UX Design

Engagement Type

In Development

Status

FigmaDesign SystemsGame Ui

EagleUp Game

桌游的触感与数字界面设计的交汇之处。

行业: 游戏 | 技术栈: Figma、设计系统、游戏 UI | 状态: 开发中 | 客户: 意大利

EagleUp Game 是什么#

EagleUp 是一款桌游 RPG 与电子游戏的混合体:它保留了实体桌面角色扮演的社交性与策略深度,同时把这种体验翻译进一个具备实时视觉反馈、交互式 HUD 和互联多人大厅的数字载体。

我们的参与聚焦在视觉设计层:风格指南、大厅界面设计、HUD 系统,以及让游戏在玩家触及的每一个屏幕上都拥有一致身份的设计语言。

这是一次设计参与,而不是一次全栈构建。我们交付的是开发团队据以搭建产品的视觉与交互基础。开发工作由他们自己完成。

设计问题:在数字外壳里保留桌游的手感#

桌游 RPG 之所以奏效,是因为它的物理性。骰子的重量、角色卡的质感、棋子在棋盘上的空间布局。这些不是装饰。它们是玩家在几十年里内化下来的交互范式。当您把这样一款游戏搬到数字形态中时,第一直觉往往是让它看起来像一款电子游戏。这个直觉是错的。

从实体桌游过来的玩家,不想要一个通用的奇幻 MMO 界面。他们想要的是桌游体验那种温度和触感上的逻辑被呈现到屏幕上。一张地图应该像一张可以折叠的地图,而不是一个可以复活的关卡。HUD 应该托住故事,而不是自我宣示。

那就是这个项目的核心问题。我们设计的每一个屏幕都要回答同一个问题:它感觉像 EagleUp 吗,还是感觉像其他任何一款游戏?

我们设计了什么#

风格指南与视觉语言#

我们从零开始建立了 EagleUp 的风格指南:字体选择、色彩调性、图标系统、间距规则以及贯穿游戏每一个界面的组件模式。这是此后每一位设计师和开发者在接触 UI 时都要参照的文档。

视觉方向必须同时承载两件事。温度很重要:有机肌理、手绘元素、让人联想起实体游戏材料的柔和土色调。但易读性同样重要:清晰的字体层级、一致的间距、不显得冷冰冰却依然显眼的交互线索。真正的设计挑战在于,让这两件事共存而不让其中一个压过另一个。

大厅界面#

大厅是玩家看到的第一个屏幕。我们设计的大厅界面一方面处理实际需求(玩家名单、游戏设置、会话管理、邀请流程),另一方面又强化了游戏的身份。视觉处理取自桌游文化。它应该像和朋友坐到一张桌子前,而不是进入一个匹配队列。

HUD 设计#

HUD 是做取舍最昂贵的地方。在游玩过程中,屏幕上的每一个元素都在争夺玩家的注意力。信息太多会打破沉浸;信息太少,玩家在进行中的回合里会迷失。

我们围绕玩家在每个时刻需要什么来设计 EagleUp 的 HUD:生命值、资源、回合顺序、可用动作。叙事时刻留出更多呼吸空间;活跃回合则采用更密集的排版。信息层级会随上下文变化,而不是固定不变。

面向开发交付的组件系统#

我们交付的每一个屏幕都由 Figma 中一个结构化的组件库构成:按钮、卡片、模态、输入框、状态指示器和导航元素,均按状态(默认、悬停、激活、禁用)和使用指南记录。开发团队接手的是一套可以一致实现的系统,而不是一组需要自己解读的静态视觉稿。

核心能力#

  • 风格指南:覆盖字体、色彩、图标、间距和组件模式。
  • 大厅界面:会话管理的同时承担游戏的第一印象。
  • 围绕上下文敏感信息密度构建的 HUD 系统。
  • 组件库:带有状态、变体和交付指南的完整记录。
  • 为从实体游戏背景过来的玩家精心调校的视觉与交互设计。

成果#

EagleUp 正在开发中。设计交付物已完成,开发团队正基于它们进行实现。

这个项目代表了一种特定类型的参与方式:纯设计工作,视觉和交互层在第一行游戏代码被写下之前就必须敲定。我们以前做过这种形式,而交付的质量比听上去更关键。系统清晰时,开发者移动得更快。他们做的解读性判断更少,「这个我待会儿去问设计」的决定也更少。这就是一份文档化良好的组件库实际上发挥的作用。


需要为产品、游戏或应用做 UI/UX 设计?了解我们的 UX/UI 设计服务,或预约免费的自动化审计

最近更新: March 20, 2026

[ 工作流程 ]

免费自动化审计

我们帮您找出占用最多成本的那 20% 手工作业,并清晰指出如何将其消除。

STEP 1.0
告诉我们痛点

告诉我们痛点

一次 30 分钟通话。请带我们走一遍您的日常运营,我们会发现您早已习以为常的瓶颈。

STEP 2.0
为机会排序

为机会排序

我们按影响与投入对每个机会评分,让您一眼看清哪些环节能让 AI 省下最多时间与金钱。

STEP 3.0
拿到可执行的方案

拿到可执行的方案

一份按优先级排好的路线图,可立即落地。与我们共同执行或自行实施皆可,成果永远归您所有。