桌面应用

岛屿冒险游戏设计

探索 Harbor Skirmish:一座小巧的海滨岛屿,设有屋顶路线、三个武器栏位和妙趣十足的第一人称界面。

OpenDesign设计与制作
官方
浏览器游戏界面4 界面
岛屿冒险游戏设计:岛屿全景与开始画面
GPT 6 Astra · 评估示例截图 1 / 4

LLM Arena 2026年9月

案例说明
模型
GPT 6 Astra
设计任务
创建 Harbor Skirmish,一款包含移动和波次战斗的可玩岛屿冒险游戏。
输出结果
桌面应用

适用场景

  • 浏览器游戏原型将可玩场景与其开场和暂停状态衔接起来。
  • 第一人称界面围绕游戏视野组织移动、生命值和武器信息。
  • 游戏启动画面介绍游戏场景,无须罗列所有键盘指令。

主要亮点

  • 战斗前的岛屿开场视图呈现街道、屋顶和环绕四周的海洋。
  • 中央留白的 HUD状态信息分布在边缘,让瞄准视野保持清晰。
  • 妙趣十足的暂停状态倾斜卡片让游戏中断也成为视觉识别的一部分。

以海滨开场呈现岛屿冒险游戏设计

Harbor Skirmish 先从上方介绍游戏场景,再将玩家置于街道之中。标题占据开场画面的左侧,岛屿则位于右侧。彩色屋顶、钟楼和滨水区域同时映入眼帘。这让玩家在第一人称镜头取消全景视野之前,先对这个地方形成整体印象。

奶油色、黄色和深绿色组成的界面,比起军事仪表盘,更像一张印刷版度假海报。简短的背景设定描述了一场失控的兔子入侵;醒目的 Let’s Play 按钮随后提供了一个明确的下一步操作。开场画面展示基本的移动和瞄准提示,更进一步的说明则与主要邀请操作分开呈现。

完整的开始画面将标题和游玩操作与 Seabreeze Island 的高处俯瞰视图并置呈现。
完整的开始画面将标题和游玩操作与 Seabreeze Island 的高处俯瞰视图并置呈现。

没有地图面板的地图

高处俯瞰的岛屿视图无需添加单独的示意图,就能说明街道与屋顶之间的关系。塔楼和成簇的屋顶构成易于辨认的形状,在地面视角中同样可以看到。这是介绍场景的一种有效方式,但它并未表明每个可见屋顶都能抵达。

一个有力的开始操作

Let’s Play 使用与后续所选武器相同的黄色。倾斜造型和错位边框让它从较为平静的海面背景中脱颖而出。周围文字足够简短,因此该按钮不必与一整套操作手册争夺注意力。

一套延续始终的图形语言

游玩过程中,小型 Harbor Skirmish 标记始终保留在角落。奶油色键帽、绿色标签和暖色强调色也会再次出现在 HUD 与暂停卡片中。因此,从空中场景切换到第一人称场景时,并未引入一套毫不相关的界面风格。

围绕岛屿视野组织第一人称 HUD

游玩期间,画面中央主要留给街道和瞄准参照。分数显示在左上方,波次和剩余敌人显示在右上方,位置与速度则靠近顶部中央。生命值和冲刺状态位于左下角;武器和弹药位于右下角。

大部分信息直接叠加在场景上,而非置于厚重的面板中。这样能让岛屿保持可见,但也意味着每个标签的对比度取决于其背后的建筑、天空或地面。底部的奶油色控制条采用了相反的处理方式:在需要准确辨读的位置,它为小号按键标签提供了一致的背景。

完整的第一人称视图让街道在沿边缘排列的状态信息与控制组之间保持可见。
完整的第一人称视图让街道在沿边缘排列的状态信息与控制组之间保持可见。
三种不同类型的游戏反馈
显示内容传达的信息区分它们为何重要
分数与波次当前本地游戏进程中的进度会话分数并非模型评估分数,也不是已保存的记录。
生命值与冲刺就绪生存状态与可用的移动操作冲刺标签说明的是可用状态,而非成就。
武器名称与弹药已选工具及其显示的弹药数值名称必须随启用的栏位变化,而不能只改变高亮状态。

