APP产品设计学习：如何设计好APP标签式导航

一直以来25学堂受到大家的批评和建议。希望25学堂继续多分享一些有实际APP操作案例分析的设计干货。

于是乎，学堂看到了微信公众号：呆呆U理（UDai-bl）的一篇文章《标签式导航的设计要点》，觉得作者分析的非常有道理，刚好给大家详细了解一下如何来设计好APP导航，而且是APP导航里面一种，标签式导航。

关于APP导航设计的博文，25学堂之前分享了很多，比如：

1、8种移动APP导航设计模式大对比

2、APP设计专题:6个超实用的APP导航设计方案

3、4种常见的APP导航设计方式，让我们的APP高大上

4、3种常见的APP导航设计方案优劣势分析

5、APP底部导航设计，是最好的手机APP导航设计方式

从今天开始，25学堂小编就来跟大家一一详细讲解每一个导航设计的优缺点。

今天分享的是第一个APP导航：标签式导航，也是我们最常见的最常用的导航。

第一个案例就是丽人丽妆APP的首页：

上面的标签、和底部的五个标签以及中间五个图标的导航，其实都是属于APP标签式导航范畴。

到今天为止，很多App都是用这类标签式导航来引导用户切换功能。当然，25学堂也在APP底部导航设计，是最好的手机APP导航设计方式详细的分析过了。

在这里，我们在回顾一下标签式导航设计的优缺点：

APP标签式导航的优点

1、简单高效，操作方便。

下面的四个功能可以快速切换，用户在使用的过程中不会迷失方向，且简单清晰，层级明确。

2、更好的用户体验

试想一下，一般在使用App时，用户更多的会怎么使用手机？双手还是单手呢？肯定都有。所以单手使用手机的用户碰到的App是标签导航时，可以更方便的操作，不需要一定得使用另一只手。而某些导航如果不用两只手是没办法操作的。

3、快速了解App主要功能

一般来说，用户第一次使用产品，会关注这个App有什么功能，它能帮助自己完成什么任务。所以标签导航可以很好地帮助用户了解产品的主要功能，让用户看到的第一眼就知道自己能做什么。

APP标签式导航的缺点：

1、功能不能过多

有些产品功能过多，但是却又都是必要的，不能做删减。而一旦超过五个，就不适合用标签导航。因为标签导航不适合做滑动，所以功能多了可点击区域(热区)就变小了，操作上会有一定影响。

2、占用一定屏幕尺寸

标签导航占用了屏幕下方不少的位置，所以有些App就不适合用标签导航，比如阅读类的App。先不说一屏内少了很多字展示，就说在滑动的时候不小心点到了其他功能是不是很烦？

再回到丽人丽妆APP首页的那个案例，在搜索框下面，还有五个次级的标签式导航，而且交互方式通过滑动来实现切换的。这类交互特效在APP设计当中也变得很常见。快速切换找到用户想要的需求点。

作为一名APP设计师也好，还是APP产品经理，在开始设计APP的时候，一定要定好整个产品的框架，把最核心的功能放在第一层页面，再根据产品的深度来设计导航的模式。

上面，我们已经从丽人丽妆APP首页看到了标签式导航的一些常见用法。

如果当底部导航超过了五个，怎么办呢？

第一：换别的导航方式，比如驮式导航或者抽屉导航。

第二：重新归类。衡量一下产品的层级，把某些相关的放在 “更多” 或者 “发现” 里面。

如下图：很早时期的微信界面，这样的导航设计不受欢迎。

知乎APP里面，也采用了这样的的导航，在最后一个菜单那里是更多。

第三：标签导航可以用你创新的方式表现出来。只要符合用户体验操作习惯就行。

比如类似下图当中红色框框里面的导航：

这些也算是标签式导航的变形，另外一种设计方式。

第二个创新的底部标签式导航设计案例：

这样的底部标签式导航设计会降低APP的PV和UV，提高了用户使用成本。如何折中处理这样的设计案例。

在数据统计方面来看：

点击的置底的导航栏和滑动的顶部导航栏是差不多的，在大屏手机上更方便用户滑动去切换页面界面。

不过25学堂的小编还是建议把底部标签式导航固定在下面更符合用户习惯。

还有很多类似的APP导航设计，标签导航能解决不少问题，但是前面说过，一定要注意规划，理清产品框架，不要一上来就随便定个导航形式。

希望以上这些观点可以让你对APP标签式导航有一定的了解和掌握。

以后知道怎么去应用这些APP导航知识。