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

平常我们去商场或者景点逛的时候，通常会看到整个景区或者整个商场的导游图，能让我们知道身处何地并且快速的找到目的地。投射到一个虚拟的产品上面，同样是一个“商场”或“景点”，为了让用户能够顺利的在产品中畅行，则必须为用户提供一个有效的导航系统，让用户时刻清楚自己在应用中所处的位置，及如何前往目的页面。产品的导航系统，是产品的信息结构在用户界面上的展现方式。

介绍APP导航设计的文章中至少会提到数十种导航方式，种类名称繁多，不是很容易理得清。那么问题来了，怎样才能更加更快速、系统地掌握各种导航设计方式呢？在本篇，按照结构化思维对各种APP导航设计进行分类整理，最终形成三个大类：分层结构、扁平化结构以及内容或体验驱动型，提供另外一种认识APP导航设计方式的思路。

从杜威十进制分类法到动物界的门纲目科属，庞大的信息通常都会被分类到类别，以及子类别、子子类别...中去，这就是层级结构。层级结构模型是人们最容易理解的分类结构模型，层级导航也是APP中最常用的导航模型之一，本篇将列表式导航、宫格式导航（跳板式导航）、陈列馆式导航归为层级导航结构，它们有共性也有细微的不同：

1、列表式导航

列表式导航中的每一个列表项（注：iOS设计指南中成列表为表格视图）都是进入子功能的入口，用户通过在每个页面选择一次进行导航，直至到达目标位置，并且模块之间的切换必须返回至列表主页当中。列表相当于一个一行一列的表格，列表项中既可以填充文字图片，也可以填充按钮或者展开某一项。

iOS中设置是经典的利用列表导航的应用，QQ邮箱是为数不多用列表式设计做主导航的应用

注：iOS设置 & QQ邮箱

列表中可以填充更多的列表项，来扩展有限的屏幕空间上能够容纳的入口数量，可以用来展示信息记录/联系人列表等某一类别下的列表项记录。

注：mono 中的小组列表 & 一直播中粉丝列表

列表式导航也是最常见的导航方式之一，更多被用来做次级导航，多用在个人中心、设置、内容/信息列表中。

注：简书 & 美团，“我的”用列表导航做次级导航

2、宫格式导航（跳板式导航）

宫格式导航可以看做列表式导航的变形，同样属于层级结构导航，不同于列表导航地方在于宫格式导航是以N行N列的表格来呈现，同时表格中元素以图片为主。宫格中一个格子代表一个功能/模块入口，从一个模块到另一个模块用户必须原路返回几步（或者从头开始），然后做出不同的选择。宫格式导航曾经在APP中非常流行，主要是因为它能容纳更多的功能入口，同时跨平台不受平台限制（移动互联网刚兴起的时候，每个平台的交互规范有很大的区别）

注：早期的Facebook与 LinkedIn就是采用宫格式导航做主导航（2011年）

美图秀秀、微店是现在位数不多的仍旧用宫格式导航做主导航的应用之一，微软识花这款小工具首页也是用宫格式导航产品设计，美图秀秀与微软识花都是工具型产品，而微店中采用宫格式设计展示最常用的功能入口

注：美图秀秀 & 微软识花 & 微店

当前，很少有产品会用宫格式导航做主导航，主要是利用宫格式导航的扩展功能来做次级导航，与标签式导航以及其他类型的导航模式共同构成整个应用的导航系统

注：支付宝 & 豌豆荚一览

3、陈列馆式导航

陈列馆式导航可用来呈现实时内容，比如新闻、菜谱、文章或照片，可以采用网格布局（比如一直播和ins）或轮盘布局（比如格瓦拉电影），还可以采用幻灯片模式进行展示。陈列馆式导航本质上也是另外一种层级导航结构，进入另外一个内容详情之前，必须先回到主界面重新点击进入。相较于列表导航、宫格式导航的不同在于，陈列馆式导航有更丰富的表现形式、更加随意的组合效果（瀑布流等）以及丰富的动态效果（轮盘、幻灯片形式）

注：一直播（网格布局展示主播信息） & 格瓦拉电影（采用轮播布局展示电影信息）

相较于列表导航、宫格式导航，陈列馆式设计展示了彼此独立、内容之间无层级关系的内容项

注：ins & 开眼

陈列馆式设计模式最适合呈现经常更新的、视觉效果直观、彼此独立的内容。

注：LOFTER和厨房故事都采用瀑布流网格布局展示内容信息

层级导航的优缺点：

优点：能应变大量的类别、功能和项目；组织方式常见，容易理解，可直接对内容进行交互；直观且占用屏幕空间小；列表展示很适合用户自定义分类

缺点：主功能只有在最顶层页面才会被显示出来，不像标签栏，每个页面都可以看见；主功能和分类以及内容之间的切换有些麻烦。必须要先回到顶层页面，然后再依次点入

（编辑：武汉站长网）

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