详解APP端哔哩哔哩全部的导航范例，及高保真原型实现

注：因为哔哩哔哩的用户性格从整体上说更方向于生动，以是B站在详细的细节上的计划也思量到了用户的调性，并不是一沉稳固的。单从导航这一种计划上看，就呈现了多达 8 种计划方法。险些包围了全部现网上呈现过的导航范例，让用户可以更好的玩儿本身的APP。我们可以在相识导航种类的同时，更深一条理的思索，哪种导航范例更得当哪种行使场景。

起首罗列一下哔哩哔哩行使过的导航种类，如下图所示：

接下来，我们就详细的看看每一个导航，及其原型实现。

一、标签导航

标签导航又称为底部导航，在APP中的最底部，这种导航非经常见。微信、微博、付出宝等常用APP都回收这种导航的情势。标签导航情势的利益很是明明，标签导航位置显而易见，轻易让用户察觉到它的存在。并且标签导航，每个标签之间切换频率很高，标签之间的点击可能转动切换，便于用户操纵。一样平常用于很是重要的导航中。

原型实现

写在前面一点，原型用获得全部元部件，都并非截取的B站APP的截图，都可以在FontAwesome图标字体Axure部件库中找到。这个元件库的icon可以恣意的修改样式和颜色，很强盛很利便。

我们从新开始画原型，要先理清整个APP的样式架构方法，底部的四个导航是整个APP内里最大的分类，以是整体被分成了四部门：home、category、dynamic、news。在交互上因为同时存在顶部导航，以是这四个导航之间只是通过点击button切换，没有阁下滑动的实现。这个标签导航没有交互方法上的难度，但不证明原型就可以任意画画了事。

高保真原型不只仅要实现高保真的实现详细的交互，样式上的也要高保真实现。以是在样式上有许多的细节值得我们留意，好比说APP的外边框，我们最好选择330px*584px；每个icon每个模块的机关和巨细，都要遵从原APP的机关，可以借助网格线成果；每个icon和模块的填色题目，这里有一个笔者常常用的小能力分享给各人。QQ可能微信的截图，热键截图之后，对付鼠标地址的像素点，截图成果自带RGB颜色展示，我们可以通过这种方法获取icon可能模块的颜色。只不外这里的RGB是十进制的，Axure中是十六进制，在线转换一下就好了。我们凭证适才的原则，先搭好如下四个页面，如下图所示：

四个页面之间的彼此跳转，我们可以通过动态面板实现，也可以通过四个page实现，这里我选择的是四个page，缘故起因是page更利便之后的变动，拭魅战傍边，万一本身给本身打算的需求变了呢（有趣脸）。假如你认为page的方法跳转耽误看着不惬意，可以都做好了最后酿成动态面板。详细的实现要领我想各人都可以本身下手实现，这里就不赘述了。

二、顶部导航

顶部导航的行使场景和底部导航的很相像，从样式上看，顶部导航和底部导航一样显而易见，轻易让用户发明。从成果上说，都是从整体上对自有成果的一个大抵的分类，以是底部导航和顶部导航二者的职位都很是重要。独一的区别就在于二者的位置差别发生的其他衍生的细小差别。底部导航的button，因为用户的手持手机的风俗，可以更轻易的触遇到，以是交互上顶部导航因为手指不轻易点到响应的button，更多的回收的是左滑右滑的切换。

（编辑：河北网）

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