编者按：iPhoneX发布后，全新的屏幕以及与之适配的iOS系统为我们呈现了全新的交互方式。之前我们习以为常的交互在这块有刘海的屏幕上已经不再是一模一样了，之前恰到好处的设计在这块屏幕上似乎也无法完美发挥。产品设计师DanielKorpai在iPhoneX手机网页导航中发现了一个交互问题，并撰写了这篇文章。是使用汉堡菜单还是标签式导航是移动UI设计师经常纠结的问题。目前，随着手机屏幕继续不受控制地扩大，标签式导航似乎越来越受欢迎。不过值得注意的是，在移动端，APP会更倾向于使用标签导航，而大部分移动网站仍会以汉堡菜单作为主要导航工具。值得注意的是，在越来越大的手机屏幕上，汉堡菜单的可用性正在逐渐下降。主要痛点大多数时候，我们在旅途中、地铁上、超市里、下班路上使用手机。这时候，我们往往不能双手操作，背着包，或者拿着一杯咖啡，或者地铁上的扶手。但往往在这个时候，我们需要快速与界面进行交互。大多数传统的手机网站导航要么在页面顶部，要么在底部，但问题是手机屏幕太大。网页的汉堡菜单图标往往位于手机的左上角或右上角，正好离拇指最远。面对这个痛点，UI和UX设计师并没有忽视它。很多设计师会和开发者合作，在网站界面的底部放置一个固定的小导航栏。在桌面端浏览时，它看起来像一个导航漂浮在页面的头部。在移动端，它是浮动和固定在页面底部的快速访问小导航按钮的组合。然后，这个实验逐渐演变为汉堡包图标旁边的一系列快速访问功能按钮。这些按钮代表了本网站重要的、常用的功能元素，可能是导航、电话、特定页面的链接等。但问题在于，在iPhoneX上，即使有这样设计的导航，仍然存在可用性问题，承载浏览器主要交互的按钮需要从界面顶部触发。同时，页面底部的内置菜单实际上是一种干扰，整个体验是碎片化的。落地设计于是，我想到了设计一套手机网页导航，尽可能兼顾包括iPhoneX在内的所有设备，尽可能的好用，解决各种痛点。我的方法并不复杂，就是在手机网页底部附近添加一个浮动菜单按钮。这个固定位置的悬浮按钮居中偏下，不管是左手还是右手都可以点击。为了不受iPhoneX屏幕圆角的影响，尽量不影响内置的导航工具栏，我决定让这个按钮点击触发，它会展开成横跨屏幕的菜单栏。按键位置靠近底部但不靠近边缘，不会盖住iPhoneX的Home键。位置的选择并不困难。点击悬浮按钮后，网页菜单展开，系统自带的浏览器导航菜单也会被触发调用。两者是独一无二的。用户不仅可以在上方的网页菜单中调用对当前网页的各种操作，还可以点击下方的浏览器菜单对不同的网页进行操作。但是，这个解决方案还不完善。在iOSSafari浏览器上，点击屏幕底部的任意元素，第一次点击会触发Safari浏览器内置的菜单栏，第二次点击会触发浮动网站导航栏。不过，开发者可以有针对性地进行调整，诱使iOSSafari浏览器在点击按钮下方时触发该网页导航。可用原型在制作原型时，我的目标是创建一个响应式、简短、交互式的原型，在开发人员方面看起来可行：https://dribbble.com/shots/3851367-iPhone-X-Web-Navigation-Idea的最终想法这不是一个太复杂的设计项目，但是从实际需求来说，倒是解决了纠结的痛点。这种概念设计实际上可以很容易地在大型移动设备上实现。不过，还可以继续深入探索。比如iPadPro的浏览器，导航按钮放在哪里比较合适？设计者还可以仔细衡量这个按钮在滚动时是否应该隐藏，如何隐藏以及何时触发。我认为这是UI/UX设计师需要考虑的问题。
