底部导航栏可以说是现在最流导航控件了,微信、支付宝、淘宝、网易云音乐等等,各类型 APP 都有应用。
如何使用这极普遍导航控件呢?先来看看在 Material Design 规范和 iOS 规范下基本交互特性。
用户选择击某个选项时,则应该接展现相应页,或者刷新前页;注意不要在击后展示菜单或者弹出框(pop-up)。另,如击系统返回键,不会切换到底部导航栏上击页。
另外,有点需要注意:
- 击前选项图标,则页返回顶部。即如前在第个 tab,击第个 tab,页回到顶部。
- 点击导航栏中的项后,应该返该页面顶并刷该项的页面(这一点笔者认为是必要,需要根据应自身的场景来判断)。
- 当点击底部导航栏中的不同选项,避免页面发生横向切换。
苹设计规范,主要讲了以下三:
- 果底部导航栏中的某个选项暂时不用,不要把该选项置灰。在不用而又点击的情况下,页面只要展示个页面为什么没有内容就以。
- 避免使用过多选项。然,如选项过少也会有问题。般在 iPhone 上,3 到 5 个选项比较合适。在 iPad 上可以适量增加。
- 可使肩标来示信息数量,如图示。
以上是底部 tab 导航栏的基互特。底部 tab 导航,一般用组织应用的最顶内容,其中每个 tab 承载应用的一个度的功能。例微信,每个 tab 承载一个度的功能。
基个特点,对底部 tab 导航栏,最常用的做法是它只出现在一级页面。当用户从一级页面进到二级页面,么底部导航栏消失。
我也一直认为,底部导航栏就该此使用:从一级页进二级页,它,必须消失。
然而,事情怕有例,而是大佬级例。
有一次使苹果系统自带的相册应,当我进入二级页,导航栏还存在着。
这不是挑事吗?无独有偶,苹果 App Store 也是如此。
浏览了机上的快 300 个应用,发现网易云音、虾音也是采用二页保留底部导航栏的逻辑。
虽然使用这种逻辑的应用数较少,但这不能不引起我的质疑:
- 底部导航栏难道不应该就在二页消失吗?
- 用户已到了二级页,还可以切换到别的 tab 吗?
- 果二级页以留,么什么情况下留?
首先从计规范出发,一下这做是否是符规范的。
找遍了 iOS 设规范谷歌的 Material Design 设规范之后,我发规范里并相关规。
既此,么从用户使用的角度,么做是合理的吗?
于是我研究了在级页保留底部导航应用,发现这些应用底部导航栏里 tab 有个共:个 tab 要性不多,应用更偏于让用户发现、探索新内容,而不是沉浸在某个模块里。
以苹自带照片应用为例:「照片」tab 以时为维度组织用户照片,「为你荐」tab 以智能算法为维度,「相簿」以相簿和照片类型为维度,搜索以用户主动搜索为维度,维度都提供了让用户搜寻、管理照片可能。
如户如果需要某一张特定的照片,他可先通过相簿来,当他进入到某个相簿(此时为二级页),了一会没到,就切换到照片 tab,通过忆拍照片的大概时间来寻了。
其实这种随能切换 tab 的方式,跟 PC 网站上,常驻在页面顶部的导航条相似。
顶的导航条,保证了户在任何页面,都可迅速到达特定的几个核心页面。
下面再来研究一下二页没有保留底部导航栏的应用。
上面的三个应用,每个 tab 的重要程度也差不多,但每个模块提供的功能都相对更沉浸。比如淘,第一个 tab「首页」主要让用户浏览商品,第二个 tab 则是让用户浏览各种内容。这个 tab 之间,是不需要用户频繁切换的。
并且,入二级页后,页面底部会较频繁出新的操作栏。
如果二级页依然保留底部导航栏,那么底部的操作栏会堆一起,显然不可以的。
iOS 规范里,找到与此相关的明,但谷歌的 Material Design 规范里,我找到了间接关联的一段明:
- 在 Android 上:点击某个 tab 后,展示该 tab 的最高一的页面内容。重置任何先前的用户交互和临屏幕状,例如滚动位置,选项卡选择和搜索行为。
- iOS :点击某 tab 后,展示该 tab 里用户之的交互结果。如果用户先访问过该 tab,则点击该 tab 后,展示用户操作的后一屏幕(如果可能,保留其先状态)。如果用户以访问过该 tab,则展示该 tab 的高一级的页面内。
上述的说中,Material Design 规范主要在说切换 tab 后,是否保留用户之前的操作结果。总结一下,就是在 Android上,切换后不保留操作结果,在 iOS 上需要保留。
希望用户更沉浸,则底部导航栏只在一页出现;希望用户更随切换,则在二页也保留。
当二级页常操作栏时,不建议保留底部导航栏。
果底部导航栏中的某个选项暂时不用,不要把该选项置灰。在不用而又点击的情况下,页面只要展示个页面为什么没有内容就以。
避免使用过多选项。然,如选项过少也会有问题。般在 iPhone 上,3 到 5 个选项比较合适。在 iPad 上可以适量增加。
可使肩标来示信息数量。
欢迎关注作者的公众号:「沐风体验计」