知方号

知方号

app底部导航栏的浅析 <底部导航栏设计方案>

底部导航为何要存在呢,与其它标签导航相比又有什么特点,背后满足的需求又是什么,在什么场景下会用它,用它又能给用户、产品带来什么价值?

导航是手机app经常使用的一种方式,指引和告知用户现在在哪儿、可去哪儿、那儿有什么,方便用户快速了解产品。导航类型一般有标签导航、宫格导航、悬浮导航和列表导航,它们之间可以相互结合使用。

而底部导航就属于标签导航的一种,位于 app的一级页面底部。其它的标签导航还有顶部导航、侧边导航,比如头条的顶部导航分类(关注、推荐、抗击肺炎、视频、新闻等)、京东app 的分类页面,侧边导航与宫格式导航结合。

底部导航+顶部导航                                       底部导航+侧边导航

那么这个底部导航为何要存在呢,与其它标签导航相比又有什么特点,背后满足的需求又是什么,在什么场景下会用它,用它又能给用户、产品带来什么价值?

一、底部导航是什么?

一般位于app一级页面的底部,以图标+文字的形式展示,用户点击相应导航可切换页面内容。

1. 主要特点

优势:

结构清晰,2-5个tab,app的核心功能一目了然;位置明确,文案简洁,有导向性。

用户打开app一眼即可知道当前在什么位置,点击哪个tab可以看到什么内容。比如淘宝的默认页面是发现页,这时底部导航首页的图标文字与其它tab会有所区别,表明这是当前选中的tab,而其它会显示为未被选中的状态。看到“消息”、“购物车”、“我的”就明白,消息这一栏是“别人”发给我的、与我有关的消息,看到“购物车”就明白点击后看到我在逛app时加入购物车的商品;而“我的”就是我这个人在这个产品上的资料、订单等。

放于页面底部,便于用户单手操作;将主要模块提出来,便于用户点击切换页面内容,在一定程度上,可提高该模块的用户渗透率,提高产品的用户活跃度;

不足:

数量有限:只适用于2-5个导航,多了则拥挤,可点击区域变小,而用户记忆成本也会提高;底部导航一般固定悬浮于页面底部,类目数量是固定的(除非产品迭代升级或其它原因),所以结构太复杂或标签类目不稳定时不适合;2. 适用场景

底部导航一般是以主导航的形式存在,当产品结构不复杂且需要用户多次切换进行查看或者进行其它操作时,可用。比如微信,在“微信”这一栏可查看谁给我发了信息,但如果“发现”的小红点一亮起,就想去看看朋友们发了些什么。这个时候就需要在“微信”、“发现”两个tab间来回切换去查看最新内容,对于习惯单手操作的用户,很实用。如果把微信的底部导航栏放置顶部,则无法达到这一效果。

二、底部导航背后满足的需求和特定的场景是什么?

需求的产生来源于特定的用户群体在特定的使用场景中遇到的问题,那我们从它自身的特点来倒推一下。

1. 既然是导航,为什么要放在页面底部呢?

手机页面中,页面底部属于用户便于操作但视觉注意力不是很高的区域,在这儿放置导航,不会分散用户对于屏幕中内容的注意力,还可以帮助用户快速切换到他感兴趣的栏目。

而在Steven Hoober的移动设置使用研究中发现,依靠单手操作的人很多(大约占比49%),将导航放于底部便于用户单手操作(下图是手机),增加用户操作频次。

注:绿色表示用户可以轻松到达的区域;黄色代表需要延伸的区域;红色表示用户需要改变下手持方式

当app的主要模块及结构变得更加明晰显眼时,它们的使用频次便会上升,一定程度上也可提高平台的用户活跃度。比如产品新上线了商业化产品,加入了会员。

在公司角度上,希望用户可以经常看到并触达会员的内容,以此来提高用户的会员转化率,而能达到高频次操作和高触达率的也就是底部导航,比如知乎的盐选会员,易企秀的会员模块等。

从上面可以看出,导航放在底部能够满足用户单手操作手机的习惯,点击后能快速切换到用户感兴趣的栏目;对产品来说,结构清晰,用户学习成本低,还提升了用户活跃度。

2. 可用其它主导航代替吗?

看了底部导航,我们再一起思考一下,其它类型的标签式导航能不能满足上文所说的需求呢?

(1)若要满足产品结构明晰

底部导航的设计数量一般在2-5个,用户进入产品即可从底部导航看到产品的基本结构,已是用户习惯。而顶部导航虽然也在首页显示,但占据空间较小,且置于顶部,并没有底部导航效果好。而侧导航,以上下通栏的方式展示,虽然也可让用户清楚知晓产品结构,但占据空间着实够大,用户本应该关注页面中间部分的内容,但却影响了用户对页面内容的查看效果。抽屉式导航却是将导航隐藏,无法达到用户一看就知道在哪儿、可去哪儿的效果。

(2)若满足用户单手操作并快速切换

前文所讲的,底部导航是可以满足用户单手操作的,而且导航悬浮于一级。

页面底部,切换导航时无需做返回操作;顶部导航结合左右滑动的操作可实现用户单手操作切换;侧导航无法做到用户单手操作切换,在侧边展示,无法结合上下滑动的手势去切换要展示的导航类目(上下滑动一般用于内容的刷新和加载/页面的滑动)。

(3)若要提高产品的用户活跃度

底部导航的作用不仅仅是分类,它是将用户关心的和产品着重要展示的模块内容外化出来展示给用户,目标是根据展示内容留住用户或产生效益。而顶部导航和侧导航

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至lizi9903@foxmail.com举报,一经查实,本站将立刻删除。