你以为中继器只是“展示列表”?其实它能模拟完整的交互流程。本文通过微信聊天界面的案例,讲透Axure中继器如何实现信息发送、内容更新与界面响应,是一份可落地的原型设计实操指南。

1.点击文字输入框→ 弹出键盘:设置文本框交互如图上(也可以直接用动态面板做一个整体)

2.发送后键盘自动收回:设置发送按钮交互,如图上(我这直接用的热区其实不太好,这种只能从键盘已经弹出界面开始演示交互,因为热区位置固定)

3.将消息显示在聊天列表中:利用中继器添加行,设置头像、文字,如图上
注意:
1.发送的气泡长度即尺寸长度要和文字贴合,使用函数实现动态变化:

首先中继器交互处设置尺寸宽度,绑定数据,如图上,锚点设置在右边中间。
扩展1.也可以再加一个 min 或 max 限制,比如:[[Min(LVAR1.length*14 13, 300)]],这样气泡不会太宽(超过 300px 就换行)。
2.如果要实现发送和接收的消息,可以:
在数据集中添加一列Type”(比如sent”或received”);根据这一列的值,动态设置气泡的对齐方式(左对齐或右对齐);同时可以设置不同的气泡颜色(发送为绿色,接收为白色)。本文由 @岸上文 原创发布于人人都是产品经理。未经作者许可,禁止转载
题图来自Unsplash,基于CC0协议
相关文章









猜你喜欢
成员 网址收录40418 企业收录2986 印章生成263572 电子证书1157 电子名片68 自媒体91237