Axure官方正版
快速原型设计工具

Axure8.0实现简易微信红包交互教程 附源文件

这是一个Axure8.0的教程,不兼容7.0版本,特此提醒!

本文是转载,原文地址:点击查看原文>> 喜欢本文可以关注他们微信号:AxureB

大家新年好,这是猴年第一个教程。红包大家想必发的已经手软,那么B哥这里发一个简易的发红包教程。

大家结合RP一起看一下,这个教程大致分为5个交互:

1. B哥叫Bonnie发红包

2. 那么自然Bonnie很听话的去发红包啦

3. 输入钱、留言

4. 红包发出去啦,B哥很高兴,回赠了一个

5. Bonnie打开B哥给的大红包,哇!这么6,求B哥包养!

交互来说,并不难,初学者都可以用到。里面的部件都是B哥自己做的,想要B哥的material design原创部件库的,多多转发公众号,B哥就送哟~

回过头来分解一下RP,总体来看,整个RP的面板层级不算复杂


可以看到大部分的交互都在如下图的面板中

拉开前置的两个隐藏面板,可以看到下层的触发按钮,点击后切换到交互2

交互2里面进行返回交互1,两个输入框用来显示/隐藏键盘(交互3)

confirm用于切换到交互4,case里面是用于显示切到交互4以后两人的对话

交互4到交互5的入口,在红包上哦

点了就切换到最后一个交互场景了

大家打开这个RP时,需要安装robot字体、Font Awesome字体图标,安装前者是因为我在制作material design部件库时用的是robot字体,不安装字体会发现你们显示的字体跟我图片所示的不一样;安装后者,是因为我使用了字体图标,不安装则无法显示图标,请大家自行度娘。

最后附上本教程的RP源文件:红包源文件

转载请注明出处:Axure中文网 » Axure8.0实现简易微信红包交互教程 附源文件

评论 抢沙发

评论前必须登录!

 

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

购买专业版购买团队版