美文网首页
Android设计规范——底部导航(Bottom navigat

Android设计规范——底部导航(Bottom navigat

作者: _薯泥鸡腿_ | 来源:发表于2016-08-04 16:04 被阅读1736次

组件

底部导航(Bottom navigation)

底部导航栏使得最高级视图之间的切换和浏览变得非常容易。

使用

底部导航栏提供了在app顶级视图之间的快速切换。主要是在移动产品设计上使用。如果需要更大的展示空间,比如桌面,使用侧边栏导航也能起到相似效果。

移动设备上的底部导航栏
使用条件
  • 适用于3~5个同等优先级的最高级别的内容(或者采用抽屉导航,这样可以从app的任何一个地方访问导航)
  • 这些最高级别的内容需要能从app的任何一个地方直接访问
反例:少于3个的,不建议用底部导航,可以尝试用标签来切换

如果你的app顶层结构超过了5个,最好不要使用底部导航,可以尝试抽屉式导航。

在底部导航栏中最多出现五个标签 反例:不要在底部导航栏中出现滑动内容
底部导航和标签

要避免底部导航和标签的混合使用,这会造成用户的困惑,例如,相同的内容即能通过底部导航栏又能通过标签来切换展示。

样式

图标和文案

根据以下情况,样式有所不同:

  • 当前视图获得焦点时,底部导航栏显示该视图的图标和对应文案
  • 当只有三项操作的时候,显示所有图标和该图标的对应文案
  • 如果有四个或者五个操作,未激活的操作只显示图标(不显示文案)

颜色

使用app的主颜色对当前激活的图标和文案着色

使用app的主色来指示当前激活的视图 图标不要使用不同的颜色

如果底部的导航栏有颜色,当前操作的图标和文字要使用白色或者黑色。

在有颜色的导航栏上,使用白色图标和文字标识当前激活的操作
文字标签

文字标签应该尽可能简洁的描述图标的含义。应该避免冗长的文字,否则文字可能会换行或者截断。

避免标签文字换行 避免标签文字被截断 不要用缩放来适配
行为

每个导航栏的图标都要指向一个特定的落地页,不能是打开一个菜单或者其他弹出项。

android系统的返回按钮不能在导航栏的各个视图中切换。

随着屏幕的滑动,底部导航栏可以出现和消失。

  • 向下滑动的时候,隐藏导航栏
  • 想上滑动的时候,重新出现导航栏

不同通过手势的左右滑动来切换导航内容

<small>点击查看原文:
https://material.google.com/components/bottom-navigation.html#bottom-navigation-specs</small>
</small>

相关文章

网友评论

      本文标题:Android设计规范——底部导航(Bottom navigat

      本文链接:https://www.haomeiwen.com/subject/qfnqsttx.html