简介
AI 对话机器人的应用已经非常广泛，从手机助手到企业客服系统，背后都有它的身影。本文介绍如何在 Axure 中制作 AI 对话机器人的原型模板。制作完成后，只需在中继器表格里输入问题和答案，预览时即可实现自动回复。
原型效果
- 在输入框里输入问题后，自动搜索问题列表，如果找到答案，机器人自动回复；如果找不到答案，也会回复引导话术。
- 机器人回复时，会模拟打字输入效果，逐字回复。
- 问题和答案，可以在中继器表格里添加或修改。
制作教程
本原型模版主要分成底部背景、欢迎区域、问题列表、对话区域、输入区域。
1. 底部背景
底部背景用矩形和线段制作，按照设计摆放。
2. 欢迎区域
欢迎区域包括图标和文字，默认未提问时显示。
3. 问题列表
问题列表用中继器制作，中继器里摆放矩形和文本标签，矩形用于显示文字，文本标签用于记录答案，默认不显示。 中继器表格里包含两列，wenti 列对应问题，daan 列对应答案。 如果是 Axure10 或以上的版本，点击表格里的连接元件，选择中继器里的矩形和文本标签，就可以将问题设置到矩形，将答案设置到文本标签；如果是 Axure9 或以下的版本，就要在中继器每项加载时，通过设置文本的交互，将 wenti 列和 daan 列的值设置到对应的元件里。
4. 对话区域
对话区域我们用中继器来制作，中继器里需要有两个颜色不同的矩形，蓝色矩形对应用户输入的内容，灰色矩形对应机器人的回答。 中继器表格里添加两列，who 列用来确认是谁说的话，定义如果 who 列的值等于'我'，那该行内容就是用户说的，如果 who 列的值不等于'我'，那就是机器人说的。Text 列对应具体说的内容。中继器表格里默认为空，如果想默认展示以前的聊天记录也可以在中继器表格里填写。 在中继器每项加载时，我们需要判断每一行是谁说的：如果 who 列的值等于'我'，就显示蓝色矩形，隐藏灰色矩形；如果 who 列的值不等于'我'，就显示灰色矩形，隐藏蓝色矩形。 然后把中继器 text 列的值都设置到灰色和蓝色的矩形里，在中继器每项加载时，用设置文本的交互，将 text 列的值都设置到两个矩形里即可。 因为矩形不会自适应宽度和高度，所以这里要先定一个宽度的最大值（例如 850）。如果矩形的宽度小于 850，设置矩形高度不变，宽度和文字的宽度一样；如果宽度大于 850，设置矩形宽度为 850，设置高度为文本宽度为 850 时的高度。 获取自适应文本的尺寸，可以使用动态面板和锚链接滚动的交互来实现。 设置矩形的宽度时需要注意，用户对话的锚点是在右侧，机器人对话的锚点是在左侧。 最后考虑到对话内容较多时，会超过指定的区域，可以把中继器转为动态面板，并调出垂直滚动条。
5. 输入区域
输入区域包括矩形、多行输入框、按钮。 发送按钮按下时，先判断文本内容是否为空，如果为空就不操作，如果不为空再进行操作。 首先把欢迎区域的文字图标组合隐藏，然后把输入框的内容添加到对话记录的中继器里。 考虑到内容较多时，先把最新的内容显示出来，需要在动态面板内添加一个默认隐藏的元件作为锚点。然后用移动的交互，移动到对话记录中继器的底部，最后用滚动到元件的交互，让动态面板的滚动条滚动到底部元件的位置。 问题问完后，自动回复答案。对问题列表的中继器进行筛选，筛选出符合条件的答案，通过简单判断，判断中继器表格里 wenti 列是否包含有输入框里的文本值。 如果有筛选结果（中继器筛选后的条数不等于 0），就用设置文本的交互，将问题的答案（中继器里文本标签的值）记录下来；如果等于 0（没有找到答案），就用设置文本的交互，记录默认的话术（例如：'对不起，目前没有找到该问题相关的知识点，您可以提问右侧问题列表相关的问题，或者在中继器里的添加对应的问题'）。 记录下了要回答的内容后，用移出筛选的交互，将问题列表还原，并且触发将记录的文本逐字显示。 文本逐字显示，其实就是通过文本提取函数，将文本值逐一提取，先提取第一个，然后是第二个……如此循环，直到最后一个字为止。 区别在于，要把第一个字的文本，用添加行的交互添加到对话的中继器里，然后再进入循环依次将后续的字，通过循环判断的方式添加上去。 完成之后，用移动的交互，将动态面板内的锚点元件移动到中继器表格的下方，然后用滚动到元件的交互，让动态面板的滚动条滚动到最下方锚点的位置。 这样就完成了 AI 对话机器人的原型模板，后续使用很方便，问题和答案在中继器表格中填写即可，即可自动生成交互效果。
