1. 主页 > 行业资讯 > 设计文章 >

Axure中级教程:使用中继器作为聊天应用原型

编者按:我们经常使用的各种应用中都有聊天界面,比如最常见的微信聊天、淘宝客服沟通等。,都是通信和聊天界面;本文作者与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]]表示。

��վ�����

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/533.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息