互联网产品经理是如何使用axure原型设计工具制作翻牌效果的?

axure 教程

所谓翻牌,即是卡牌的翻转,通过模拟卡牌的的翻转,可以让展示更加生动逼真。虽然平时在使用互联网中比较少看到这种交互,但是还是存在的,比如说wps的有奖签到。这一章就教教大家如何使用axure原型工具制作翻牌。

axure 教程

第一步:拖拉摆放好一个动态面板,面板中有state1和state2两种面板状态,state1面板状态中放置一个灰底黑框的矩形,state2面板状态中放置一张十二生肖中鼠的卡通图片。并将此动态面板命名为“鼠”。

axure 教程

第二步:为该动态面板添加鼠标点击时用例,在用例中添加4个动作

1、相对移动“鼠”x轴方向200,y轴方向0,动画为线性,时间为300毫秒

2、设置“鼠”的面板状态为state2,进入动画为向右翻转1000毫秒,推出动画为向右翻转1000毫秒;

3、将“鼠”置于顶层

4、禁用“鼠”

axure 教程

第三步:复制粘贴11份,分别将动态面板改名为“牛”、“虎”、“兔”、“龙”、“蛇”、“马”、“羊”、“猴”、“鸡”、“狗”和“猪”,同时也分别将state2面板状态中的图片换成相应生肖的卡通图片。不过,大家要注意各个生肖动态面板的摆放层次。

axure 教程

到这里就制作完成了,点击预览并点击卡牌就可以看到翻牌效果了。同时也可以随时关注【牛B产品经理:http://niubipm.cn】,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://niubipm.cn/a/chanpinsheji/Axure/2018/0526/217.html