使用 Axure RP 8 进行滑动页面设计

Axure RP 是一个专业的快速原型设计工具。Axure（发音：Ack-sure），代表美国 Axure 公司；RP 则是 Rapid Prototyping（快速原型）的缩写。 Axure RP 是美国 Axure Software Solution 公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。 Axure RP 已被一些大公司采用。Axure RP 的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等，另外，架构师、程序开发工程师也在使用 Axure。

以下简称 Axure:

今天我们就来介绍一下如何使用 Axure 进行滑动页面的设计。滑动页面分为两种，分别是垂直滑动和水平滑动；垂直滑动就是上下滑动；水平滑动就是左右滑动。

在线演示地址：https://pe6n3i.axshare.com

首先我们需要明白一个道理，我们之所以需要滑动页面来获取信息，是因为手机本来的大小不足以让我们看到所有的内容；假设我们手机大小为一级页面，那么所有的内容就是二级页面；例如淘宝首页，它的二级页面其实是无限大的，因为无论你怎么往下拉永远拉不到底?，所以我们在做原型的时候需要将内容都放到二级页面上，以及页面只是控制显示大小的。

一、垂直滑动

垂直滑动需要两个动态面板，为了区分方便，我们将其命名为一级页面和二级页面。

首先新建一个手机原型：

手机原型

然后拖入一个动态面板 375*646 ，命名为一级页面，这是我们给外界展示的大小。

下面打开一级页面的 state1 ，拖入一个新的动态面板，大小应该是和一级页面宽一样，这里是 375*1120 。

二级页面

最后再打开二级页面的 state1， 添加进去内容就可以了。

二级页面内容

接下来添加交互。

由于我们拖动的是一级页面，所以应该给一级页面添加一个拖动的交互：

拖动交互

一级页面拖动的时候会移动二级页面，移动的方式是垂直拖动；然后我们还添加了一个边界。边界的计算方式有多种，这里以顶部的位置为基准：如果顶部是 0 坐标的话，那么当所有的内容都拖完之后的顶部坐标应该是 646-1120 = -474（一级页面的长减去二级页面的长），也可以按照底部为参考，那么区间范围就是[646,1120]（一级页面的长，二级页面的长），道理是一样的。

只需要给一级页面添加交互，二级不需要，到此就实现了垂直滑动。

二、水平滑动

水平滑动原理

所以我们新建动态面板，手机展示的内容为一级面板。

首先拖入一个一级动态面板 375*600 ，命名为一级页面。

一级页面

接下来大家思考一下，我们还需要新建一个二级面板吗？

生活中咱们的手机左右滑动一般是切换页面，而不是拖动手机屏幕，所以这里不需要两个面板，只需要多个状态。

接下来新建一个面板状态。

面板状态

然后往两个状态里添加内容即可。

然后选中一级页面，为其添加交互事件：

添加交互

state1 的时候需要往左滑至 state2 ，state2 的时候需要往左滑至 state1 。

在线演示地址：https://pe6n3i.axshare.com