中继器实现自动回复功能

中继器是axure里面非常重要的一个元件,通过中继器,我们可以开发出非常有趣的一些应用,今天我就带领大家来实现一个简单的聊天机器人。

按照老规矩,我们先看一下效果图:

【需求分析】

在上面的例子,我们需要实现如下几个效果:

1、分别输入关键字A、B,点击发送以后,输入的内容会显示,并且会根据关键词回复对应的内容;

2、如果显示的内容超过超过显示区域,页面自动往上滚动;

【实现思路】

针对上面的两个需求,主要通过下面的思路实现:

1、通过中继器里面的数据列表展示聊天内容;

2、中继器里面的记录有两个类型,reply 和ask,reply就是机器人回复的记录,ask就是输入的关键字,reply和ask显示的方式不同,是通过动态面板的两个状态切换实现的;

3、至于聊天内容的自动上翻,是通过聊天内容放到一个动态面板里面,如果动态面板的高度超过内容区域的区域,则动态面板自动往上移动;

【原型设计】

1、拖入标题栏、中继器、消息输入框和一个发送按钮,消息输入框命名为input,这个步骤比较简单,就不详细介绍;

2、中继器里面的数据只保留一条,删除其他两条,数据源如下所示:

3、进入中继器,在矩形前面拖入图片元件,作为回复消息的头像,拖入一一个三角形,与原有的矩形组合,背景改成绿色,并且命名该输入框为reply;

5、把第2步中制作的元件选中,转换为动态面板,转换完成以后,第二步添加的步骤成为动态面板的stat1;

6、在动态面板中增加stat2,stat2中的元素如下所示:

【交互设计

1、修改中继器的【每项载入事件】,如果type=reply,则面板切换到stat1显示,并且设置显示内容为message列对应的内容;

     如果type=ask,则面板切换到stat2显示,并且设置显示内容为message列对应的内容;

   

2、设置发送按钮的点击事件,如果输入是A,往中继器增加两条记录:

     A、则往中继器里面增加ask类型的记录,内容是输入的内容;

     B、在中继器里面增加reply类型的记录,内容是“你输入的是A”

    如果输入的是B,按照上面的操作完成;

   因为这是一个演示,所以我只做了两个关键词,大家在制作的时候,可以根据自己的需求进行关键词的设置;

3、增加一个刷新按钮,设计按钮点击事件,当按钮单击的时候,触发内内容区域移动的动作;

4、最后一步, 每次点击【发送】按钮,都触发【刷新】按钮点击动作

到了这里,原型就做好了。

回复【入门】 ,获取零基础Axure快速入门视频教程;

回复【安装】 ,获取安装程序;

回复【练习】 ,获取练习案例;

回复【高保真】,获取高保真原型;

关注微信公众号【猿型库】,获取更多优质Axure资源;

发布了14 篇原创文章 · 获赞 3 · 访问量 6813

猜你喜欢

转载自blog.csdn.net/letmeflee112/article/details/104830053
今日推荐