常见的导航栏设计

导航系统相当于APP的骨架，支撑着内容和功能组成的血肉，导航系统起着组织内容和功能的作用，让它们按照产品的信息架构图进行连接，展现在在用户面前，导航将零散的内容和功能组织成了一个完成的有结构的系统。建立合理的导航系统，设计顺畅的任务路径，让用户能够快速在各个模块之间进行切换。一个好的导航，能够扁平化用户的任务路径，减少用户操作成本，从而提高用户体验。

常见的导航栏设计：

1、底部Tab栏

这是APP最常使用的导航模式，用于一级目录的导航，位于页面底部，无论用户单手还是双手操作都能轻松点击，能告诉用户当前位置及用户切换统一层级之间的不同模块。

底部Tab栏具有很强的包容性，可以形成最基本的信息框架，然后用其他的导航模式来承载具体的功能和内容。展现形式有文字 + icon，也有纯icon形式，大部分是文字+icon，可能是减少用户记忆负担。可以在第一时间让用户了解使用频率最高、最重要的功能和信息，同时能够支持用户在不同模块之间的快速切换。

2、底部（舵式）拓展栏

为了突出中间的功能，把Tab做的比较突出，鼓励用户更多使用该功能。使用过程中就发现新浪、闲鱼使用了这种导航栏，都是把第三个Tab标签做的更加突出，放进了一些常用的功能。可以提高导航栏趣味性，让用户贡献更多的内容。

3、顶部Tab栏

通常用于展示同一模块下不同类别的信息或者筛选不用模块的信息，一般二级导航且支持滑动。可以很好地扁平化信息层级，让用户可以迅速实现同一模块下不同类别信息之间的切换并且不会迷失方向。

4、侧边（矩式）导航栏

通常针对产品偏沉浸式阅读的情况下使用，主导航模块切换频率低，放入其中的模块使用频率低。常与底部标签式导航组合使用，将一级页面内的信息再细分，给人以清晰的呈现方式。通过把非核心功能的低频操作都放到一个抽屉里，使得用户获得沉浸式的体验，而且能够集中用户的注意力，让用户去更好地完成核心功能，不被打扰。用户可以将注意力放在首页，减少其他类型的导航带来分散用户注意力的情况，给用户更沉浸式的操作感和阅读感，同时可以最大限度利用屏幕空间。

5、列表式导航栏

通常用来展示某个具体模块内容的信息进行分类，以列表的形式呈现大量的条目。多用于辅助主导航来展现信息甚至更多层次的内容，有时候需要一些提示信息（如ios的健康）。列表式结构具有很强的延展性，调整的弹性高，抗信息冲击力也很强；它的导航效率高，可以引入字母索引；可以很方便的进行分组分类。

6、宫格式导航栏

一般作为信息或平台的入口，为产品或项目信息提供聚合的载体，适合承载订阅类产品或众多属性差异非常明显的分类信息，此类导航信息的呈现内容比较少，但是每个项目选取的效率比较高。可以通过入口来进行流量的分发；具有较强的延展性，可以无限扩展内容；可以划分多个内容、多个模式，由不同团队独立开发每个模块再聚合。导航app制作

7、卡片式导航栏

宫格式导航的一种延展形式，通过增加内容的可视化程度让每个条目呈现更多的信息。它能根据页面内容的变化及时更新图片，适合以图片为主的内容，像新闻、美食、旅行、视频图片等经常使用，常作为二级导航。对运营量的要求比较低，而且单个条目的转化率会相应的提高。

8、菜单式导航

通常配合在二级导航，用于筛选同一模块下的不同类别的信息，或者是快速启动某些常用的功能模块。特点：能让更多用户在有限的屏幕空间上做更多的动作，让用户查看更多的信息；能将同一模块的信息进行分类，让用户更清晰地了解这个模块都为我们提供哪些信息或分类。

9、轮播（平铺）式导航

适用于足够扁平化的内容和随意浏览的阅读模式，将所有信息平铺在一个页面，很容易带来高大上的视觉体验。最大程度的保证了页面的简洁性和内容的完整性，且一般都会结合滑动切换的手势，操作起来也非常方便。

10、悬浮icon导航

悬浮式icon是一个非常便捷的操作入口，也适应大屏幕时代，增加了快捷入口，但是注意不要遮挡某些页面的操作。

来千语创想学习更多免费APP开发知识：app软件开发 app开发源码下载 app开发视频教程 app制作模板等免费获取。

立即免费在线制作一个APP，新手注册即送开发大礼包

提交app定制需求，了解报价和周期：

电脑请点击https://www.qianyuthink.com/?url=/index?uzchannel=500