iPhone X 网页导航概念

 如下内容由Mockplus团队翻译整理，仅供学习交流，Mockplus是更快更简单的原型设计工具。

 

 

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

 

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

 

肯定关键的用户痛点

 

大多数时候咱们会在很是忙的时候使用手机。如：在乘公交车上下班或是散步的时候，咱们但愿可以与手机进行快速互动，甚至是单手操做。在这种状况下，咱们的另外一只手每每提着一个袋子，拿着一杯咖啡，或者是在公共汽车上拿着扶手。

 

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

 

挑战

 

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

 

 

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

 

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

 

执行：设计

 

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

 

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

 

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

 

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

 

执行：原型

 

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

 

 

https://dribbble.com/shots/3851367-iPhone-X-Web-Navigation-Idea

 

思考

 

这个概念使得单手操做，即便在大型移动设备上也能轻松实现网站导航。

 

然而，这个概念仍是须要进行优化，好比屏幕底部始终可见的浮动导航按钮（能够以某种方式构建，只有当用户开始向上滚动时才可见，向下滚动时将消失）。

 

若是你有其它的使手机导航更好更易于使用的想法，请随时与我分享！

 

原文做者：Daniel Korpai

 

原文地址：https://medium.muz.li/iphone-x-web-navigation-concept-c06efc0e0c50

 

 Mockplus作原型，更快更简单，如今下载Mockplus，免费体验畅快的原型设计之旅。