编者按:我们经常使用的各种应用中都有聊天界面，比如最常见的微信聊天、淘宝客服沟通等。，都是通信和聊天界面；本文作者与repeater分享了聊天APP的原型。我们一起来看看。

APP聊天的界面可以说是APP中最常用的原型页面之一。除了我们熟悉的社交应用，比如微信、QQ，基本上所有的应用都有聊天的原型页面；比如美团饿了，可以和骑手沟通；淘宝JD.COM电商软件，可以和店铺沟通；其他软件，我们也可以和客服沟通。

以上所有的交流页面都可以使用聊天APP的原型；所以今天，作者将教你如何用中继器制作高保真聊天对话原型。

首先，介绍效果

原型预览地址:https://mz57nt.axshare.com/#g=1

二、材料准备

一个中继器，两张图片，两个矩形，一个输入框，一个语音图标，一个发送按钮。

复读机里的资料需要两张图(对方的头像，我们的头像)和两个长方形(对方的对话内容，我来放对话内容)。

如下图所示放置它们(实际上，它们放置在相同的y值):

三.复读机形式

WHO是区分谁的对话。如果价值是我，那是我们这边说的，否则是对方说的。下面将详细解释相互作用。

内容就是谈话的内容。

如下图所示填写:

第四，互动设置

1.当中继器的每个项目被加载时，

1)隐藏我们或对方的头像+对话内容

因为一行只能有一方说话，如果who = =我，那么我们需要隐藏左边的对话(对方头像+对方对话内容)；否则，隐藏正确的对话(我们的头像+我们的对话内容)。

然后我们把表格中的内容设置成对话矩形。如果who = =我，那么我们设置我们对话内容的文本= = = 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.发送按钮事件

这里首先要判断输入框是否为空。如果不是空，我们就做加线的交互。因为我们谈话的内容是谁，填我；内容的内容就是输入框的内容，用局部变量[[LVAR1]]表示。

��վ�����