編者按：iPhoneX 發(fā)布之后，全新的屏幕和為之適配的iOS系統(tǒng)，為我們呈現(xiàn)出全新的交互。之前我們習(xí)慣了的交互，在這塊帶著劉海的屏幕上，不再完全相同，之前恰到好處的設(shè)計(jì)，在這塊屏幕上似乎也沒法完美的運(yùn)作了。產(chǎn)品設(shè)計(jì)師Daniel Korpai 發(fā)現(xiàn)了在iPhoneX移動(dòng)端網(wǎng)頁(yè)導(dǎo)航上存在的交互上的問題，并撰寫此文。

使用漢堡菜單還是使用標(biāo)簽式導(dǎo)航，是移動(dòng)端UI設(shè)計(jì)師常常會(huì)糾結(jié)的問題。就目前來看，隨著手機(jī)屏幕尺寸不可控制的逐步膨脹，標(biāo)簽式導(dǎo)航似乎越來越受歡迎。

不過值得注意的是，在移動(dòng)端上APP會(huì)更加傾向于使用標(biāo)簽頁(yè)導(dǎo)航，而絕大多數(shù)的移動(dòng)端網(wǎng)站仍然會(huì)使用漢堡菜單作為主要的導(dǎo)航工具。值得注意的是，漢堡菜單這種設(shè)計(jì)在目前越來越大的手機(jī)屏幕上，可用性正在逐漸降低。

關(guān)鍵的痛點(diǎn)

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

多數(shù)傳統(tǒng)的移動(dòng)端網(wǎng)站導(dǎo)航，要么在頁(yè)面的最頂端，要么在最底端，可是問題在于，手機(jī)屏幕太大了。網(wǎng)頁(yè)的漢堡菜單圖標(biāo)卻常常位于手機(jī)的左上角或者右上角，恰好是距離拇指最遠(yuǎn)的位置。

面對(duì)的挑戰(zhàn)

面對(duì)這種痛點(diǎn)，UI和UX設(shè)計(jì)師們并沒有忽略。有不少設(shè)計(jì)師會(huì)和開發(fā)者協(xié)同，在網(wǎng)站界面的底部放置一個(gè)小尺寸的固定導(dǎo)航欄。在桌面端上瀏覽的時(shí)候，它看起來是懸浮在頁(yè)頭的導(dǎo)航，在移動(dòng)端上，它是懸浮固定在頁(yè)面底部的快速訪問式的小的導(dǎo)航按鈕組合。

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

可問題在于，在iPhone X上，即使是這樣設(shè)計(jì)的導(dǎo)航，可用性依然存在問題，承載瀏覽器主要交互的按鈕又需要從界面頂部觸發(fā)。同時(shí)，網(wǎng)頁(yè)底部?jī)?nèi)置的菜單其實(shí)是會(huì)讓人分心，整個(gè)體驗(yàn)是支離破碎的。

落地的設(shè)計(jì)

所以，我琢磨著設(shè)計(jì)出一套能夠盡量兼顧到包括iPhoneX在內(nèi)的所有設(shè)備的移動(dòng)端網(wǎng)頁(yè)導(dǎo)航，盡可能讓它易用且解決各種痛點(diǎn)。我的方法不復(fù)雜，就是在移動(dòng)端網(wǎng)頁(yè)靠近底部的位置上增加一個(gè)懸浮的菜單按鈕。

這個(gè)固定位置的懸浮按鈕居中靠下，無論是左手握持還是右手握持都能正好點(diǎn)擊得到。為了不受到iPhoneX 屏幕邊緣圓角的影響，也盡量不影響內(nèi)置的導(dǎo)航工具欄，我決定讓這個(gè)按鈕點(diǎn)擊觸發(fā)之后，展開是一個(gè)橫跨屏幕的菜單欄。按鈕的位置靠近底部但是不靠近邊緣，不會(huì)遮蓋到iPhoneX 的Home鍵。位置的選取并不難。

點(diǎn)擊懸浮按鈕之后，網(wǎng)頁(yè)菜單展開，也會(huì)觸發(fā)并調(diào)用系統(tǒng)內(nèi)置的瀏覽器導(dǎo)航菜單，兩者合而唯一。用戶不僅可以在上面的網(wǎng)頁(yè)菜單中調(diào)用各種針對(duì)當(dāng)前網(wǎng)頁(yè)的操作，還能點(diǎn)擊下面的瀏覽器菜單，針對(duì)不同網(wǎng)頁(yè)進(jìn)行操作。

不過，這個(gè)解決方案還不是完美的。在iOS的 Safari 瀏覽器上，點(diǎn)擊屏幕底部的任何元素，第一次點(diǎn)擊會(huì)觸發(fā)Safari 瀏覽器內(nèi)置的菜單欄，第二下才會(huì)真正觸發(fā)這個(gè)懸浮的網(wǎng)站導(dǎo)航欄。不過開發(fā)者可以有針對(duì)性地進(jìn)行調(diào)整，欺騙iOS Safari 瀏覽器，讓它在第一下點(diǎn)擊的時(shí)候就觸發(fā)這個(gè)網(wǎng)頁(yè)導(dǎo)航。

可用的原型

在設(shè)計(jì)原型的時(shí)候，我的目標(biāo)是創(chuàng)造一個(gè)響應(yīng)快速而簡(jiǎn)短、可交互的原型，確保它在開發(fā)人員那邊看起來也是可行的：

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

最終的思考

這并不是一個(gè)太復(fù)雜的設(shè)計(jì)項(xiàng)目，但是在實(shí)際需求上，卻是實(shí)實(shí)在在地解決了令人糾結(jié)的痛點(diǎn)。這個(gè)概念設(shè)計(jì)在大型的移動(dòng)端設(shè)備上其實(shí)也能夠輕松實(shí)現(xiàn)。不過，它還能繼續(xù)深入地探索下去，比如，它在iPad Pro 的瀏覽器當(dāng)中，這個(gè)導(dǎo)航按鈕放置在哪個(gè)位置更合適呢？設(shè)計(jì)師還可以仔細(xì)衡量這個(gè)按鈕是否要在滾動(dòng)瀏覽的時(shí)候隱藏起來，怎么隱藏，何時(shí)觸發(fā)。

我想，這才是UI/UX設(shè)計(jì)師需要思考的問題吧。

【這些趨勢(shì)好文，能讓你的設(shè)計(jì)更走心】

1. 《這3種獨(dú)特的趨勢(shì)，能讓網(wǎng)頁(yè)設(shè)計(jì)增色不少》
2. 《2017年最后幾個(gè)月，網(wǎng)頁(yè)設(shè)計(jì)師值得注意的趨勢(shì)》
3. 《這3個(gè)流行趨勢(shì)雖然好，但依然要注意這些細(xì)節(jié)》
4. 《看了那么多的設(shè)計(jì)趨勢(shì)，你知道怎么落地實(shí)踐嗎？》

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com