今天给大家分享的是：几种常见移动端导航设计的优缺点！

常见导航设计：标签导航；舵式导航；宫格导航；旋转木马式导航；列表导航；抽屉式导航；点聚式导航；陈列式导航(瀑布流导航)

1、标签导航

通常标签导航是APP的主导航，标签导航上的功能3-5，最为常见的是4个，形式上分为图标表示和图标+文字的表示，标签导航上的功能大多是APP的核心功能。

优点：

1. 一目了然的展示APP的核心功能入口

2. 功能入口切换便捷，不会让用户迷失方向

3. 展现核心功能和信息

缺点：

1. 固有模块，占用内容显示区域（沉浸式）

2. 功能入口过多时，标签导航就不太实用了，常见功能入口4个（3-5）

3. 针对大屏手机用户，单手操作功能入口切换时用户体验较弱

2、舵式导航

舵式导航是标签导航的特殊形式，将APP的最核心功能放置在导航中央

优点：

1. 吸取了标签导航的优点

2. 凸显核心功能、频繁使用的功能

3. 较大程度引导用户进行该功能操作

缺点：

1. 集标签导航缺点于一身

2. 中间核心功能的凸显，弱化了其他功能的使用率

3. 占用区域不规则

4. 因为要凸显最核心功能，要求设计感较高

3、宫格导航

不是所有的宫格导航都是9宫格形式，都有分割线划分格子，如下图

优点：

1. 一目了然的展示APP的功能入口

2. 可以更多的展示功能入口

3. 帮助用户快速找到功能入口

缺点：

1. 无法直接展示功能内容

2. 无法在功能间进行切换（必须通过返回上一级，再次进入其他功能）

3. 容易形成较深层级（在形成较深层级关系的设计中，需要注意在完善交互逻辑的前提下，尽量减少冗余的页面）

4、旋转木马式导航（轮播图（banner，商品列表轮播形式））

优点：

1. 单页面或较少页面来展示，整体性强，展示效果好

2. 动态的、线性浏览方式使用户浏览更加流畅、用户体验更好

缺点：

1. 不合适展示多页面

2. 无法跳跃性查看间隔页面、只能按顺序进行查看

3. 页面形式过于相似，容易让用户产生视觉疲劳，导致后续页面容易被忽略掉。（常见banner页面在4-5个左右）

5、列表导航（分为纵向列表和横向列表）

优点：

1. 展示功能多

2. 层级清晰

3. 可以展示较长内容的标题，展示部分内容

4. 展示标题层级

缺点：

1. 同级内容过于相似，容易使用户产生视觉疲劳，后方列表容易被忽视

2. 板式风格呆板

3. 功能重要性无法很好区分，只能通过排序和颜色来区分

6、抽屉式导航

优点：

1. 节约空间

2. 具有较强的扩展性，可以植入更多的功能页面,如下右图。

缺点：

1. 引导性不足，容易让用户忽略该功能

2. 对入口 交互功能可见性要求较高

7、点聚式导航

下图为新浪微博舵式导航核心功能点击打开的点聚式导航

优点：

1. 节省空间

2. 动效融入，增强展示趣味性，增加用户体验感

3. 较强的引导作用

缺点：

1. 隐藏功能入口，无法直接显示功能

2. 对功能入口设计要求较高，交互可见性需要加强

8、陈列式导航(瀑布流导航)

优点;

1. 直接展示功能内容

2. 方便浏览更新内容

缺点：

1. 板式呆板，如下图

2. 不易展现顶层入口框架

3. 容易导致用户迷失方向，不知自己所处什么层级

4. 对设计要求较高，不然会显得呆板，杂乱

5. 不适合长时间浏览，容易导致视觉疲劳

PS：瀑布流导航

优点：

1. 流畅的使用体验感

2. 版式上略微解决了陈列式的呆板问题

本文为源码时代UI老师原创，转载请标明出处（www.itsource.cn）