![5cbf2a571c805cf6e76f77a847127cfc.png](https://i-blog.csdnimg.cn/blog_migrate/f11f7f7706ae54f8644382f281ac7215.jpeg)
还记得在面试的时候,有一位面试官拿了一款还没正式发布的移动端app,询问我有什么想法。我第一眼感觉比较深刻的就是顶部的Tab栏,Tab栏的类别很多,大约有近10个,并且面试官说之后可能会越来越多,显然,移动端的单行导航栏无法完全显示所有分类,需要通过某种方式的扩展,让导航栏全部显现。
我在面试的当下,提出了一些不成熟的想法。后来,我从我常用的几款app中,整理出了一些设计方法。当然,以后若看到更好的设计,也会不断更新上来...
【平行滑动型】
这种类型基本上依靠左右滑动来解决问题,针对那些导航类目没有非常多的情况,比较适用。
第一个例子是,取材自微博手机端app,这个页面的顶部导航栏大约有13个类目,首页完整显示4个类目,被选中的类目会有「字体放大+字体颜色改变」的着重显示。导航栏可以左右滑动,以达到完整显示导航栏内容的目的。
在导航栏最右边有未完全显示的类目,用来提醒使用者右边有更多的类目,可以通过滑动bar条查看。
这是一种比较简单、直接的处理方式,但是缺点比较多:
- 字露出一半,或者词组露出一半,可能会有不美观的疑问。
- 但若不露出来,使用者可能会不知道右侧还有更多的导航栏类目。
- 不是所有的类目排列之后,都能够刚好露出一些,作为给使用者的提示。
- 排序在后方的类目,使用者需要滑很久才能找到,使用上不够便利。
![d007a0fb5a3b66d4b723544a72ae6cb9.png](https://i-blog.csdnimg.cn/blog_migrate/da515255294f32568f829ba22bb311b2.jpeg)
第二个例子是一个企业app,总共有15个类目,分组显示,一组显示5个。下方有小的标记线,提示使用者右边还有两组类目。
不过这种方式不适合类目很多的情况,下方小标记过多、过密集都会影响到美观;而且使用者可能要花很长的时间寻找目标类目,易用性不高。
![30f6b9840567d00c66621b54cc4e3bbe.png](https://i-blog.csdnimg.cn/blog_migrate/6a0694fb269751748375cbb0124ff7bd.jpeg)
【跳转页面型】
这种类型的设计通常出现在导航类目超级无敌多的app,而且可以有次级导航,二级、三级一直分类下去。比如:电商app(商品分类众多)、视频类app(视频分类很细)、新闻类app(新闻分类巨细靡遗)。因此,在首页导航栏附近设计一个提示icon,使用者就能跳转进入完整的导航页面。
首先是爱奇艺手机端app,首页导航栏只显示了完整的5个类目,左右滑动也可以查看整条bar条的内容,但是非常的漫长,并且没有提示说右边有隐藏类目,左右滑动这个功能的使用率存疑。
被选中的类目的有「字体放大+下方颜色标记」作为着重显示。最右边有icon,点击就会跳转到完整的导航页面。
爱奇艺app中,完整的导航页面可以自定义编辑,调整首页显示的5个类目,可以依据个人喜好,为使用者提供便利。
![91dff0f6b9121b2c32ca52dae30da12d.png](https://i-blog.csdnimg.cn/blog_migrate/db589d9f1102c51a6120f7683def9d62.jpeg)
接下去是淘宝手机端app,淘宝的商品类目也是非常繁多,首页导航栏显示了6个类目,左右滑动可以查看整条bar条的内容。这边设计上用了一个阴影,让右边的icon像是叠加上去的功能,而使用者也不太会忽略bar条右侧还有内容。
最右边icon的提示,就会跳转页面到完整的导航页面,不过这边没有自定义的功能,淘宝使用的是记录使用足迹,推荐商品的方式,的确也是电商网站常有的排序方式。
![a2709be92627051dfaaeb5dbd000efbd.png](https://i-blog.csdnimg.cn/blog_migrate/7ca9bdde29185a32c34b10934403da67.jpeg)
再来是「甬派」,是一个新闻手机端app。左右滑动可以查看整条导航栏的内容,右侧做了一个半透明的叠加,bar条的内容还是可以隐约看到,提示使用者可以滑动bar条。
最右边的icon,点击能够跳转页面到完整的导航,并且也有自定义的功能,使用者可以按照兴趣选择显示在首页的五个主要类目,还可以调整类目的顺序,或者增加类目。
不过这个加号的icon设计还是蛮少见的,若设计类似的app可以参考。
![2a369ca5196513e8e0dfa6a041954a40.png](https://i-blog.csdnimg.cn/blog_migrate/b006c0100ad656bf992ef1ae360c97d1.jpeg)
大众点评手机端app导航的设计也是蛮有细节性的。导航栏可以左右滑动,使用者在滑动的过程中就可看到「释放查看全部分类」的提示,此时就直接跳转完整的导航的页面。
试想一下使用者原本的使用流程(使用前几款设计)
- step1: 在首页显示的导航中寻找目标类目,没找到。
- step2:左滑试图寻找目标类目,导航太长没有找到。
- step3: 点击更多类目的icon,跳转进入完整导航页面,找到目标类目。
但是大众点评的设计,使用流程为:
- step1:在首页显示的导航中寻找目标类目,没找到。
- step2:左滑试图寻找目标类目,直接进入完整的导航页面,找到目标类目。
因此,大众点评的这种设计,在实际操作上减少了使用者一个步骤,对于寻找被隐藏的类目来说,或许在使用上有一定便利性,也可以参考。
![8347546fedd504302b52f813a12b6f2d.png](https://i-blog.csdnimg.cn/blog_migrate/583f9de91721285ba661a45acf4f07ac.jpeg)
【向下扩展型】
这种类型有一个icon提示导航可以扩展,来显示更多类目,扩展后,在同一页显示导航的完整内容。
微博「发现」页面,他的导航栏在首页显示5个,无法左右滑动。右边有「更多」的icon来向下扩展全部的导航。
- 这种设计比较适合视觉导向的,如果导航类目是纯文字的,使用的时候要考虑一下。
- 并且不适合类目很多的情况,向下展开后要能够在该页面中完整的展示。
- 不适合有次级导航的情况,只能展现一层类目的内容。
![68ebe2033ebd4d4039f586e7babe2fdc.png](https://i-blog.csdnimg.cn/blog_migrate/6a935cb7476adbc34b54617b72fd624b.jpeg)
【更新中...】
先整理到这边,如果之后看到其他的设计方法,也会不断更新进去,为设计的时候提供参考的思路,毕竟设计都是从模仿开始的嘛XD