在人工智能与自然语言处理技术飞速发展的今天，AI对话机器人已深入我们生活的方方面面，从智能手机中的语音助手到企业官网的智能客服，其应用场景日益广泛。对于产品经理和UX设计师而言，掌握如何在Axure中快速构建一个高保真、可交互的AI对话机器人原型，已成为一项极具竞争力的核心技能。本文将手把手教你制作一个支持自动回复、模拟打字效果且易于维护的对话机器人原型模板，帮助你更高效地展示设计方案。
一、原型功能与效果概览
在开始制作之前，我们先来明确这个原型模板的核心功能，确保后续的搭建过程更具针对性。本模板旨在通过简单的配置，模拟出基于机器学习知识库的问答交互体验。
- ✅ 智能自动回复：在输入框输入问题后，系统会自动在预设的问答库（中继器）中进行关键词检索。若命中问题列表，机器人将返回对应答案；若未命中，则自动回复预设的引导话术。
- ✅ 拟真打字效果：机器人回复时，会模拟人工打字输入的过程，以逐字显示的方式呈现答案，极大提升原型演示的真实感。
- ✅ 内容可视化配置：所有问题和答案均存放在中继器表格中，无论是修改现有数据还是添加新条目，都无需改动任何交互逻辑，方便快捷。
你可以通过下方视频或在线预览地址，直观体验原型效果。
原型预览与下载地址：https://axhub.im/ax10/bcf9d9e5357143b7/#c=1
二、整体架构与页面布局
在动手操作前，我们先来拆解整个页面的结构。该原型模板在视觉和逻辑上主要划分为五个核心区域，理解它们的职责有助于你更快地上手。
- 底部背景区：作为整个页面的视觉基底，通过矩形和线段组合，营造出类似手机聊天界面的氛围。
- 欢迎区域：由图标和文字组成，在用户首次进入页面、尚未发起提问时显示，起到引导和欢迎的作用。
- 问题列表区：由中继器驱动，展示预设的常见问题列表，方便用户快速点击提问，同时也作为后台问答匹配的数据源。
- 对话记录区：整个原型交互的核心展示区，同样使用中继器动态生成，用于区分用户与机器人的对话气泡。
- 输入操作区：包含文本输入框和发送按钮，是用户与机器人交互的入口。
首先，我们使用矩形和线段搭建底部背景，布局效果如下图所示。
欢迎区域的设计相对简单，主要由图标和文案构成，默认状态下保持显示。
三、构建可配置的问答知识库
这个AI对话原型的一个核心亮点在于，它的“大脑”——问答知识库是基于中继器实现的。这意味着，你无需具备编程知识，只需像编辑Excel表格一样维护数据，即可实现自然语言处理的模拟效果。
在问题列表中，我们使用中继器作为数据容器。中继器内部放置一个矩形（用于显示问题文字）和一个文本标签（用于隐藏地记录对应答案）。
中继器的数据表格包含两列关键字段：wenti（对应问题）和daan（对应答案）。在Axure 10及以上版本中，你可以通过“连接元件”功能快速将列值绑定到矩形和文本标签上；若使用Axure 9或更早版本，则需在“每项加载时”通过“设置文本”交互手动赋值。
四、制作动态对话记录区
对话记录区是整个原型交互逻辑最复杂的部分，它需要动态地展示用户输入和机器人回复。这里我们同样采用中继器来实现，并利用条件判断区分消息的发送者。
在中继器内，我们预先放置两个颜色不同的矩形：蓝色矩形代表当前用户发送的消息，灰色矩形代表机器人的回复。
中继器表格包含两个字段：who（用于标识发言人）和text（用于存储发言内容）。我们约定：若who列的值为“我”，则显示蓝色矩形；若值不等于“我”，则视为机器人消息，显示灰色矩形。默认表格为空，你也可以预置几条历史聊天记录用于演示。
在中继器的“每项加载时”，我们需要通过条件判断来控制两个矩形的显示与隐藏，并将text列的值分别设置到这两个矩形中。
进阶技巧：自适应文本尺寸
由于矩形无法自动撑开以适应文本长度，我们需要设定一个最大宽度（案例中为850px）。当文本宽度小于该值时，矩形高度不变，宽度自适应；当文本宽度超过该值时，矩形宽度固定为850px，并自动增加高度。这需要通过动态面板和锚链接滚动交互来获取文本实际尺寸，具体实现方法可参考我之前发布的《自适应文本的输入框》教程，举一反三即可实现高度自适应。
⚠️ 注意：设置矩形宽度时，需注意锚点位置。用户消息（蓝色）的锚点应在右侧，机器人消息（灰色）的锚点应在左侧，以符合常规聊天界面布局。
最后，为了应对长对话场景，请将整个中继器转换为动态面板，并在属性面板中调出垂直滚动条。
五、实现自动回复与逐字输出
当用户输入问题并点击发送按钮后，整个交互流程将串联起来。这一过程模拟了从发起查询到最终呈现结果的完整链路，体现了深度学习模型中的“序列到序列”生成思想。
首先，搭建输入区域，包含矩形背景、多行输入框和发送按钮。
发送按钮的交互逻辑分为以下几步：
- 输入校验：判断输入框内容是否为空，若为空则不执行任何操作。
- 界面刷新：隐藏欢迎区域的文字和图标，将输入框的内容添加至对话记录的中继器中。
考虑到消息较多时需要查看最新内容，我们需要在对话记录动态面板内部添加一个默认隐藏的元件作为锚点。通过移动交互将该锚点移动至中继器底部，随后使用“滚动到元件”交互，使动态面板的滚动条自动滚动至最下方。
接下来是核心的问答匹配逻辑。我们对问题列表的中继器执行“筛选”操作，筛选条件为：wenti列是否包含输入框中的文本值。
通过条件判断筛选结果：
- 若筛选后的条目数不等于0，说明找到了匹配的答案，我们提取中继器中文本标签记录的
daan值。 - 若筛选后的条目数等于0，说明知识库中无此问题，则自动提取预设的引导话术（如：“对不起，目前没有找到该问题相关的知识点，您可以提问右侧问题列表相关的问题。”）。
记录下应答内容后，先执行“移除筛选”操作还原问题列表，然后触发一个“逐字显示”的交互事件。
逐字显示的核心原理：利用Axure的文本提取函数（如substr），将答案文本按索引逐一提取。首先将第一个字通过“添加行”交互添加到对话中继器中，然后利用“循环判断”依次添加第2、3、4……直到最后一个字符，从而实现打字机效果。具体函数用法可参考《动态文字——输入效果》教程。
完成逐字添加后，再次使用移动和滚动交互，将锚点移动并滚动至对话区域底部，确保用户能看到完整的回复内容。
六、总结与扩展
至此，一个功能完整的AI对话机器人Axure原型模板已制作完成。该模板的设计思路将复杂的人工智能交互逻辑封装在组件内部，对使用者极其友好：
- 易维护：所有问答数据集中存储在中继器中，修改与扩展只需操作表格即可。
- 高保真：模拟打字效果和自适应气泡极大提升了原型的真实感与演示效果。
- 可复用：你可以将此模板作为基础组件，复制到任何需要展示对话交互的项目中。
希望本教程能帮助你掌握Axure中高级交互技巧，并激发更多产品设计灵感。如果你在制作过程中遇到问题，欢迎在评论区留言交流。
[AFFILIATE_SLOT_1]如果你对Axure原型设计有更深度的学习需求，推荐使用专业的原型设计工具和素材资源，可以大幅提升你的设计效率。
[AFFILIATE_SLOT_2]以上就是本期教程的全部内容，感谢您的阅读，我们下期见。
浙公网安备 33010602011771号