为什么移动端应用的菜单栏总是在底部？这样的设计背后到底有什么逻辑？它遵循着什么样的设计原则？文章将一一解读。

你使用手机的方式会影响你的大脑。一项研究发现，活跃的手机用户有更大的躯体感觉皮层，这个皮层是控制拇指的大脑区域。

进一步的研究发现，大多数用户都用一只手来使用手机。当他们拿着手机的时候，他们会用右或左拇指与屏幕交互。拇指就像用户的鼠标，但有局限性。

手指就是鼠标

在桌面设备上，用户使用鼠标与屏幕交互。他们可以轻松地将鼠标移动到导航菜单上。这是因为鼠标没有限制人体的手腕运动。

但当用户手持手机时，他们拇指的动作就会受到限制。屏幕上有些地方是拇指无法触及的，这些区域的面积将由用户的手指长度和手机屏幕的大小来决定。

（基于一般手指长度和跨度）

对比：大小屏幕手机

随着越来越多的用户选择大屏幕手机，高端市场正变得越来越难以企及。大屏幕手机（超过5英寸）比小屏幕手机的可达性更低（不到5英寸）。

（基于一般手指长度和跨度）

大屏幕手机的用户如果要触摸对面的边也会产生困难。至于是左边还是右边更难触达，都取决于用户拿着手机的是哪只手。

如果他们的左手拿着电话，他们的拇指就难以触达右下角的区域。如果他们右手持机，他们的拇指将很难到达左边的角落。

相比之下，小屏手机在底部的角落里有很高的可达性。这是因为小屏幕设备足够窄，可以让拇指到达角落。

拇指可达性法则

设计师无法改变用户如何持有手机，但是他们可以改变导航菜单的位置。大多数设计师把导航菜单放在屏幕顶端。虽然这个设计在桌面端上是一个通用方案，但它并不能很好地转化为移动端的设计。

屏幕的顶部是拇指最难触达的区域。把你的菜单放在顶部会让用户更难浏览你的界面，但用户使用菜单的频率非常高。我们有必要把菜单放在拇指触手可及的地方，这样用户就能更快地完成他们的任务。

研究发现“拇指容易到达的区域是最快和最舒服的”，换句话说，目标越接近大拇指，就越容易点击到。最容易到达的地方是底部，你应该把菜单栏设计在底部。

菜单底部的位置允许用户点击LOGO图标，选择更快的选项。把菜单放在最上面会迫使用户调整手机位置，或者用另一只手进行导航。这都需要进行额外的物理操作，并减慢任务时间。

当用户用拇指点击LOGO图标时，菜单就会从底部打开。更接近底部的菜单选项是拇指可达的。但是屏幕顶端的菜单选项已经超出了拇指的范围。

在传统的菜单中，你会在顶部设置高优先级选项。但对于底部菜单，你应该在底部放置高优先级选项。这使得它们能够更快地触达和点击。新的菜单层次结构将从顶部的最低优先选项开始，到底部以最高的顺序结束。

拇指点击舒适区

用户手持手机的方式会根据偏好而变化。那我们应该把菜单放在哪一边呢? 这份研究还发现了一个“从拇指移动的舒适区”。这意味着用户不必拉伸或弯曲他们的拇指来达到最佳的位置。

底部中间是放置菜单的最佳位置，无论是左手还是右手，这里是在小屏幕和大屏幕手机上使用拇指最轻松的地方。

舒适区更有利于大屏幕手机用户。小屏幕手机用户没有无法到达的角落，但是用户可能会需要弯曲和伸展他们的拇指才能到达他们想要到达的区域。

随着大屏幕手机的发展趋势，拇指的舒适区似乎更重要。理想的情况是，用户可以通过尽可能少的拇指移动来到达到需要的界面。拇指移动效率的提升将提高用户操作速度。

回应一些常见的批评

任何偏离传统做法的新建议都会受到批评。把移动菜单放在底部并不是标准，但这应该是基于用户如何使用移动设备的标准。很明显，顶部的移动菜单很难操作。如果遵循这些建议，我们会遇到哪些问题? 让我来回答这些批评。

“用户将会错过移动端的菜单，因为它在底部，而不是用户习惯于看到导航的顶部。”

是的，用户习惯于看到顶部的导航栏。但他们也在不同的移动应用和设备上看到了它。对于移动用户来说，底部导航并不是一个不寻常的现象。

底部导航对于桌面界面来说是确实少见。桌面的底部导航很容易被忽略，因为桌面设备的屏幕尺寸要比移动设备屏幕大得多。这使得用户很难将屏幕视为一个整体。

因为屏幕更小，所以更容易在手机上发现底部导航。这使得用户可以看到整个屏幕，在那里他们可以轻松地发现导航栏。

“底部导航将会阻碍浏览器的控制，而浏览器的控制也在底部。用户会不小心点击浏览器按钮而不是菜单按钮。”

你不会有浏览器控件来干扰原生APP的底部导航，但web应用的底部导航栏将会有浏览器控件。用户可能会在不小心点击浏览器按钮。但这和他们误触目标按钮左右两边的按钮没有什么不同。

当两个按钮左右并排时，总是有可能出现用户错误。这并不意味着设计师不应该把按钮放在一起。这意味着它们应该在按钮之间添加空隙，以防止这些错误。

你也可以在底部的导航栏上做同样的事情。在菜单图标和浏览器栏之间添加空隙宽度，这样就可以进行视觉分离，这将防止意外点击。

“当用户从底部滑动时，菜单会干扰滚动。这样会分散用户浏览内容的注意力。”

用户使用他们的拇指滚动，他们的拇指更接近屏幕底部。这意味着当他们向下滚动一个页面时，他们可以点击导航栏。当用户查看内容时，它也会分散用户的注意力。

你可以使用一个滚动条来解决这两个问题。这将在用户滚动页面时隐藏导航栏，该栏只会在用户重新启动时显示。这是已经在移动应用程序和浏览器上使用的一种常见技术。

“它会干扰着陆页面上的呼叫按钮，它比导航栏有更高的优先级。”

同样，重要的功能按钮也应该在拇指可达的范围内。但放功能按钮还是菜单按钮并不是二选一的问题。如果你使用滚动条，你可以把它们两个都放在底部而不用担心它们会互相干扰。

如果你不使用滚动条，你应该衡量你的业务目标。如果你的目标是提高用户参与度，你可以把菜单放在拇指的范围内。如果你的目标是在着陆页上增加转化，那你需要在拇指的范围内设置一个功能按钮。

根据拇指的特点设计移动端的菜单

与更熟悉的顶部位置相比，底部菜单看起来很不寻常。但前者忽略了用户在移动设备上拇指的功能。

拇指交互是与移动设备交互的主要方式，这意味着菜单的形式应该由拇指的特点来决定。忽略这个原则会我们就会设计出一个很难使用的菜单，这会减少用户的参与度和满意度。

用户体验设计师的目标是让移动导航尽可能快速和流畅。根据拇指可触达法则，用户可以更快更容易地完成任务。用这个简单的设计改变来消除拇指可触达的障碍吧。

本文由 @倪尔东 翻译发布于人人都是产品经理 ，未经许可，禁止转载。

原文地址：Why Mobile Menus Belong at the Bottom of the Screen

题图来自PEXELS，基于CC0协议