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

0 评论 8181 浏览 5 收藏 6 分钟

编辑导语:我们经常用的各种APP里都有聊天界面,比如最常见的微信聊天、淘宝客服的沟通等等,这都是沟通聊天的界面;本文作者分享了关于用中继器做聊天APP原型,我们一起来看一下。

APP聊天的界面可以说是APP里面最常用的原型页面之一,除了我们熟知的社交APP,例如微信、QQ外,其实基本上所有APP里面都有聊天的原型页面;例如美团饿了么外卖软件,我们可以和骑手沟通;淘宝京东电商软件,我们可以和店家沟通;其他的软件,我们也能够和客服沟通。

以上所有的沟通页面,都能用到聊天APP的原型;所以今天作者就教大家,如何用中继器做一个高保真的聊天对话原型。

一、效果介绍

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

二、材料准备

中继器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]]表示。

以上就是本期分享的全部内容,谢谢阅读。

 

本文由 @做产品但不是经理 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!