編者按：iPhoneX 發布之后，全新的屏幕和為之適配的iOS系統，為我們呈現出全新的交互。之前我們習慣了的交互，在這塊帶著劉海的屏幕上，不再完全相同，之前恰到好處的設計，在這塊屏幕上似乎也沒法***的運作了。產品設計師Daniel Korpai 發現了在iPhoneX移動端網頁導航上存在的交互上的問題，并撰寫此文。

使用漢堡菜單還是使用標簽式導航，是移動端UI設計師常常會糾結的問題。就目前來看，隨著手機屏幕尺寸不可控制的逐步膨脹，標簽式導航似乎越來越受歡迎。

不過值得注意的是，在移動端上APP會更加傾向于使用標簽頁導航，而絕大多數的移動端網站仍然會使用漢堡菜單作為主要的導航工具。值得注意的是，漢堡菜單這種設計在目前越來越大的手機屏幕上，可用性正在逐漸降低。

關鍵的痛點

絕大多數的時候，我們會在行進中使用手機，在地鐵上，超市里，在下班路上，這個時候我們常常無法雙手操作，手上提著袋子，或者拿著一杯咖啡，或者握著地鐵上的扶手。但是往往這個時候，我們更需要同界面進行快速的交互。

多數傳統的移動端網站導航，要么在頁面的最頂端，要么在***端，可是問題在于，手機屏幕太大了。網頁的漢堡菜單圖標卻常常位于手機的左上角或者右上角，恰好是距離拇指最遠的位置。

面對的挑戰

面對這種痛點，UI和UX設計師們并沒有忽略。有不少設計師會和開發者協同，在網站界面的底部放置一個小尺寸的固定導航欄。在桌面端上瀏覽的時候，它看起來是懸浮在頁頭的導航，在移動端上，它是懸浮固定在頁面底部的快速訪問式的小的導航按鈕組合。

隨后，這種嘗試逐步演變成了靠近漢堡圖標的一系列快速訪問功能按鈕，這些按鈕代表著這個網站的重要、常用的功能元素，可能是導航、電話、特定頁面的鏈接等等。

可問題在于，在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設計師需要思考的問題吧。