57 lines
3.9 KiB
Markdown
57 lines
3.9 KiB
Markdown
---
|
|
sketch: 001
|
|
name: mobile-hud
|
|
question: "暗黑系 ARPG 横屏战斗 HUD 如何兼顾 MMORPG 的完整系统入口？"
|
|
winner: "single"
|
|
tags: [mobile, landscape, hud, touch, combat, arpg, mmo, dark-glass]
|
|
---
|
|
|
|
# Sketch 001: Mobile HUD
|
|
|
|
## Design Question
|
|
|
|
在不遮挡 Godot 游戏世界的前提下，如何用暗黑系 ARPG 的横屏战斗框架，让移动、普通攻击、技能、物品、拾取/对话、任务、地图、聊天、队伍、公会以及背包等系统保持易达？本轮重点比较圆形战斗控件、深色金属边框、职业资源条与低频功能收纳方式。
|
|
|
|
## How to View
|
|
|
|
直接打开：
|
|
|
|
`open .planning/sketches/001-mobile-hud/index.html`
|
|
|
|
也可以使用文件链接打开 [index.html](/Users/shenlei/Work/mt/mtgodot-poc/.planning/sketches/001-mobile-hud/index.html)。
|
|
|
|
页面无需构建工具。草图以横屏为基准：手机为 844×390，平板和桌面为 16:9。右下角工具栏切换手机/平板/桌面预览和标注模式；首页下方的“全量 UI 移动端交互图”支持按模块筛选，点击节点可查看入口、触控方式、页面形态和返回路径。
|
|
|
|
## Single Direction
|
|
|
|
- **暗黑 ARPG 横屏 HUD** — 左上按“名称→头像→HP/MP/资源短条”纵向排列，顶部中央目标条，右上按“背包→小地图→菜单”排列，地图通过点击小地图进入；左下摇杆、右下环形技能盘，底部中央不放功能栏。角色、装备、技能、坐骑和表情只通过左上头像进入；菜单仅保留“社交、成长、活动、商业、系统”五个一级入口。
|
|
|
|
## Covered Functions
|
|
|
|
移动摇杆、相机/地图入口、玩家状态、目标、普攻、技能、药水/物品、拾取、对话、钓鱼、副本入口、任务、背包、角色、技能、地图、队伍、公会、好友、聊天、情侣/爱意、商店、商城、仓库、私人商店、交易、兑换、Cube 制作、精炼、龙魂、坐骑、观战、表情、系统、帮助、登出、角色切换、死亡复活、加载和断线重连。
|
|
|
|
## Interaction Maps
|
|
|
|
- 进入游戏：登录 → 服务器/频道 → 角色列表 → 加载 → 首页 HUD。
|
|
- 战斗：移动摇杆 → 目标选择 → 普攻/技能 → 掉落/场景交互 → 死亡/复活。
|
|
- 任务：任务栏 → 任务日志 → 小地图/大地图 → 自动寻路 → NPC 对话 → 副本结算。
|
|
- 角色与物品：头像/菜单 → 角色/装备/技能，以及背包 → 物品详情 → 使用/装备/出售 → 仓库。
|
|
- 社交：右上菜单 → 社交 → 聊天/好友/情侣/公会；组队后队员状态固定在左上头像下方，点击队员查看资料或定位。
|
|
- 经济：NPC/玩家 → 商店/商城/交易/私人商店 → Cube 制作 → 精炼/龙魂。
|
|
- 系统状态：右上菜单 → 设置/帮助/角色切换/登出，以及死亡、加载、断线重连等状态流程。
|
|
|
|
## What to Look For
|
|
|
|
- 暗黑系圆形战斗盘是否能让右手拇指快速区分普攻、技能和药水。
|
|
- 战斗控件是否遮挡角色、敌人、掉落物或任务目标。
|
|
- 当前任务条是否足够醒目，点击任务条能否直接进入任务面板。
|
|
- 低频功能是否通过菜单一跳到达，同时不让战斗 HUD 变得拥挤。
|
|
- 名称是否位于头像正上方，HP/MP/资源短条是否位于头像下方且不抢占战斗画面。
|
|
- 右上菜单是否位于最外侧，小地图是否紧挨菜单，背包是否替代原地图按钮。
|
|
- 横屏手机布局在平板/桌面预览下是否有足够的延展空间。
|
|
- 技能冷却、按钮按压、抽屉打开、聊天发送和摇杆复位反馈是否足够明确。
|
|
|
|
## Next Decision
|
|
|
|
当前方向已确定为单一方案，交互图已补齐全部功能入口。下一步可按交互图逐条映射到 Godot Control 节点，并优先实现首页 HUD、任务、背包、菜单和战斗操作。草图只借鉴暗黑系 ARPG 的布局语言，不复用参考图中的原始素材。
|