在APP功能的设计中,一个功能页面的跳转最好不超过三个页面,有时候为了设计更友好,就需要一些免弹窗设计交互,好,今日说法就到这里,教学开始!

看看效果:

Axure教程:简单易学免弹窗友好交互动效

通过本教学能学到什么?

  1. 图层的应用
  2. 交互的回溯
  3. 动态面板遮罩的妙用
  4. 清奇的思路

第一步绘制所需元素

  1. 绘制中部区域,坐标(0,166),尺寸375*266,命名【分隔栏】
  2. 绘制圆形按钮,坐标(300,360),尺寸50*50,命名【按钮】

Axure教程:简单易学免弹窗友好交互动效

第二步制作交互

点击【按钮】,移动【按钮】到日志列表中心(163,525),动画线性200ms。

等待200ms,设置【按钮】文本为空;设置尺寸【按钮】500*500动画线性300,锚点中心(能覆盖住日志列表就行)

Axure教程:简单易学免弹窗友好交互动效

看看效果:

Axure教程:简单易学免弹窗友好交互动效

效果看着还不错,但我们发现【分隔栏】被挡住了,于是,添加动作,设置【分隔栏】置于顶层。

Axure教程:简单易学免弹窗友好交互动效

看看效果:

Axure教程:简单易学免弹窗友好交互动效

第三步、添加新建内容

画出输入框,按钮,时间;组合这些元素命名【新建内容】组合,然后隐藏【新建内容】组合。

Axure教程:简单易学免弹窗友好交互动效

添加【按钮】动作,显示【新建内容】组合,动画逐渐300ms

Axure教程:简单易学免弹窗友好交互动效

看看效果

Axure教程:简单易学免弹窗友好交互动效

添加取消按钮交互

这个其实很简单,直接复制圆形【按钮】的交互,黏贴在【取消】按钮上,然后理清反向回去的动效流程就可以了。

Axure教程:简单易学免弹窗友好交互动效

看看效果

Axure教程:简单易学免弹窗友好交互动效

第四步、美化最终效果

添加日志列表。

全选所有元件,创建尺寸375*667的动态面板,取消勾选自适应内容。

Axure教程:简单易学免弹窗友好交互动效

看看效果:

Axure教程:简单易学免弹窗友好交互动效

利用动态面板,完美的遮挡住按钮放大的地方,好了今日说法就到这里,下期老司机带你做社交软件,翻一翻的交互动效,有点小难噢~

 

AX223 Axure教程:简单易学免弹窗友好交互动效

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源