生成式 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: Map<string, Narrative> = new Map();
constructor(modelEndpoint: string) {
this.modelEndpoint = modelEndpoint;
}
async generateNarrative(params: NarrativeGenerationParams): Promise<Narrative> {
// 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 Record<string, unknown>;
if (!data.scenes || !Array.isArray(data.scenes)) {
throw new Error("AI 输出缺少 scenes 字段");
}
const scenes: Scene[] = data.scenes.map((s: Record<string, 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 Record<string, unknown>[]),
action: this.parseAction(s.action as Record<string, unknown>),
reward: s.reward ? this.parseReward(s.reward as Record<string, 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: Record<string, 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: Record<string, 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: Record<string, 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 PropType<Scene>, 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: Record<string, { 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 PropType<RewardItem>, required: true },
isActive: { type: Boolean, required: true },
},
setup(props) {
const showReward = ref(false);
const rewardText = computed(() => {
const r = props.reward;
const typeLabels: Record<string, 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: Map<string, "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): Promise<void> {
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: Partial<Scene>;
}
function analyzeAndSuggest(
metrics: NarrativeMetric[],
narrative: Narrative
): OptimizationSuggestion[] {
const suggestions: OptimizationSuggestion[] = [];
// 计算每个场景的历史失败率
const sceneFailureRates = new Map<string, 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%。
关键经验：
生成式 UI 不替代创意，它加速从创意到实现的路径。叙事引擎的价值在于让运营团队从"等前端排期"变为"自己配置参数快速验证"。
