01WEB BOARD · 2048PX商城礼包系统｜需求拟定与信息层级
SELF-INITIATED PRACTICE 02CFM 双场景体验
SELF-INITIATED PRACTICE 02 / GAME UX
穿越火线手游双场景系统体验设计
从局外付费决策，到局内高压战斗
用同一套“状态必须可见、可理解、可行动”的原则， 分别重构商城礼包与生化衍生玩法 HUD。
基于《穿越火线手游》公开界面与规则语境完成的个人命题练习，非官方项目， 不代表腾讯或游戏团队方案。
01 / CHOOSE A REQUIREMENT
两个小需求，
两条独立阅读路径。
需求 1 是本页阅读主线，点击后接着向下；需求 2 可直接跳到生化玩法，减少无效翻页。
02 / REQUIREMENT 01 · DISCOVERY
商城礼包系统：
先把“为什么买”讲清楚。
前期不从画页面开始，而是先对齐业务目标、玩家顾虑、信息任务与完整购买路径。
02WEB BOARD · 2048PX商城礼包系统｜完整核心流程
03WEB LONGFORM PREVIEW商城礼包系统｜原始交互方案长图
业务诉求
提高礼包价值感，同时承接多主题并发销售。- 高客单价
- 捆绑销售
- 多主题并发
玩家痛点
不是不想买，而是不愿在“不透明”里做决定。- 抵触强制捆绑
- 价格敏感
- 已有资产重复计算
设计策略
化“强制”为“划算”，让每一笔变化都有原因。- 强化折扣感知
- 支持灵活抵扣
- 结算过程可追溯
界面布局与信息层级
一句话：先完成主题分发，再逐层解释物件与价格。
- 01首屏信息分发同时承接最多 10 个主题礼包，先分类再看内容，避免海报平铺。
- 02详情页信息降噪面对 3–12 个物品与赠品，用主次分组支持快速扫读与逐件查看。
- 03动态结算反馈自动扣减已有商品、自动抵扣抵用券，并明确展示每一步价格变化。
交互设计目标
一句话：效率、信任与付费爽感，必须同时成立。
- 01分发效率多主题并发时，玩家能在 3 秒内找到心仪主题并理解礼包核心价值。
- 02信任建立“已有商品自动扣减”必须账单透明，避免产生算错钱或被多扣的疑虑。
- 03付费爽感强化原价与折后价对比，把资产扣减和抵用券抵扣过程视觉化。
CORE LOOP / ONE-LINE VIEW
核心闭环：先被看见，再被理解，最后放心购买。
把图 3 的循环关系改成一条可顺读路径；功能完整性由每一步是否能继续行动来检验。
- 01入口曝光
- 02捆绑包导购
- 03物件预览
- 04物件体验
- 05购买成功
CORE INTERACTION FLOW
两种入口汇合，一次选择分成购买与体验两条支路。
重排自原流程图；节点与关系保持一致，但先突出“入口汇合—礼包选择—结果去向”。
START登录游戏
推荐前往商城 → 进入默认礼包
商城 → 捆绑包红点提示 → 点击进入
MERGE捆绑包系统
SELECT进入对应捆绑包
单独购买
套装购买
→结算界面
点击查看详情
物件名称 → TIPS 详情展开
→进入“仓库”体验界面
03 / STORE BUNDLE SYSTEM
把“捆绑销售”
改写成“自主划算”。
先让玩家按主题找到想要的内容，再用物件级预览、单购／套购与透明账单建立选择感和信任。
并发主题用稳定分类和入口状态组织，玩家先找到主题，再理解礼包。
每个物件都可进入独立体验，套购不再遮蔽单件价值。
原价、已有资产扣减、抵用券和应付金额按因果顺序呈现。
INTERACTIVE PROTOTYPE / DEMO VALUES把“是否划算”变成一张看得懂的账单
NEON HACKER / 01霓虹骇客主题礼包
点击任意物件可单独理解价值，再决定单购或套购。
KEY OUTPUT分发效率 × 结算透明 × 购买自主权
不是用更强促销刺激付费，而是减少“我是不是算错了”的怀疑。
03 / REQUIREMENT 02 · BIO MODE
把传统战绩 HUD，
改成目标导向 HUD。
需求 2 同样回到真实设计材料，用两张原图完整呈现需求拟定与交互方案。
01WEB BOARD · 2048PX生化衍生玩法｜HUD 需求拟定
02WEB LONGFORM PREVIEW生化衍生玩法｜原始交互方案长图
出生和复活时先确认“我是谁”，再提示本阵营的动作目标。
屏幕准星周边持续标记能量节点，地图外也能快速判断路线。
当进度接近完成或时间进入 30 秒，才提升压迫反馈，避免全程高噪音。
INTERACTIVE HUD / STATE SWITCH同一张地图，不同阵营先回答不同问题
HUMAN守卫方
01:24
能量进度 12 / 20
上半场防守
盾
A POINT守住能量节点
42m盾
B POINT队友正在防守
68mHP100
AMMO35 / 140
KEY OUTPUT阵营识别 × 空间导航 × 临界节奏
不是把更多信息塞进战斗，而是让玩家在 3 秒内知道当前最重要的一件事。
05 / ORIGINAL SOURCE BOARDS
保留原始方案，
网页负责重构阅读。
三张 2048px 方案板直接高清展开；两张原始长图按真实像素查看，避免再次放大造成虚假“高清”。
01WEB BOARD · 2048PX商城礼包系统｜需求拟定与信息层级
02WEB BOARD · 2048PX商城礼包系统｜完整核心流程
03WEB LONGFORM PREVIEW商城礼包系统｜原始交互方案长图
04WEB BOARD · 2048PX生化衍生玩法｜HUD 需求拟定
05WEB LONGFORM PREVIEW生化衍生玩法｜原始交互方案长图
06 / VALIDATION PLAN
方案已完成，
效果仍需验证。
练习作品不伪造上线数据；把最关键的设计假设转化为三项可执行验证。
战斗目标能否被快速识别？
随机展示人类／幽灵视角，记录玩家能否在 3 秒内说出阵营、目标点与当前进度。
- 观察
- 首次回答正确率、目标定位时间
- 验证
- HUD 是否真正替代传统无效信息
账单能否自己解释价格？
给出“已有一件商品＋可用抵用券”的结算场景，让玩家复述原价、扣减原因与应付金额。
- 观察
- 价格复述错误、扣减来源理解
- 验证
- 结算透明是否足以建立信任
异常状态是否仍可完成任务？
覆盖抵用券不可用、资产重复、死亡复活、半场换边与 19/20 临界进度等关键状态。
- 观察
- 停顿点、误操作与返回路径
- 验证
- 规则边界与反馈是否完整
07 / REFLECTION
这次练习真正训练的，
不是画两套界面。
而是先识别玩家处于哪种决策压力，再决定信息应该多、少、快、慢到什么程度。
WHAT I LEARNED
同一套“清晰”，在不同场景里有不同含义。
- 局外清晰是可比较、可追溯、可解释。
- 局内清晰是少而关键、持续可见、状态先行。
- 共同让系统变化直接回答玩家的下一步动作。
END OF CASE / 04继续浏览游戏 UX 项目
返回完整项目目录 ↗