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

首先我们添加一个矩形框，里面放置一些功能点的入口，命名为“矩形框”，并且设置这个矩形框为隐藏状态。然后设置“+”的交互案例，单击时可以切换显示/隐藏“矩形框”。同时我们要考虑到，在显示矩形框的情况下，点击其他位置，矩形框依然会消失。这里要首先添加一个条件，在矩形框的状态为显示的情况下，点击其他区域，矩形框消失，所有的交互如下图所示。

七、轮播导航

轮播导航具体的设计原理及效果实现，我在《Axure高保真原型，实现APP端轮播样式》写的已经很详细了，大家可以参考，这里就不再赘述了。

八、Tab导航

Tab导航和顶部导航极其相似，都是出现在APP的顶端，通过不同的分类对APP自有的内容进行分类呈现。但是现在的tab导航中，多了许多的花样，由于APP的内容不断地增多，一级分类已经不够让用户足够清晰地看到自己想看到的内容，很多内容型的APP的内容信息，需要二级分类才能更好的展示出自有的内容信息。这就需要tab导航衍生更多的功能，在顶级tab分类下，每个tab点击进去后，会展示二级分类方式，选好二级分类tab之后，才能更好的展示出相应的内容，就如目前大型内容型APP，携程，大众点评等呈现的那样。

九、资源共享

整个APP端哔哩哔哩所有导航的Axure原型，我共享在了百度云网盘上，大家可以用来学习参考。

链接: https://pan.baidu.com/s/1jHOAYGY

密码: 9qyn

文章很长，花了很长时间做出原型，又花了很长时间写出文章，只希望大家能互相学习共同进步，如果你读到这里依然没有点击退出，感谢你的耐心~

作者：Mitsuizq，微信公众号：Mitsuizq

（编辑：ASP站长网）