小纽扣

底部导航栏可以说是现在最流行的导航控件了,微信、支付宝、淘宝、网易云音乐……各种类型的应用都有应用。

如何使用这种极普遍的导航控件?之前的文章有介绍过相关规范。下面摘录其中有关这种控件的交互行为的定义:

 

Material Design 规范

当用户选择点击某个选项时,则应该直接展现相应的页面,或者刷新当前的页面;注意不要在点击后展示菜单或者弹出框(pop-up)。另外,如果点击系统返回键,不会切换到底部导航栏上一次点击的页面。

另外,有以下三点需要注意:

  • 1、点击当前选项的图标,则页面返回顶部。即如果当前在第一个tab,则点击第一个tab,则页面回到顶部。
  • 2、点击底部导航栏中的选项后,应该返回该页面顶部并刷新该选项的页面(这一点笔者认为也不是必要,需要根据应用自身的场景来判断)。
  • 3、当点击底部导航栏中的不同选项时,避免页面发生横向切换。

 

苹果iOS设计规范

苹果的设计规范,主要讲了以下3点:

  • 1. 如果底部导航栏中的某个选项暂时不可用,不要把该选项置灰。在不可用而又点击了的情况下,页面只要展示这个页面为什么没有内容就可以了。
  • 2. 避免使用过多的选项。当然,如果选项过少也会有问题。一般在iPhone上,3到5个选项比较合适。在iPad上可以适量增加。
  • 3. 可以使用肩标来提示信息数量,如下图:

 

以上是底部tab导航栏的基本交互特性。底部tab导航,一般用于组织起应用的最顶层内容,其中的每个tab承载了应用的一个维度的功能。例如微信,每个tab都承载了一个维度的功能👇

 

基于这个特点,对于底部tab导航栏,最常用的做法是它只出现在一级页面。当用户从一级页面进入到二级页面,那么底部导航栏会消失👇

沐风我也一直认为,底部导航栏就该如此使用:从一级页进入二级页,它,必须消失。

然鹅,事情怕就怕有例外,而且还是大佬级别的例外。

有一次使用苹果系统自带的相册应用,当我进入二级页,底部导航栏还赤条条的存在着。

这不是挑事吗?

无独有偶,苹果App Store也是如此。

我浏览了手机上的快300个应用,发现网易云音乐、虾米音乐也是采用二级页保留底部导航栏的逻辑。

虽然使用这种逻辑的应用数量较少,但这不能不引起我的质疑:

  • 底部导航栏难道不应该就在二级页消失吗?
  • 用户已经到了二级页,还可以切换到别的tab吗?
  • 如果二级页可以保留,那么什么情况下保留?

 

底部导航栏二级页存在感研究

我首先从设计规范出发,看一下这样做是否是符合规范的。

在找遍了iOS设计规范和谷歌的Material Design设计规范之后,我发现规范里并没有相关规定。

既然如此,那么从用户使用的角度,这么做是合理的吗?

于是我研究了在二级页保留底部导航的应用,发现这些应用的底部导航栏里的tab有一个共同点:每个tab的重要性差不多,且应用更偏重于让用户发现、探索新内容,而不是沉浸在某个模块里👇

以苹果自带的照片应用为例:“照片”tab以时间为维度组织用户的照片,“为你推荐”tab以智能算法为维度,“相簿”以相簿和照片类型为维度,搜索以用户主动搜索为维度,每种维度都提供了让用户搜寻、管理照片的可能。

比如用户如果需要找某一张特定的照片,ta可能首先通过相簿来找,当ta进入到某个相簿(此时为二级页),找了一会没找到,就切换到照片tab,通过回忆拍照片的大概时间段来寻找了。

其实这种随时能切换tab的方式,跟PC网站上,常驻在页面顶部的导航条很相似。

顶部的导航条,保证了用户在任何页面,都可以迅速到达特定的几个核心页面。

下面再来研究一下二级页没有保留底部导航栏的应用。

上面的3个应用,每个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上可以适量增加。
  • 可以使用肩标来提示信息数量。

 

原文地址:沐风与体验设计(公众号)

作者:小哥哥沐风

转载请注明:学UI网 » 掌握了这个导航控件,你可以设计80%的应用导航

登录收藏
 
你可能喜欢的:
11个神奇的视觉错觉,让你不敢再相信自己的眼睛11个神奇的视觉错觉,让你不敢再相信自己的眼睛
干货 | 如何构建UI组件设计规范干货 | 如何构建UI组件设计规范
小程序与App有什么区别?小程序与App有什么区别?
B端产品设计特性整理B端产品设计特性整理
“收藏、喜欢、关注”有啥区别?“收藏、喜欢、关注”有啥区别?
数据可视化在移动端的应用数据可视化在移动端的应用
大厂产品告诉你:提升交互表现的8个技巧大厂产品告诉你:提升交互表现的8个技巧
设计案例精选,如何通过App改版提高50%交易额?设计案例精选,如何通过App改版提高50%交易额?
四步搞定底部导航动效(下篇)四步搞定底部导航动效(下篇)
‘信息引导’超全总结,让你的设计有理有据‘信息引导’超全总结,让你的设计有理有据