Mon Co. · 2025

Pixelmon TCG

让 Web3 隐形却不失价值，并为 10K+ 玩家交付一套品类首创的动画卡牌系统。

UX/UI 设计前端Web3TCG

已上线网站： pixelmontcg.com。 游戏在 App Store 与 Google Play。

贯穿全文的一句话。 Pixelmon TCG：设计一款能在 3 分钟内教会新手的移动卡牌游戏，让 Web3 隐形，并交付品类首创的动画卡牌系统。

传统 TCG 复杂，Web3 游戏又常被不信任。我们把 Pixelmon TCG 做成移动优先的卡牌游戏：新手约三分钟能上手，老玩家仍有深度，收藏者仍能保留 NFT 价值。8 个月周期内达到 10K+ 下载，卡牌状态系统成为 Mon Co. 可复用的模板。

我在 Mon Co. 担任 Pixelmon TCG 的首席产品设计师与前端工程师。负责用户研究、新手引导、卡牌系统 UI、设计系统、怪物与法术 VFX 分镜、pixelmontcg.com 的 Web3 功能设计，以及网站前端实现。与产品、游戏工程师、游戏设计师、智能合约开发与插画协作完成机制、变现与客户端渲染。卡牌状态系统由我端到端设计；Unity 运行时由工程交付，我负责网页预览、规格与设计 QA，保证两端一致。

集换式卡牌要求记忆、策略与耐心——移动玩家往往没有这三样。Web3 游戏要求钱包、Gas 与信任——多数玩家并不想要这三样。

传统数字 TCG 把卡锁在服务器里。早期 Web3 TCG 又把 NFT 投机置于玩法之上，对局体验弱，休闲玩家被界面劝退。对 6 款 TCG / Web3-TCG 竞品的对标，以及对 22 名目标玩家的非正式访谈，指向同一缺口：高稀有度需要视觉差异，加密流程不能挡在对局前，动效不能拖垮中端安卓。

我们看到的空隙是：一款新手三分钟能学会、从不强推区块链、又能让数字卡像实体卡一样值得炫耀的移动 TCG。

要深度，不要高墙；要易上手，不要浅到没劲。

每个设计决策都要同时满足两股相反的力。我们每周都在回看这些取舍。

我们相信：如果前三分钟足够顺，玩家会留下来发现深度；如果钱包只在铸造时出现，Web2 玩家不会撞墙；如果动画卡是奖励而不是门槛，我们就能上新品类功能而不拖垮性能。

无摩擦上手 → 隐形 Web3 → 以奖励呈现深度。

最初做法。 我们做了 14 屏教程，解释卡种、法力、战斗与组牌。测试者在第 4 屏就退出。

失败点。 我们以为玩家想先懂再玩。他们不要。他们想直接玩。

转折。 一位测试者说：「我只想打出一张卡。」我们把教程砍成一局可交互对战。

最终流程。 三屏。每局一个机制。没有大段文字。提示仅在主动请求时出现。目标是约三分钟拿到第一场胜利——与约五分钟一局的节奏对齐。

被玩测否定的 14 屏教程。

取而代之的三屏：出牌、耗能、攻击并获胜。

「我只想打出一张卡。」

玩测者 — 砍掉 14 屏教程的转折点

问题。 Web3 玩家要 NFT；Web2 玩家会在第一个钱包弹窗离开。竞品把加密放在门口；我们把它放在玩家主动打开的门后。

决策。 首次启动不弹钱包。对局里不谈 Gas、不用加密黑话。钱包只在玩家选择铸造已获得的卡时出现。网站上的 NFT 能力保持工具导向：收藏画廊、围绕组牌的市场、公开主页——始终与游戏内收藏同步。

目标很简单：玩家可以玩 100 小时仍不知道有区块链；也可以在第 10 分钟铸造第一张卡。两条路径都要完整。

共享游玩路径，再分出可选铸造分支。Web3 是加分，不是门槛。

钱包连接出现在所有权相关页面（如排行榜 / NFT），而不是首次进入对局。

