Android 底部导航栏(Bottom navigation)规范指南 - 文章教程

Android 底部导航栏(Bottom navigation)规范指南

发布于 2020-08-01 字数 7204 浏览 3651 评论 0

最近 Google 在 Material Design 设计规范中加入底部导航栏(Bottom navigation)设计,对此我会在文末给出个人看法!现在我们先来学习 Bottom navigation 在设计、使用、交互、风格、尺寸的一些规范。水平有限,如理解有误,请多多吐槽。

Android 底部导航栏(Bottom navigation)规范指南 - 图1

简单介绍

底部导航栏(Bottom navigation)这种设计在很多 Android App 中都是随处可见的,如支付宝、微信、QQ等都使用了,它允许用户可以在多个顶级视图之间快速切换。

如何使用

(1)底部导航栏需要有 3-5 个标签(tab),并且每个 tab 选择的视图重要性要相似,对于少于3个 tab 的情况,是不推荐使用 Bottom navigation 的。

正确方式:

Android 底部导航栏(Bottom navigation)规范指南 - 图2

错误方式:

Android 底部导航栏(Bottom navigation)规范指南 - 图3

(2)如果标签很多,比如有超过了 5 个这种情况呢?Google 也是不提倡使用 Bottom navigation 的,可以用 Drawer navigation 替换。

正确方式:

Android 底部导航栏(Bottom navigation)规范指南 - 图4

错误方式:

Android 底部导航栏(Bottom navigation)规范指南 - 图5

风格样式

(1)标签 Icons 和文字的颜色选择是很重要的,一亮一暗才能有对比,用户才很快知道你选择了哪个,如果五颜六色,你是很难分清选择了哪个的。

正确方式:

Android 底部导航栏(Bottom navigation)规范指南 - 图6

错误方式:

Android 底部导航栏(Bottom navigation)规范指南 - 图7

(2)标签的文字说明要简短而有意义,避免太长的,也不提倡太长了换行和省略的方式

正确方式:

Android 底部导航栏(Bottom navigation)规范指南 - 图8

错误方式:

Android 底部导航栏(Bottom navigation)规范指南 - 图9
Android 底部导航栏(Bottom navigation)规范指南 - 图10
Android 底部导航栏(Bottom navigation)规范指南 - 图11

注意:

    1. 选中的标签要展示高亮图标和文字
    1. 如果是3个标签的时候,要展示Bottom navigation bar中所有的图标和文字
    1. 如果是多于3个标签的情况,没选中的tab只需要展示图标就可以,不用文字说明

行为交互

(1)用户上拉列表时,隐藏Bottom navigation,下拉列表时,显示 Bottom navigation

Android 底部导航栏(Bottom navigation)规范指南

(2)点击 Bottom navigation Icon 的时候,不能打开菜单选择或者其他弹窗操作,而只是刷新当前视图的内容,如下图:

Android 底部导航栏(Bottom navigation)规范指南

(3)不推荐使用手势在视图内容区域切换视图

正确方式:

Android 底部导航栏(Bottom navigation)规范指南

错误方式:

Android 底部导航栏(Bottom navigation)规范指南

尺寸设计

(1)Bottom navigation对于尺寸的要求还是挺严格的,标签选中和没选中都有细微的差别。

Android 底部导航栏(Bottom navigation)规范指南 - 图16

效果如下:

Android 底部导航栏(Bottom navigation)规范指南

对手机app来说已经足够了,如果你想了解更多,可以去官网看看更多详情:https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-specs

杂谈

Android官网中有这么一句话:

Don’t use bottom tab bars

Other platforms use the bottom tab bar to switch between the app’s views. Per platform convention, Android’s tabs for view control are shown in action bars at the top of the screen instead. In addition, Android apps may use a bottom bar to display actions on a split action bar.

You should follow this guideline to create a consistent experience with other apps on the Android platform and to avoid confusion between actions and view switching on Android.

Android 底部导航栏(Bottom navigation)规范指南 - 图18

虽然我英语烂,但也不至于看不懂什么意思吧,之前说好的Meterial Design 规范说变就变,自己都不遵守,有何规范可言。

然而,我是理智的,Google + 和 Google Photos 都加入了底部导航栏(Bottom navigation),打脸归打脸,决定这一因素的还是用户。

我们说说 Drawer navigation,不要觉得疑惑,关Drawer什么事?没错,就是和它有关,认真想想,使用Drawer切换视图时,使用方式是点击按钮或者手势滑动打开,然后才选择跳转的Item,虽然节省了手机视图空间,但是操作较不方便以致使用率低,从而降低其他页面的跳转率这个缺点是不能忽视的。

所以说,相对于 Drawer navigation 来说,Bottom navigation就有优势了。

然后,对于我们开发来说,又是一大难点了

比如 FB、SnackBar 等显示的方式,个人觉得都可以不需要 FB 了,至于 SnackBar,看下图:

Android 底部导航栏(Bottom navigation)规范指南 - 图19

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

时光倒影

文章 0 评论

qq_YyjhCs

文章 0 评论

三人与歌

文章 0 评论

┼──瘾||

文章 1 评论