点击任意位置开始游戏
↩ 返回
⚠ 设计说明专用弹窗 · 实际游戏中不会出现

请选择进入模式

真实游戏里,点击「开始游戏」后由系统读取存档的通关情况自动判断进入哪个场景,不会让玩家选择。

首次进入 · 未通关
骷髅地
存档:无存档 / 尚未通关
转场视频:流离失所
已通关
田地
存档:已通关
转场视频:水稻
取消
进入开发模式
💡 设计思路
× DESIGN NOTES

设计思路

一个主页,扩展成「开始页 + 主菜单」;用 AI 漫剧的视频做转场,把两页连成一幕。

1需求 → 拆成两页

需求只有一个主页。结合现有流程,我把它扩展成开始页和游戏主菜单,并且把两页当成一个整体设计:衔接和游戏包装一起考虑。

开始页
➜即梦视频转场
游戏主菜单

2剧情向:进度不同,UI 不同

主角魂穿张角,逆转黄巾起义。这类剧情游戏会随进度展示不同的 UI,所以根据是否逆转成功,给出不同的转场和主菜单。

骷髅地

首次进入

流离失所,荒野白骨:乱世的起点。

田地

通关之后

稻浪翻滚,丰收在望:天下大吉。

首次进入➜ 骷髅地转场➜ 通关,自动回主页↻ 再次进入➜ ✨ 田地转场 = 天下大吉

玩家想看到新的转场,就有动机回来把所有分支都打完;新转场本身,就是「天下大吉」的奖励。

3开始页主题:一枚硬币

手上的素材只有文档和宣传片。反复看了几遍,有一个画面很打动我:张角把一枚硬币递给小朋友,有种「故事开端」的感觉,我把它定为开始页的主题。

一枚硬币 = 开端

4UI × AI 漫剧

游戏的主题是 AI 漫剧,UI 也要有「看漫剧」的感觉:用即梦生成视频当转场,让视频和 UI 合成一幕。

首帧
=开始页
视频转场(约 6 秒)
最后 1 秒
UI 滑入
末帧
=背景
0s5s6s
  • 首帧 = 开始页画面:切到视频无缝。
  • 最后 1 秒 UI 开始入场,视频停在末帧当主菜单背景。
  • 主菜单不再放背景图:一镜到底,不闪。
🎬 即梦:转场视频🎨 Figma:UI 设计🧩 HTML:交互演示
× 👋 新手引导:点击左下角
「进入开发模式」 可查看每个元素的尺寸、字体颜色、交互状态和跳转说明。 知道了