关于iPhone X 网页导航的思考

汉堡包菜单按钮和标签栏导航是手机应用程序设计中的一个老话题。但是目前来看，随着手机屏幕的尺寸越来越大，标签栏导航似乎越来越受欢迎。

很多手机应用程序已经采用了标签栏导航，但是大多数的网站还在使用汉堡菜单按钮作为主要导航。尽管这种导航解决方案不能用一只手在较大的移动屏幕尺寸上使用。

用户痛点

---

很多时候我们是在移动中使用手机。当我们在上班或行走期间，我们希望能够更快速更方便的使用手机，甚至是一只手的时候。这种情况下，我们的另一只手往往背着一个袋子，一个咖啡杯或者拉着在公共汽车上的扶手。

原始的汉堡按钮始终位于屏幕的左上角或右上角，因此在大型设备上单手使用传统的网站导航是一个很大的挑战。

挑战

---

多年来，越来越多的设计师和开发者决定在网站的底部设置一个固定的导航条。在桌面视图的情况下，这就像一个固定的头部导航，但是在移动设备上，它被粘在屏幕的底部，而不是顶部。

后来，在汉堡菜单按钮旁边出现了一些动作项目，比如电话、电子邮件和方向指示器，这使得用户可以用一只手快速地访问网站上最重要的元素。

然而，在iPhone X上，这个解决方案不再是可用的，因为访问主屏幕的指示器总是在web内容之上，这使得所有的底层导航都被分散和破坏。

设计

---

作为一种创建易于使用的网站导航的解决方案，我在屏幕底部创建了一个浮动的菜单按钮，它在每个移动设备上都很漂亮，包括iPhone X。

这个固定定位的浮动菜单按钮总是可以用一只手来实现，要么用户是对的，要么是左手。为了创建一个不受圆形屏幕角或重叠的主屏幕指示器影响的解决方案，我决定使用一个按钮而不是一个全宽度导航条。我把这个快速菜单按钮放在屏幕底部附近，但不太靠近边缘。通过这种方式，可以很舒服地触达并且不受重叠的UI元素或圆角屏幕的影响。

点击浮动菜单按钮后，用户可以完全访问网站的导航，快速的操作，如打电话给公司，发送电子邮件或开始导航到他们的地址。

（这个解决方案唯一的缺点是，如果你想在iOS Safari上点击屏幕底部的任何元素，在第一次点击之后，只有Safari标签栏会出现，第二个点击将会激活网站导航。然而，这是一个权衡，以便能够单手使用网站，如果浮动动作按钮的位置正确，就可以在第一次点击之后骗过iOS Safari并打开导航。）

原型

---

在原型开发过程中，我的目标是创建一个快速，简短和响应的交互，同时确保从开发人员的角度来看也是可行的。

---

原文链接