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

编者按：iPhoneX 发布之后，全新的屏幕和为之适配的iOS系统，为我们呈现出全新的交互。之前我们习惯了的交互，在这块带着刘海的屏幕上，不再完全相同，之前恰到好处的设计，在这块屏幕上似乎也没法完美的运作了。产品设计师Daniel Korpai 发现了在iPhoneX移动端网页导航上存在的交互上的问题，并撰写此文。

使用汉堡菜单还是使用标签式导航，是移动端UI设计师常常会纠结的问题。就目前来看，随着手机屏幕尺寸不可控制的逐步膨胀，标签式导航似乎越来越受欢迎。

不过值得注意的是，在移动端上APP会更加倾向于使用标签页导航，而绝大多数的移动端网站仍然会使用汉堡菜单作为主要的导航工具。值得注意的是，汉堡菜单这种设计在目前越来越大的手机屏幕上，可用性正在逐渐降低。

绝大多数的时候，我们会在行进中使用手机，在地铁上，超市里，在下班路上，这个时候我们常常无法双手操作，手上提着袋子，或者拿着一杯咖啡，或者握着地铁上的扶手。但是往往这个时候，我们更需要同界面进行快速的交互。

多数传统的移动端网站导航，要么在页面的最顶端，要么在最底端，可是问题在于，手机屏幕太大了。网页的汉堡菜单图标却常常位于手机的左上角或者右上角，恰好是距离拇指最远的位置。

面对这种痛点，UI和UX设计师们并没有忽略。有不少设计师会和开发者协同，在网站界面的底部放置一个小尺寸的固定导航栏。在桌面端上浏览的时候，它看起来是悬浮在页头的导航，在移动端上，它是悬浮固定在页面底部的快速访问式的小的导航按钮组合。

随后，这种尝试逐步演变成了靠近汉堡图标的一系列快速访问功能按钮，这些按钮代表着这个网站的重要、常用的功能元素，可能是导航、电话、特定页面的链接等等。