为什么语音交互是用户体验设计挑战，而不仅仅是技术挑战？

人们想到利用语音进行开发时，会想到一些棘手的问题：

• 实时转录
• 延迟管理
• GPT推理流程
• 音频质量、噪声过滤等

都有效。都很难。

但它们都不是真正导致我的 Learnflow AI（一个由Vapi提供支持的语音优先辅导平台）第一个版本崩溃的原因。

真正的挑战是什么？用户体验。

因为当用户不看屏幕时——当他们说话而不是打字时——你会失去我们已经依赖的大部分功能。

没有悬停状态。没有工具提示。没有加载指示器。

而我亲身经历后才明白：毫无头绪。

本文详细分析了我第一次发布实时语音应用程序时出现的问题，以及我如何对其进行修改，使其变得易于理解、易于使用，甚至令人愉悦。

语音技术很简单（只要Vapi能搞定）

我利用一个周末的时间开发了 Learnflow AI 的第一个版本。

• Vapi 处理了整个语音循环：语音输入、文本转 GPT、语音输出
• Convex跟踪会话、用户数据和积分
• Kinde管理身份验证、计费和基于计划的访问控制

多亏了 Vapi，我才不用费力地把 Whisper、GPT-4、ElevenLabs 和 WebSocket 架构拼凑在一起。一个代理定义和一个vapi.start()调用就搞定了一切。

示例流程代理会话开始：

const assistantOverrides = {
  variableValues: { subject, topic, style },
  clientMessages: ["transcript"],
  serverMessages: [],
};

vapi.start(configureAssistant(voice, style), assistantOverrides)

但这只给了我管道系统。

它并没有解决我的用户面临的问题。

究竟哪里出了问题

1. 会议何时开始尚不明确

Vapi速度很快——会话只需几秒钟即可启动。但用户对此毫不知情。

他们会点击“开始会话”……

然后等待。

然后说：“你好？”

再说一遍。

为什么？因为我没有给他们视觉提示。

他们无法获得任何反馈，证明自己的声音已被听到、转录和回应。对于语音界面来说，这是个致命缺陷。

2. 麦克风静音混乱

Vapi 提供了一个setMuted切换开关，但我没有清楚地展示出来。

一位用户误以为关闭麦克风会结束会话，于是将其关闭。

另一个人忘了手机已经关了，还在继续说话。一片寂静。

3. 没有成绩单 = 没有确认

尽管我从 Vapi 获取了实时转录文本，但我一开始并没有显示它们。

结果呢？用户不知道自己听到了什么、理解了什么，或者忽略了什么。

他们不信任这款应用。

之前：糟糕的语音用户体验

我是如何解决的

语音用户界面就是反馈用户界面

我从零开始重建了语音会话组件，目标只有一个：

始终向用户展示正在发生的事情。

设计改进方案 1：实时转录信息流

当 Vapi 发出transcript消息时，我将它们附加到滚动转录 UI 中。

vapi.on('message', (message) => {
  if (message.type === 'transcript' && message.transcriptType === 'final') {
    const newMessage = { role: message.role, content: message.transcript };
    setMessages((prev) => [newMessage, ...prev]);
  }
});

文字记录以对话的形式呈现，这有助于用户感到被倾听。

设计改进 2：语音动画（Lottie）

当助手说话时，我用 Lottie 展示波浪动画。

vapi.on('speech-start', () => setIsSpeaking(true));
vapi.on('speech-end', () => setIsSpeaking(false));

这成为了激活状态的信号。

用户现在凭直觉就知道：

• 当它聆听时
• 当它在思考时
• 当它说话时

设计改进 3：更合理的麦克风开关

我添加了一个可见的麦克风切换按钮：

<button onClick={toggleMicrophone}>
  {isMuted ? "Mic Off" : "Mic On"}
</button>

此外，还有一个工具提示：“如果您想保持静音，请关闭此功能。您的会话将继续。”

修复后：用户体验流程

真实用户流程示例

假设 Joy 注册了 Learnflow AI。

