快好知 kuaihz

Axure RP 9 教程:模拟微信系列(2)

今天给大家送上模拟微信系列第二篇,我们使用简单的函数组合来达到我们想要的显示效果,只要懂得其原理,我们就可以使用axure提供的函数做更多的效果。另外,我们展示使用更多的交互来满足微信消息列表消息的变化效果。

效果图

第一,我们注意消息列表后边的消息变化,显示的时间是HH:MM,正常我们使用Axure自带的函数是没法显示小时:分钟这样的时间效果的,因此我们使用小技巧,函数组合来实现更满足微信效果的时间显示方式。

第二,我们做一个小细节,让每次收到新消息或者发送新消息的时候,在微信列表上都能看到最新的一条消息

制作原理

我们知道,在使用axure函数的时候,需要将函数用[[]]框起来,而我们的案例是将两个函数用[[]]框起来后,中间使用其他的符号连接起来。另外,我们接上一篇文章,我们点击发送btn的时候,把消息带到消息列表的位置,以满足更细致的交互需求。

本案例其实比较简单,下边就直接讲操作步骤吧。(感觉相对熟练的铁子们已经会了,哈哈)

操作步骤:函数组合

在发送btn处增加一个交互,设置文本,让显示时间的位置显示文本[[Now.getHours()]]:[[Now.getMinutes()]],一个是获取当前时间的小时数,一个是获取当前时间的分钟数,中间用冒号连接,这样显示的效果就成了HH:MM这样的效果,更符合微信现有的显示方式。

本案例中,我们页面中有两个微信列表,那么就需要注意,点击任意一个发送按钮的时候,需要将时间带到两个微信列表的时间位置。(本案例中还增加了每次发完消息消息输入框自动清空和无法发送空白消息交互,大家可以自行研究)

操作步骤:消息列表

在发送btn处,点击发送,每次都把发送的消息内容带到微信消息列表对应的位置即可,带文字的方式也很简单,只要一个局部变量即可,这一步骤在之前的很多案例中都有提到。

总结一下,局部变量就是在这一个交互里面设置的变量,该变量只对这一个交互负责,一般使用局部变量来记元件文字,元件选中状态等居多,我们下边直接展示交互即可。

同样需要注意,我们案例中有两个微信列表,我们在设置交互的时候需要考虑两个用户的微信列表同步变化,因此在设置文字的时候需要分别选择两个用户微信列表的对应的元件。

结语

每一期的原型都会保留之前的交互,因此只要下载最新一期的原型即可涵盖之前设置的交互,下载链接:

https://pan.baidu.com/s/11_xbtWHTkXgPewTQFHw4Rg

密码:rxlg

温馨提示:该文件需要使用Axure 9打开哦。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:模拟  模拟词条  教程  教程词条  系列  系列词条  Axure  Axure词条  RP  RP词条  
原型

 Axure教程 | 云盘案例原型...

今天和大家分享一个后台文件管理demo,包括图片管理、视频管理、音乐管理、文档管理和其它文件管理。这个demo也可以看做云盘、网盘的demo。该原型交互效果齐全...(展开)

原型

 Axure教程:实现分类栏拖动效...

笔者在本文中介绍了如何用Axure实现分类栏拖动效果的操作步骤,以及实现过程中的一些心得体会。操作步骤1. 一个转换为动态面板的矩形这里需要注意,转换为动态面板...(展开)

原型

 Axure教程:12306图片验...

网上关于12306图片验证码的吐槽已经是铺天盖地,当然,现在的12306图片验证码已经不像以前那么变态了。不过鹏哥心里一直有个心结,纵使它如何变态,我都想用Ax...(展开)