（汇总）APP常见的8种导航栏设计
最开始是在了解 Tab 栏，慢慢了解到 拇指热区、导航设计等概念，所以，本⽂从导航的优点、移动端⼤屏时代的拇指热区以及常见的8种导航设计来分享⾃⼰这些天学习整理的资料，同时分享过程中会以我们常⽤的APP进⾏举例。
导航的优点
结构化产品内容和功能
导航系统相当于APP的⾻架，⽀撑着内容和功能组成的⾎⾁，导航系统起着组织内容和功能的作⽤，让它们按照产品的信息架构图进⾏连接，展现在在⽤户⾯前，导航将零散的内容和功能组织成了⼀个完成的有结构的系统。
突出核⼼功能
每⼀个APP都有⼀个核⼼功能，其他的都是次要功能和扩展功能，像的核⼼功能是即时聊天，京东是购物，猫眼是买电影票等等，核⼼功能对⽬标⽤户来说是最重要的，把核⼼功能放在⽤户最能接触到的位置，给予充分的展现，⽽其他功能应该适度隐藏、甚⾄是删除。导航就起到了突出核⼼功能，适度隐藏次要功能的作⽤。
扁平化⽤户任务路径
建⽴合理的导航系统，设计顺畅的任务路径，让⽤户能够快速在各个模块之间进⾏切换，。⼀个好的导航，能够扁平化⽤户的任务路径，减少⽤户操作成本，从⽽提⾼⽤户体验。
拇指热区
⼀个观察实验
拇指热区概念来源于交互⼤神 Steve Hoober 的⼀个观察实验，他发现在⼿机⼤屏时代，⼤部分的⽤户是以下图的⽅式抓握⼿机：以拇指的底部为⽀点，抵在⼿机的右下⾓。
嗯，⼤概是这样的
当时⼀共有 1333 名参与者参与了该项研究。他通过观察发现⽤户会⽤以下三种姿势进⾏⼿机操作：
单⼿操作：49%
⼀⼿⽀撑，⼀⼿操作：36%
双⼿操作：15%
单⼿操作最⾼
在单⼿操作的⼈⾥⾯，左右⼿使⽤⽐例：
右⼿拇指操作：67%
左⼿拇指操作：33%
美国《医药⽇报》报道称，左撇⼦占据世界⼈⼝的约10%，在上述过程中左撇⼦占到33%是因为有部分的被观察⼈员使⽤⼿机时在⼲其他的事情，⽐如吃早餐、骑⾃⾏车、抽烟等。
拇指热区
通过以上的观察实验，Hoober根据我们使⽤⼿机常⽤的场景画出了⼤拇指活动的拇指热图
单⼿操作
右⼿拇指操作
拇指底部固定在⼿机右下⾓
iphone 拇指热区图
绿⾊表⽰拇指正常点击区域，黄⾊表⾊需要使⽤吃奶⼒⽓才能点击的区域，红⾊表⽰难以点击到的区域。我们设计导航系统的时候，也会遵循拇指热区的原则，把主要功能放在绿⾊区域，辅助功能放在黄⾊或者红⾊区域。实际上使⽤iphone过程中，我们发现通过双击Home键能够将整个屏幕下移，这⼀点就是考虑让⽤户能够在不改变操作姿势的情况下，能够点击屏幕上⽅的区域。
看，是不是点击到上⽅区域了
常见的8种导航栏设计
Tab（标签式）导航栏
底部Ta b栏
这是APP最常使⽤的导航模式，⽤于⼀级⽬录的导航，位于页⾯底部，⽆论⽤户单⼿还是双⼿操作都能轻松点击，能告诉⽤户当前位置及⽤户切换统⼀层级之间的不同模块。
底部Tab栏具有很强的包容性，可以形成最基本的信息框架，然后⽤其他的导航模式来承载具体的功能和内容。展现形式有⽂字 + icon，也有纯icon形式，⼤部分是⽂字+icon，可能是减少⽤户记忆负担。
底部Tab（今⽇头条&&美团&⽹易云⾳乐）
优点：可以在第⼀时间让⽤户了解使⽤频率最⾼、最重要的功能和信息，同时能够⽀持⽤户在不同模块之间的快速切换。
优点：
缺点：底部导航栏超过5个就容易引起误点操作，同时在底部会占据⼀定的屏幕空间。
缺点：
底部（舵式）拓展栏
为了突出中间的功能，把Tab做的⽐较突出，⿎励⽤户更多使⽤该功能。使⽤过程中就发现新浪、闲鱼使⽤了这种导航栏，都是把第三个Tab标签做的更加突出，放进了⼀些常⽤的功能。
导航菜单舵式导航栏（微博&闲鱼）
优点：可以提⾼导航栏趣味性，让⽤户贡献更多的内容。
优点：
缺点：说到底此类导航也是⼀种⼆级导航，既然是重要功能为什么会放在⼆级导航呢？我觉得这⾥有⼀定的⽭盾。同时，把功能放在⼆级界⾯，缺点：
会增加⽤户的记忆负担以及操作负担。
顶部Ta b栏
通常⽤于展⽰同⼀模块下不同类别的信息或者筛选不⽤模块的信息，⼀般⼆级导航且⽀持滑动。
顶部Tab（⽹易云⾳乐&今⽇头条&喜马拉雅FM&微博）
优点：可以很好地扁平化信息层级，让⽤户可以迅速实现同⼀模块下不同类别信息之间的切换并且不会迷失⽅向。
优点：
缺点：
缺点：位于顶部切换起来不是很⽅便，同时占据空间，导致屏幕可展现区域变少。
顶部Tab栏还有⼀种情况是动态的，⽐如微博顶部的“关注”，这种情况属于菜单导航，下⾯有分享。

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