APP聊天的界面可以说是APP里面最常用的原型页面之一，除了我们熟知的社交APP，例如微信、QQ外，其实基本上所有APP里面都有聊天的原型页面；所以今天作者就教大家，如何用中继器做一个高保真的聊天对话原型。
一、效果介绍
二、材料准备
中继器1个，图片两个，矩形两个，输入框1个，语音图标一个，发送按钮一个。
中继器内材料需要图片两个（对方头像，我方头像），矩形2个（对方对话内容，我放对话内容）。
如下图所示摆放（实际是两个放在同一y值）：
三、中继器表格
WHO是分清谁的对话，如果值为me，就是我方说的，否则则为对方说的，下面交互会详细说明。
content是对话的内容。
如下图所示填写完整即可：
四、交互设置
1. 中继器每项加载时
1）隐藏我方或者对方的头像+对话内容
因为一行只能有一方讲话，所以如果who==me，这时我们需要隐藏左边对话（对方头像+对方对话内容）；否则就隐藏右边对话（我方头像+我方对话内容）。
然后我们要将表格中content的内容设置到对话矩形内，如果who==me，这时我们设置我方对话内容的文本==item.content；否则就设置对方对话内容==item.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]]表示。
以上就是本期分享的全部内容，谢谢阅读。
作者：梓贤vigo；
微信公众号：Axure高保真原型，分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容
本文由微信公众号：Axure高保真原型 授权发布，未经许可，禁止转载
