当前位置: 首页 >> APP界面设计_APPUI设计_APP设计素材 >> 阅读正文

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导航设计方式

app导航设计

 

 

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

 

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

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

APP标签式导航设计案例

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

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

电影类的APPUI界面设计

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

APP标签式导航的优点

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

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

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

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

 

APP标签式导航的缺点:
1、功能不能过多

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

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

让你喜欢的APP界面设计是咋样的呢

 

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

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

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

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

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

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

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

wechat app4

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

知乎APP

 

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

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

美食APP标签式导航

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

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

APP标签式导航设计创新案例2

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

在数据统计方面来看:

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

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

 

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

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

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

 

 



无觅相关文章插件,快速提升流量

本文标题:APP产品设计学习:如何设计好APP标签式导航

本文地址:http://www.25xt.com/appdesign/13271.html

本文关键词: ,

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。