发布时间：2020-8-29 分类： 行业资讯
中添加了一个导航按钮编者按：iPhoneX发布后，新屏幕和适应它的iOS系统向我们展示了一种新的互动。我们以前在这个带有刘海的屏幕上使用的交互不再完全相同。之前的设计似乎无法在此屏幕上完美运行。产品设计师Daniel Korpai在iPhoneX移动网络导航中发现了互动问题并写了这篇文章。
使用汉堡菜单或使用选项卡式导航是移动UI设计人员经常遇到的问题。目前，随着手机屏幕尺寸无法控制的逐渐扩展，标签式导航似乎越来越受欢迎。
然而，值得注意的是，在移动端，APP将更倾向于使用标签导航，并且大多数移动代购源码网站仍将使用汉堡菜单作为主要导航工具。值得注意的是，汉堡菜单的设计在目前较大的手机屏幕中逐渐减少。
关键痛点
大多数时候，我们会在路上，地铁上，超市里，途中上班途中使用手机，这次我们经常无法用双手操作，随身携带手提包，或拿着一杯咖啡，或拿着地铁扶手。但通常在这个时候，我们需要快速与界面进行交互。
大多数传统的移动代购源码网站导航要么位于页面顶部，要么位于底部，但问题是手机屏幕太大。网页上的汉堡菜单图标通常位于手机的左上角或右上角，这是拇指最远的位置。
面临的挑战
面对这一痛点，UI和UX设计师并没有忽视它。有许多设计师与开发人员合作，在代购源码网站界面的底部放置一个小的固定导航栏。在桌面上浏览时，它似乎浮动在页眉的导航中。在移动端，它是一个快速访问的小型导航按钮组合，悬浮在页面底部。
随后，此尝试演变为汉堡图标附近的一系列快速访问功能按钮，代表代购源码网站的重要常用功能元素，可能是导航，电话，特定页面的链接等。
问题是在iPhone X上，即使使用这种方式设计的导航，可用性仍然存在问题，并且需要从界面的顶部触发承载浏览器主要交互的按钮。与此同时，页面底部的菜单实际上令人分心，整个体验都是碎片化的。
着陆设计
所以，我正在考虑设计一个移动网络导航，尽可能多地使用所有设备，包括iPhoneX，以使其尽可能简单并解决各种痛点。我的方法并不复杂，只需在移动页面的底部添加一个浮动菜单按钮即可。
此固定位置的浮动按钮位于中心位置，无论是左手还是右手，都可以单击。为了不受iPhoneX屏幕圆角的影响，并尽量不影响内置导航工具栏，我决定让这个按钮点击触发，扩展是一个跨屏幕的菜单栏。按钮位于底部附近但不靠近边缘，并且不会遮挡iPhoneX Home按钮。选址并不困难。
单击悬停按钮后，Web菜单将展开，系统中内置的浏览器导航菜单也会被触发并调用。用户不仅可以在上面的网页菜单中调用当前网页的各种操作，还可以点击下面的浏览器菜单操作不同的网页。
但是，这种解决方案并不完美。在iOS Safari浏览器上，单击屏幕底部的任何元素，第一次单击将触发Safari浏览器的内置菜单栏，第二次将实际触发浮动站点导航栏。但是，开发人员可以进行有针对性的调整，以诱骗iOS Safari浏览器在第一次点击时触发页面导航。
可用的原型
在设计原型时，我的目标是创建一个快速，简短的交互式原型，使其在开发人员方面看起来可行：
https://dribbble.com/shots/3851367-iPhone-X-Web-Navigation-Idea
最后的想法
这不是一个太复杂的设计项目，但在实际需求中，它是解决纠结的痛点的真正解决方案。这种概念设计可以在大型移动设备上轻松实现。但是，它可以继续深入探索。例如，在iPad Pro浏览器中，此导航按钮在哪里更合适？设计师还可以仔细测量滚动时是否应隐藏按钮。 ，如何隐藏，何时触发。
我认为这是UI/UX设计师需要考虑的问题。
