详解APP端哔哩哔哩所有的导航类型，及高保真原型实现

原型实现

第一步我们需要理清页面的关系，在底部导航的home中，分为四个小部分：live、home、bangumi、专栏，这四个部分也正是顶部导航的四块内容。理清关系后，我们来动手实现。首先新建两个动态面板，一块放顶部导航的文字，命名为“滑动导航”，另一块放四个模块的内容部分，命名为“content”。这两个面板都分别设置四个state，放置顶部导航及其对应的内容，呈现的样式如下图所示（内容部分只是示意，没有具体的画）。

接下来，就要做增加交互了，首先我们还是梳理一下顶部导航的交互方式：1.点击具体的button可以切换，2.左滑右滑实现切换。我们先实现第一个交互，点击button实现切换。这块的实现比较简单，在点进每个顶部导航的标签中添加单击时交互，如对live标签添加交互案例，设置两个面板（滑动导航、content）的状态均为live，这里需要注意的一点是，在“滑动导航”动态面板里面每个状态，里面的每个button都要进行相应的设置。

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

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

三、抽屉导航

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

（编辑：我爱故事小小网_铜陵站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!