底部导航栏的设计总结

数十万互联网从业者的共同关注！

作者：shadow

微信公众号：自在园（ID : Free_Garden）

作者授权早读课发表，转载请联系作者。

欢迎投稿到早读课，投稿邮箱：mm@zaodula.com

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

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

简单对比下优缺点：

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

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

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

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

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

列表式的结构清晰明了，

网格式的紧凑、直观，

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

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

我们一步步推理下:

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

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

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

展开为列表式

展开为网格式

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

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

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

模式1:首页＋我的；

模式2:首页＋更多；

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

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

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

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

开启中间功能键的例子：

闲鱼，拓展了标签数量

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

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

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

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

• 一般功能项会设置4至5个。因为手机屏幕容量有限。

• 功能项大部分以图标+文字的形式表达。文字是为了更准确的表达意思，这个在第一篇App之“文字”的设计技巧探讨过原因。

• 主页的图标，采用“小房子”或logo。

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

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

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

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

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

版权声明：早读课文章均来自作者投稿或者授权文章，部分文章为转载均尽量注明作者和来源，文章版权归作者所有，若涉及版权问题，请添加momo微信：qqj5211314，感谢。