Axure系列教程(一):抖音短视频中小元件的交互动效(上)

零基础学产品,BAT产品总监带,2天线下集训+1年在线课程,全面掌握优秀产品经理必备技能。了解详情

文章分享了抖音短视频中交互动效的制作方法,一起来学习下。

第一章知识点

  • 1.1歌曲封面旋转效果
  • 1.2喜欢按钮交互效果
  • 1.3收藏按钮交互效果
  • 1.4关注按钮交互效果

1.1歌曲封面旋转效果

1.1.1设计思考

这里没什么难点,Axure本身就有旋转的动作,主要就是要调试出图片旋转一圈的时间,让速度在一个舒适的范围即可。

1.1.2素材准备

(1)一张圆形的灰色底板50*50

(2)一个图片元件21*21(大家在制作Axure原型的过程中也要陆续建立自己的元件库,这样复用起来效率会高很多,以下是我自制的图片元件,是不是比官方的好看N倍~面对各种背景色都能轻松拖拽)

最终组合成以下形态

1.1.3交互设置

(1)设置两个元件为组合(音乐封面)

(2)为组合(音乐封面)添加用例:“载入时”(若下方没有,则点击“更多事件”查找)

误区:不要把交互动作设置在页面载入时,而要设置在组合(元件)载入时,这样你在复制元件去另一个页面的时候交互动作才不会消失。

(3)选择动作:旋转

(4)选择旋转的元件:勾选音乐封面中的图片元件

(5)设置参数如下:

旋转角度:3600(即旋转10圈)

锚点:中心

动画:线性,时间:50000(备注:这是旋转10圈的时间,如果你想增加圈数,可以按倍数递增)

大功告成,预览一下。

1.2喜欢按钮交互效果

1.2.1设计思考

图形只有两个状态,所以可以通过元件的选中效果来实现两种状态的切换。

1.2.2素材准备

(1)拖入一个心形形状35*33(如果你的元件库没有,可以关注我的公众号(皮先生PM)回复“限时免费”,就能下载我收藏的近1000个图标)

1.2.3交互设置

(1)选择心形按钮(favorite),在属性中设置它的选中状态,勾选填充颜色为红色。

(2)为心形按钮(favorite)添加用例:鼠标单击时

(3)选择动作:设置选中

(4)勾选元件:favorite

(5)值:toggle(意思是点击的时候切换状态,当元件为选中状态时,单击后变为未选中,反之调换。)

大功告成,预览一下。

当然还有另一种实现方法,且复用性较高,我们将在下一节课和收藏按钮一起讲解,敬请期待。

抖音系列教程课程预告

——知识点分布——

希望本系列教程可以解决产品新人在Axure原型制作上的一些疑惑,不然我这半个月的业余时间就白费了哈哈。

 

 

作者:皮先生(微信号公众号:皮先生PM),多年互联网产品设计经验,专注高保真原型的设计与分享。

本文由 @皮先生 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自PEXELS,基于CC0协议

原创不易,欢迎赞赏(*^▽^*)
4人打赏
评论
有话不说憋着难受
  1. 你皮任你皮,几区打瓜皮?

    回复
  2. 那想请问下如果心下面的文字也想切换另一组文字,还能通过这种方法实现吗?

    回复
    1. 看下我的第二篇文章能不能解决你的问题,利用动态面板来完成http://www.woshipm.com/rp/808614.html

      回复
  3. 有意思,下了原型,自己琢磨不出来,麻烦快点更新教程

    回复
    1. 哈哈 好说

      回复
  4. 本文的原型预览链接:http://www.pmdaniu.com/rp/view?id=UHNSMgBlBzBVbVdjUXlSBA

    另外推荐一个产品经理必备的PRD文档:http://www.pmdaniu.com/rp/view?id=VXYBYVA1AjUDOwU0UnpQGQ

    回复