Skip to content

产品设计

在产品设计的过程中，我们经历了多次迭代和优化，最终确定了一套兼顾用户体验和技术可行性的设计方案。以下介绍我们的设计思路。

初始构想：对话式 AI 助手

最初，我们计划开发一个对话式 AI 助手，命名为“葡萄城 AI 助手”。这种形式更贴近用户日常使用习惯，例如 ChatGPT 网页版或者微信即时聊天工具的交互方式。然而，在深入研究后，我们发现对话式助手存在一些显著缺陷：

  1. 信息展示优先级问题
    在对话界面中，AI 的回答是主体内容，而搜索结果通常被放置在侧边栏或折叠区域。然而，对于用户来说，真正高价值的内容是搜索结果本身，AI 的回答更多起到总结和快速预览的作用。如果用户需要等待 AI 生成回答，可能会感到费时且效率低下，尤其是当回答出现偏差时，体验会进一步恶化。

  2. 多轮对话的局限性
    多轮对话的设计虽然看似流畅自然，但实际上与当前大模型的技术现状并不完全匹配。大模型在处理上下文时，更适合在一个明确的话题范围内工作。如果用户在一个上下文中提出多个跨领域的问题，容易导致模型困惑，降低回答质量。此外，随着对话轮次的增加，模型的响应速度会逐渐变慢，而用户可能难以察觉这一变化背后的原因。即使提供“新建对话”按钮，用户也很难判断何时应该切换上下文。

基于以上问题，我们决定放弃对话式界面，转而采用更符合用户搜索习惯的传统搜索引擎界面，同时融入智能问答的功能。

最终设计方案：传统搜索界面 + 智能问答

我们最终选择了一种混合设计方案，结合了传统搜索引擎的高效性和 AI 问答的智能化特点。以下是具体设计细节：

1. 界面结构

产品界面分为两个主要页面：Home（首页）和 Search（搜索页面）。

Home 页面

  • 标题：居中显示“葡萄城 AI 搜索”。
  • 产品切换器：位于标题下方，支持用户在四款核心产品之间切换（活字格、Wyn、SpreadJS、GcExcel）。
  • 输入框：一个多行文本框，提示用户“输入你想了解的产品问题，Enter 键发送，Shift+Enter 键换行”。右下角配有箭头发送按钮。
  • 整体布局：元素居中排列，简洁直观。
  • 顶部导航：
    • 左上角显示“葡萄城 AI 搜索”字样。
    • 下方是产品切换器，保持与 Home 页面一致。
  • 搜索框：用户输入关键词后触发搜索。
  • 智能回答区域：位于搜索框下方，通过打字机效果逐字输出 AI 回答。
  • 搜索结果列表：位于智能回答区域下方，分为四个选项卡（Tab 页面）：
    • 全部：展示所有相关搜索结果。
    • 帮助文档：展示于产品帮助文档的 QA 问答对。
    • 求助中心：展示技术社区中的求助帖子的 QA 问答对。
    • 专题教程：展示技术社区中的专题教程的 QA 问答对。

2. 搜索结果优化

为了提升搜索结果的实用性和易用性，我们进行了以下设计：

  • 选项卡数量提示：每个选项卡右上角显示该类别的搜索结果数量。如果没有相关结果，选项卡将变灰并禁用。
  • 帮助文档的详细答案：针对帮助文档的 QA 问答对，我们在后台提前用大模型生成了更详细的答案。用户可以点击简单答案后方的“展开更多”按钮查看详细内容，无需跳转到原始文档即可获取更多信息。
  • 无分页设计：为了简化用户体验，我们限制了搜索结果的数量，并直接展示所有结果，避免传统搜索中的分页操作。

3. 智能回答区域

智能回答区域是整个设计的核心亮点，以下是其具体功能和交互细节：

  • 加载状态：
    • 在大模型未生成回答时，显示一个水平条状文本区，左侧为加载动画，右上角为“停止生成”按钮。按钮位置固定在文本增长方向的上方，确保用户能够精准定位。
  • 回答生成：
    • 当大模型开始输出文字时，加载动画消失，用户可以看到逐字生成的回答内容。用户可以选择等待生成完成，也可以随时点击“停止生成”终止输出。
  • 操作按钮：
    • 回答生成完成后，下方会列出一组操作按钮，包括：
      • 有用：用户反馈回答有帮助。
      • 没用：用户标记回答不准确。
      • 复制：快速复制回答内容。
      • 追问：展开一个折叠的多行文本输入框，允许用户在同一上下文中进行追问。
      • 复制图像：新增功能，用于快速截取 AI 回答内容的图像。
    • 左下角显示声明：“以上内容由 AI 生成，仅供参考。”

4. 多轮对话的支持

为了平衡多轮对话的需求和单次搜索的效率，我们采用了以下设计：

  • 追问功能：
    • 在智能回答区域下方设置“追问”按钮，用户点击后可展开一个折叠的多行文本输入框。
    • 用户输入追问问题后，系统会自动折叠之前的回答内容，并在竖直方向上追加新的问题、智能回答区域和搜索结果列表。
  • 上下文管理：
    • 用户可以通过滚动页面查看之前的提问和回答，清晰地意识到自己处于单个上下文中。
    • 如果用户希望切换话题，只需回到顶部输入框，输入新的关键词即可开启全新搜索。

总结

综上，我们通过融合传统搜索与智能问答的优势，打造了一款简洁高效的产品：

  • 界面：首页聚焦搜索，搜索结果页智能回答与分类列表（文档/社区/教程）并排展示。
  • 体验：AI 逐字生成回答，支持追问和快捷操作；搜索结果直接展开，无需翻页。
  • 平衡：默认单次搜索保证效率，追问功能满足深度需求。

这一设计既保障了信息获取效率，又实现了智能化的交互体验，从而为用户带来更优质的信息服务。