移动app设计:Tab导航是否是大势所趋?

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

之前也写过一篇文章《从逛商城学习产品设计:信息架构梳理如何从小白到精通?》简单的介绍了信息架构的梳理,算是入门吧。其实产品导航方式我个人觉得是根据产品类型和阶段,结合产品功能逻辑架构梳理来确定是比较合理的。个人不觉得tab导航就必然是所有产品都适用的,用大势所趋这种表述,也觉得稍有不妥。但可以从产品发展/类型角度来谈谈导航方式的应用和变化。

1430364429808

市面上比较常见的主导航方式从大类上包括:tab导航、侧边栏抽屉导航平铺式导航三类(三大类很容易理解:分别挖掘了屏幕的上下、左右或页面中部)。细分的话有很多,也都是这三类导航的变体、组合等形式,在这里就不列举了。三大导航方式,各有优劣,下面简单谈谈个人对这三类导航的认知:

侧边栏(抽屉)导航:

为什么先谈侧边栏导航呢?因为确实这是争议最多的一种导航方式。缺点比较明显:

不够暴露、需要用户二次点击

但它的优点就是:

1).侧边栏可以“收纳”很多(很容易理解:因为侧边栏的面积是比上下tab肯定是大的),也比较容易使得架构比较扁平;

2).因为侧边的“隐藏”可以保证主要页面内容的突出和沉浸式体验。

个人觉得因为侧边栏的缺点是明显的,因为不建议将侧边栏导航方式作为主导航,但在两种类型产品中可以尝试,其目的是发挥侧边栏导航的优势

1).早期产品,功能诉求相对单一,主要功能需要突出强调,比如早期的《课程格子》(之前设计练手的产品,记忆比较深刻,学生党比较熟悉),强调“课程表”这一核心功能,其他功能相对诉求较低,但仅限早期产品。

2).功能单一型主线产品,但内容组织分类和赛选需求明显,典型的像《邮箱大师》这里工具类应用。侧边栏用于内容分类和筛选。

tab导航:

最常见的是底部tab,这种导航方式,目前大家的认可度比较高。很多应用也从原先的侧边栏导航变为tab导航,其根本原因在于:它确实优点大于缺点。就导航本身,它可以“精简明了”也可以“包罗万象”,用“发现”、“更多”这里的架构梳理,可以整合很多内容,但对于架构梳理的能力要求相对较高,并不是所有的功能都是可以用“更多”来解决的。而且tab导航在主要功能架构暴露、减少用户点击、保证页面内容的突出性(相对于侧边栏要弱,但可以接受)等方面其优势突出。唯一的缺点就是常驻带来的沉浸式体验减弱(好像不那么明显吧)。

tab导航因为其优点大于缺点的明显性,广泛被大家接受,也越来越常见。这也就为什么会被感觉是“必然的趋势”,但真的是普适的嘛?我想说不是的。在产品发展早期,特别是一些工具类的产品,功能单一,硬生生的整出四个tab真的很难受。另外在应用tab导航的时候,其关键的在于架构梳理,一定要注意几点:

1).架构梳理很重要:主要功能(组合)要突出,次要功能要整合,但不一定所有的次要功能都可以“更多”;

2).控制tab的数量,一般不超过5个,这个点也需要纳入架构梳理的思考范围之列。

平铺式(列表、桌面等)导航:

这类导航也比较常见,很多设计师喜欢这类导航,因为其容易被设计的很漂亮(列表式),具有视觉感,这也是这种导航方式的优点之一。另外,平铺式导航,架构扁平,可拓展性相对较强,特别适合内容平台类产品,功能述求一大堆的产品。其缺点也在于:不太适合早期产品或者功能单一型产品(除非列表是用来分类or筛选内容)。同时,这种导航方式通常占用一整个页面,也容易造成用户走失(导航不是常驻)和迷茫(架构扁平,内容多,分类不准确时不易查找)。

平铺式导航,其实一般产品用的不多,内容型平台类产品比较常见。应用时,一定要处理好架构扁平和分类明确这个平衡点。

另外需要说的是,导航设计,信息架构梳理是基础。

#专栏作家#

Mr汤进er,微信公共号:chuangshe_space。人人都是产品经理专栏作家,严格意义上的互联网新人,学过设计,现在做产品。关注互联网产品、用户体验设计,实践派的理论主义者,爱思考,喜欢码字,愿意分享,希望同互联网er一起交流学习,共同进步。

本文系作者授权发布,未经许可,不得转载。

您的赞赏,是对我创作的最大鼓励。

评论( 3

登录后参与评论
  1. 写得很好,平铺式可以举例吗?

    回复
  2. 从我个人来说我喜欢Drawer的导航模式,主要原因是只用手指滑动就可以切换出列表页面,不需要看清某个图标再去点击,而且就我来说,走动中单手操作底部Tab确有不便。同时,使用底部Tab意味着到使用到次级功能时需要经过多次页面切换,如:点击“更多”-切换到更多列表-点击“我的资料”-切换到我的资料页面,比使用Drawer多切换了一次页面,相对来说会有更多的延迟、停顿感以及页面切换带来的距离感(用户会觉得进入到了三级页面)。

    不过的确很多著名产品最近从Drawer改回了底部Tab,比如知乎、饿了么,可能是用户更加习惯底部Tab的方式吧。

    我认为单一功能性较强的应用使用Drawer方式更好,比如饿了么、好奇心日报,打造简洁酷炫的界面,促使用户聚焦在核心功能上。
    而功能多,业务复杂的应用可以使用两者相结合的方式,最典型的就是QQ。Tab显示核心业务功能、Drawer中显示次级功能。

    个人见解,还请指正。

    回复
  3. tab可能的确是用的最多的、

    回复
加载中