原文链接:https://github.com/LittleFriendsGroup/BottomNavigation

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

前言:

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

简单介绍

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

如何使用

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

正确方式:

错误方式:

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

正确方式:

错误方式:

风格样式

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

正确方式:

错误方式:

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

正确方式:

错误方式:



注意:

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

行为交互

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

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

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

正确方式:

错误方式:

尺寸设计

(1)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.

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

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

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

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

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

原谅我欣赏不了这种美。

底部导航栏Bottom navigation规范指南相关推荐

  1. Android Navigation与BottomNavigationView实现底部导航栏

    底部导航栏 一.效果图 二.实现 1.创建Fragment以及布局文件 2.添加FragmentContainerView和BottomNavigationView两个控件 3.配置xml资源文件 4 ...

  2. React Navigation——底部导航栏设计

    项目使用的框架是React Native,适配app.移动web.pcweb,记录一下自己遇到的坑 1.如何使底部导航栏的宽度随着pc web的宽度变化而变化 不能使用React native 的Di ...

  3. ios底部栏设计规范_设计干货:底部导航栏规范设计总结

    本文翻译了 Material Design 规范中对底部导航的规范总结,希望可以带给你更多帮助. 本文翻译了 Material Design 规范中对底部导航的规范总结,希望可以带给你更多帮助. 备注 ...

  4. android 底部导航栏透明度,如何实现Android透明导航栏(Translucent Navigation Bar)?...

    碰到一个问题,请看截图. 下面两张是Fuubo微博客户端的截图,底部导航栏都是透明的. 第一张截图中,侧边栏出来后,被底部导航栏遮住的地方是可见的. 第二张截图中,被导航栏遮住的文字内容,也是可见的. ...

  5. 转载:Android (争取做到)最全的底部导航栏实现方法

    原文出处 标题:Android (争取做到)最全的底部导航栏实现方法 作者:野狼谷 原文链接:Android (争取做到)最全的底部导航栏实现方法 - 野狼谷 - 博客园 前言 本文(争取做到)And ...

  6. (2019年10月更新) Android 最全的底部导航栏实现方法

    本文(争取做到)Android 最全的底部导航栏实现方法. 现在写了4个主要方法. 官方方法. 官方的 BottomNavigationActivity 使用Android studio 新建一个工程 ...

  7. 【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )

    文章目录 一.BottomNavigationBar 组件 二.BottomNavigationBarItem 组件 三.BottomNavigationBar 底部导航栏代码示例 四.BottomN ...

  8. 一行代码实现底部导航栏TabLayout

    欢迎关注公众号:JueCode app中底部导航栏已经是很常见的控件了,比如微信,简书,QQ等都有这类控件,都是点击底部标签切换界面.主要的实现手段有 RadioGroup FragmentTabLa ...

  9. 转载:Android底部导航栏,三种风格和实现

    原文出处 标题:Android底部导航栏,三种风格和实现 作者:阿飞__ 原文链接:Android底部导航栏,三种风格和实现_阿飞__的博客-CSDN博客_android导航栏 一.效果图展示 如果动 ...

最新文章

  1. 渭南java_渭南java语言入门教程视频
  2. boost::r_c_shortest_paths用法的测试程序
  3. JavaEE的13种核心技术
  4. 数据结构杂谈番外篇——时间复杂度计算
  5. 将网桥的配置写进去/etc/sysconfig/network-scripts/ifcfg-xxx
  6. 基础知识(二)matlab与c++混合编程之经验笔记
  7. js——window.open用法
  8. PyTorch 1.2 中文文档校对活动 | ApacheCN
  9. 学Mysql怎样快速入门?
  10. 蓝桥杯51单片机之串口通信发送接收信息【单片机开发初学者串口必会】
  11. 一口气发布11项新升级,免费送出1亿元算力:国产深度学习平台PaddlePaddle大更新...
  12. 宠物领养平台的分析与实现
  13. 云豹直播系统源码搭建部署教程
  14. 汽车诊断协议 - CAN BUS协议
  15. matlab神经网络训练结果常用评价指标
  16. Go语言之return语句的几种用法
  17. 深度学习基础----GAE和VGAE
  18. 平均的计算机符号,如何在Word中输入平均数的符号X上加一横(X拔)
  19. 种子轮、天使轮等相关知识
  20. 针对0xc000007b问题的解决办法

热门文章

  1. 大型企业网络配置系列课程详解(三)--OSPF高级配置与相关概念的理解
  2. 如何在DNN模块中插入一个图片--在模块中引用资源文件
  3. 7个步骤,帮您轻松实现云迁移
  4. 白牌交换机有什么特点?与传统换机相比有什么特别之处?
  5. QoS策略及通过BGP传播—Vecloud微云
  6. 数据结构——数据结构中的数据表示
  7. the Determine in June
  8. MySQL基础学习过程
  9. python build-in function
  10. Weblogic java.lang.OutOfMemoryError: PermGen space