【Axure教程】AI自动对话机器人

AI对话机器人的应用已经非常广泛，从你日常使用的手机助手到企业复杂的客服系统，背后都有它的身影。所以今天就教大家在Axure里制作Ai对话机器人的原型模版，制作完成后，只需要在中继器表格里输入问题和答案，预览时就可以实现自动回复。具体效果你们可以观看下面的视频或打开原型预览地址亲自体验

【原型效果】

1、在输入框里输入问题后，自动搜索问题列表，如果找到答案，机器人自动回复；如果找不到答案，也会回复引导话术。

2、机器人回复时，会模拟打字输入效果，逐字回复。

3、问题和答案，可以在中继器表格里添加或修改。

【原型预览含下载地址】

https://axhub.im/ax10/bcf9d9e5357143b7/#c=1

【制作教程】

本原型模版主要分成底部背景、欢迎区域、问题列表、对话区域输入区域

1.底部背景

底部背景用矩形和线段制作，如下图所示摆放

2.欢迎区域

欢迎区域包括图标和文字，默认未提问时显示。

3.问题列表

问题列表用中继器制作，中继器里摆放矩形和文本标签，矩形用于显示文字，文本标签用于记录答案，默认不显示。

中继器表格里包含两列，wenti列对应问题，daan列对应答案

如果是Axure10或以上的版本，我们点击表格里的连接元件，选择中继器里的矩形和文本标签，就可以将问题设置到矩形，将答案设置到文本标签；如果是Axure9或以下的版本，就要在中继器每项加载时，通过设置文本的交互，将wenti列和答案列的值设置到对应的元件里。

4.对话区域

对话区域我们用中继器来制作，中继器里需要有两个颜色不同的矩形，蓝色矩形对应我输入的内容，灰色矩形对应机器人的回答

中继器表格里添加两列，who列用来确认是谁说的话，我们定义如果who列的值等于我，那该行内容就是我说的，如果who列的值不等于我，那就是机器人说的。Text列对应具体说的内容。中继器表格里默认为空，如果你想默认展示以前的聊天记录也可以在中继器表格里填写。

在中继器每项加载时，我们需要判断每一行是谁说的，如果who列的值等于我，就是我说的，所以显示蓝色矩形，隐藏灰色矩形；如果who列的值不等于我，就是机器人说的，我们就显示灰色矩形，隐藏蓝色矩形。

然后我们把中继器text列的值都设置到灰色和蓝色的矩形里，我们在中继器每项加载时，用设置文本的交互，将text列的值都设置到两个矩形里即可。

因为矩形不会自适应宽度和高度，所以这里我们要先定一个宽度的最大值，案例里是850，如果矩形的宽度小于850时，我们设置矩形高度不变，宽度和文字的宽度一样；如果宽度大于850时，我们设置矩形宽度为850，设置高度为文本宽度为850是的高度。

怎么做自适应文本的尺寸，这里我们需要动态面板和锚链接滚动的交互来获取。

具体可以参考我之前的视频教程《自适应文本的输入框》，里面有详细讲解怎么自适应文本的宽度，学习后举一反三得出自适应的高度。

设置矩形的宽度是需要注意，蓝色矩形我的对话的锚点是在右侧，灰色矩形机器人的对话的锚点是在左侧。

最后考虑到对话内容较多时，会超过指定的区域，所以可以把中继器转为动态面板，并调出垂直滚动条。

5.输入区域

输入区域包括矩形、多行输入框，按钮，如下图所示摆放。

发送按钮按下时，我们要先判断文本内容是否为空，如果为空就不操作，如果不为空再进行操作。

首先我们要先把欢迎区域的文字图标组合隐藏，然后把输入框的内容添加到对话记录的中继器里。

考虑到内容较多时，我们先把最新的内容显示出来，所以我们需要动态面板的滚动条滚动到最下方，这里我们需要在对话记录的动态面板内添加一个默认隐藏的元件作为锚点。然后用移动的交互，移动到对话记录中继器的底部，最后用滚动到元件的交互，让动态面板的滚动条滚动到底部元件的位置。

问题问完后，我们要自动回复答案，我们首先对问题列表的中继器进行筛选，筛选出符合条件的答案，这里是通过简单判断，判断中继器表格里wenti列是否包含有输入框里的文本值。

如果有筛选结果，就是中继器筛选后的条数不等于0，我们就用设置文本的交互，将问题的答案，就是在中继器里文本标签的值记录下来，如果等于0，就是没有筛选结果，就是没有找到答案，用设置文本的交互，记录默认的话术，案例中是对不起，目前没有找到该问题相关的知识点，您可以提问右侧问题列表相关的问题，或者在中继器里的添加对应的问题

这样我们记录下了要回答的内容后，用移出筛选的交互，将问题列表还原，并且触发将记录的文本逐字显示。

文本逐字显示，其实就是通过文本提取函数，将文本值逐一提取，先提取第一个，然后是第二个……如此循环，直到最后一个字为止，这里如果不明白的话，可以参考我之前出的视频教程《动态文字——输入效果》

这里的区别，要在先把第一个字的文本，用添加行的交互添加到对话的中继器里，然后再进入循环依次将23456……直到末尾的字，通过循环判断的方式添加上去。

完成之后，我们要用移动的交互，将动态面板内的锚点元件移动到中继器表格的下方，然后用滚动到元件的交互，让动态面板的滚动条滚动到最下方锚点的位置。

这样我们就完成了AI对话机器人的原型模板了，后续使用也是很方便，问题和答案在中继器表格中填写即可，即可自动生成的交互效果。

以上就是本期教程的全部内容，感谢您的阅读，我们下期见。