微信公众号:雪莉果的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原型工厂