App之底部导航栏的设计

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

我为什么写这个系列的文章。因为我正在做一款app，我在团队中主抓产品设计、UX/UI设计、部分前端开发，少量运营。在工作之余，我决定把所研究的内容写成关于app之xxx的系列文章，文章选择的题材会往“小而精”这个方向努力，范围在我的工作内容中选取。

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

简单对比下优缺点：

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

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

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

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

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

列表式的结构清晰明了，

网格式的紧凑、直观，

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

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

我们一步步推理下

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

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

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

     展开为列表式

     展开为网格式

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

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

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

模式1:首页＋我的；

模式2:首页＋更多；

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

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

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

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

开启中间功能键的例子：

      闲鱼，拓展了标签数量

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

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

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

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

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

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

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

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

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

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

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

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

---

转载请联系本号

自在园版权所有

---

扫码关注，获取更多信息

｜设计+科技=自在园实验室。

公众号简介：

大家好，我是产品经理/大学老师/程序员/园林设计师/UI设计师/…

本号为个人公众号，发布内容主要为设计&科技方面，

这里是设计师、程序员发挥创意的融合实验室。