移动导航设计，看这一篇就够了

标签式导航对应iOS中的标签栏，是现在最常见的主导航模式。最大的好处就是扁平化整个应用的导航结构，所有主类别视图都可以在顶层视图进行切换，用户可以直接从一个类别的视图切换到另一个类别的视图，利于用户在视图之间的频繁切换，而不需要像层级导航那样回到主页面重新进入，直观清晰、易于用户理解

注：iOS版网易云音乐和Instagram都用标签栏做主导航

标签栏标签最好不多于5个，当多余四个时，将剩下的功能全部置于“更多/我的/个人”中

注：网易严选 & 知乎

标签导航的变形：标签栏中加入功能按钮，一般是一个应用中最核心功能的功能入口或功能入口集（点聚式），多为发布类按钮，例如：Instagram、LOFTER、微博、QQ空间等可以快速发布内容

注：nice（快速发布功能入口） & 新浪微博 （子功能集入口）

2、固定选项卡

固定选项卡是安卓系统提供的三种顶级导航方式之一，与iOS系统中的标签栏相似，同样的它能够扁平化整个信息结构，并且支持左右滑动切换到不同的视图。随着移动端交互设计的发展，Android与iOS两大阵营的相互借鉴、完善，交互设计规范越趋于相似，你会看到大量安卓应用也采用标签栏作为主导航，iOS应用中采用顶部选项卡式导航作为次级导航

注：Android版网易云音乐以及iOS版QQ音乐都用固定选项式导航做主导航

以下场景中可以使用固定选项卡：需要经常切换视图/内容视图有限（3-4个）/让用户清楚地知道可供选择的视图

注：荔枝FM & 小咖秀

固定选项卡一般放置在屏幕的顶部（导航栏或导航栏下方），展示同一模块下不同类别的信息或者筛选不同模块的信息

注：LOFTER & 小红书

3、滚动选项卡

滚动选项卡与固定选项卡同属选项卡式，一般滚动选项卡要比固定选项卡要窄， 一个模块中可以显示多个（超过5个）类别的视图，并且还可以进行扩展以及自定义展示（多用在频道/模块定制中），同样可以左右滑动切换不同类别的视图

注：QQ空间 & 腾讯新闻

滚动选项卡能通过水平滑动，定位到更多的选项卡视图中。如果应用的内容有很多视图，或者灵活的插入而不能确定有多少视图将会被展示，就是用滚动选项卡吧

注：虎牙直播 & 凤凰新闻

扁平导航结构的优缺点：

优点：能够快速的访问到所有主要模块视图；标注清晰的菜单，告知用户主要功能和当前所在的功能模块；有利用用户进行视图之间的频繁切换

缺点：标签栏导航只能显示5个标签；标签栏以及选项卡栏会占用一定的屏幕空间；选项卡过多，会导致切换不同类别视图较繁琐（选项卡过多，最好右侧提供全部分类的导航）

1、抽屉式导航

抽屉式导航也叫侧边栏（抽屉）式导航，抽屉式导航一般应用在以下的场景中：

（1）核心功能流程单一，主界面就能满足用户核心场景下的需求，不需要频繁在几个功能模块之间进行切换，将其他的功能模块（通常是分类、设置、个人中心等）做一个收纳，利用抽屉导航隐藏起来，例如：探探、唯品会、滴滴出行等；

注：滴滴出行 & 探探

（2）节省屏幕空间，突出主要功能模块，将相对不常用的功能模块整合起来放到侧边抽屉，例如：QQ、懂球帝、有货等

注：懂球帝 & 有货 （都采用嵌入式）

抽屉式导航的三种风格：浮层、嵌入式（向右推动原有界面）、新兴的模式（向右滑动的3D效果）

注：天天快报（浮层式） & 知乎日报（嵌入式） & 酷狗音乐 （新兴模式）

2、卡片式导航

卡片式导航原型类似生活中扑克牌，模仿切牌、换牌、翻牌等动作模式，是一种比较新颖的导航模式，在市面上应用这种导航的应用不算太多，探探中采用卡片式设计为导航和内容交互的主要模式，像卡片一样堆叠展示推荐用户，左滑表示无感，右滑表示喜欢或点赞；AcFun中采用卡片式设计展示推荐的番剧，任何方向的滑动都为切换不同的番剧

注：探探 & AcFun

（编辑：武汉站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!