肥猫SEO论坛»论坛首页 › 行业交流 › 软件下载 › Axure中级教程：用中继器做聊天APP原型

高端网站建设可签合同可上门沟通	站群程序定制/蜘蛛池租用	全行业SEO接单QQ1624516415	全行业SEO接单QQ1624516415
2000+站点外链一键通发	原创SEO文章代写【点击】	点击加入本站VIP 发帖免审核	广告位招租

honghu2

23万积分	0 好友	7万主题

发消息

Axure中级教程：用中继器做聊天APP原型

TA的其它主题

发表于 2021-9-26 15:59 | 查看: 554| 回复: 0

Axure中级教程：用中继器做谈天APP原型

编纂导语：咱们常常用的各类APP里都有谈天界面，好比最多见的微信谈天、淘宝客服的沟通等等，这都是沟通谈天的界面；本文作者分享了关于用中继器做谈天APP原型，咱们一块儿来看一下。

APP谈天的界面可以说是APP内里最经常使用的原型页面之一，除咱们熟知的社交APP，比方微信、QQ外，实在根基上所有APP内里都有谈天的原型页面；小蝌蚪比方美团饿了么外卖软件，咱们可以和骑手沟通；淘宝京东电商软件，咱们可以和店家沟通；其他的软件，咱们也可以或许和客服沟通。

以上所有的沟通页面，都能用到谈天APP的原型；以是今天作者请教大师，若何用中继器做一个高保真的谈天对话原型。
1、结果先容
原型预览地点：

2、质料筹备
中继器1个，图片两个，矩形两个，输入框1个，语音图标一个，发送按钮一个。

中继器内质料必要图片两个（对方头像，我方头像），矩形2个（对方对话内容，我放对话内容）。

以下图所示摆放（现实是两个放在统一y值）：

3、中继器表格
WHO是分清谁的对话，若是值为me，就是我方说的，不然则为对方说的，下面交互会具体阐明。

content是对话的内容。

以下图所示填写完备便可：

4、交互设置1. 中继器每项加载时
1）暗藏我方或对方的头像+对话内容

由于一行只能有一方发言，以是若是who==me，这时候咱们必要暗藏左侧对话（对方头像+对方对话内容）；不然就暗藏右侧对话（我方头像+我方对话内容）。

然后咱们要将表格中content的内容设置到对话矩形内，若是who==me，这时候咱们设置我方对话掌上交友内容的文本==item.content；不然就设置对方对话内容==ite维维下载网m.content。

2）设置对话矩形自顺应巨细

因为axure的矩形在演示的时辰不会自顺应文字的巨细，以是这里咱们要按照分歧的对话内容设置对话内容矩形的巨细，这内里触及函数会有一点难。

咱们默许设两个对话矩形的尺寸为253，高是38。用14号字；然后咱们发明一行可以写17其中文汉字，然背工机端输入对话输入框通常为少于80个字的，以是咱们可以分一下几种环境：
第一种环境：17≥字数，这里高稳定依然是38，宽度是14*字数长度+15第二种环境：34＞字数≥18，这里至关于两行，宽度连结253稳定，高度=14*2+24=48第三中环境：51＞字数≥35，这里至关于3行，宽度连结253稳定，高度=14*3+24=66……第n种环境：17*n＞字数≥17*（n-1），这里至关于n行，宽度连结253稳定，高度=14*n+24
这里要提到一个函数length，他可以计较文本的长度，连系上面的前提，便可以完成对话内容的自顺应，完成后以下图所示。

2. 发送按钮事务
这里起首要果断，输入框是不是为空，若是不为空值是，咱们做添加行的交互，who由于是我方对话内容，以是填写me；content的内容即输入框的内容，输入框内容咱们用局部变量来[[LVAR1]]暗示。

以上就是本期分享的全数内容，感谢浏览。

本文由 @做产物但不是司理原创公布于人人都是产物司理，未经作者允许，制止转载。

题图来自Unsplash，基于CC0协定。

收藏0 回复显示全部楼层道具举报

返回列表

		自动登录	找回密码
密码			立即注册