想要导航⾸页提⽰页_【资料整理】app顶部导航栏设计⽅法：解决导航类⽬过多，⽆法完全显⽰的。。。
还记得在⾯试的时候，有⼀位⾯试官拿了⼀款还没正式发布的移动端app，询问我有什么想法。我第⼀
眼感觉⽐较深刻的就是顶部的Tab
顶部的Tab
移动端的单⾏导航栏⽆法完全显⽰所有分类，需要栏，Tab栏的类别很多，⼤约有近10个，并且⾯试官说之后可能会越来越多，显然，移动端的单⾏导航栏⽆法完全显⽰所有分类，需要通过某种⽅式的扩展，让导航栏全部显现
通过某种⽅式的扩展，让导航栏全部显现。
我在⾯试的当下，提出了⼀些不成熟的想法。后来，我从我常⽤的⼏款app中，整理出了⼀些设计⽅法。当然，以后若看到更好的设计，也会不断更新上来...
【平⾏滑动型】
导航页源码
这种类型基本上依靠左右滑动来解决问题，针对那些导航类⽬没有⾮常多的情况，⽐较适⽤。
。
微博⼿机端app，这个页⾯的顶部导航栏⼤约有13个类⽬，⾸页完整显⽰4个类⽬，被选中的类⽬会有「字体放⼤
第⼀个例⼦是，取材⾃微博
+字体颜⾊改变」的着重显⽰。导航栏可以左右滑动，以达到完整显⽰导航栏内容的⽬的。
在导航栏最右边有未完全显⽰的类⽬，⽤来提醒使⽤者右边有更多的类⽬，可以通过滑动bar条查看。
这是⼀种⽐较简单、直接的处理⽅式，但是缺点⽐较多：
字露出⼀半，或者词组露出⼀半，可能会有不美观的疑问。
但若不露出来，使⽤者可能会不知道右侧还有更多的导航栏类⽬。
不是所有的类⽬排列之后，都能够刚好露出⼀些，作为给使⽤者的提⽰。
排序在后⽅的类⽬，使⽤者需要滑很久才能到，使⽤上不够便利。
微博⼿机端「视频页⾯」
第⼆个例⼦是⼀个企业app，总共有15个类⽬，分组显⽰，⼀组显⽰5个。下⽅有⼩的标记线，提⽰使⽤者右边还有两组类⽬。
不过这种⽅式不适合类⽬很多的情况，下⽅⼩标记过多、过密集都会影响到美观；⽽且使⽤者可能要花很长的时间寻⽬标类⽬，易⽤性不⾼。
云朵⽹⼿机端（设计中）
【跳转页⾯型】
这种类型的设计通常出现在导航类⽬超级⽆敌多的app，⽽且可以有次级导航，⼆级、三级⼀直分类下去。⽐如：电商app（商品分类众多）、视频类app（视频分类很细）、新闻类app（新闻分类巨细靡遗）。因此，在⾸页导航栏附近设计⼀个提⽰icon，使⽤者就能跳
在⾸页导航栏附近设计⼀个提⽰icon，使⽤者就能跳转进⼊完整的导航页⾯。
转进⼊完整的导航页⾯
爱奇艺⼿机端app，⾸页导航栏只显⽰了完整的5个类⽬，左右滑动也可以查看整条bar条的内容，但是⾮常的漫长，并且没有提⽰⾸先是爱奇艺
说右边有隐藏类⽬，左右滑动这个功能的使⽤率存疑。
被选中的类⽬的有「字体放⼤+下⽅颜⾊标记」作为着重显⽰。最右边有icon，点击就会跳转到完整的导航页⾯。
爱奇艺app中，完整的导航页⾯可以⾃定义编辑，调整⾸页显⽰的5个类⽬，可以依据个⼈喜好，为使⽤者提供便利。
爱奇艺⼿机端
淘宝⼿机端app，淘宝的商品类⽬也是⾮常繁多，⾸页导航栏显⽰了6个类⽬，左右滑动可以查看整条bar条的内容。这边设计上⽤接下去是淘宝
了⼀个阴影，让右边的icon像是叠加上去的功能，⽽使⽤者也不太会忽略bar条右侧还有内容。
最右边icon的提⽰，就会跳转页⾯到完整的导航页⾯，不过这边没有⾃定义的功能，淘宝使⽤的是记录使⽤⾜迹，推荐商品的⽅式，的确也是电商⽹站常有的排序⽅式。
淘宝⼿机端
再来是「甬派」，是⼀个新闻⼿机端app。左右滑动可以查看整条导航栏的内容，右侧做了⼀个半透明的叠加，bar条的内容还是可以隐约看到，提⽰使⽤者可以滑动bar条。
最右边的icon，点击能够跳转页⾯到完整的导航，并且也有⾃定义的功能，使⽤者可以按照兴趣选择显⽰在⾸页的五个主要类⽬，还可以调整类⽬的顺序，或者增加类⽬。
不过这个加号的icon设计还是蛮少见的，若设计类似的app可以参考。
甬派⼿机端
⼤众点评⼿机端app导航的设计也是蛮有细节性的。导航栏可以左右滑动，使⽤者在滑动的过程中就可看到「释放查看全部分类」的提⽰，⼤众点评
此时就直接跳转完整的导航的页⾯。
试想⼀下使⽤者原本的使⽤流程（使⽤前⼏款设计）
step1： 在⾸页显⽰的导航中寻⽬标类⽬，没到。
step2：左滑试图寻⽬标类⽬，导航太长没有到。
step3: 点击更多类⽬的icon，跳转进⼊完整导航页⾯，到⽬标类⽬。
但是⼤众点评的设计，使⽤流程为：
step1：在⾸页显⽰的导航中寻⽬标类⽬，没到。
step2：左滑试图寻⽬标类⽬，直接进⼊完整的导航页⾯，到⽬标类⽬。
因此，⼤众点评的这种设计，在实际操作上减少了使⽤者⼀个步骤，对于寻被隐藏的类⽬来说，或许在使⽤上有⼀定便利性，也可以参考。
⼤众点评⼿机端
【向下扩展型】
这种类型有⼀个icon提⽰导航可以扩展，来显⽰更多类⽬，扩展后，在同⼀页显⽰导航的完整内容。
微博「发现」页⾯，他的导航栏在⾸页显⽰5个，⽆法左右滑动。右边有「更多」的icon来向下扩展全部的导航。
微博
这种设计⽐较适合视觉导向的，如果导航类⽬是纯⽂字的，使⽤的时候要考虑⼀下。
并且不适合类⽬很多的情况，向下展开后要能够在该页⾯中完整的展⽰。
不适合有次级导航的情况，只能展现⼀层类⽬的内容。
微博⼿机端「发现」页⾯
【更新中...】
先整理到这边，如果之后看到其他的设计⽅法，也会不断更新进去，为设计的时候提供参考的思路，毕竟设计都是从模仿开始的嘛XD

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。