iPhone X 网页导航概念

2017-11-21 11:09:00

  以下内容由[Mockplus](https://www.mockplus.cn/?hmsr=twx)团队翻译整理，仅供学习交流，[Mockplus是更快更简单的原型设计工具](https://www.mockplus.cn/?hmsr=twx)。

在移动应用程序设计中，选择汉堡菜单按钮还是标签栏作为导航一直是个古老的争论话题。目前看来，由于手机屏幕尺寸越来越大，标签栏导航功能越来越受用户欢迎。

相比移动应用程序采用标签栏导航，大多数网站仍然使用汉堡菜单按钮作为主要导航。虽然这种导航方法不能在较大的移动屏幕尺寸上用单手操作。

确定关键的用户痛点

大多数时候我们会在非常忙的时候使用手机。如：在乘公交车上下班或是散步的时候，我们希望能够与手机进行快速互动，甚至是单手操作。在这种情况下，我们的另一只手往往提着一个袋子，拿着一杯咖啡，或者是在公共汽车上拿着扶手。

单手使用传统的网站导航，尤其在较大的设备上使用时是个相当大的挑战，因为汉堡按钮始终位于屏幕的左上角或右角。

挑战

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

之后，在汉堡菜单按钮旁边还出现了一些其它操作项目，例如电话，电子邮件和方向指示器，这使得用户能够单手快速访问网站中最重要的元素。

然而，在iPhone X上，这个解决方案已经不再可用，因为访问主屏幕的指示器总是位于网页内容的顶部，这使得所有的底部定位导航容易被人遗忘。

执行：设计

为了创建一个易于使用的网站导航解决方案，使得包括iPhone X在内的所有移动设备上看起来都适用，我在屏幕底部创建了一个浮动菜单按钮。

无论用户是用右手还是左手操作，都可以很好的与这个固定位置的浮动菜单按钮进行交互。为了制定一个解决方案，使之不受到圆角屏幕或重叠的主屏幕指示器的影响，我决定附属一个按钮，而不是一个与屏幕同宽度的导航栏。我将这个快捷菜单按钮放置在屏幕底部附近，但不会太靠近屏幕边缘。这种方式让用户很容易接触，而且不受重叠UI元素或圆角屏幕的影响。

点击浮动菜单按钮后，用户可以完全访问网站导航，并可快速执行一些交互，诸如给公司致电，发送电子邮件或根据公司地址进行地图导航等操作。

（这个解决方案唯一的缺点是，如果你想在iOS Safari上点击屏幕底部的任何元素，在第一次点击之后，只有Safari标签栏会出现，第二次点击后才会激活网站导航。当然，为了能够单手操作网页，你需要权衡两者的利弊。如果浮动按钮的位置正确，有可能会逃避iOS Safari的检测，并在第一次点击后立即启动导航。）

执行：原型

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