交互基础小课堂！移动端的导航设计模式

在《户体验的要素》一本书中，Jesse James Garrett 将户体验分为了五个层级，战略层，范围层，结构层，框架层，表现层。

其中在框架里面有一个很重要的概念就是导航设计，作者对导航设计的定义是：元素的组合，允许户在信息架构中穿行。

我得以把导航设计理为：我们从用户的心智模型出，结合业务目标，对信息架构的一个梳理，来帮助用户完成目标。

通过机十款 app，总结了以下种导航计模式，包括：标签导航，宫格导航，侧边导航，列表导航，菜导航，轮播导航……

简单介绍了它们优缺，适用场景，以及些衍生导航与相关案例……（不过导航设计定是视品和情况而定，并没有确定依据与理论）

一、标签导航

标签导航分很多，有底部标签导航，顶部标签导航，底部标签导航又可以衍生出舵导航，顶部标签导航又可以分为静态或者是动态导航……

底部标签导航基本的导航，几乎绝部分 app 中都用，tabbar 于页面底部，一般3-5 tabbar，文字+icon，也纯 icon 形式，但部分文字+icon 的形式，我减少用户记忆负担吧，如下：

关于底部标签导航的优点，缺点以及用场景也简单整理了：

我发很多用户发布或者产内的 app 会将底部标签导航行变体，很多人把它称舵式导航，就这种：

中间的「+」一般发布的意思，并且 app 里面使用频繁的一功能，一般都会重点突出。并且，该标签中很多时候会二级导航，二级导航里可扩展性就比较强，如图：

顶部标签导航顾思义就 tabbar 于顶部，早知道它 Material Design 里面，因 Google Pixel 手机底部存理导航，所以将标签导航置于顶部不会显得突兀。它很少用作一级导航，一般二级导航比较多，且我发顶部标签导航，几乎都纯文字的形式，比如：

突然到今天交互设课的时候，老师讲的人机交互里，重的操作拇指可触达的范围内。

而顶标签导航，如果是点击标签进行操作的话，户单手操作就十分方，我发现体验好的 app 的顶操作导航都是可直接通过左右滑屏幕的交互来切换。

而当标签类目的时，以通左滑展现更标签，比很新闻阅读类的 app：

果是以滑动查看更的，一定要通一方式告诉用户以滑动查看更，比最一个标签隐藏一半的方式等：

关顶部标签导航的优缺点以及适用场，下：

二、宫格导航

宫格导航，是十分见的导航形式，除了一些工具类 app 外，大分是作为二级页面展示来，并且 icon+字的形式多。

如果将宫格的 icon 换成 picture 的形式的话，可衍生一种的类似于卡片式导航的形式 ，可通过垂直滑来切换，如：

那，如果宫格信息太多，我发现很多 app 会采分类展示的形式，并且通过水平滑的方式来切换，如：

但是上面两种可垂直或者水平滑的形式，一定要户知道是可水平或者垂直滑的，采取的是边界地方信息只展示一半的形式，告诉户可继续滑……

除此之外，宫导航还以在电里面运用，在首页的运营内容块，它以根据内容的重要整模块的大小，比：

关宫导航的优缺点和适用场，下：

三、侧边导航

有些书里面会把侧边导航叫做抽屉导航，这类导航实较了，原本是从 Google Material Design 里面取来的概念，一般会在首页呈现一个要功，将他的功收纳放到侧边导航里，如：

而于侧边导航的优缺点及适场景，如：

四、列表导航

列表导航也十分常见，几乎每一 app 里面都会存，部分时候作二级导航存，但也会存于一级导航的时候，比如邮箱，iOS系统自的设置。

一般在列表导航里都会有一个层级，可通过箭头来告诉户是否有级菜单。

当列表信息比的时，以对列表进行分类，以添加小标题或者直接分隔开。比：

而在有列表导航里，我们还需要展示给用户一预览信息，比 iOS系统里的健，个人信息里的一基数据展示，下：

关列表导航的优缺点以及适用场，下：

五、菜单导航

实菜单导航可称为拉导航。这是今天上交互设计课的时候，老师微信的「+」为例子介绍的一种导航形式。最初了解这种导航形式是来源于 Material Design 里面的 Menu。

Menu 是临时的一纸（paper），由按钮（button）、动（action）、点（pointer）或者包含至少两个菜单项的其他控件触。

比如：

当息层变多的候，菜导航要展示一层或者层息，比如大众点评采取的形式：

关于菜导航的优缺点以及适用景，如下：

六、轮播导航

还有一导航比轮播导航，完的沉浸式验，高度简洁的导航，比天气，但是种导航因为轮播点的大小不很明显，所以用户很难快速感自己所在位置，并且轮播导航轮播的数量也不宜 。

其导航的类型应该还有很，并且在一个 app 里面几乎不能只使用一种导航，哪怕只是一个页面，也存在种导航的组合形式，比：

总结

• 导航形定是根据你品诸多素进选取，并不能完全按照我上文适用场景为依据；
• 几乎每一 app，每一 app 的每一页面，都会涉及到多种导航模式，需结合具体场景行组合选取；
• 导航的具体展现可通过：字，icon，字+icon 的形式；
• 有导航比标签导航在设计的时有种状态，比 unselected，selected 等状态；
• 导航在 iOS 和 android 面的应用会不一，比如标签导航适配 iOS系统，侧边导航适配 android 系统；
• 导航设计必须传出它内容和用户前浏览页关系；
• 能够引导用户以很好的体验完目标的导航设都优秀的。

欢迎关注作者微信公众号：「UED设计笔记」

图片素材作者：Filip Slováček