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

honghu2

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协定。