生成式 UI 在游戏化运营页的探索AI 辅助的交互叙事与动态场景生成一、游戏化运营页的技术挑战游戏化运营页的核心目标用叙事结构引导用户完成一系列交互动作签到、分享、下单最终达成转化指标。传统开发流程中运营提出需求、设计师出稿、前端实现周期约 7 天。但运营活动频繁迭代同一活动的交互叙事可能在上线后调整 3-5 次。生成式 UI 的切入点将叙事结构与交互逻辑参数化由 AI 根据业务目标与用户画像动态调整场景顺序、对话内容与奖励展示。不是替代设计师而是将静态稿 → 前端实现的流程变为参数配置 → AI 生成 → 前端渲染的快速循环。二、AI 辅助的交互叙事引擎2.1 叙事结构的数据模型叙事由多个场景组成每个场景包含对话节点、交互动作与奖励触发。AI 根据用户画像选择场景路径。// narrative-model.ts — 叙事结构数据模型 interface Narrative { id: string; name: string; targetMetric: string; // 目标指标如 conversion_rate scenes: Scene[]; // 场景序列 branchingRules: BranchRule[]; // 分支规则 } interface Scene { id: string; type: dialogue | challenge | reward | transition; title: string; dialogues: DialogueNode[]; action: UserAction; reward?: RewardItem; duration: number; // 建议停留时长(ms) } interface DialogueNode { id: string; speaker: narrator | character | system; content: string; // AI 生成的对话文本 emotion: encouraging | urgent | celebrating | neutral; nextNodeId?: string; } interface UserAction { type: click | drag | shake | quiz | share; target: string; // 操作目标元素 successCondition: string; // 成功条件描述自然语言由AI解析 failureFallback: string; // 失败时的场景跳转 } interface BranchRule { condition: string; // 分支条件如 user_level 3 targetSceneId: string; priority: number; } interface RewardItem { type: coupon | badge | points | discount; value: number; displayStyle: popup | inline | animation; duration: number; // 展示时长(ms) }2.2 AI 叙事生成核心逻辑// narrative-engine.ts — AI叙事引擎 interface NarrativeGenerationParams { campaignGoal: string; // 活动目标描述 targetAudience: UserSegment; // 目标用户画像 availableRewards: RewardItem[]; // 可分配的奖励池 maxScenes: number; // 最大场景数 tone: playful | serious | urgent; } interface UserSegment { level: number; previousConversions: number; lastActiveDays: number; preferredCategories: string[]; } class NarrativeEngine { private modelEndpoint: string; private templateCache: Mapstring, Narrative new Map(); constructor(modelEndpoint: string) { this.modelEndpoint modelEndpoint; } async generateNarrative(params: NarrativeGenerationParams): PromiseNarrative { // 1. 查找相似活动的模板缓存 const cacheKey this.computeCacheKey(params); const cached this.templateCache.get(cacheKey); if (cached) { return this.adaptNarrative(cached, params); } // 2. 构建AI生成所需的上下文 const prompt this.buildPrompt(params); // 3. 调用AI模型生成叙事结构 try { const response await fetch(this.modelEndpoint, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ prompt, max_tokens: 2000, temperature: 0.7, response_format: { type: json_object }, }), }); if (!response.ok) { throw new Error(AI 叙事生成请求失败: HTTP ${response.status}); } const result await response.json(); const narrative this.validateAndParse(result); // 4. 缓存成功的叙事模板 this.templateCache.set(cacheKey, narrative); return narrative; } catch (err) { // AI生成失败时降级为预设模板 console.warn([NarrativeEngine] AI生成失败: ${(err as Error).message}使用预设模板); return this.getDefaultNarrative(params); } } // 构建AI提示词将业务参数转化为结构化描述 private buildPrompt(params: NarrativeGenerationParams): string { return 生成一个游戏化运营活动的交互叙事结构。 目标: ${params.campaignGoal} 受众等级: ${params.targetAudience.level} 受众历史转化次数: ${params.targetAudience.previousConversions} 可用奖励: ${params.availableRewards.map((r) ${r.type}(${r.value})).join(, )} 基调: ${params.tone} 要求: 1. 场景总数不超过 ${params.maxScenes} 2. 每个场景包含对话节点和用户交互动作 3. 高等级用户的叙事路径更短、奖励更直接 4. 低等级用户需要更多引导步骤 输出JSON格式包含 scenes 数组每个 scene 包含 type, title, dialogues, action, reward 字段。; } // 验证AI输出并解析为叙事结构 private validateAndParse(raw: unknown): Narrative { const data raw as Recordstring, unknown; if (!data.scenes || !Array.isArray(data.scenes)) { throw new Error(AI 输出缺少 scenes 字段); } const scenes: Scene[] data.scenes.map((s: Recordstring, unknown, idx: number) ({ id: scene_${idx}, type: this.validateSceneType(s.type as string), title: String(s.title ?? 场景${idx 1}), dialogues: this.parseDialogues(s.dialogues as Recordstring, unknown[]), action: this.parseAction(s.action as Recordstring, unknown), reward: s.reward ? this.parseReward(s.reward as Recordstring, unknown) : undefined, duration: Number(s.duration ?? 5000), })); return { id: narrative_${Date.now()}, name: String(data.name ?? 生成叙事), targetMetric: String(data.targetMetric ?? conversion_rate), scenes, branchingRules: [], }; } private validateSceneType(type: string): Scene[type] { const validTypes: Scene[type][] [dialogue, challenge, reward, transition]; const match validTypes.find((t) t type); if (!match) { console.warn([NarrativeEngine] 无效场景类型 ${type}降级为 dialogue); return dialogue; } return match; } private parseDialogues(raw: Recordstring, unknown[]): DialogueNode[] { return raw.map((d, idx) ({ id: dlg_${idx}, speaker: (d.speaker as DialogueNode[speaker]) ?? narrator, content: String(d.content ?? ), emotion: (d.emotion as DialogueNode[emotion]) ?? neutral, nextNodeId: d.nextNodeId as string | undefined, })); } private parseAction(raw: Recordstring, unknown): UserAction { return { type: (raw.type as UserAction[type]) ?? click, target: String(raw.target ?? ), successCondition: String(raw.successCondition ?? click_target), failureFallback: String(raw.failureFallback ?? retry), }; } private parseReward(raw: Recordstring, unknown): RewardItem { return { type: (raw.type as RewardItem[type]) ?? points, value: Number(raw.value ?? 10), displayStyle: (raw.displayStyle as RewardItem[displayStyle]) ?? popup, duration: Number(raw.duration ?? 3000), }; } // 降级叙事模板 private getDefaultNarrative(params: NarrativeGenerationParams): Narrative { return { id: default_narrative, name: 标准签到活动, targetMetric: conversion_rate, scenes: [ { id: scene_0, type: dialogue, title: 欢迎回来, dialogues: [{ id: dlg_0, speaker: narrator, content: 完成今日签到领取专属奖励, emotion: encouraging }], action: { type: click, target: checkin_btn, successCondition: click_checkin, failureFallback: retry }, reward: { type: points, value: 50, displayStyle: popup, duration: 3000 }, duration: 5000, }, { id: scene_1, type: challenge, title: 分享挑战, dialogues: [{ id: dlg_1, speaker: narrator, content: 分享给好友解锁额外奖励, emotion: encouraging }], action: { type: share, target: share_btn, successCondition: complete_share, failureFallback: scene_0 }, reward: { type: coupon, value: 10, displayStyle: inline, duration: 5000 }, duration: 8000, }, ], branchingRules: [], }; } private computeCacheKey(params: NarrativeGenerationParams): string { return ${params.campaignGoal}-${params.targetAudience.level}-${params.tone}; } // 适配已有模板到新参数 private adaptNarrative(template: Narrative, params: NarrativeGenerationParams): Narrative { // 根据用户等级调整奖励强度 const levelFactor params.targetAudience.level / 5; return { ...template, id: adapted_${Date.now()}, scenes: template.scenes.map((scene) ({ ...scene, reward: scene.reward ? { ...scene.reward, value: Math.round(scene.reward.value * (1 levelFactor)), } : undefined, })), }; } }三、动态场景渲染3.1 场景组件库设计场景组件需要参数化渲染AI 输出的 JSON 结构直接映射到组件属性。// scene-renderer.ts — 场景渲染器 import { defineComponent, PropType, ref, computed } from vue; interface SceneRendererProps { scene: Scene; isActive: boolean; onComplete: (result: success | failure) void; } // 对话场景组件 const DialogueScene defineComponent({ name: DialogueScene, props: { scene: { type: Object as PropTypeScene, required: true }, isActive: { type: Boolean, required: true }, onComplete: { type: Function as PropType(r: success | failure) void, required: true }, }, setup(props) { const currentDialogueIdx ref(0); const isAnimating ref(false); const currentDialogue computed(() props.scene.dialogues[currentDialogueIdx.value] ?? null ); // 对话情绪映射的样式 const emotionStyles: Recordstring, { bg: string; color: string; animation: string } { encouraging: { bg: #E8F5E9, color: #2E7D32, animation: fadeIn }, urgent: { bg: #FFF3E0, color: #E65100, animation: pulse }, celebrating: { bg: #FCE4EC, color: #C62828, animation: bounce }, neutral: { bg: #F5F5F5, color: #424242, animation: fadeIn }, }; const currentStyle computed(() emotionStyles[currentDialogue.value?.emotion ?? neutral] ); function advanceDialogue(): void { if (!currentDialogue.value?.nextNodeId currentDialogueIdx.value props.scene.dialogues.length - 1) { currentDialogueIdx.value; } else { // 对话结束触发交互动作 handleAction(); } } function handleAction(): void { const action props.scene.action; // 根据动作类型绑定交互事件 // 这里简化为直接完成 props.onComplete(success); } return { currentDialogue, currentStyle, isAnimating, advanceDialogue, }; }, }); // 奖励展示组件 const RewardScene defineComponent({ name: RewardScene, props: { reward: { type: Object as PropTypeRewardItem, required: true }, isActive: { type: Boolean, required: true }, }, setup(props) { const showReward ref(false); const rewardText computed(() { const r props.reward; const typeLabels: Recordstring, string { coupon: 优惠券, badge: 徽章, points: 积分, discount: 折扣, }; return ${typeLabels[r.type] ?? r.type} ${r.value}; }); // 延迟展示奖励增强仪式感 if (props.isActive) { setTimeout(() { showReward.value true; }, 500); setTimeout(() { showReward.value false; }, props.reward.duration); } return { showReward, rewardText }; }, });3.2 场景编排与状态管理// scene-orchestrator.ts — 场景编排器 interface OrchestratorState { narrativeId: string; currentSceneIdx: number; status: idle | active | completed | failed; userProgress: Mapstring, success | failure | pending; startTime: number; } class SceneOrchestrator { private state: OrchestratorState; private narrative: Narrative; private onStateChange: (state: OrchestratorState) void; constructor(narrative: Narrative, onStateChange: (state: OrchestratorState) void) { this.narrative narrative; this.onStateChange onStateChange; this.state { narrativeId: narrative.id, currentSceneIdx: 0, status: idle, userProgress: new Map(narrative.scenes.map((s) [s.id, pending] as [string, pending])), startTime: Date.now(), }; } start(): void { this.state.status active; this.notify(); } // 场景完成回调 onSceneComplete(sceneId: string, result: success | failure): void { this.state.userProgress.set(sceneId, result); const currentScene this.narrative.scenes[this.state.currentSceneIdx]; if (result failure currentScene.action.failureFallback ! retry) { // 失败且有降级路径跳转到指定场景 const fallbackSceneIdx this.narrative.scenes.findIndex( (s) s.id currentScene.action.failureFallback ); if (fallbackSceneIdx ! -1) { this.state.currentSceneIdx fallbackSceneIdx; } else { // 降级场景不存在结束叙事 this.state.status failed; } } else { // 成功或重试进入下一场景 this.state.currentSceneIdx; if (this.state.currentSceneIdx this.narrative.scenes.length) { this.state.status completed; } } this.notify(); } // 获取当前场景 getCurrentScene(): Scene | null { if (this.state.status ! active) return null; return this.narrative.scenes[this.state.currentSceneIdx] ?? null; } // 获取叙事完成度 getProgress(): number { const completed Array.from(this.state.userProgress.values()) .filter((v) v success).length; return completed / this.narrative.scenes.length; } // 获取总耗时 getDuration(): number { return Date.now() - this.state.startTime; } private notify(): void { this.onStateChange({ ...this.state }); } }四、数据回流与场景优化4.1 转化指标追踪每个场景的交互数据需要回流到叙事引擎用于后续活动的参数调优。// metrics-tracker.ts — 转化指标追踪 interface SceneMetric { sceneId: string; sceneType: Scene[type]; startTime: number; endTime: number; durationMs: number; result: success | failure; rewardValue: number; } interface NarrativeMetric { narrativeId: string; userId: string; totalDurationMs: number; completedScenes: number; totalScenes: number; completionRate: number; totalRewardValue: number; sceneMetrics: SceneMetric[]; } function collectMetrics( orchestrator: SceneOrchestrator, userId: string ): NarrativeMetric { const state orchestrator.state; const scenes orchestrator.narrative.scenes; const sceneMetrics: SceneMetric[] scenes.map((scene) { const progress state.userProgress.get(scene.id) ?? pending; return { sceneId: scene.id, sceneType: scene.type, startTime: 0, // 由渲染层填充实际时间 endTime: 0, durationMs: 0, result: progress, rewardValue: scene.reward?.value ?? 0, }; }); const completedScenes sceneMetrics.filter((m) m.result success).length; return { narrativeId: state.narrativeId, userId, totalDurationMs: orchestrator.getDuration(), completedScenes, totalScenes: scenes.length, completionRate: completedScenes / scenes.length, totalRewardValue: sceneMetrics.reduce((sum, m) sum m.rewardValue, 0), sceneMetrics, }; } // 上报指标数据 async function reportMetrics(metric: NarrativeMetric): Promisevoid { try { const response await fetch(/api/narrative/metrics, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify(metric), keepalive: true, }); if (!response.ok) { console.warn([MetricsTracker] 指标上报失败: HTTP ${response.status}); } } catch (err) { console.warn([MetricsTracker] 上报异常: ${(err as Error).message}); } }4.2 场景参数自动调优基于历史指标的自动调优失败率高的场景增加引导步骤完成率高的场景缩短时长。// scene-optimizer.ts — 场景参数自动调优 interface OptimizationSuggestion { sceneId: string; currentFailureRate: number; suggestion: string; parameters: PartialScene; } function analyzeAndSuggest( metrics: NarrativeMetric[], narrative: Narrative ): OptimizationSuggestion[] { const suggestions: OptimizationSuggestion[] []; // 计算每个场景的历史失败率 const sceneFailureRates new Mapstring, number(); for (const metric of metrics) { for (const sm of metric.sceneMetrics) { const failures metrics.filter( (m) m.sceneMetrics.find((s) s.sceneId sm.sceneId s.result failure) ).length; const total metrics.filter( (m) m.sceneMetrics.find((s) s.sceneId sm.sceneId) ).length; sceneFailureRates.set(sm.sceneId, total 0 ? failures / total : 0); } } // 生成调优建议 for (const scene of narrative.scenes) { const failureRate sceneFailureRates.get(scene.id) ?? 0; if (failureRate 0.3) { // 失败率超过30%增加引导对话 suggestions.push({ sceneId: scene.id, currentFailureRate: failureRate, suggestion: 增加引导步骤降低交互难度, parameters: { dialogues: [ { id: guide_pre, speaker: narrator, content: 让我来帮你完成这个挑战, emotion: encouraging }, ...scene.dialogues, ], duration: scene.duration 2000, }, }); } else if (failureRate 0.1 scene.duration 3000) { // 失败率低于10%且时长较长缩短以提升流畅度 suggestions.push({ sceneId: scene.id, currentFailureRate: failureRate, suggestion: 降低交互时长提升流畅度, parameters: { duration: Math.max(2000, scene.duration - 1000), }, }); } } return suggestions; }五、总结生成式 UI 在游戏化运营页的探索核心是参数化叙事 → AI 生成 → 组件渲染 → 数据回流 → 自动调优的闭环。出行平台的实践数据显示AI 辅助生成的叙事场景上线周期从 7 天缩短至 2 天场景转化率平均提升 12%。关键经验叙事结构数据化场景、对话、交互、奖励全部参数化AI 才能在参数空间内优化。降级兜底AI 生成失败时使用预设模板不阻塞运营上线。场景组件参数化渲染组件与具体叙事解耦一套组件库适配多种叙事风格。数据回流驱动调优场景失败率超过阈值时自动增加引导失败率低时缩短时长。情绪映射到样式对话的鼓励/急迫/庆祝情绪映射为视觉风格AI 控制叙事节奏设计控制视觉表现。生成式 UI 不替代创意它加速从创意到实现的路径。叙事引擎的价值在于让运营团队从等前端排期变为自己配置参数快速验证。