底部导航模式更好吗？

随着我们的手机越来越大，我们需要调整我们建立和设计网站的方式。你能从应用程序设计和点击栏中学到一些东西吗？我们能修复网站的移动导航来降低交互成本吗？在本文中，我们将找出答案。

当你听到移动导航时，你首先想到的是什么？我猜是汉堡包滑出菜单。这种设计模式从最初的响应式设计开始就一直在使用，尽管此后发生了很多变化，但这种特定的模式并没有发生变化。为什么会这样？

我们从顶部菜单开始使用顶部导航？有没有更好的选择？本文将尝试探讨这些问题。

顶级导航和汉堡的历史

20世纪80年代出现了第一个汉堡菜单图标。它是由Norm Cox为Xerox Star（世界上第一个图形用户界面）设计的。他还为同一界面设计了文档图标。这段历史是由的Geof Allday发现的。

众所周知，2011年目前的移动导航是由Ethan Marcotte的“响应式Web推广设计书籍。从那时起，顶级导航和汉堡已经成为该行业的标准。

手机屏幕尺寸在10年内翻了一番

自从最初的iPhone移动设备销量逐年增长。2019年是市场饱和，销量开始下降的第一年。但这并不意味着人们不使用电话。据Quartz和Ciope到2020年，我们将把80%的时间花在手机上网上。与2010年相比，当时只有四分之一的互联网用户使用电话。

随着电话销量的增加，屏幕尺寸也翻了一番多。智能手机的平均屏幕尺寸为3.2英寸已经增加到5英寸.5英寸。2017年，设备制造商开始使用5.7英寸和6英寸18：9显示屏的更高的18：9长宽比。现在，由于其屏幕面积超过5英寸，我们开始看到6英寸18:9显示器成为旗舰产品和中端价格段的新标准.5寸16:9显示器。

基本上，手机的屏幕尺寸越来越大。但是我们如何调整设计模式来反映这些变化呢？

拇指驱动设计

关键是，在几乎每种情况下，最基本的三种握法是最常见的。49%的人用一只手握住手机，36%的人用一只手握住手机，用另一只手的手指或拇指猛击，其余15%用双手握住手机BlackBerry-祈祷姿势，用手拇指。75%的用户只能用拇指触摸屏幕。所以术语拇指驱动设计。

操作手机的三种主要方式。

下图定义了容易到达、难以到达和介于两者之间的区域。

但是，随着电话尺寸的增加，映射发生了一些变化：

大电话很小时，大多数区域都很容易到达。随着屏幕的扩大，如果不调整手机，几乎无法触摸顶部。从上面的例子中，我们可以看到最昂贵的屏幕空间在哪里。但是，它经常在网页上被忽略。如何解决？

底部导航模式

底部导航模式有时会在网络上弹出。这个想法本身就很简单：进一步向下移动导航栏。

将导航栏放在底部可以让用户更容易地单击菜单图标，而次要项目可以移动到顶部。基本上，你只需要切换顺序。该逻辑一直用于点击栏模式中的移动应用。它本身并不是一个新的想法，但网页设计中仍然不如在应用程序设计中流行。

这不是万无一失的解决方案，因为它提出了一些关键问题，但这是一个值得选择的选择。让我们讨论一些可能的问题。

主要和次要项目

随着屏幕顶部越来越难以触及，最好把主菜单项放在底部附近。但其他同样重要的事情呢？

为了解决这个问题，我提出了两个想法：

将搜索栏或任何非主要项目放在顶部；由于它是导航的重要组成部分，底部，因为它是导航的重要组成部分。

重新构思主要和次要导航项目的线框

大菜单对滚动有什么影响？

有些网站有广泛的菜单、子菜单和介于两者之间的所有内容。自然地，它将涉及滚动。在这种情况下，如何翻转主/次要项目？

重新构思大型菜单的线框

