Material design:Bottom navigatio
Pi Day之后看到MD官方文档更新了就爬上去瞅了瞅。
主要更新了两个
The March 2016 release (for Pi Day) of the material design spec includes the following new sections:
-
Bottom navigation bars allow switching between top-level views
-
Split screens allow the display of two activities at once (Android only)
安卓的那只手机,一直用的Sony,由于原本的操作栏是在屏幕内的,所以之前真的是被各种底栏菜单折磨的不要不要的。之前也有问过其他使用安卓手机的人(小米,vivo,oppo居多),很多人表示底栏操作起来没有很大的障碍。
用着大索法的我真的是对那些放bottom navigation的app哭笑不得。
之前看到Google Photos更新时放出的宣传图瞬间就把我弄懵逼了,不知道为什么就有一种“完了完了,MD会不会过几天在what’s new里面加上如何使用底栏菜单的章节“的想法。
在爬上MD文档去看详细的细节之前的我真的是一脸智障,不过将新更的部分看完了之后觉得Google也确实为退出bottom navigation做了一番工作的。
他们自己都说了...
Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.
做一个简单的笔记好了,万一以后用到这种导航模式了呢 -(:зゝ∠)_
1.用法
什么时候使用:
(1)3-5个顶级菜单栏选项
(2)希望导航栏中的导航项在任意界面都能被用户注意到
注意:
bottom navigation 和tab的形式混合使用可能会导致用户感到疑惑。
-
底栏菜单上的选项为3-5个
-
底栏菜单是固定的不能横向滚动
2.样式
图标和文本:
-
(1)将选中的图标明显区分出来
-
(2)在只有3个导航项的时候,将图标和文本一直显示出来
-
(3)4,5个导航项的时候,未选中的导航项只用显示图标
color
-
对于当前选中的导航项(包括图标和文字)填充app的主色调
-
如果当前的导航有背景色,将当前选中的导航项(包括图标和文字)填充白色或者黑色
text labels
- 使用简洁的,意义明确的文字去描述导航项,文字不能转行,不能缩小或者省略一部分
3.行为
-
回到点击过的导航项直接跳转到新的导航项顶部,点击当前的导航项回到当前内容的顶部。不保留原停留历史
-
每一个导航项必须直接引导到结果页面,不能弹开其他的菜单或者弹窗。
-
上滑自动隐藏,下滑显示。
-
左右滑动导航项不会切换
-
导航项切换时采用淡入淡出的补间,内容区域不能左右切换
-
导航项被点击的时候有ripple动效
四.规范
推出 bottom navigation bar 感觉是合情合理的,只不过之前Google的设计博客有一张图让我印象很深… 对比iOS和Android设计的,特地去翻了出来,然后注意到了底下这行字,恩...世界真奇妙