1. 她选择了免费套餐（10次语音通话）。
2. 进入控制面板并点击“开始会话”
3. 洛蒂的动画出现了
4. 她说：“嘿，什么是 HTML？”
5. 看到：“你：嘿，什么是 HTML？”
6. 听到：“超文本标记语言是用于设计为……”的文档的标准标记语言
7. 信用额度实时从10降至9

然后屏幕上出现一条提示：“您还剩 9 次使用机会。升级每月只需 100。”

她点击“升级”，跳转到Kinde 的账单页面，然后立即以专业版用户的身份返回。

Convex + Kinde：提升应用用户体验的基础设施

凸面：会话 + 学分逻辑

每次会话开始时，我都会在 Convex 中记录并扣除一个积分：

// schema.ts
export const users = defineTable({
  credits: v.number(),
  plan: v.string(),
});

export const sessions = defineTable({
  userId: v.id("users"),
  startedAt: v.number(),
});

// mutation.ts
export const startSession = mutation(async (ctx, args) => {
  const user = await ctx.db.get(args.userId);
  if (!user || user.credits <= 0) throw new Error("Out of credits");

  await ctx.db.insert("sessions", {
    userId: args.userId,
  });

  await ctx.db.patch(args.userId, {
    credits: user.credits - 1,
  });
});

如果积分达到 0：

• 用户无法使用 Vapi 创建新会话
• 出现全屏升级弹窗

Kinde：角色门控 + 计划同步

我使用Kindle 的托管定价页面。

注册后，用户会通过元数据被分配free角色pro：

const user = await getUser();

let plan: "starter" | "pro" | "plus" = "pro";

const plans = entitlements?.data?.plans ?? [];
console.log("Plans:", plans);

if (plans.some((p: any) => p.key === "pro")) {
  plan = "pro";
} else if (plans.some((p: any) => p.key === "starter")) {
  plan = "starter";
} else if (plans.some((p: any) => p.key === "plus")) {
  plan = "plus";
}

console.log("Plan:", plan);

然后我将其同步到 Convex 中进行后端强制执行。

我需要处理的特殊情况

• 用户在会话中途积分达到 0：弹出模态框阻止下一次尝试。
• 用户将麦克风静音，误以为会话已暂停。解决方案：复制 + 麦克风颜色状态
• 用户在会话期间切换标签页。解决方案：会话计时器在闲置 60 秒后自动结束。
• 用户在会话期间升级套餐。解决方案：完全充值刷新套餐和积分余额。

发布前的最终用户体验检查清单

• 实时文字稿推送 ✅
• 助手说话时的视觉信号 ✅
• 粘性信用计数器 ✅
• 麦克风开关及说明 ✅
• 会话后升级提醒✅
• Kinde角色跨后端同步✅

我学到了什么

• 构建语音系统不仅仅关乎延迟和语音质量。
• 语音优先的用户体验与聊天机器人的用户体验截然不同。
• 当没有视觉参照物时，用户体验的清晰度至关重要。
• 信任源于透明度：公开成绩单，公开州政府信息。
• 反馈循环增强信心

最重要的是：

如果用户不确定自己是否被听到，他们就不会再说话了。

如果您正在构建语音人工智能应用，以下几点需要注意

1. 不要在没有反馈回路的情况下启动语音功能
2. 向用户展示他们的文字（文字稿）
3. 显示代理活动（Lottie 或动画）
4. 使用像 Convex 这样的后端来实时控制使用。
5. 使用Kinde 的角色功能简化访问控制
6. 让像瓦皮这样的城市来处理基础设施建设吧。
7. 不要想当然地认为用户会“自己想办法”——要衡量他们的犹豫程度并加以引导。
8. 构建时要考虑延迟，但设计时更要注重信心。

轮到你了

你尝试过构建语音优先的用户体验吗？

你是否遇到过这些挑战？

请在下方留言，我们来交流一下。

作者：Shola Jegede，Learnflow AI 的开发者

使用以下技术构建：

• Vapi（语音代理抽象）
• Convex（实时后端）
• Kinde（授权+计费）

熬夜、实时反馈和大量学习。

评论区见。