专栏首页Material Design组件Material Design — 底部导航(Bottom Navigation)

Material Design — 底部导航(Bottom Navigation)

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚!

底部导航(Bottom Navigation)

Material Design链接:底部导航

底部导航

底部导航条能够通过单次点击动作,轻易的进行一级页面之间的切换。

点击底部导航的图标可以:1、直接将你带到相关页面;2、刷新当前页面。

底部导航主要用于移动端,为了在pc端实现类似效果,可以使用侧边导航。

用法

设置3-5个一级页面目的地

这些一级页面是需要直接访问的

颜色

激活的页面icon:1、底部导航栏为黑色/百色——用软件的主色调;2、如果底部导航栏已经有了颜色——使用黑色/白色。

规格

每个部分的宽度:底部导航的宽度除以一级页面数量(最大值为168dp,最小为80dp)

高度:56dp

图标:24×24dp


用法

底部导航提供了一个在一级页面之间的快速导航方式,主要用户移动端。

更大的显示器,如pc端,可以通过使用侧边导航实现类似的效果。例如,紧凑的“rail”处理处理方式默认展示导航图标。

左:移动端    右:pc端

什么时候用?

底部导航应该用于:

3-5个重要性相同的一级页面,且需要从app 中任何地方直接访问目的地

(超过6个:app中一直存在的持久抽屉导航persisitent navigation drawer)

(不满3个:只有1个/2个目的地的tabs)

不满3个可以用tabs

超过6个不要在底部导航用可滚动的内容形式

超过6个就不要放在底部导航里了,太挤了

底部导航和标签

当组合底部导航和tabs时要注意,因为这样的组合可能会因为用户不知道二者的优先级而在导航时引起混乱。


风格

图标和文本

因为底部导航动作以icon呈现,所以底部导航中的内容应该与icon进行适当的互动。

应按下列要求制作每一个动作(目前并不适用,因为图标无法100%传递标签的内容):

·当页面处于焦点时,显示页面的icon和标签;

·当只有三个动作时,始终显示icon和文本标签;

·如果有四个或五个动作,则只显示icon作为未激活状态。

颜色

激活的页面icon:1、底部导航栏为黑色/百色——用软件的主色调;2、如果底部导航栏已经有了颜色——使用黑色/白色。

文本标签

文本标签为底部导航icon提供了简短、有意义的定义。避免长文本标签。


行为(这部分的动图去MD的网站看吧...)

底部导航栏可以从一个主题中的n级页面移动到另一个主题的一级页面。当用户去往下级页面时要保持底部导航可用,可通过持续展示,或者通过滚动隐藏和显示。

底部导航栏不应用于:

·专注于单一任务的观点,如电子邮件“撰写”页面。

·包含用户首选项或设置的页面

在Android上,后退按钮不在底部导航栏视图之间导航。

底部导航icon

点击底部导航icon将直接带你到相关页面,或刷新当前页面。每个icon必须指向目的地,并且不能打开菜单或对话框。

滚动

底部导航栏滚动时可以动态地出现和消失:

·向下滚动隐藏底部导航栏

·向上滚动显示

手势

在内容区域上使用左右滑动手势不会在一级页面之间切换。

点击icon进行切换时也该避免横向切换在页面之间转换(如左右推进)。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Material Design — 底部动作条(Bottom Sheets)

    霖酱
  • Human Interface Guidelines — Modality

    霖酱
  • 页面信息设计思考

    对于单张页面上的信息排布和节奏并没有太多的感知,只是不知道的时候看看竞品,然后抄抄改改。虽然最后开发出来并没有问题但是总觉得自己没有提高。

    霖酱
  • Flutter 在哈啰出行 B 端创新业务的实践

    Flutter 在我们团队的起步算是比较晚的,直到 Flutter 要出 1.0 版本前夕才开始实践。

    稻子
  • 构建于 B/S 端的 3D 摄像头可视化监控方案

    随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用。

    不会飞的小鸟
  • 预热 | 英特尔通过预测变量实现策略性强化学习,夺冠 Doom 游戏竞赛(ICLR 2017)

    AI科技评论按:ICLR 2017 将于4月24-26日在法国土伦举行,届时AI科技评论的编辑们也将前往法国带来一线报道。在这个深度学习会议举办之前,AI科技评...

    AI科技评论
  • 每个时代都有创世者,谁创造了 AI 时代?

    从12年前英特尔原CEO保罗·欧德宁对智能手机芯片商业潜力的不屑,而将乔布斯拒之门外,再到游戏显卡市场常年被芯片巨头的战略忽视。边缘化市场于垄断者而言,是提高平...

    AI掘金志
  • Android Intent Action 大全

    1、 使用Action跳转,当程序AndroidManifest.xml中某一个 Activity的IntentFilter定义了包含Action,如果恰好与目...

    阳光岛主
  • 基于 HTML5 结合工业互联网的智能飞机控制

    从互联网+的概念一出来,就瞬间吸引了各行各业的能人志士,想要在这个领域分上一杯羹。现在传统工业生产行业运用互联网+的概念偏多,但是在大众创业万众创新的背景下,“...

    HT_hightopo
  • 【API测试】使用Dredd测试您的API

    通常,在开发应用程序时,前端和后端开发人员在实现路径上采用两条不同的路径。前端开发人员更多地是设计驱动的,而后端开发人员则更注重数据。这通常会导致潜在的整合差距...

    首席架构师智库

扫码关注云+社区

领取腾讯云代金券