AI 对话机器人的应用场景非常广泛,从手机助手到企业客服系统,背后都有它的身影。今天分享一个在 Axure 中制作 AI 对话机器人原型的方案,核心思路是利用中继器(Repeater)管理问答数据,配合交互逻辑实现自动回复和打字机效果。完成后的模板只需在中继器表格内维护问题与答案,即可预览出完整的交互流程。
原型功能概览
- 智能匹配:输入框提问后自动搜索列表,命中则回复答案,未命中则引导话术。
- 拟真体验:机器人回复时模拟逐字输入效果。
- 灵活配置:问答数据直接通过中继器表格增删改查。

界面布局与组件准备
整个界面主要分为底部背景、欢迎区域、对话记录区、输入区域四部分。
首先是底部背景,用矩形和线段简单绘制并摆放即可,作为视觉基底。
欢迎区域包含图标和文字,默认状态下显示,用于引导用户开始提问。当用户发起对话后,该区域应隐藏。

问答数据管理
这里的关键是'问题列表'中继器。我们在中继器里放置矩形和文本标签,矩形负责展示问题,文本标签存储对应的答案,默认不显示。
中继器表格需定义两列:wenti 对应问题,daan 对应答案。如果是 Axure 10 及以上版本,可以直接选中表格里的连接元件,将 wenti 列绑定到矩形,daan 列绑定到文本标签;若是旧版本,则需在每项加载时通过设置文本的交互来实现绑定。

对话记录区实现
对话区域同样使用中继器,内部包含两个颜色不同的矩形:蓝色代表用户消息,灰色代表机器人回复。
表格结构上增加两列:who 用于区分发言者(值为'我'即用户,否则为机器人),Text 存储具体内容。初始状态表格为空,如需预置聊天记录可直接填入。
交互逻辑上,利用'每项加载时'事件判断 who 列的值。若等于'我',显示蓝色矩形并隐藏灰色;反之则显示灰色并隐藏蓝色。随后将 Text 列的值分别设置到两个矩形的文本属性中。

这里有个细节需要注意:矩形本身不支持自适应宽高。我们需要设定一个最大宽度(例如 850px)。当内容宽度小于最大值时,高度随文字变化;超过时则固定宽度并调整高度。这通常结合动态面板和锚链接滚动交互来实现自适应高度的效果。
另外,考虑到对话内容较多可能超出可视区域,建议将整个对话中继器转换为动态面板,并开启垂直滚动条。







