Axure RP 9.0
产品经理必备的快速原型设计工具

Axure RP 9 教程—模拟微信系列1

axure商城
Axure RP 9 教程—模拟微信系列1

今天给大家简单演示一个模拟微信教程,接下来会逐步完善模拟微信的更多细节。

简单介绍一下本次模拟的内容,模拟发送消息,在对方的列表里,同时获取最新消息的发送时间显示在微信列表内。

Axure RP 9 教程—模拟微信系列1

效果图

制作原理

我们在点击发送按钮的时候,将文本框内的消息带到中继器内,需要注意的是,我们一个发送按钮控制两个中继器,例如,A用户在消息框内输入内容,点击发送,那么在自己的列表内,看到自己发送的消息,在别人的列表内,那自己就成为了别人,因此这时候需要一个发送按钮控制两个中继器,设置不同的颜色和方向,实现发送消息的同时在别人的列表内也显示消息。

另外关于时间问题,点击发送的同时,获取本地时间显示在消息列表内即可,因为时间关系,没有做的很细,但是后续的更新中,我会逐步优化。

操作步骤

第一步:

创建微信框架,用你喜欢的颜色等画出微信的界面即可,你可以画成你喜欢的任意风格。

第二步:

创建四个中继器,其中两个是A用户发送消息用的中继器,另外两个是B用户发送消息用的中继器。A用户发送消息用的中继器一个在左边的微信框架内,靠右摆放,一个在右边的微信框架内,靠左摆放。

中继器所需元件:中继器所需元件只有两个,一个是用来显示文字内容的框,另一个是用来存放用户头像的图片框。

第三步:

创建一个消息输入框,制作好一个btn发送,点击发送的时候,将文本框内的文字带到中继器内即可。同样,在点击发送的时候获取本地时间,将时间带到时间显示位置即可。

因为之前公众号内已经讲述了很多次关于中继器的问题,所以这里就不做太多的讲解,大家可以下载原型自行查看学习。

结语

下载链接:

https://pan.baidu.com/s/1e6EnOv-PiNDnJBnLjMwLPg

密码:01j1

他们已经在路上了
赞(0)
转载请注明出处:Axure中文网 » Axure RP 9 教程—模拟微信系列1

购买Axure RP正版授权 终身可用

购买专业版购买协作版