当前位置：首页 > news >正文

Excalidraw A/B测试框架搭建：数据驱动迭代

news 2026/5/12 6:01:29

Excalidraw A/B测试框架搭建：数据驱动迭代

在协作工具日益智能化的今天，一个功能改动能否真正提升用户体验，早已不能靠“我觉得更好”来决定。越来越多的产品团队转向数据驱动的决策模式——而其中最有力的武器，就是A/B测试。

以Excalidraw为例，这款手绘风格的开源白板工具，正被广泛用于架构设计、产品原型和远程头脑风暴。随着AI生图、智能布局等新功能不断加入，如何判断“优化后的提示词是否真的减少了用户修改次数”？传统的定性反馈显然不够。我们需要一种机制，能将主观感受转化为可量化的指标，在真实使用场景中验证每一个改动的价值。

这正是构建A/B测试框架的意义所在。

技术基石：为什么选Excalidraw？

Excalidraw并非普通的绘图工具。它的底层设计理念为实验系统的嵌入提供了天然优势：

完全开源：前端代码可自由修改，无需依赖黑盒插件系统。
客户端优先：核心逻辑运行在浏览器端，便于注入埋点与实验控制逻辑。
轻量级架构：基于React + TypeScript + Zustand的状态管理清晰，组件化程度高，易于隔离变量。
灵活扩展能力：通过Plugin API或直接patch代码，可以动态加载不同版本的功能模块。

更重要的是，它集成了越来越重要的AI能力——用户输入一段自然语言，系统调用LLM生成流程图或架构草图。这种“语义到图形”的转换过程，恰好是A/B测试的理想试验场：我们可以通过调整prompt模板、选择不同模型、改变输出格式等方式创建多个变体，并观察哪种方式更接近用户的预期。

比如：

用户输入：“画一个包含登录页、用户中心和订单列表的Web应用”

我们可以让A组使用基础指令：

请生成Excalidraw兼容的JSON结构，表示上述页面及其跳转关系。

而B组则加入结构化引导：

请按从左到右的流程排列组件，保持层级对齐，使用矩形代表页面，箭头表示导航路径。

两者的输出质量差异，可能直接影响用户后续是否需要花时间重新排版。而这，正是我们要测量的关键指标。

构建实验闭环：从分组到洞察

一个有效的A/B测试不是简单地展示两个版本，而是建立“假设 → 分流 → 行为采集 → 分析 → 决策”的完整闭环。在这个过程中，每个环节都需要精心设计。

如何科学分流？

关键在于一致性与随机性的平衡。同一用户必须始终看到同一个版本，否则会污染行为数据；同时，整体分配又需足够随机，避免偏差。

我们采用基于用户ID哈希的稳定分流策略：

// utils/abTest.ts import { getOrGenerateUserId } from './auth'; const EXPERIMENT_CONFIG = { AI_PROMPT_TEMPLATE: { name: 'ai-prompt-template', variants: ['baseline', 'enhanced'] as const, weights: [0.5, 0.5], // 各占50% }, }; type Variant<T> = T extends { variants: readonly (infer U)[] } ? U : never; export function assignVariant<T extends keyof typeof EXPERIMENT_CONFIG>( experimentName: T ): Variant<(typeof EXPERIMENT_CONFIG)[T]> { const config = EXPERIMENT_CONFIG[experimentName]; const userId = getOrGenerateUserId(); const hash = hashStringToNumber(userId + experimentName); let total = 0; for (let i = 0; i < config.variants.length; i++) { total += config.weights[i]; if (hash < total) { return config.variants[i]; } } return config.variants[0]; // fallback } function hashStringToNumber(str: string): number { let hash = 0; for (let i = 0; i < str.length; i++) { hash = (hash * 31 + str.charCodeAt(i)) % 1; } return hash; }

这个方法确保了即使页面刷新，同一用户仍属于同一实验组。权重数组还支持非均等分流，适合灰度发布场景（如先对5%用户开放新功能）。

埋点设计：不只是“点击了什么”

传统埋点往往只记录“事件发生”，但A/B测试需要的是上下文丰富的链路追踪。我们需要知道：谁、在哪个实验组、做了什么、结果如何。

为此，我们封装了一个轻量级事件追踪器：

// analytics/eventTracker.ts interface EventData { event: string; properties?: Record<string, any>; } export class EventTracker { private static instance: EventTracker; private queue: EventData[] = []; private endpoint = '/api/v1/track'; private constructor() {} static getInstance() { if (!this.instance) { this.instance = new EventTracker(); } return this.instance; } track(event: string, properties?: Record<string, any>) { const payload = { event, properties: { ...properties, timestamp: new Date().toISOString(), userId: getOrGenerateUserId(), sessionId: getSessionId(), experimentGroup: assignVariant('AI_PROMPT_TEMPLATE'), }, }; this.queue.push(payload); this.flush(); } private flush() { if (this.queue.length === 0) return; setTimeout(() => { fetch(this.endpoint, { method: 'POST', body: JSON.stringify(this.queue), headers: { 'Content-Type': 'application/json' }, }).catch(console.warn); this.queue = []; }, 1000); } }

该类自动附加用户身份、会话信息及实验分组标签，并通过防抖批量上报，降低网络开销。典型使用方式如下：

EventTracker.getInstance().track('ai_generation_start', { prompt }); // ... 调用 LLM ... EventTracker.getInstance().track('ai_generation_success', { elementCount: result.elements.length, latencyMs: endTime - startTime });

这些事件构成了完整的用户行为链路：从发起请求、等待响应，到接受结果或进行修改。结合后端分析，我们可以计算出诸如“一次生成接受率”、“平均编辑时长”、“节点重排频率”等核心指标。

系统集成：如何让一切协同工作？

在一个典型的部署架构中，各服务角色分工明确：

graph LR A[Excalidraw Frontend] --> B[Feature Flag Service] A --> C[AI Gateway] C --> D[LLM e.g. GPT-4] A --> E[Analytics Backend ClickHouse/Kafka] E --> F[BI Tool Metabase/Amplitude] B -->|返回配置| A E -->|数据流入| F C -->|带分组路由| D