详解APP端哔哩哔哩全部的导航范例,及高保真原型实现营销策划

来源:互联网 / 作者:SKY / 2017-12-01 05:13 / 点击:
我们可以在相识导航种类的同时,更深一条理的思索,哪种导航范例更得当哪种行使场景。

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

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

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

详解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中是十六进制,在线转换一下就好了。我们凭证适才的原则,先搭好如下四个页面,如下图所示:

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

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

二、顶部导航

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

阅读延展

1
3