切换武器并从暂停状态返回

三个带编号的栏位始终显示为 Ink Rifle、Scattergun 和 Paper Blade。选择 2 后,启用的栏位和武器名称都会变为 Scattergun。这种双重反馈比单纯改变边框提供了更多信息:它同时在快捷键位置和弹药显示旁标明当前选择。

暂停卡片保留当前分数,突出继续操作,并汇集额外的移动说明。
暂停卡片保留当前分数,突出继续操作,并汇集额外的移动说明。
  1. 在具体情境中学习移动

    WASD、摆荡、跳跃和滑行动作提示靠近实时场景底部。单独的 Hold E to Grapple 提示则更接近中央。这种划分既让常规控制保持可见,又为移动机制提供了位置更贴近情境的提示;不过,同时出现多条提示时仍可能与游戏视野争夺注意力。

  2. 暂停时不脱离当前场景

    按下 Escape 会打开 Island time,这是一张叠加在模糊街景上的奶油色卡片。当前分数仍显示在卡片内。由于底层场景依然可以辨认,这次中断让人感觉仍与当前游戏进程相连,而不是跳转到单独的设置页面。

  3. 区分继续与离开

    Back to It 是醒目的黄色大按钮,而 Back to the island 则是较小的带下划线备选操作。两者措辞相近,因此值得仔细检查其中差异:视觉层级有助于识别继续操作,但对于不熟悉该体验的用户,更直白的标签可以减少歧义。

这个本地游戏示例展示了什么

所提供的导出内容包含一款本地单人游戏和渲染完成的 3D 环境。已检查开始游戏、更改武器选择和打开暂停状态。该图库并非性能基准测试、完整通关记录,也不能证明每种移动穿越机制都能在所有设备上正常工作。未验证在线多人游戏、账户服务或已保存的排行榜。模型标签沿用所提供文件名中的内容。

如何在 OpenDesign 中创作岛屿冒险游戏设计

  1. 下载并安装 OpenDesign

    下载桌面客户端并完成安装与初始配置,然后为您的设计创建一个项目。

    下载 OpenDesign
  2. 同步设计开场视图与游玩视图

    从一座小岛和两种镜头状态开始。让主要地标在全景视图和街道视角中均保持可见。先定义常驻界面的颜色,再添加额外武器或环境细节。

    建议提示词

    为一款名为 Harbor Skirmish 的虚构浏览器游戏创作岛屿冒险游戏设计。在开场画面中,以俯视视角展示一座色彩缤纷的海滨岛屿,左侧放置醒目的大标题,并设置一个黄色的“开始游戏”按钮。采用奶油色表面、深绿色标签、错位边框和适度倾斜的卡片。进入第一人称街景后,在顶部显示分数和波次信息,左下角显示生命值和冲刺状态,右下角显示武器和弹药。为墨水步枪、霰弹枪和纸刃保留三个带编号的栏位。添加一张暂停卡片,其中包含当前分数、用于继续游戏的主要操作,以及单独返回开始画面的操作。仅使用本地会话状态;不要暗示存在多人游戏、分数保存或账户连接。清晰显示键盘操作,并确保画面中央无遮挡。

  3. 在 HUD 各处追踪同一选择状态

    逐一选择每件武器,并同时检查其栏位、名称和弹药显示。然后在保持该选择的情况下暂停并继续游戏。有效的测试标准是界面能否描述同一个一致的状态,而不是各个部分单独看起来是否可信。

  4. 针对天空以外的多种背景检查对比度

    检查状态标签在浅色墙面、深色屋顶和街道路面上的显示效果。保留场景的开阔感,但在小号文字确有需要之处添加适度的衬底。确认暂停操作即使不单独依赖颜色也能彼此区分。

  5. 导出并获取分享链接

    导出完成的设计稿,然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接,确认目标版本及其资源均可正常访问后,再将链接发送给他人。

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows