这是一个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源文件:红包源文件