加入收藏 | 设为首页 |

黄天崎-Axure RP 9 教程:模仿微信系列——音讯对话作用

海外新闻 时间: 浏览:149 次

如何用Axure RP 9做出微信的音讯对话作用呢?就在模仿微信系列教程。

如何用Axure RP 9做出微信的音讯对话作用呢?就在模仿微信系列教程。

今日给咱们简略演示一个模仿微信教程,接下来会逐步完善模仿微信的更多细节。

本次教程咱们模仿的内容,包含模仿使用中继器完结音讯对话,一起显现最新一条音讯的收到时刻或许发送时刻。

一、结构建立

由于接下来会更深层的去做一些内容,因而本次咱们先建立好一些结构,以便后期持续添加新的交互:咱们需求一个动态面板,里边添加五个状况,别离用来显现四个一级菜单和对话页面。

咱们需求四个中继器,用于完结音讯对话的作用,一起微信的导航菜单放置在动态面板外边。考虑到有些页面不会看到微信底部菜单,因而在进入这些页面的时分需求将底部菜单躲藏或许置底。

御蝶坊官网

由所以模仿微信,因而咱们需求模仿两边信息交互的作用,所以咱们需求两个微信面板。在这儿咱们需求留意,由于页面内放置两个面板会导致元件数量翻倍,因而咱们要对需求设置的元件命名,便利咱们办理。

相同,咱们需求区别元件归属于用户1仍是用户2,因而个人主张在元件命名的时分,在称号后边写上该元件归属于用户1仍是用户2。

现在咱们选用这种结构,后期再添加更多交互的时分可能会进行调整,不过这都是后话,不着急。

二、交互进程教程 1. 单选作用

如图所示,咱们看到咱们点击一个菜单的时分,该菜单点亮;点击别的一个菜单的时分,另一个菜单点亮,而之前点亮的菜单撤销点亮。这个进程其实叫选中与撤销选中。

一起,四个菜单一起只能选中一个,因而这四个菜单是作为一个选项组呈现的,就像Ra黄天崎-Axure RP 9 教程:模仿微信系列——音讯对话作用dio Button(单选框)。

操作进程:

咱们挑选菜单(icon+text),新建交互里边设置选中作用;选中时,挑选色彩,咱们这儿对底部菜单选中时设置了“爱心绿色”。

接下来咱们挑选一个现已设置好选中作用的icon,按下Ctrl+C,挑选其他的需求相同作用的icon,按下Ctrl+Alt+V,这便是Axure RP 9的格局刷(Mac体系也是这几个按键,来回测验就试出来了)。

接下来,咱们设置鼠标点击时,选中当时元件。

这样,就完结了鼠标单击的时分,菜单变成咱们设置好的绿色。

可是相同也有问题,咱们点击多个菜单的时分,咱们都会变成绿莹莹的心爱姿态,这明显不是正常状况的。咱们要的是每次点击之后只要一个是绿的。

这时分咱们只需求选中四个菜单,点击右键,挑选设置为选项组,这样,这四个菜单就只能一起选中一个了。

不适用选项组也能够,咱们能够做成点击一个菜单时,其他菜单撤销选中就能够了。黄天崎-Axure RP 9 教程:模仿微信系列——音讯对话作用当时我便是这样做的,成果被总监一顿骂,让我买本Axure教程去看,顽强的挑选了自己写一本。

2. 音讯对话作用

如文章最初gif图所示,咱们看到咱们发送一条对话的时分,在咱们自己的列表内,音讯在右边;在对方的列表内,我的音讯就在左面。由于,咱们需求两个微信页面来模仿该作用。相同,咱们挑选用中继器,由于中继器能够添加新的内容。

操作进程:

在动态面板的音讯内容状况页面内设置交互,咱们需求添加两个中继器,添加音讯输入框和发送btn。

先讲中继器,咱们中继器内需求三个元件,一个是用户头像,一个是音讯对话框,一个是用于美化的小箭头。

如图所示:

重点是音讯对话框,给音讯对话框命名,便利设置的时分选取。咱们选中中继器,将中继器数据清空,只留下一列text即可,然后为中继器设置交互;每项加载时,设置文字到音讯对话框,内容为[[Item.text]],其间text便是中继器的内容列text。

如图所示:

这时分,中继器的数据设置完结。

假如咱们在中继器款式里边添加数据,会发现里边的对话框会新增一个,对话框内容便是咱们新增的内容。

接下来,咱们设置发送音讯的交互。咱们选中之前做好的元件:发送btn,设置成鼠标点击时,为中继器新增行,在text上添加函数,[[A]],A为局部变量,代表的是输入框的文本。

如图所示:

对上边的交互再解释一下,我为交互进程做了稍微的润饰:当输入框内容黄天崎-Axure RP 9 教程:模仿微信系列——音讯对话作用为空时,让音讯发送失利,因而在发送btn上添加了判别条件。

别的,每次发送完结后,让现已输入的音讯清空,便于下次发送音讯。因而设置了输入框清空的交互,下边黄天崎-Axure RP 9 教程:模仿微信系列——音讯对话作用又添加了设置时刻。不过由于设置时刻本期做的不够好,因而这儿就先不讲了。

这个时分,咱们中继器发音讯做完了,那么接下来怎样完结微信之间音讯互通呢?

这儿用的办法,很原始,便是发送btn操控多个中继器的方法。咱们点击发送按钮,一起操控两个中继器,在两个用户的微信面板内一起发送音讯即可——这个无法截图,就不给咱们看图了。

下载链接:https://pan.baidu.com/s/1e6EnOv-PiNDnJBnLjMwLPg

暗码:01j1

作者:PM Silence,大众号:他们现已在路上了

本文由 @PM Silence 原创发布于人人都是产品司理。未经黄天崎-Axure RP 9 教程:模仿微信系列——音讯对话作用许可,制止转载

题图来自Unsplash,根据CC0协议