张力。 扭蛋有效，也有争议。它是商业模式的一部分，无法简单拿掉。设计问题是：如何让开包兴奋，又不在对局中逼消费。

我们没有「解决」扭蛋。但划了明确边界，让玩家按自己的条件参与。

卡包与收藏在产品叙事里，与对战 UI 分离。

想法。 如果卡有三种状态——静态、视差、动画——每种状态都在信号稀有度与价值呢？动画卡不只是视觉，它是价值信号。卡越会动，越说明它珍贵。

设计。 静态是可读底与低端回退。视差用分层深度，不算重。动画承载技能与法术的高冲击反馈——入场、攻击、增益、减益、传说级过场。覆盖 195 张卡与五档稀有度。

技术挑战。 手机上的分层动画很贵。早期「处处全动画」被否掉。方案是分级状态 + 设备感知回退，让亚太中端安卓也能打完一局。

静态 → 视差 → 动画，作为可见的价值信号。

网站卡牌详情：属性、技能与美术与游戏内同一套语言。

• 攻击怪 — 前冲与元素弹道。
• 法术 — 法阵扩张与定向粒子。
• 增益 / 减益 — 柔光 vs 暗覆与状态标记。
• 传说 — 入场或打出时全屏推镜。

交付物包括时间表、图层拆解、按稀有度的强度规则，以及低功耗回退规则。

我设计了卡牌系统，并负责网页实现与让 Unity 渲染对齐的规格。每个视觉决定都带着性能成本。我不能交一份 Figma 就走。

架构。 一张卡对象。状态由稀有度、设备档位与对局上下文决定。FPS 预算破了就降级：动画 → 视差 → 静态。对局继续，卡只是不再动。

设计系统。 随稀有度变化的卡框、色标、技能/状态图标、能量球、所有权标识与市场动作——移动端与 pixelmontcg.com 共用，让浏览器里的 NFT 和对局里的卡是同一张。

CardController 路由到静态 / 视差 / 动画渲染器，负载过高时降级。

分级后的定性负载。关键是掉帧前先降级。

/**
 * Illustrative card-state contract used for web previews and design/engineering alignment.
 * In-game rendering lived in the Unity client with device-tier fallbacks.
 */

export type CardState = 'static' | 'parallax' | 'animated';
export type DeviceTier = 'low' | 'mid' | 'high';
export type Rarity = 'common' | 'uncommon' | 'rare' | 'epic' | 'legendary';

export function resolveCardState(opts: {
  rarity: Rarity;
  deviceTier: DeviceTier;
  inBattle: boolean;
  fpsBudgetOk: boolean;
}): CardState {
  const { rarity, deviceTier, inBattle, fpsBudgetOk } = opts;

  if (!fpsBudgetOk || deviceTier === 'low') {
    return 'static';
  }

  const wantsMotion =
    rarity === 'legendary' || rarity === 'epic' || rarity === 'rare';

  if (wantsMotion && inBattle && deviceTier === 'high') {
    return 'animated';
  }

  if (wantsMotion && deviceTier !== 'low') {
    return 'parallax';
  }

  return 'static';
}

用于对齐设计与工程的状态解析约定示意。运行时在 Unity；这是规则本身。

研究混合了竞品对标（6 款）与非正式访谈（22 人）。新手最强信号：想炫耀好卡，但不想为了对局绕加密流程。

「我想炫耀最好的卡，但不想为了打一局绕加密。」

目标玩家 — 研究访谈

设计 QA 覆盖 195 张卡、各设备档、稀有度处理、分镜时间，以及网页与游戏的所有权同步。可用性问题带优先级回工程，而不是上线前才发现。

如果重来，我会从第一天就把工程拉进卡状态设计。第一版动画强度在低端机上不可用，我们为此返工。技术可行性是设计约束，不是事后补丁——我现在会带着性能预算做原型。我也会更早让不懂加密的休闲玩家测钱包连接，并在重写新手引导前记下完成率与留存基线，让前后对比是可引用的数据，而不是回忆。留下的教训：Web3 消费产品里，核心玩法优先。区块链功能要么解决真实玩家问题，要么保持隐形。