Axure 8.0 制作手机上下滑动效果教程

2018-12-0321:04:09原型设计Comments2,837 views字数 259阅读模式

1、打开Axure 8.0,在网上找一个手机外壳的图片,然后添加大小和手机屏幕相等的动态面板,命名为“屏幕”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8496.html

Axure 8.0 制作手机上下滑动效果教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8496.html

2、然后双击State1,添加一个矩形,宽度=屏幕宽度,长度任意。然后选中矩形,点击鼠标右键,选择转换为动态面板,命名为“内容”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8496.html

Axure 8.0 制作手机上下滑动效果教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8496.html

3、然后在“内容”动态面板中,搭建你的手机界面。如图,我随便添加了几个Axure自带的原件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8496.html

Axure 8.0 制作手机上下滑动效果教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8496.html

4、然后回到Index界面,选中“屏幕”动态面板,双击【拖动时】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8496.html

Axure 8.0 制作手机上下滑动效果教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8496.html

5、选择【移动】,勾选“内容”动态面板,选择移动为垂直移动文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8496.html

Axure 8.0 制作手机上下滑动效果教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8496.html

6、点击添加边界。顶部<=0。如图。配置完成后,按F5发布一下,查看效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8496.html

Axure 8.0 制作手机上下滑动效果教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/8496.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/8496.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定