axure商城

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

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

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

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

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

1. B哥叫Bonnie发红包

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

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

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

3. 输入钱、留言

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

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

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

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

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

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

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

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

Axure8.0实现简易微信红包交互教程 附源文件
可以看到大部分的交互都在如下图的面板中

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

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

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

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

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

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

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

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

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

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

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

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

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

给TA打赏
共{{data.count}}人
人已打赏
高级教程

用Axure制作产品需求文档PRD的一个实例

2015-12-7 14:14:04

高级教程

Axure经验分享:如何用Axure快速绘制各种icon?

2016-2-26 14:46:23

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索