对 Bottom navigation 的探讨 & 以 YGOMobile 为例

Kenny MacCormick

Kenny MacCormick

3

今天,我们来一起谈谈 Bottom navigation,也就是在 Material Design 中新近增加的,对于「底 Tab」的相关定义。

适合与否,这是个问题

有些客户端看到 Google 都开始搞底部 Tab 了,于是一言不合就要搞个大改版。这样搞是不行的!要不要把导航方式改成 Bottom navigation,还是要按照应用的具体情况决定的,胡乱改版只会让 App 的导航越改越糟糕,反而失去了改的意义。

首先,使用 Bottom navigation 的应用的顶级导航项目最好在 3-5 个之间。如果顶级导航太少,建议使用 Tabs 切换,如果太多,建议使用 Drawer.

components_bottomnavigation_usage8.png

像上图所示的 6 个导航项的 Buttom Navigation,显然是错误的,这样会让整个 Buttom Navigation 区域显得十分拥挤,也增加了误操作的可能性。事实上,在 iOS 平台上也鲜有底部 Tab 的导航项超过 5 个的应用。可以说,将导航项控制在 3-5 个已经成为了某种程度上的共识。

如果你的 Android 应用之前使用的是 Drawer 等导航方式,而由于各种原因需要改为 Bottom navigation, 那么我建议你先梳理一下应用的导航逻辑,以尽量避免由于更改导航方式而造成的逻辑混乱等问题。如果应用有 5 个以上的导航项,则可能需要重新安排各个项目。

components_bottomnavigation_usage6.png

啊,这又是一个错误的用法。Bottom navigation 和 Tabs 不同,Bottom navigation 的项目不滚动。请务必留意。

最后,如果你的 App 较为强调横屏模式下的使用体验,我建议你不要使用 Bottom navigation,这种导航方式会极大地损失横屏模式下的可视空间。

enframe_2016-05-22-16-03-24.png

那些值得一提的

当有三个导航项时,同时显示图标和标签文字。当有 4-5 个导航项时,对于不活动的项目仅显示图标。

未标题-1.png

个人推测 Google 建议这么做的原因是因为标签文字的标准大小较大(激活状态 14sp, 不活动时 12sp),在英文文本下会显得较为拥挤,Google+ 就是反面教材之一,然而这样的情况在「短小精悍」的汉语环境下较少出现。

我个人更倾向与为所有的项目加上标签文字,或者全部去掉标签文字,只显示图标。

另外,或许是考虑到 Bottom navigation 会对可视面积造成损失,Bottom navigation 可以选择当向下滚动时自动隐藏,而当向上滚动时自动显示。当然你不一定要这么做,如果你觉得没必要,也可以一直固定 Bottom navigation.

未标题-2.png

此外,点击激活项可以回到当前列表的顶部。值得注意的是,进入子级界面时,Bottom navigation 将依然显现。这个设定在 iOS 上也存在,然而是否有必要这么做是存在着一些争议的,很多应用抛弃了这一点,相关的讨论也一直没有停止。

未标题-3.png

另外,Google 认为 Bottom navigation 不需要通过滑动进行切换,恕我无法同意这一观点,众所周知在手机屏幕日渐增大的现在,滑动显然是比点击更为舒适也更为顺手的。实在是不明白为什么要放弃滑动切换导航项的设计。

与 iOS 不同的一点是,Bottom navigation 切换项目时不保存当前导航项的状态,也就是说,切换到另一个导航项时,当前项目的状态将会被清除重置。这点需要注意。

Bottom navigation 理论上可以与 Tabs 共存,虽然 Google 并不建议你这么做(会造成可能的导航方式混乱)。同时它也可以和 Drawer 共存,并且目前来说有很多应用了 Bottom navigation 的应用都保留了 Drawer. 但是需要考虑到的一点是,由于 Drawer 是 Android 上较为常见的一种导航方式,保留 Drawer 仍然会造成可能的导航方式混乱。因此我同样不建议你这么做。

Bottom navigation 的项目只对应导航项切换,不包括菜单或者其他视图。因此类似 Instagram 和微博等在底部 Tabs 里插入 action 的行为似乎并不被提倡,不过你还有 Floating Action Button 之类的选择。

一个采用 Bottom navigation 的应用的层级结构如下:

components_bottomnavigation_spec_elevation3-.png

可以看出,除了 Drawer 或者 Bottom sheets 等少数元素,Bottom navigation 比绝大多数元素的层级都要高。FAB 等元素应该在 Bottom Navigation Bar 的后方出现(如果你要做自动隐藏/显示的话,这点很重要)。

以 YGOMobile 为例

YGOMobile 为一款游戏王对战平台软件 YGOPro 的 Android 移植版,其主界面遵循了 Material Design 并采用了 Drawer 作为导航方式。

enframe_2016-05-22-17-58-33.png

但是这个应用的顶级导航项过少,使用 Drawer 其实并不是一个特别方便的选择。因此,我去掉了 Drawer,选择使用 Bottom navigation 重构导航,效果如下:

enframe_2016-05-22-18-00-16.png

可以看出,由于只有三个导航项,这个应用更适合使用 Bottom navigation. 在使用 Bottom navigation 之后,在导航项之间切换会比过去方便许多。

出于对应用的特性考虑,自动隐藏/显示 Bottom Navigation Bar 似乎并无特别大的必要,因此我选择在滚动列表时固定显示 Bottom navigation.

未标题-4.png

如果点击某个项目进入子视图,Bottom navigation 会依然存在。

enframe_2016-05-22-18-00-55.png

以上就是我对一个简单的应用进行的 Bottom navigation 改造。这是个很适合 Bottom navigation 的应用,同时导航层级也较为简单,因此改起来并没有特别吃力。在实际操作上,像这样简单的应用会较为少见,所需要考虑的也会更多,因此这次的 Redesign 只是一个试手,我可能会在后面的设计作品中根据具体需求来决定是否使用 Bottom navigation.

写在最后

Bottom navigation 是很多 PM 和设计师的心头好,但并不是所有的应用都适合 Bottom navigation. 有些应用使用 Drawer 和 Tabs 很明显会更好,因此,不要胡乱上马更改导航方式,因地制宜,选择适合应用的导航方式才是最重要的。

Bottom navigation 不是万金油,也不是药丸,它是一种新的导航方式,一种可供选择的解决方案。具体怎么用,如何用好,这是大家都要思考的一个问题。

理性看待变化,不要盲目跟风,这也是一款优秀应用的自我修养。


6

Kenny MacCormick

Kenny MacCormick专栏主编

「不会把你们的遗愿变成大海的碎藻,我一直与你们同在」

关注

评论(3)

  • AaronSSP
    AaronSSP
    为什么要放弃滑动切换导航项的设计————会不会是这样?:导航项比较多,有些要滑动之后才会被“滑出来”,用户才看到。用户不够熟悉的话,可能想看看还有哪些可选的导航项,希望滑动浏览可选的导航项,随后再决定是否要切换导航项。如果滑动等于切换,“浏览可选的导航项”就变成“切换导航项”了。

    另外,iOS顶部按钮真让人受不了。都做了可以单手操作的S和SE了,还要来个无法单手操作的顶部按钮。双拍home键毕竟多一个操作,而且左上角这么常用的按钮位置仍然比较难触及。
    举报 回复 0
  • Corizon
    Corizon
    知乎那个真的不行……
    举报 回复 0
    • 阿寻
      阿寻
      知乎的Android版画风越来越奇怪... 随意拼凑了一些Material元素
      举报 回复 0