底部导航栏的设计总结 - 91运营网
91运营VIP会员全新升级,尊享多项权益, 点击查看 >
X

底部导航栏的设计总结

发布者: 91运营  5875

系统学习运营课程,加入《91运营网VIP会员》,开启365天运营成长计划>>

底部导航栏的设计总结

hi,这是系列文章:App之xxx的第2篇,第1篇我总结了App之“文字”的设计技巧。今天来总结下app的底部导航栏的设计。

先来看看app常用的导航模式有哪些:列表式、网格式、标签导航、抽屉式导航等。

简单对比下优缺点:

列表式结构清晰明了,大部分应用于二级或三级页面,最常见于”我的–设置”选项里,缺点是占的篇幅比较大,样式比较单调。如领英的设置页面

1135 底部导航栏的设计总结

网格式与列表式类似,但排布更紧凑,显示也更直观,可在一页容纳更多选项,常见于一级页面,电商类app一级页面用的比较多,如淘宝的首页

274 底部导航栏的设计总结

标签式有顶部、底部两大类,底部应用的最广泛,因为底部比较方便大拇指点击。比如上文2个例子。

抽屉式是把所有功能都收到一个按钮里,这样界面就非常干净了,同时给功能操作带来了隐蔽性,例子就不举啦,安卓机的app很多这类的。。

那么,有没有一种方式应用在一级页面,可以集合这些优点:

列表式的结构清晰明了,

网格式的紧凑、直观,

标签式底部导航的便利拇指操作,

抽屉式容纳更多选项,简洁界面。 

我们一步步推理下:

1、由于需要便于拇指操作,这决定了我们只能在标签式导航中的底部导航栏来进行改造。

363 底部导航栏的设计总结

2、底部导航栏的功能按钮排布。这里把抽屉式的汉堡包按钮,变成了“更多”,我们可以把一些不常用的功能全部收纳到这里。

456 底部导航栏的设计总结

3、然后其中居中的一个按钮可以展开更多的选项,把底部导航栏变成网格式或者列表式的导航模式。

549 底部导航栏的设计总结

展开为列表式

645 底部导航栏的设计总结

展开为网格式

这样改善后,底部导航栏是不是变得特别强大了?

下面再看看底部导航栏的一些主流设计方式里的案例:

目前有3种典型的模式,分别是

模式1:首页+我的;

模式2:首页+更多;

模式3:中间功能项突出。

736 底部导航栏的设计总结

  • “我的”模式是最常见的,满足了用户在各个功能之间的频繁切换。各个功能项是同等重要的。

831 底部导航栏的设计总结

  • “更多”模式是突出其他几项功能,把次要功能全部收入更多里。

928 底部导航栏的设计总结

  • “中间功能项突出”模式,主次分明,把最频繁使用的功能置于中间,也有的中间功能键起到收纳作用,点击是开启更多选项。

1021 底部导航栏的设计总结

开启中间功能键的例子:

1136 底部导航栏的设计总结

闲鱼,拓展了标签数量

1226 底部导航栏的设计总结

全民K歌,直接是新起一页,有网格式和列表式

1320 底部导航栏的设计总结

喜马拉雅FM,也是新起一页,列表式

当然,案例只是参考,具体问题还是需要具体分析的,没有哪个模式是万能的,只有适合的才是最好的。

下面继续总结一些小细节:

  • 一般功能项会设置4至5个。因为手机屏幕容量有限。
  • 功能项大部分以图标+文字的形式表达。文字是为了更准确的表达意思,这个在第一篇App之“文字”的设计技巧探讨过原因。
  • 主页的图标,采用“小房子”或logo。

1419 底部导航栏的设计总结

  • “发现”功能项是电商、娱乐影音类app用的比较多的功能。

1516 底部导航栏的设计总结

1613 底部导航栏的设计总结

  •  “消息”是社交类app的标配。

1712 底部导航栏的设计总结

  • 角标提醒,用小红点或者带数字的小红点。

1811 底部导航栏的设计总结

  • 地图类app应用较少采用常规的底部导航栏,没有固定范式,底部导航栏的具体样式根据业务来设计。

1910 底部导航栏的设计总结

最后,用张动图总结本文内容。

20 底部导航栏的设计总结

作者:shadow

微信公众号:自在园(ID : Free_Garden)


勾搭小编微信号yujielin912,加入91运营官方社群,会运营的人都在这里了

加入vip会员
分享到:


扫码加入91运营社群