移动网站使用底部导航模式更好吗？
每当您听到“移动导航”时，您首先想到的是什么？我的猜测是汉堡从菜单上消失了。这种设计模式自响应式设计诞生以来就一直在使用，尽管此后发生了很多变化，但这种特定的模式仍然保持不变。这是为什么？
顶级导航和汉堡的历史
第一个汉堡菜单图标开始出现在20 世纪80 年代。它是由Norm Cox 为Xerox Star 设计的，这是世界上第一个图形用户界面。他还为同一界面设计了文档图标。这段历史是由杰夫·奥尔戴发现的。
众所周知，现在的手机导航是由2011年Ethan Marcotte的《响应式网页设计》一书普及起来的，从此，顶部导航和汉堡包就成为了行业标配。
手机屏幕尺寸在10年内翻了一番
自初代iPhone 问世以来，移动设备销量逐年增长。 2019年是市场达到饱和点、销量开始下降的第一年。但这并不意味着人们不使用手机。根据Quartz 和Ciope 的报告，到2020 年，我们将有80% 的时间通过手机上网。与2010 年相比，当时只有四分之一的互联网用户使用手机。
随着手机销量的增长，屏幕尺寸增加了一倍多。智能手机的平均屏幕尺寸已从3.2 英寸一直增加到5.5 英寸。 2017 年，设备制造商开始转向更高的18:9 纵横比，推出5.7 英寸和6 英寸18:9 显示屏。现在，我们开始看到6 英寸18:9 显示器成为旗舰店和中端价格段的新标准，因为它们提供比5.5 英寸16:9 显示器更大的屏幕面积。
基本上，手机屏幕尺寸越来越大。很好，但是我们如何调整设计模式来反映这些变化呢？
拇指驱动设计
要点是，几乎在所有情况下，三种基本握法都是最常见的。 49% 的人用一只手握住手机，36% 的人用一只手握住手机，然后用另一只手的手指或拇指滑动，其余15% 的人采取双手黑莓祈祷姿势，同时双手竖起大拇指。 75% 的用户只需一根拇指即可触摸屏幕。因此出现了术语“拇指驱动器设计”。
我们操作手机的方式主要有三种。
下图定义了容易到达、难以到达以及介于两者之间的区域。
然而，我们认为随着手机尺寸的增加，映射也发生了一些变化：
当手机很小时，大多数区域都可以轻松访问。随着屏幕变得越来越大，在不调整手机的情况下触摸顶部几乎是不可能的。从上面的例子中，我们可以看到最昂贵的屏幕空间在哪里。然而，它在网页上经常被忽略。我们该如何解决呢？
底部导航模式
有时，网络上会弹出底部导航模式。这个想法本身很简单：将导航栏进一步向下移动。
将导航栏放在底部可以让用户更轻松地单击菜单图标，同时可以将次要项目移至顶部。基本上，你只需切换顺序即可。移动应用程序一直在点击栏模式中使用这种逻辑。这本身并不是一个新想法，但它在网页设计中仍然不如在应用程序设计中受欢迎。
这不是一个万无一失的解决方案，因为它提出了一些关键问题，但它是一个值得选择的选项。让我们探讨一下可能出现的一些问题。
主要和次要项目
随着屏幕顶部变得越来越难以到达，将主菜单项放置在靠近底部的位置是更好的选择。但其他同样重要的事情呢？
我提出两个想法来解决这个问题：
将搜索栏或任何非主要项目放在顶部；号召性用语按钮应保留在菜单项旁边的底部，因为它是导航的重要组成部分。
重新设计了主要和次要导航项目的线框
大菜单对滚动的影响如何？
有些网站有丰富的菜单、子菜单以及介于两者之间的所有内容。自然地，就会涉及到滚动。在这种情况下如何翻转主要/次要项目？
重新构想的大型菜单的线框图
使主要和次要项目（菜单链接、徽标、搜索输入）固定，同时使菜单列表可滚动。这样，您的用户将能够满足他们所需的关键需求。
您在哪里放置徽标？
您可能会担心徽标的位置。有两种解决方案：
将徽标放在底部可能有点尴尬，但是您的拇指很可能不会妨碍它。然而，由于我们倾向于从上到下扫描，我们可能会错过它。更合理的选择是将徽标保留在页面顶部而不是将其固定。使其成为内容的一部分，以便它在滚动时消失。这样人们仍然可以完美地看到它。如您所见，我们在线框中使用了菜单标签。我们发现，将标签放在图标旁边可以提高75% 的用户参与度：
徽标的线框位于顶部，菜单位于底部。
如何与把手一起使用？
某些操作系统和浏览器倾向于使用屏幕底部来达到自己的目的。 iOS 手柄可能会妨碍底部导航。确保导航足够宽敞以容纳iOS 安全区域。
iOS 手柄和安全区域
如果将徽标放置在中心位置，则该链接可能会与车把功能发生冲突。一点点填充就可以了。
用户会适应这种模式还是会感到困惑？
底部汉堡菜单图标的交互成本比顶部菜单图标低得多，因为它更接近。通过将CTA 菜单放置在拇指附近，我们使用户能够更快地达到最终目标。如果交互成本降低了，用户会不会觉得这个功能迷失了方向？可能不会。
这将如何与Tap Bar模式集成？
点击栏模式列出了三到五个最常见的单击单行的第一级操作。您可能在流行的应用程序和一些网站上看到过它：
点击栏设计
多年来，汉堡菜单引发了很多争议。隐藏导航（汉堡菜单）会显着降低移动设备和桌面设备上的用户体验。在移动设备上，人们57% 的时间使用隐藏导航，86% 的时间使用组合导航，这一数字增加了1.5 倍！组合导航是带有汉堡菜单的选项卡栏模式- 这是一个示例：
三星应用实例
Tap Bar 似乎是完美的解决方案，但它也存在问题。它仅适用于顶级视图。它不适用于辅助导航项。为了解决这个问题，汉堡/敲击棒混合组合诞生了。如果您使用三星应用程序，您会看到菜单上的最后一项是“更多”按钮，该按钮会弹出汉堡菜单。
从本质上讲，如果您想将两者结合起来，底部导航模式可以很好地集成到点击栏模式中。找到好的例子的最好方法是查看移动应用程序。
重新构想了一些受欢迎的网站
我打开Photoshop，快速模拟了一些流行的网站，以说明将导航栏更改为自下而上并不是那么困难。
首先我们来看看彭博社：
重新设计彭博网站的底部导航
接下来我们看看Invision：
INVISION网站重新设计了底部导航
是的，这个想法确实引起了一些问题，但它很简单并且可以适应网络。由于交互成本要低得多，因此它确实会带来可用性差异。
听起来不错，但如何说服客户？
作为一名设计师，你可能会看到这种模式的潜力，但如果客户或老板不知道怎么办？我将用几个参数来回答这个问题：
移动应用程序多年来一直使用菜单项底部设计。我注意到流行的移动应用程序开始将重要部分移至底部的情况。优步就是一个很好的例子。对于他们来说，搜索栏是屏幕上最重要的项目之一。在旧的设计中，它的位置位于顶部。现在他们已经把它移到了底部。我们在这里可以做些什么吗？
新旧Uber 搜索栏设计
在移动应用程序设计中，将重要的导航项移至底部并不是什么新鲜事。只是由于某种原因，该行业还没有跟上这一点。
总结
事实很清楚：手机变得越来越大，屏幕的某些部分比其他部分更容易交互。在顶部使用汉堡菜单会增加交互成本，而且我们有大量使用屏幕底部的令人惊叹的移动应用程序设计。也许是时候网页设计界也开始在网站上使用这些想法了？
用户评论
闷骚闷出味道了
我一直觉得底部导航更方便，尤其是用手机看，不用来回翻页，移动网站用底部导航确实不错。
有13位网友表示赞同！
漫长の人生
底部导航可能看起来更简洁，但对我来说，我喜欢顶部导航的直观性，底部导航有时候找不到。
有7位网友表示赞同！
风中摇曳着长发
底部导航确实节省空间，但是我不确定用户是否能快速适应这种模式。
有7位网友表示赞同！
蔚蓝的天空〃没有我的翅膀
底部导航在移动端可能更好，因为手指操作更方便，尤其是页面内容很多的时候。
有17位网友表示赞同！
最迷人的危险
我觉得底部导航在移动端可能更好，但是也要看具体内容和用户的习惯。
有10位网友表示赞同！
稳妥
顶部导航用起来更习惯，底部导航对我来说有点不适应。
有15位网友表示赞同！
男神大妈
底部导航在移动端确实有优势，但是设计上要考虑到用户的操作习惯。
有17位网友表示赞同！
尘埃落定
我更喜欢顶部导航，底部导航有时候点不到，挺麻烦的。
有19位网友表示赞同！
◆乱世梦红颜
底部导航看起来更现代，但是用户体验上可能不如顶部导航。
有7位网友表示赞同！
々爱被冰凝固ゝ
移动网站用底部导航更好，因为可以减少页面加载时间。
有9位网友表示赞同！
终究会走-
底部导航在移动端确实更实用，但是我更喜欢自定义导航。
有17位网友表示赞同！
咆哮
底部导航在移动端可能更好，因为可以节省屏幕空间。
有14位网友表示赞同！
容纳我ii
我个人觉得顶部导航更直观，底部导航有时候会让我找不着北。
有13位网友表示赞同！
棃海
移动网站用底部导航可能更好，但是对于不熟悉的人来说，可能需要时间适应。
有17位网友表示赞同！
雨后彩虹
底部导航在移动端确实有优势，但是对于一些用户来说，可能还是顶部导航更方便。
有11位网友表示赞同！
歇火
我觉得底部导航在移动端更好，尤其是对于内容密集型的网站。
有9位网友表示赞同！
在哪跌倒こ就在哪躺下
底部导航在移动端的使用确实有它的优势，但是否更好还需要看具体场景和用户群体。
有11位网友表示赞同！