编辑导读：欣赏网页的时候，我们经常都能看到右上角有“汉堡菜单”，它们凡是是三行会萃在一起，形状雷同于一个汉堡。而标签栏则是直接把详细的导航分类列出来，让用户按照目标做出选择。本质上来说，这两种导航 *** 截然差异，可是有些时候标签栏只是一种新的汉堡菜单。本文作者对此展开了说明，与各人分享。

在本文中，我们来接头一种失策的导航模式。

凡是，我不想只诉苦糟糕的UX设计，也不想只指出问题。相反，我老是实验提出办理方案。这次是另一回事了：办理方案很明明-它的标签栏-但该办理方案的初志在最近几年迷失了，导致了同样的老问题。在我们开始接头办理方案之前，是时候再次接头问题了。

01 回首

2014年，苹果在移动导航应如何事情方面激发了根天性的转变。在此之前，“汉堡菜单”或“导航抽屉”（官方的Material Design定名）是最常见的移动导航办理方案。在2014年WWDC演讲“ 设计直观的用户体验 ”中，Apple根基上否认了此设计元素，并发起利用差异范例的导航（譬喻标签栏）。

WWDC演讲“设计直观的用户体验”

WWDC的接头广为传播，全世界的UX和UI设计师开始谈论汉堡菜单的漏洞：

从当时起，汉堡菜单开始消失，标签栏将其替换为办理方案。2015年，甚至是导航抽屉之父的Google也开始在本身的Android应用措施和《质料设计指南》中引入“底部导航”（即iOS“标签栏”）。它好像是满意直观移动导航方针的更佳办理方案，设计师开始思量他们想要再次实现的方针。

底部导航，Material Design设计指南导航方针

快速回首：「导航」必需汇报用户的三件事：

我在那边？

我还能去那边？

我到哪里会发明什么？

标签栏满意所有3个要求。它在每个屏幕上都是可见的，因此始终为你提供视觉定向。它显示了你在信息体系布局中的位置（勾当标签突出显示），可以去的处所（其他标签）以及在哪里可以找到的内容（图标和描写性标签）。你可以会见更深的内容（从父屏幕导航到子屏幕），而不会丢失上下文和您在应用中的位置。

换句话说：标签栏是一个完美的移动导航办理方案。至少是这样-直到设计师开始利用它们而没有思量“为什么？”。在思量实际问题之前先思量办理方案时，他们健忘了标签栏最初试图实现的方针。如今，标签栏的利用 *** 与2014年之前利用汉堡包菜单的 *** 沟通。

02 标签栏的问题

查察以下UI，你最喜欢的Medium iOS应用，并实验找出问题地址：

屏幕截图：Medium 应用

一旦用户从顶层视图导航到子视图（譬喻，文章），该子视图就会包围整个屏幕，包罗标签栏。

屏幕截图：Medium（小我私家配置）

此刻，让我们再次看一下三个导航方针：

我在那边？通过将导航埋没在子视图中，用户将不再知道他/她地址的应用措施的哪个顶级页面。用户在你的整体信息架构中迷失了位置。

我还能去那边？通过埋没其他顶级页面，用户将无法直接导航到应用措施的其他区域。相反，他们首先必需导航回到信息体系布局的顶层。

我到哪里会发明什么？子屏幕中独一的导航元素是一个小的左箭头，没有标签或描写。它不会通过单击来汇报用户他/她要去那边。

Medium包括选项卡导航时大概有更好的意图。数以千计的其他iOS和Android应用措施也是如此。它可以完美地在顶级视图上运行，可是它们的执行无法满意子视图中导航的每个方针。

子视图通过包围整个导航（选项卡栏）而表示为模态视图（弹窗），但它的动画结果雷同于子视图（从右到左），并显示反向链接（箭头），雷同于子视图。模态基础不是一件坏事。“模态通过阻止人们在完成任务或封锁动静或视图之前执行其他操纵”（Apple）。

可是模态还需要利用模态动画（iOS：从底部到屏幕动画），并包罗完成和打消按钮以退出模态视图。模态视图仅用于独立任务的短期任务而且可以完成或打消，譬喻写邮件，在日历中添加事件，打消通知等……它们不规划用作具体视图或替换子视图。这些子视图不是一个自包括的进程，不能被打消或生存。