Axure交互动效设计教程：引导页滑动效果

2023-04-1909:49:20原型设计Comments1,499 views字数 1641阅读模式

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

前期准备

·在之前项目基础上将Page3改名为引导页->左边元件库中找到动态面板->单击鼠标左键选中不松手拖入页面中->右边样式面板中修改宽为375，高为667->取名为PM文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

·选中PM动态面板->双击鼠标左键->进入面板状态管理器->选中State1->双击鼠标左键->进入PM面板/State1面板中（这时会看到屏幕中与一个蓝色长方形虚框）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

·左边元件库中找到动态面板->拖拽入页面中->右边样式面板中修改,宽为1125，高为667（这里以引导页3页的数量来建立的，此刻建立的宽=3*375），并取名为捆绑文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

·选中捆绑动态面板->双击鼠标左键->进入面板状态管理器->选中State1->双击鼠标左键->进入捆绑面板/State1面板中（这时是会看到屏幕中与一个蓝色长方形虚框）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

·左边元件库中找到动态面板->拖拽入页面中->右边样式面板修改,宽为375，高为667，并取名为引导页一（引导页二和引导页三也是如此操作，大家自己动手操作加深印象）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

·选中引导页一->双击鼠标左键->进入面板状态管理器->选中State1->双击鼠标左键->进入引导页一/State1面板中（这时会看到屏幕中与一个蓝色长方形虚框）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

·左边元件库中找到矩形->拖拽入页面中->右边样式面板中修改,宽为375，高为667，给一个填充色（颜色随意），关闭引导页一/State1页面文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

·选中引导页二->双击鼠标左键->进入面板状态管理器->选中State1->双击鼠标左键->进入引导页二/State1面板中（这时会看到屏幕中与一个蓝色长方形虚框）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

·左边元件库中找到矩形->拖拽入页面中->右边样式面板中修改,宽为375，高为667，给一个填充色（颜色随意），关闭引导页二/State1页面文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

·选中引导页三->双击鼠标左键->进入面板状态管理器->选中State1->双击鼠标左键->进入引导页三/State1面板中（这时会看到屏幕中与一个蓝色长方形虚框）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

·左边元件库中找到矩形->拖拽入页面中->右边样式面板中修改,宽为375，高为667，给一个填充色（颜色随意），关闭引导页三/State1页面文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

前期的准备工作就这么多，下面我们来添加交互效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

交互效果

·进入捆绑/State1面板中->选中引导页一动态面板->双击鼠标左键进入面板状态管理器->选中State1->双击鼠标左键->进入引导页一/State1面板中）->选中矩形>右边属性面板中选中向左拖动结束时（如果没有请单击更多事件）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

·在左边添加动作中找到移动单击->选中组织动作中的移动->编辑动作中选择捆绑->移动设置相对位置，X=-375，Y=0（在交互中向左是负数，向右是正数），动画线性->单击确定文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

·进入捆绑/State1面板中->选中引导页二态面板->双击鼠标左键进入面板状态管理器->选中State1->双击鼠标左键->进入引导页二/State1面板中）->选中矩形->右边属性面板中选中向左拖动结束时（如果没有请单击更多事件）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

·在左边添加动作中找到移动单击->选中组织动作中的移动->编辑动作中选择捆绑->移动设置相对位置，X=-375，Y=0（在交互中向左是负数，向右是正数），动画线性->单击确定文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

·回到引导页二/State1面板中->选中矩形->右边属性面板中选中向右拖动结束时（如果没有请单击更多事件，第二页可以向左滑也可向右滑，所以要设置两个）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

·在左边添加动作中找到移动单击->选中组织动作中的移动->编辑动作中选择捆绑->移动设置相对位置，X=375，Y=0（在交互中向左是负数，向右是正数），动画线性->单击确定文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

·回到引导页三/State1面板中->选中矩形->右边属性面板中选中向右拖动结束时（如果没有请单击更多事件）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

·在左边添加动作中找到移动单击->选中组织动作中的移动->编辑动作中选择捆绑->移动设置相对位置，X=375，Y=0（在交互中向左是负数，向右是正数），动画线性->单击确定文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

Axure交互动效设计教程：引导页滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

好了所有的交互效果就完成了，点击预览可以看一看哦！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35752.html

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

Comment

匿名网友 填写信息

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

确定