今天教大家用Axure做一个聊天对话界面。该原型使用简单,只需要填写中继器表格即可直接使用。有疑问或者喜欢该原型的小伙伴们可以在评论处给我留言哦。
其中效果包括:
查看不同人不同的聊天记录
未查看聊天记录提醒
对话内容文本框自适应中文字数,自动更改尺寸
发送新的聊天内容,即使更新列表(demo上做了10组对话记录为上线,有需要的可以自行增加)
原型演示地址:https://muf9ia.axshare.com
效果演示 1. 查看聊天记录 2. 发送对话内容 使用 ****** 完成后,只需要填写一个“内容中继器”既可以完成此效果,非常方便。中继器内容包括头像,名称、日期,对话内容。
*** 教程 1. 中继器材料列表中继器材料:头像图片、名称文本、最后一条聊天记录文本、时间,提示红点。
如下所示:
对话记录中继器材料:我的头像和对话框,对方的头像(图片文件即可,交互是会重新设置)和对话框。如下所示
2. 列表中继器表格 ***no:序号列,我们按顺序1、2、3、4、5排列下去即可。中继器每项加载时,按no升序排列。然后鼠标单击列表中继器里的内容时,设置其他当前行的序号为1,其他行的序号在原来的序号+1,这样就可以点击之后,让他排到最前了、
picture:图片,这里导入每个人的图片。中继器加载时,设置头像图片=picture
name:名称,这里写入每个人的名称,中继器加载时,设置名称文本=name
time:时间,这里输入最后对话时间,中继器加载时,设置时间=tmie
number:这个是未查看的新信息,中继器加载时,如果number=0隐藏提示红点,否则设置红点文本=number
textme1-10:这个是记录我方对话记录,后续会用到。这里需要做一个判断,如果这条是最后一条,则设置最后一条聊天记录等于此文本
text1-10:这个是对方的对话记录,后续用到。这里需要做一个判断,如果这条是最后一条,则设置最后一条聊天记录等于此文本
3. 对话记录中继器表格 ***这个很简单,只需要两行,而且什么都不用填,交互的上后,列表中继器会把内容传过来。
who:指代我方还是对方,如果who=me,指代我方,隐藏对方头像和对话框,如果不是who不等于me就是对方,隐藏我方头像和对话框。
content:对话内容,设置我方和对方的文本框内容=content即可,因为另一个隐藏了,所以为了方便快捷,直接设置两个都是,就可以不用分情况。然后这里要做一个自适应才美观,首先用length函数计算出content的字符长度,再按照不同长度的字符设置文本框的尺寸即可。
4. 点击列表进入详细页面这个交互有点复杂,简单的说一下思路,其实就是把列表中继器里的text1-10和textme1-10,添加到对话记录的中继器里面。
实现方式是鼠标单击列表某一行时,依次在对话记录中继器内添加行即可。text1-10,who为空,content=text;textme,who=me,content=textme
完成后隐藏列表中继器,显示对话记录中继器即可。
5. 发送消息这里首先要做一个输入框和按钮,样式如下:
点击发送按钮的时候,对话记录中继器新增一行,who=me,content=输入框的内容。然后清空文本框文字即可。
最后还有最重要的一步,也是最难的一步。因为这个中继器不会保存,所以我们返回到列表就没有了,这时要把这里新增的信息更新到列表中继器里面。因为这里都是我方发出去的,所以只需要更新行textme1-10的内容就可以了。这里需要做一个判断,就是textme和text最后一组对话时哪组,然后更新内容到后面一组即可完成。
今天的分享到这里就结束了,喜欢原型或者有疑问的小伙伴们可以在下方评论处给我留言哦,我们下期见。
新手站长留意!交友老站长三大初级错误千万别犯 值得一看,作为博主的新伴侣,认识博主已经一年多了,在成为博主助手的进程中经验了很多荆棘和荆棘。到今朝为止,固然他外貌上是一个独立的新手站长,但他没有太多办...
对教育机构来说,利用短视频运营进行营销已经成了行业的共识,那么对缺乏短视频经验的机构来说,要怎么做冷启动呢?又要注意些什么呢? 你觉得对于教育公司来说是教研难,还是营销更难? 教研实力决定一个教育...
文章梳理了WPS的商业化探索历程,从办公资源的4个内容变现阶段深入分析了办公资源的发展与优化。 WPS自上市以来,股票在2020年开年初远程办公趋势的红利下,一路大红大紫;这对从小就玩金山打字通的人...
让用户在不同设备和尺寸的屏幕下看的页面显示效果更佳,屏幕空间利用更高,操作体验更统一,交互方式更符合习惯。本文主要围绕什么是响应式,如何搭建响应系统,响应式网站解析 三个部分进行阐述,在项目中提前定义...
“新基建”背景下,企业都在为围绕着技术、商业、组织乃至对外赋能。在这之中,由百度飞桨领头,华为、旷视跟进,先后升级和开源了自家的深度学习平台,国产深度学习平台迎来集中爆发。 1999年,当时42岁的...
最近,肖战粉丝事件让“饭圈文化”成功出圈,备受关注。而本文就从“饭圈文化”切入,对人类追星历史进行了一番梳理,拆解偶像流行与粉丝追星之间的因与果。 最近,科技圈、传媒圈、公关圈、电竞圈等都纷纷向饭圈...