Material Design新秀Bottom navigation设计以及实现-上

上周Google更新了Android应用设计指导规范。新的规范主要是建议Android应用的开发者更多的使用Material Design对象库来让应用看的更加简洁。而最新的对象库中新增的一个亮点就是此前已经在Google Photos和Google+中出现过的「Bottom Navigation」组件,也就是我们在iOS应用中经常见到的底部Tab导航栏。

那么我们今天就来了解一下Bottom navigation组件吧

使用方法

底部导航提供了一个应用程序的顶层视图之间快速导航。它主要设计用于在移动设备上使用。在大一点的设备,比如平板,桌面系统上,可以实现通过使用侧边栏导航类似的效果。例如,在默认情况下,使用紧凑型的显示导航图标。


Material Design新秀Bottom navigation设计以及实现-上_第1张图片
移动设备上的底部导航栏


Material Design新秀Bottom navigation设计以及实现-上_第2张图片
在大屏设备上的左侧导航栏样式, 如在桌面设备或者平板

使用注意事项

底部导航栏应该在以下的情况使用动在顶层的导航需要

有类似重要性的三至五个条目(或者在程序的任意地方都需要显示)

底部的导航栏不能超过六个条目,更不能让他滑动显示

当导航栏的条目有焦点的时候显示当前条目的图标和文字

如果只有三个条目的话同时显示图标和文字

当底部导航栏有四至五个条目的时候展示动态展示图标和文字(获取焦点的时候展示图标和文字,没有焦点只展示图标)

Material Design新秀Bottom navigation设计以及实现-上_第3张图片
使用程序的Primary Color来展示,取得焦点的条目
Material Design新秀Bottom navigation设计以及实现-上_第4张图片
如果底部的导航栏被选中了把条目的颜色和图标设置成白色或者黑色
Material Design新秀Bottom navigation设计以及实现-上_第5张图片
底部的标签要剪短

Behavior

如果你了解Design Library那么你一定了解behavior

那么Bottom navigation有什么behavior呢我们通过图片简单了解一下

Bottom navigation样式以及设计细节


Material Design新秀Bottom navigation设计以及实现-上_第6张图片
Material Design新秀Bottom navigation设计以及实现-上_第7张图片
Material Design新秀Bottom navigation设计以及实现-上_第8张图片
Material Design新秀Bottom navigation设计以及实现-上_第9张图片

最小宽度和最大宽度(包括padding):

最大值: 168dp

最小值: 120dp(大的View), 104dp (比较小的View)

高度:56dp

图标:24 x 24dp

内容对齐方式:

文本和图标水平居中

Padding:

6dp 图标上方(获取焦点), 8dp 图标上方 (没有获取焦点)

10dp 文字底下

12dp 文字左右

文字标签:

正常的图片14sp (获取焦点)

正常的图片12sp (没有获取焦点)

Material Design新秀Bottom navigation设计以及实现-上_第10张图片
Material Design新秀Bottom navigation设计以及实现-上_第11张图片
Material Design新秀Bottom navigation设计以及实现-上_第12张图片
Material Design新秀Bottom navigation设计以及实现-上_第13张图片
Material Design新秀Bottom navigation设计以及实现-上_第14张图片

阴影

因为snackbars 有一个 (6dp) 的阴影,snackbar在bottom navigation bar 后边显示(8dp elevation).

Bottom sheets, navigation drawers 和键盘显示的时候在bottom navigation bar的上部, 暂时覆盖他


Material Design新秀Bottom navigation设计以及实现-上_第15张图片

整体样式


Material Design新秀Bottom navigation设计以及实现-上_第16张图片

https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-specs

不周之处尽请指正,如果喜欢可以打赏


附英文网站截屏


你可能感兴趣的:(Material Design新秀Bottom navigation设计以及实现-上)