Axure常用交互效果二——拖动效果

亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！

在很多移动端应用中经常会涉及到界面拖动操作，那么产品经理是怎么做出来的？这节课我们就来展示操作，这里会涉及到的知识点有：移动、动态面板。

滑动分为左右拖动和上下拖动，案例中我们分别做了菜单的横向拖动和内页的上下拖动，下边我们以横向菜单的左右拖动为例，进行讲解，更多内容请观看作者视频内容。

课程主题：拖动效果

效果描述：左右拖动，上下拖动

应用场景：横向/纵向菜单、长图、内页等

步骤一：拖出两个矩形，建立界面基本框架

1

步骤二：将小矩形右键转换成动态面板，作为显示内容的窗口

2

步骤三：在动态面板中输入菜单内容，并组合，然后将这个组合转换成动态面板

3

步骤四：新建交互，拖动时选择跟随水平拖动

4

5

步骤五：难点来了！！！

6

我们向左拖动，直到在窗口中显示完菜单的最后一项，观察这时的X坐标：-240 这就表示当我们向左拖动时，到达这个位置就是最低的阈值，那么我们向左拖动的阈值就是-240

7

我们将菜单向右拖动，回到初始位置，正好是向右滑动的极限！如果再往右滑动，那么就会出现空格。初始位置，正好是向右拖动的阈值！！这时我们将鼠标放到尾部，出现了该点的坐标数据，W宽度760，就是向右拖动的阈值，那么我们向右拖动的阈值就是760

8

将上述两个数值录入

9

10

拖动效果的交互设计原理是动态面板和移动的组合应用，再此基础上可以扩展出很多交互效果，例如垂直拖动、水平拖动、延时拖动等，在应用场景中适用于菜单的滑动/拖动、内页、长图等方面，在大型交互设计中也发挥着重要作用，例如车辆轨迹、车辆位置、滚动条、电子屏等等。

相关课程直通车：

Axure常用交互效果二——拖动效果-CSDN直播

Axure常用交互设计一——选中效果_axure设置选中效果-CSDN博客

Axure常用交互效果三——隐藏与显示_axture 点击效果-CSDN博客

Axure常用交互效果四——移动效果_axure怎么做移动-CSDN博客

Axure常用交互效果五——展开与收回_axure折叠收起文本框-CSDN博客

Axure常用交互效果六——滚动效果_axure实现滚动效果-CSDN博客

​​​​​​​Axure常用交互效果七——全屏效果_axure左右两边占满全屏-CSDN博客

** 如有其他相关问题，欢迎私信沟通，关注 结构化知识课堂-CSDN博客**

明天的产品大咖就是你，创作不易，麻烦关注一下，点赞+收藏，感谢大家！