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

《60天AI学习计划启动 | Day 25: AI 对话前端体验与产品设计（和你现在的 AIChat 强相关》

news 2026/6/10 23:43:48

Day 25：AI 对话前端体验与产品设计（和你现在的 AIChat 强相关）

学习目标

梳理 AI 聊天类产品的典型交互/状态流
掌握流式回答、滚动、错误/中断等关键 UX 设计要点
能针对你现有 AIChat 组件列一份明确的 UX 改进清单

核心知识点

1. 聊天页信息架构
- 基本区域：顶部栏（标题/入口）、消息区、输入区、可选的侧边历史/上下文区
- 常见元素：
  - 角色头像+名称（区分用户/AI/系统提示）
  - 时间戳、操作区（复制、重新生成、点赞/点踩）
  - 历史会话入口（对话级别的上下文）
2. 流式输出与滚动体验
- 关键点：
  - 流式中自动滚动到底部，但要尊重用户手动上滑（你现在组件已经在做 userScrolled 标记，这就是典型实践）
  - 打字机效果 vs 直接 chunk 更新：性能 vs 观感，需要平衡；长文建议 chunk 级别而不是逐字符
  - 流式结束时，再做一次平滑滚动，保证用户看到完整回答
3. 输入框与发送逻辑
- 典型交互：
  - Enter 发送、Shift+Enter 换行（你当前 handleKeyPress 已实现）
  - 请求进行中可禁用输入或允许「中断」按钮（二选一，避免用户困惑）
  - 快捷问题/模板提示：减少「不知道问什么」的空窗（你已有 quickQuestions，可以再丰富为业务场景）
4. 错误 / 中断 / 重新生成
- 状态类型：
  - 网络错误（离线/timeout）
  - 服务错误（模型不可用、限流）
  - 用户中断（新建对话/关闭对话）
- UX 建议：
  - 明确区分「我这边的问题」vs「你那边网络的问题」
  - 给出一键「重新生成」和「复制错误信息」能力（你已实现刷新按钮，可以在错误提示里更明确）
  - 不要在用户主动清空/中断后再在界面突然插入错误气泡——你现在已经通过 userAbortFlag 在规避
5. 历史会话与上下文感知
- 设计点：
  - 会话列表：标题+简要摘要（你 HistoryPopup 里用 name + introduction，其实已经是不错的模式）
  - 进入旧会话时，要有明显提示“你现在在 X 会话里”，防止用户误以为是新对话
  - 新建对话时，状态重置：输入框清空、会话 ID 清空、快速问题重新展示（你 clearChat 基本做到了）
6. 安全与渲染
- Markdown 渲染：
  - 需要防 XSS（你用 marked + 自己的 domPropsInnerHTML，要确保 marked 已做 sanitize 或你在上游做转义）
  - 表格/代码块要有滚动容器，避免撑爆布局（你已在 renderContent 对 table 做 wrapper，是对的）
- 链接点击：在新窗口打开、加上简单的 URL 校验

实战作业（建议）

作业 1：画出 AIChat 的状态机 / 页面流
- 至少包含：Idle / Loading / Streaming / Error / Aborted / HistoryViewing
- 标清每个按钮会触发的状态转换（发送、新建对话、关闭、打开历史、重新生成）
作业 2：给当前组件列一份 UX 改进 TODO
- 从下面维度检查并记录问题 + 方案：
  - 流式滚动：是否还有「偶尔跳动 / 不滚到底」的情况？
  - 错误提示：文案是否足够明确？是否区分网络/服务/权限等？
  - 历史对话：用户能否一眼区分「当前会话」和「历史会话」？
  - 快捷问题：是否可以按业务分类 / 提示更具体的示例？
作业 3：设计 3 条“新手引导”文案
- 场景：用户第一次进来看到你的「AI质量助手」
- 要求各写一条：
  - 「我能帮你干什么」型
  - 「结合当前页面/数据」的示例问题
  - 「说清楚限制」的预期管理（比如：仅基于当前报表数据，不看历史月份等）