固定主要和次要项目(菜单链接、徽标、搜索输入)，同时滚动菜单列表。这样，您的用户将能够满足他们的关键需求。

徽标放在哪里？

你可能会担心标志的位置。有两种解决方案：

把徽标放在底部可能会很尴尬，但拇指可能不会阻碍它。然而，我们可能会错过它，因为我们倾向于从上到下扫描。更合理的选择是在页面顶部保留徽标，而不是固定徽标。使其成为内容的一部分，以便在滚动时消失。这样，人们仍然可以完美地看到它。

如您所见，我们在线框中使用菜单标签。在图标旁边贴标旁边贴标签可以增加用户参与度的75%:

徽标的线框位于顶部，菜单位于底部。

怎样用把手？

一些操作系统和浏览器倾向于将屏幕底部用于自己的目的。iOS手柄可能会阻碍底部导航。确保导航足够宽敞iOS安全区域。

iOS把手和安全区

如果将徽标放在中心，链接可能会与手柄功能发生冲突。一点填充就能解决问题。

用户会适应这种模式还是感到困惑？

在写这篇文章的时候，我们一直在思考这是否会成为浏览你网站的用户的重新设计或简单的可用性改进。毕竟，根据雅各布定律，用户大部分时间都花在其他网站上。这意味着用户希望您的网站以与他们已经熟悉的所有其他网站相同的方式工作。

底部汉堡菜单图标的交互成本远低于顶部菜单图标，因为它更接近。通过将CTA菜单靠近拇指，让用户更快地实现最终目标。如果交互成本降低，用户会发现功能失去方向吗？可能不是。

这将如何与Tap Bar模式集成？

单击单行列出了三到五个最常见的一级操作。您可能已经在流行应用和一些网站上看到了它:

点击直板设计

汉堡菜单多年来引起了很多争议。隐藏导航(汉堡菜单)将大大降低手机和台式机的用户体验。在移动设备上，57%的人使用隐藏导航，86%的人使用组合导航，即多了1.5倍！组合导航是带有汉堡包菜单的标签栏模式-以下为例：

Samsung应用示例

轻敲杆似乎是完美的解决方案，但它也有问题。它只适用于顶级视图。不适用于辅助导航项目。为了解决这个问题，汉堡/轻敲棒混合组合诞生了。如果你关注三星应用，菜单上的最后一个是 更多按钮，按钮调出汉堡菜单。

本质上，如果你想把两者结合起来，底部导航模式可以很好地集成到轻敲栏模式中。在移动应用程序中找到一个好的例子的最好方法是找到它。

重新构思了一些受欢迎的网站

我打开了Photoshop，并迅速模拟了一些流行的网站来解释将导航栏更改为自下而上并不是那么困难。

让我们先来看看彭博社：

重新想象彭博社网站底部导航

接下来，让我们看看Invision：

INVISION网站重新设计底部导航

是的，这个想法确实引起了怀疑，但它很简单，可以适应网络。由于交互成本要低得多，确实会造成可用性差异。

但是如何说服客户呢？

作为师可能会看到这种模式的潜力，但如果客户或老板不知道该怎么办？这个问题我会用几个参数来回答:

菜单项底部设计移动应用多年。我注意到流行的移动应用程序开始将重要部分转移到底部。优步就是一个很好的例子。搜索栏是屏幕上最重要的项目之一。在旧于旧设计的顶部。现他们已将其移至底部。这里能做些什么吗？

新旧Uber搜索栏设计

在移动应用程序设计中，将重要的导航项移到底部并不新鲜。由于某种原因，网站设计行业还没有赶上这一步。

总结

事实很清楚：电话越来越大，屏幕的某些部分比其他部分更容易交互。在顶部使用汉堡菜单会增加交互成本，我们在屏幕底部使用了大量惊人的移动应用程序设计。也许是时候让网页设计界也开始在网站上使用这些想法了？

众所周知，所有这些都不是万无一失的解决方案，但值得一试。帮助用户体验更好。