今天给大家简单演示一个模拟微信教程，接下来会逐步完善模拟微信的更多细节。
简单介绍一下本次模拟的内容，模拟发送消息，在对方的列表里，同时获取最新消息的发送时间显示在微信列表内。
效果图
制作原理
我们在点击发送按钮的时候，将文本框内的消息带到中继器内，需要注意的是，我们一个发送按钮控制两个中继器，例如，A用户在消息框内输入内容，点击发送，那么在自己的列表内，看到自己发送的消息，在别人的列表内，那自己就成为了别人，因此这时候需要一个发送按钮控制两个中继器，设置不同的颜色和方向，实现发送消息的同时在别人的列表内也显示消息。
另外关于时间问题，点击发送的同时，获取本地时间显示在消息列表内即可，因为时间关系，没有做的很细，但是后续的更新中，我会逐步优化。
操作步骤
第一步：
创建微信框架，用你喜欢的颜色等画出微信的界面即可，你可以画成你喜欢的任意风格。
第二步：
创建四个中继器，其中两个是A用户发送消息用的中继器，另外两个是B用户发送消息用的中继器。A用户发送消息用的中继器一个在左边的微信框架内，靠右摆放，一个在右边的微信框架内，靠左摆放。
中继器所需元件：中继器所需元件只有两个，一个是用来显示文字内容的框，另一个是用来存放用户头像的图片框。
第三步：
创建一个消息输入框，制作好一个btn发送，点击发送的时候，将文本框内的文字带到中继器内即可。同样，在点击发送的时候获取本地时间，将时间带到时间显示位置即可。
因为之前公众号内已经讲述了很多次关于中继器的问题，所以这里就不做太多的讲解，大家可以下载原型自行查看学习。
结语
下载链接：
https://pan.baidu.com/s/1e6EnOv-PiNDnJBnLjMwLPg
密码:01j1
原创文章，作者：王得宇AIPM，如若转载，请注明出处：https://www.pmtemple.com/axurerp/axure-course/10455/
微信扫一扫 
支付宝扫一扫 
评论列表（7条）
哇！这个微信模拟教程太棒了！作为游戏策划，我想到游戏内的聊天系统也可以这样设计呢！(≧▽≦) 中继器双控消息显示的方法真的很实用，难怪之前游戏UI设计中看到类似的效果！学习了！
这个模拟微信的Axure教程太实用了！作为旅行摄影师，我正想为自己的作品集设计一个类似微信的交互界面来展示照片评论和消息。这种中继器控制双界面的思路简直是点睛之笔，可以完美实现照片发送和评论功能！📸✨
这个模拟微信的教程很实用，中继器的双控制思路解决了聊天界面同步显示的核心问题。建议后续可增加消息状态(已发送/已读)和消息撤回功能，更贴近真实产品体验。原型设计时考虑边界情况也很重要，比如超长文本显示和图片消息的处理。
这个模拟微信的交互设计好潮啊！作为品牌主理人，觉得这种实时消息更新的交互逻辑太有用了，可以借鉴到我们的社群运营中。不过感觉时间显示功能还可以更时尚一些，比如加入渐变效果或者自定义字体风格？期待后续更新！
文章不错支持一下吧
@今日头条：谢谢老哥
@今日头条：这教程搞得很秀啊，Axure双中继器控制消息同步的思路挺巧妙，不过用本地时间戳可能会有时区坑，建议加个UTC转换，不然跨时区产品经理看消息时间线会懵逼。