Axure实现大模型逐字输出交互设计

一、主要用到组件

中继器、动态面板、文本框、按钮。

二、操作步骤

2.1创建动态页面

1. 左侧创建“新建对话”按钮；

1. 设置2个历史问题文本；
2. 右侧设置一个动态面板；
3. 右侧下方为问题输入框。

2.2 动态面板设置

1. 动态面板设置2个状态，第一个为选择问题态，第二个为答案输出态；
2. 在动态面板第一个选择问题态内，放置大模型介绍静态文本，问题中继器。
3. 在动态面板第二个答案输出态内，放置一个问题显示框，用来接收选择的问题；再放置一个AI答案输出框，用来逐字输出问题答案。
4. 在中继器内放置一个问题选择按钮，一个答案文本框。因答案不能直接展示，所以答案文本框需设置为隐藏状态。
5. 在动态面板内输入N个问题，并分别设置问题答案。
6. 为中继器内问题选择按钮设置点击交互，点击时将当前index下的问题和答案分别输出给动态面板第二个“答案输出态”内的问题显示框和AI答案输出框。

1. 这样情况输出的答案将全部展示出来，故需要用到一个中间件，在动态面板外设置一个文本框并命名为“答案中转框”，设置为隐藏态。
2. 选择问题后先将问题答案整体输出给“答案中转框”。
3. 然后给动态面板内“AI答案输出框”设置载入交互：

• 为控制逐字输出效果，需定义一个变量并命名为answer_num，并设置变量值每触发一次+1，即设置answer_num的值为[[answer_num+1]]
• 因第一次加载时会自动+1，导致从1输出，但问题答案文本为从0开始，故answer_num初始值设置为-1.
• 设置“AI答案输出框”的文本为当前文本与本次循环内提取到的“答案中转框”内对应位置文本的拼接。[[LVAR2.concat(LVAR1.charAt(answer_num-1))]]，其中LVAR1为答案中转框元件文本，LVAR2当前元件(即AI答案输出框)文本，charAt(index)为根据index提取字符串对应位置字符函数，concat()为文本拼接函数。

1. 设置循环条件：同时满足①答案中转框内容非空；②变量answer_num的值小于答案中转框的文本长度。
2. 等待200ms;
3. 为当前元件设置触发载入事件。

三、最终效果演示