App产品设计『核心模块』导航设计

这是《App产品设计指南》系列文章的第13篇内容，更多精彩可以点击下方链接查看。

《App产品设计指南》专栏目录

在确定产品的核心价值、功能范围、信息架构后就要开始正式的产品设计环节了，也就是通常说的原型设计。

根据用户体验五要素的理论，导航是框架层要做的事情。导航相当于是App的骨架，把不同的页面，功能串联在一起；突出重点模块，让用户快速找到自己想要的东西。导航设计可以说是原型设计最重要的环节，所以一定要慎重。本文总结了目前比较常见的导航模式，分析了各自的优缺点，希望能给大家一点启发。

一、标签式导航

标签式导航的位置可以在页面底部或者顶部。

（1）导航放在页面底部是目前最常见的设计模式，菜单数量一般在3-5个，具体数量根据产品业务复杂度来制定。一般都是文字+图标这种样式，5个菜单最为常见。至于为什么是5个菜单，7±2法则法则，费茨法则可以解释这个问题。有兴趣的读者可以参考下文。

产品设计、交互设计、用户体验设计理论模型整理思考

优点

直观易懂，用户能快速切换，找到对应功能场景。

缺点

菜单比较多时放不下，且底栏本身占据一部分页面高度。

微博&考拉海购

（2）导航放在页面顶部，可以支持滑动切换，能帮助用户更快地找到内容。顶部导航一般出现在资讯类App或者是比较复杂的App，通过一级或者是一级+二级导航来安排页面内容。

优点

能合理的安排信息结构，二级导航能放置更多内容，交互也比较方便。

缺点

导航在顶部的滑动操作和页面中的滑动操作可能会产生冲突，而且本身也占据一定空间。

36氪&半次元

二、列表导航

使用列表样式来进行布局，可以展现更多的内容。通常情况下会针对特殊菜单添加文案说明，红点提示，引导用户进行操作。

优点

列表导航易于拓展，便于用户理解，可以容纳更多的内容。

缺点

列表导航的样式比较单调，而且内容较多时不利于用于检索，需要通过设计分组来规避这个问题。

17K小说&蜻蜓FM

三、宫格导航

一般用于信息、功能互相独立的场景，不同入口之间没有交集。

优点

功能入口直观，便于理解，能更合理的安排内容。

缺点

一般情况下排列在前面的入口的点击率会更高，不利于其他入口的使用。

百度网盘&优酷

四、抽屉导航

通过把非核心功能的操作整合到左侧抽屉菜单，让用户集中注意力在当前页面，能更好的聚焦当前的核心功能。

优点

能很大程度上节约空间，让用户获得沉浸式体验。

缺点

抽屉菜单的入口相对较深，需要用户探索发现，不利于功能的发现。

网易云音乐&酷狗音乐

五、舵式导航

为了重点突出某个功能，重点突出每个菜单，一般情况是作为发布添加操作的入口。

优点

比较突出，同时可以折叠更多内容。

缺点

因为是二级导航，入口层级会影响用户的正常使用。

一罐&Soul

六、卡片式导航

卡片式导航能根据页面内容的变化及时更新，适合以图片为主的内容，比如美食，旅行，新闻类App，通常作为二级导航。卡片式导航可以看到宫格导航的一种延伸。

优点

每个卡片互相独立，具备冲击力，能让用户快速找到自己所需的信息。

缺点

内容过多时不利于用户检索。

红板报&QQ音乐

七、菜单式导航

通常是用于筛选一级模块下的多个选项或者模块，属于二级导航。

优点

和上一级导航衔接比较自然。

缺点

如果内容较多时会显得比较拥挤，且二次导航入口相对较深。

微信&今日头条

八、轮播式导航

适用一些选项比较少，且不频繁跳转的应用中。

优点

页面上比较简洁，这种导航通常配备大图，能让用户获得更好的体验。

缺点

不适合展示过多内容，用户很容易忽略后面的内容。

墨迹天气&一言

九、点聚式导航

当需要更多展示内容和功能，需要极端简化其入口，一般可以使用点聚式导航。

事实上舵式导航属于一种特殊的“点聚式导航”，特殊点在于它是点聚式导航和标签式导航的结合。

优点

比较有趣，交互吸引用户。

缺点

入口相对深，用户不容易发现。

&WPS

不同的导航有各自的特点和优缺点，我们在产品设计的过程中一般是把不同的导航组合使用，需要根据产品的功能场景，信息架构来合理的安排。希望本文能对大家有所帮助。

在写作过程中，如果有意见或者想法，欢迎有兴趣的读者添加我的微信，加入微信群一起交流探索，共同进步。