UI设计005 | 标签栏的目的与设计反思

发布于 2021-02-09 00:17

、标签栏的由来

标签栏的本质是导航。2014年之前,汉堡菜单或抽屉式导航(命名源自于Material Design)一直是最广泛使用的移动端导航方案。2014年,Apple在WWDC大会上抨击了这种方案,并提出了一系列更为直观易用的设计,其中就包括标签栏。2015年,作为抽屉式导航的发明者的Google,也在新的Android应用和Material Design规范中开始采用底部导航栏(等同于iOS的标签栏)。

注:汉堡菜单(如下图)



、标签栏的目的

基于导航的本质属性,标签栏设计的目的在于给用户传达三样信息:

1、我在哪儿?告知用户他们在信息架构中的位置(高亮选中标签、标签的图标和描述性文字)。
2、我可以去哪儿?可以去的位置(其余标签)。
3、我如何去那?用户可以在不忘记当前所处位置的情况下到达更深层的内容(通过父页面达到子页面)。


三、当前标签栏设计存在的问题
子页面覆盖主导航(标签栏)的互动模式存在如下几点问题(比照标签栏设计的目的):
1、我在哪儿?
当子页面中隐藏了导航栏,用户可能无从知晓他们处于哪个顶级标签的子页面下,即丢失了他们在整体信息架构中的位置。
2、我可以去哪儿?
当子页面中隐藏了导航栏中的其他标签,用户无法从此页面直接跳转到应用的其他功能下,而必须要跳转回上一级页面。
3、我如何去那?
子页面中的导航元素仅有一个没有标签或注释的返回箭头,它无法向用户传递关于目的页面的信息。

此外,子页面覆盖主导航(标签栏)的互动模式不同于模态视图:模态视图仅适用于短暂且独立的任务,用户可以选择完成或取消它们,而子页面呈现的并不是独立的过程,同时也不能被取消或保存。

子页面覆盖主导航(标签栏)的互动模式也不同于呈现图片时全屏的细节页面展示细节的全屏页面通常会采取一种特殊的过渡动画来解释其非典型的模态使用。

(注:“子页面覆盖主导航(标签栏)”,即目前很多标签栏设计,只有一级页面才显示标签栏,而进入二级或者更深层级的页面时,是没有标签栏的)


四、标签栏设计改进思路:

在这个话题上,Apple和Google达成了少有的一致。他们的设计规范中都鼓励设计师在应用的所有界面中都将标签栏(底部导航栏)显示出来。

“在使用时,底部标签栏应呈现在每个页面的底部” ——Google Material Design设计规范。
“标签栏…仅仅可以在显示键盘时被覆盖” ——Apple用户界面规范。
具体而言,有几点建议:

1、清晰地规范出模态视图和子页面视图的使用场景
2、仅在独立流程中使用模态视图(或在少数情况下使用全屏视图)
3、在其余场景中使用子页面视图
4、在所有的子页面视图中添加标签栏/底部导航栏
5、在用户滑动页面时可以隐藏顶部导航栏或底部标签栏来让用户聚焦、最大化界面使用(例如在文章页中)




非原创声明:转摘自“彩云译设计”《没想到APP中这么常见的底部标签栏设计,也有这么多的细节,仅供个人学习使用,侵删感谢!




相关素材