为了让 iPhone X 更好浏览网页，我给网页加了个导航按钮(2)

可问题在于，在iPhone X上，即使是这样设计的导航，可用性依然存在问题，承载浏览器主要交互的按钮又需要从界面顶部触发。同时，网页底部内置的菜单其实是会让人分心，整个体验是支离破碎的。

落地的设计

所以，我琢磨着设计出一套能够尽量兼顾到包括iPhoneX在内的所有设备的移动端网页导航，尽可能让它易用且解决各种痛点。我的方法不复杂，就是在移动端网页靠近底部的位置上增加一个悬浮的菜单按钮。

这个固定位置的悬浮按钮居中靠下，无论是左手握持还是右手握持都能正好点击得到。为了不受到iPhoneX 屏幕边缘圆角的影响，也尽量不影响内置的导航工具栏，我决定让这个按钮点击触发之后，展开是一个横跨屏幕的菜单栏。按钮的位置靠近底部但是不靠近边缘，不会遮盖到iPhoneX 的Home键。位置的选取并不难。

点击悬浮按钮之后，网页菜单展开，也会触发并调用系统内置的浏览器导航菜单，两者合而唯一。用户不仅可以在上面的网页菜单中调用各种针对当前网页的操作，还能点击下面的浏览器菜单，针对不同网页进行操作。

不过，这个解决方案还不是完美的。在iOS的 Safari 浏览器上，点击屏幕底部的任何元素，第一次点击会触发Safari 浏览器内置的菜单栏，第二下才会真正触发这个悬浮的网站导航栏。不过开发者可以有针对性地进行调整，欺骗iOS Safari 浏览器，让它在第一下点击的时候就触发这个网页导航。

可用的原型

在设计原型的时候，我的目标是创造一个响应快速而简短、可交互的原型，确保它在开发人员那边看起来也是可行的：

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

最终的思考

这并不是一个太复杂的设计项目，但是在实际需求上，却是实实在在地解决了令人纠结的痛点。这个概念设计在大型的移动端设备上其实也能够轻松实现。不过，它还能继续深入地探索下去，比如，它在iPad Pro 的浏览器当中，这个导航按钮放置在哪个位置更合适呢？设计师还可以仔细衡量这个按钮是否要在滚动浏览的时候隐藏起来，怎么隐藏，何时触发。

我想，这才是UI/UX设计师需要思考的问题吧。

（编辑：ASP站长网）