完成点击button的交互之后，我们接下来做左滑右滑的交互。不需要点进具体的面板状态，对“content”动态面板添加交互即可，Axure提供了“向左拖动结束时”和“向右拖动结束时”两个交互状态，我们先选择一个向左拖动结束时，选择设置动态面板，分别勾选“content”和“滑动导航”两个面板。两个面板都选择next状态，并不勾选“向后循环”，因为向后循环的意思是，最后的一个状态的next，会跳到第一个状态，这与我们正常的交互不符。动画效果这里，由于content面板是左右滑动样式，又因为交互状态是向左拖动结束，所以动画应该是向左滑动。“滑动导航”动画交互，选择逐渐就好。整体的流程如下图所示：

　　完成了向左拖动结束时，我们照葫芦画瓢，完成向右拖动结束时。唯一的差别就是，两个面板的状态选择要选“previous”，且由于是向右滑动结束时，所以content的动画效果应该选择“向右滑动”，其他的和向左拖动结束时相同。这样就完成了顶部导航的原型制作。

　　三、抽屉导航

　　抽屉导航的原型实现，应该是这里面最难的一块。在实战中，我们经常会看到抽屉导航的类型，常用的APP里面，网易云音乐、QQ都有这样的抽屉导航，如下图所示：

　　现网中对抽屉导航的使用，也都是大同小异，抽屉导航里面呈现的内容主要是用户个人中心及相关设置，这样设置的原因在于，个人设置本来作为一个大的分类存在，但是它的打开率和点击率并不如其他内容模块的频率高，所以放置在底部导航的话，就有些浪费资源了。设置成抽屉导航，增加了一种漂亮的交互，还增加了APP的可玩性，一举两得。

　　原型实现

　　我们首先观察抽屉导航的交互流程，屏幕左侧左滑or点击“bars”设置按钮，弹出抽屉;抽屉的内容呈现，底部是一些设置的入口，内容部分是收藏、APP换肤等功能入口，并且这里需要注意的一点是，内容部分的功能入口，一版是展示不完的，所以需要我们增加屏幕上下滑动的交互;退出抽屉的交互也有两种，点击其他区域or右滑抽屉。

　　具体的实现方法如下，要实现左滑屏幕左侧弹出抽屉，我们可以用热区覆盖，也可以用一块透明的矩形代替，这里我们选择用透明矩形的方法。在屏幕左侧加一个动态面板，命名为触发板，动态面板里面设置两个状态，一个状态命名为“普通”，里是透明无边框的矩形，另一个状态命名为“焦点”，里面的内容是弹出来的抽屉。我们添加一个交互案例“向右拖动结束时”，右滑拖动之后，设置动态面板“触控板”为焦点，在设置一下“向左拖动结束时”，动态面板“触控板”为普通，所有的步骤如下图所示。这样就实现了左滑右滑弹出/隐藏抽屉。

　　但是这样的效果和APP所呈现的效果差距甚远，我们发现弹出抽屉的时候，除了抽屉的出现之外，还会有一个半透明的浮层，当抽屉消失之后，浮层也消失。现在我们就加上这个浮层。这里我们加一个黑色50%透明的矩形，大小与APP相同，位于顺序触控板之下，位于其他元件之上，初始的状态为隐藏，命名为“黑色背景”。当右滑结束时，加上交互事件“显示黑色背景”。当状态为显示抽屉之后，我们应该想到一个细节，有两种交互都可以使抽屉隐藏，一是点击黑色背景，二是左滑抽屉，所以我们额外加上点击黑色背景切换动态面板“触控板”的状态。首先向右拖动结束时，添加一个交互案例，显示“黑色背景”：实现的是向右拖动，弹出抽屉并显示黑色背景。接着向左拖动结束时，添加一个交互案例，隐藏“黑色背景”，实现的是向左滑动，隐藏抽屉并隐藏黑色背景。现在就完成了左滑右滑显示/隐藏黑色背景。

　　但到这里还不够，在显示出抽屉状态的情况下，点击黑色背景，应该可以隐藏抽屉及黑色背景。这里我们需要首先判断一下状态再增加交互，“触控板”为焦点时，点击“黑色背景”，隐藏“黑色背景”，具体的操作如下图所示，添加完成之后，就可以实现左滑右滑及点击黑色背景的所有交互了。