Axure RP 9 教程:模拟微信系列——消息对话效果 2019-11-25 20:08:28

随机推荐

神州控股助力延庆、唐山获选2019中欧绿色智慧创新城市

年轻人炒鞋闹剧:中签堪比中彩票,品牌商也跟着搅混水

合资纯电扛鼎之作,昂希诺纯电动锋袭羊城

台风黄色预警:今天上半夜擦过或登陆浙江舟山沿海

听说 中秋+国庆10天加班费能拿到6000多块



最新推荐

跟队记者:法蒂今夏与耐克续约,将穿耐克新款刺客球鞋

《海上钢琴师》上映,医生重温经典时却发现这个细节……小号手眼球一直“颤动”是演技还是“眼疾”?

《求职高手》更名《卑微的老板》

超模姐妹花同框,吉吉穿黑衣帅气有型,贝拉用手挡脸蚂蚁腰抢风头

医保局出手严管!医生,你的这些行为可能被罚



热门推荐

崂山邀你来“赏蓝”

阿富汗首都市民:只有“西瓜自由”没“面包自由”

国家森林防灭火督查组 泾县督查森林防火工作

福特锐界U-Turn 锐意探寻徽州古韵

昊哲论金:黄金短线修正还有新高 原油剑指60美元关口

如何利用axure rp 9实现微信的信息对话效果?这只是模拟微信系列教程。

今天,我会给你一个模拟微信教程的简单演示,然后我会逐步完善模拟微信的更多细节。

在本教程中,我们将模拟内容,包括模拟使用中继器实现消息对话,以及显示最新消息的接收或传输时间。

因为我们将在更深层次上做一些内容,所以我们将首先建立一些框架,以便我们可以在以后的时期继续添加新的交互:我们需要一个添加了五个状态的动态面板来分别显示四个一级菜单和对话页面。

我们需要四个中继器来实现消息对话的效果,微信的导航菜单位于动态面板之外。考虑到有些页面看不到微信底部菜单,在进入这些页面时有必要隐藏或底部菜单。

因为我们模拟微信,所以我们需要模拟双方信息互动的效果,所以我们需要两个微信面板。我们需要注意这里,因为在页面中放置两个面板将使组件数量翻倍,所以我们需要命名需要为我们的管理设置的组件。

同样,我们需要区分组件是属于用户1还是用户2,所以我建议在命名组件时,在名称后写下组件是属于用户1还是用户2。

目前,我们采用这种结构,我们可以在后期添加更多交互时进行调整。然而,这都是事后的想法,不着急。

如图所示,当我们点击一个菜单时,菜单会亮起。当点击另一个菜单时,另一个菜单被点亮,先前点亮的菜单未点亮。这个过程实际上叫做选择和取消选择。

同时,只能同时选择四个菜单中的一个,所以这四个菜单显示为一个选项组,就像单选按钮一样。

操作步骤:

我们选择菜单(图标+文本),并在新的交互中设置选择效果。选择时,选择颜色。当选择底部菜单时,我们在这里设置“绿色爱情”。

接下来,我们选择一个具有所选效果集的图标,按ctrl+c,选择其他需要相同效果的图标,按ctrl+alt+v,这是axure rp 9的格式画笔(mac系统也是键,来回尝试)。

接下来,当我们设置鼠标点击时,我们选择当前组件。

这样,当点击鼠标时,菜单就变成了我们设置的绿色。

然而,也存在一些问题。当我们点击多个菜单时,每个人都会变成可爱的绿色外观,这显然是不正常的。我们想要的是每次点击后只有一个是绿色的。

此时,我们只需要选择四个菜单,右键单击并选择设置为选项组,这样四个菜单中只能同时选择一个。

不适用于选项组也可以,我们可以让它点击一个菜单,取消选择另一个菜单。这就是我此刻所做的。导演骂了我,并让我买一本美术教程。我固执地选择自己写一篇。

如文章开头的gif所示,当我们发送一个对话时,消息就在我们自己列表的右边。在对方的名单中,我的留言在左边。因为,我们需要两个微信页面来模拟这种效果。同样,我们选择使用中继器,因为中继器可以添加新内容。

操作步骤:

要在动态面板的消息内容状态页面中设置交互,我们需要添加两个中继器,添加一个消息输入框并发送btn。

让我们先谈谈中继器。我们需要中继器中的三个组件。一个是用户的头部,另一个是消息对话框,另一个是用于美化的小箭头。

如图所示:

关键是消息对话框。命名消息对话框,以便在设置时方便选择。我们选择中继器,清除中继器数据,只留下一列文本,然后为中继器设置交互。加载每个项目时,文本被设置为带有[·[项目的消息对话框。文本]],其中文本是中继器的内容列文本。

如图所示:

此时,中继器的数据设置完成。

如果我们将数据添加到中继器样式中,我们会发现将会添加一个新的对话框,并且对话框的内容就是我们添加的内容。

接下来,我们设置发送消息的交互。我们选择了之前完成的组件:发送btn,设置它在鼠标点击时向中继器添加一行,向文本添加一个函数,[(a)],a是一个局部变量,代表输入框的文本。

如图所示:

为了再次解释上面的交互,我对交互过程做了一个小小的修改:当输入框为空时,消息传输失败,从而给btn传输增加了一个判断条件。

此外,每次传输完成后,输入消息将被清除,以便于下次传输。因此,设置了清除输入框的交互,设置时间如下。但是,因为设置时间对这段时间来说不够好,我们将不在这里讨论它。

此时,我们的直放站已经发送完消息,那么我们如何在微信之间交换消息呢?

这里使用的方法非常原始,即发送btn来控制多个中继器的方式。我们点击发送按钮,同时控制两个中继器,在两个用户的微信面板中同时发送消息——这里没有截图,所以我们不会给你看图片。

下载链接:https://pan.baidu.com/s/1e6enov-pindnjbnljmwlpg

密码:01j1

作者:王德裕,公共号码:他们已经在路上了

这篇文章最初是由@王德裕aipm发表的。每个人都是产品经理。未经允许禁止复制。

主题地图来自unsplash,基于cc0协议。

网络彩票平台 广东十一选五投注 安徽11选5开奖结果