Axure RP8 学习笔记二（实现移动端页面拖动效果）

概述

距离上一篇更新也过去了比较久的时间，因为公司最近一段时间的核心业务在于推广，因此自己也会时不时跳出产品参与到推广工作中来，再回到产品中来也有了不同的认识。因此最近这段时间的文章就简单介绍下自己在近期利用Axure实现的一些简单的功能以及实现方法。本篇是介绍利用Axure实现移动端页面的拖动效果。

问题描述

我们在用Axure实现网页端页面原型设计时我们往往不用太担心一个网页的页面很多很长怎么办，因为到时候预览原型的时候我们只需要用鼠标滚轮滚动便可以查看原型的全部内容而不用担心它的显示效果。

而当涉及到移动端原型设计的时候，就没有这么简单了。当我们想要在一个固定高度的手机壳中展示很多的内容的时候，如果碰到简单粗暴的设计者，那我们的设计图往往会变成下面这样。

粗暴的原型图

固定高度的手机壳里需要放很多的内容，于是我们就把手机壳一拉伸就好了。这很粗暴，能解决问题，但却不那么美观。如果能像我们真实使用手机一样在一个固定高度的手机壳里用鼠标拖动页面就好了。就像下面这样的效果。

能拖动的原型图

解决方案

我想这样的问题应该很常见，所以相信Axure必然是有提供解决方案的。搜索后发现解决方法还是有很多的，我也参考了一些资料，就自己所采用的方法的操作步骤做一个简单介绍。

核心思路

1. 移动端显示的页面是固定尺寸的，因此我们需要使用一个动态面板，使它展示固定高度的内容。
2. 我们需要展示的页面的高度是超长的，因此我们需要把这个页面放到第一点所提及到的动态面板中。
3. 由于需要展示的页面需要能被拖动，所以整个超长的页面也需要是一个动态面板。
4. 所以整体的实现方案是一个固定高度的动态面板中嵌套了一个包含整体展示页面的动态面板。
5. 我们拖拽移动端的页面的时候，如果一直往下拖动直到脱离顶部再松手的时候，它一般会“弹”回到最上面的位置。同理，如果一直往上拖动直到脱离底部的话，它也会“弹”回到最下面的位置。所以我们需要设置离开顶部或底部时，自动返回原位的交互。

准备工作

我们需要准备一个固定高度的iPhone手机素材，一个顶部导航栏以及一个底部导航栏。这是基本的手机app的结构。

准备工作

步骤一

我们需要添加一个固定高度的动态面板，这个面板相当于我们的屏幕，因此取名为「固定页面」。

添加固定页面的动态面板

步骤二

编辑这个动态面板的State1状态，在State1状态中再添加一个动态面板，这个动态面板就需要展示所有的内容，我们就命名为「展示内容」，所以它的高度会超过「固定页面」这个动态面板的高度。

添加展示内容的动态面板

步骤三

编辑展示内容这个动态面板的State1状态，然后在编辑页面中添加好相应的展示内容。

添加展示的内容

步骤四

在做好了上述的工作之后我们会发现手机的屏幕不足以展示所有的内容，所以我们接下来需要为我们的原型添加拖动事件。
首先为「固定页面」这个动态面板添加拖动事件。

为固定页面添加拖动事件

这样的四步完成之后，我们的展示内容已经可以进行拖动了，只是和手机上的真实体验还有些差距，离开顶部或底部后并不会回到相应的位置，我们接下来需要对其进行优化。

拖动手机屏幕

步骤五

为页面添加离开顶部或底部后，松开拖拽后自动恢复到正确位置的效果。

首先需要为「固定页面」这个动态面板添加拖拽施放(OnDragDrop)事件，并且设置这个事件发生的条件，如下图所示。

为固定页面添加拖动释放事件

接下来则是为这个事件添加相应的执行结果，需要将「展示内容」这个动态面板恢复到相应的位置。

展示内容恢复到正确位置

这样子设置完成之后当我们拖拽页面脱离顶部导航栏的时候页面已经能够自动回复到正确位置。展示效果如下图所示。

拖动后回顶部原位

步骤六

接下来需要设置拖拽页面脱离底部导航栏的时候页面自动回复到正确的位置。设置的原理和上面的相似。

设置相应事件的条件

设置展示内容动态面板条件

设置相应事件触发的结果，值得一提的是，-115为「固定页面」这个动态面板的高度减去「展示内容」这个动态面板的高度，我这里为316-431 = -115。

设置回到底部

步骤七

非常细节的一小步，需要右键点击Case2，将Else If转换为If

切换Else If为If

总结

完成之后的Axure面板设置大概是下图这样子。

完成之后

实现的效果如下图所示。

效果展示

个人感触

这只是一个利用Axure实现了一个很简单的功能，也就是移动端页面的拖动效果，在实现过程中用到了动态面板，也利用到了一些基本事件的设置，包括条件的设置等等。我想虽然实现的功能并不复杂，但对于初学者来说这也是一个比较好的实战案例。

参考资料

如何用Axure实现移动端页面拖动效果