雪莉果的Axure原型工厂vol.004 复杂页面（一）——模拟大语言模型

微信公众号：雪莉果的Axure原型工厂

0.我们也需要紧跟时代潮流

先看下面一个示例：

这是文心一言的交互，可能大家已经熟悉的不能再熟悉了，最近这一年来，可能你时不时就会去找他问问，看看他是不是变聪明了（不是）。
但是，作为一个产品经理，你肯定也注意到了这个示例里的两个有特点的交互动作：
1.一共有6个推荐问题，点击换一换按钮便会刷新问题列表
2.他在回答时并不是直接完整输出答案，而是一个字一个字得输出，就像是我们在打字一样，他也在打字与你交流。
那么这一次，我们就来看看这两个交互该如何实现。

1.交互拆解

和之前一样，为了更好的理解这个原型做了什么，我们将交互进行拆解。

1）初始状态，一个有6个推荐问题

2）点击换一换按钮，问题刷新

3）点击某一个问题，开始作答

4）答案一个字一个字进行输出，直到结束

用流程图的形式进行展示，如下图：

接着，我们就按照上述步骤，来制作进度条原型。

2.交互设置步骤

1）首先创建所有需要的元件，并且为各元件命名，方便设置交互时选择。

其中，推荐问题为中继器：

2）然后，我们先在推荐问题的中继器里创建一些推荐问题和回答。（我一直觉得翻译成中继器挺奇怪的，按照这个元件的实际效果，叫重复器可能都更合适一些）

3）然后，添加一个全局变量，然后给中继器添加交互，每项加载即为元件赋值，在元件载入时赋值变量为一个随机0到6的数字，然后给中继器添加筛选器，让其筛选后只有3行数据。


[[Item.id == menu%7 || Item.id == (menu+1)%7 || Item.id == (menu+6)%7]]这个公式表示筛选出随机值及正负1的数据，当随机数为0时，需要取到id为6的数据，当随机数为6时需要取到id为0的数据，这样便实现了随机取3条记录的效果。
4）给换一批问题的按钮添加事件，只需要去触发中继器的载入事件即可；

每次载入时，都会得到一个新的随机数，便可以渲染新的问题，效果如下图。

5）为每个问题添加一个点击事件，用来给问答赋值；将问题内容赋值给对话中用户的对话框，将答案赋值给AI的对话框，但是这样赋值后，答案是直接全部输出，而不是单字输出；这时，我们便需要一个元件来进行中转，将答案先赋值给这个中转元件，然后载入元件时，通过循环触发来将文本一个字一个字赋值给问答中AI的内容中。


这里，用到了公式[[LVAR1.concat(This.text.charAt(LVAR1.length))]]，LVAR1是AI回答的文本，This.text.charAt(LVAR1.length)表示答案中的第N的字符，N为当前AI回答的文本长度。
6）然后给新建对话添加交互，将问答内容清空，重新显示提示问题即可。

7）最终效果如下图。

3.一些说在最后的话
我们的最终目的，其实并不是把这些交互实现，而是通过实现这些交互，去思考为何这些产品要这么设计，这样的设计又能为用户带来什么。
预览地址：link

微信公众号：雪莉果的Axure原型工厂