APP导航设计

一、导航概述

1、导航定义：采用功能定义法，其核心功能即指引（导航）

2、划分方法：导航的形状和位置

3、重要性：产品设计五层模型中的第四层框架层，与功能、信息架构有关，根本源于用户需求（即用户、需求、场景）

4、导航对象：功能和内容

5、基本方法：分类

6、导航类别：首页的主导航、首页及深层级的次导航

二、导航类型基本形态：一般多种导航组合出现

1、跳板式/陈列馆式/宫格式/网格式/矩阵式/WP磁贴式

1.1 优缺点及适用范围

      内容或功能数量较多时，进行快速引导，一目了然；每个宫格功能明确，不需要反复在相邻模块的深层次页面中进行切换。

1.2 应用举例

      fb早期曾以宫格式导航为主导航（fb还是用过抽屉式导航和tab式导航）。现在以宫格式为主导航的不多见（美图秀秀保留），一般以宫格式结合tab式导航。

1.2.1 首页

手机桌面：

微菜单：

千牛：

美图秀秀：

1.2.2 二三级页面

      这种类似卡片式导航了，不过不必局限于定义，就是格子（放的圆的都行）具有导航功能即可。如活动主题页、商品展示页——一般有列表和宫格两种展示方式。

京东商品展示页：

1.2.3 个人主页

蘑菇街：

2、选项卡式/标签式/Tab式/菜单式

      优缺点和适用范围：结构清晰，数量5个以内，适合频繁切换

1.1底部Tab

1.1.1 普通

手机桌面，图片如上

1.1.2 舵式：中间的tab异形，有强调作用。引申出来的包括非中间按钮异形的“舵式”

喜马拉雅

蘑菇街

1.1.3 扩展式/超级菜单式：即可展开下一级导航

path

微博

猪八戒

1.2顶部Tab：也包括普通、舵式、扩展式/超级菜单式，经常和底部tab结合使用

虾米音乐

搜狐新闻

网易云音乐

快手

3、列表式

3.1普通（多在深层级页面，导向详情页，如个人主页）

饿了么个人主页

3.2分组：微信发现、iPhone设置

3.3增强，当前列表可操作或与其他控件组合

iPhone设置

微博搜索

4、侧边展开式/抽屉式：导航页分列表和宫格式，可组合使用

      优缺点及适用范围：大屏手机单手操作不便、不易发现减少参与度；不占空间；适合5个以上的入口/操作；适合放置辅助功能。

      一般启动APP时进行手势提示；另侧边右滑唤出的交互，与IOS撤退相近。

虾米音乐

5、悬浮icon式

      优缺点和适用范围：便捷入口，或为短期功能；用于吸引注意；页面内容较多；用户或可自定义出现/消失。

iPhone AssistiveTouch

京东我的街

6、暂将卡片式和全屏的滚动视图（或称页面轮盘式/平铺式）视为内容页，不作为导航。