編者按：APP制作在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)頁導(dǎo)航上存在的交互上的問題，并撰寫此文。
使用漢堡菜單還是使用標(biāo)簽式導(dǎo)航，是移動(dòng)端UI設(shè)計(jì)師常常會(huì)糾結(jié)的問題。就目前來看，隨著手機(jī)屏幕尺寸不可控制的逐步膨脹，標(biāo)簽式導(dǎo)航似乎越來越受歡迎。
不過值得注意的是，在移動(dòng)端上APP制作會(huì)更加傾向于使用標(biāo)簽頁導(dǎo)航，而絕大多數(shù)的移動(dòng)端網(wǎng)站仍然會(huì)使用漢堡菜單作為主要的導(dǎo)航工具。值得注意的是，漢堡菜單這種設(shè)計(jì)在目前越來越大的手機(jī)屏幕上，可用性正在逐漸降低。
APP制作掌握關(guān)鍵的痛點(diǎn)
多數(shù)傳統(tǒng)的移動(dòng)端網(wǎng)站導(dǎo)航，要么在頁面的最頂端，要么在最底端，可是問題在于，手機(jī)屏幕太大了。網(wǎng)頁的漢堡菜單圖標(biāo)卻常常位于手機(jī)的左上角或者右上角，恰好是距離拇指最遠(yuǎn)的位置。絕大多數(shù)的時(shí)候，我們會(huì)在行進(jìn)中使用手機(jī)，在地鐵上，超市里，在下班路上，這個(gè)時(shí)候我們常常無法雙手操作，手上提著袋子，或者拿著一杯咖啡，或者握著地鐵上的扶手。但是往往這個(gè)時(shí)候，我們更需要同界面進(jìn)行快速的交互。
APP制作前端面對(duì)的挑戰(zhàn)
面對(duì)這種痛點(diǎn)，UI和UX設(shè)計(jì)師們并沒有忽略。有不少設(shè)計(jì)師會(huì)和開發(fā)者協(xié)同，在網(wǎng)站界面的底部放置一個(gè)小尺寸的固定導(dǎo)航欄。在桌面端上瀏覽的時(shí)候，它看起來是懸浮在頁頭的導(dǎo)航，在移動(dòng)端上，它是懸浮固定在頁面底部的快速訪問式的小的導(dǎo)航按鈕組合。
隨后，這種嘗試逐步演變成了靠近漢堡圖標(biāo)的一系列快速訪問功能按鈕，這些按鈕代表著這個(gè)網(wǎng)站的重要、常用的功能元素，可能是導(dǎo)航、電話、特定頁面的鏈接等等。可問題在于，在iPhone X上，即使是這樣設(shè)計(jì)的導(dǎo)航，可用性依然存在問題，承載瀏覽器主要交互的按鈕又需要從界面頂部觸發(fā)。同時(shí)，網(wǎng)頁底部內(nèi)置的菜單其實(shí)是會(huì)讓人分心，整個(gè)體驗(yàn)是支離破碎的。
APP制作怎樣做好落地的設(shè)計(jì)
所以，我琢磨著設(shè)計(jì)出一套能夠盡量兼顧到包括iPhoneX在內(nèi)的所有設(shè)備的移動(dòng)端網(wǎng)頁導(dǎo)航，盡可能讓它易用且解決各種痛點(diǎn)。我的方法不復(fù)雜，就是在移動(dòng)端網(wǎng)頁靠近底部的位置上增加一個(gè)懸浮的菜單按鈕。
這個(gè)固定位置的懸浮按鈕居中靠下，無論是左手握持還是右手握持都能正好點(diǎn)擊得到。為了不受到iPhoneX 屏幕邊緣圓角的影響，也盡量不影響內(nèi)置的導(dǎo)航工具欄，我決定讓這個(gè)按鈕點(diǎn)擊觸發(fā)之后，展開是一個(gè)橫跨屏幕的菜單欄。按鈕的位置靠近底部但是不靠近邊緣，不會(huì)遮蓋到iPhoneX 的Home鍵。位置的選取并不難。
點(diǎn)擊懸浮按鈕之后，網(wǎng)頁菜單展開，也會(huì)觸發(fā)并調(diào)用系統(tǒng)內(nèi)置的瀏覽器導(dǎo)航菜單，兩者合而唯一。用戶不僅可以在上面的網(wǎng)頁菜單中調(diào)用各種針對(duì)當(dāng)前網(wǎng)頁的操作，還能點(diǎn)擊下面的瀏覽器菜單，針對(duì)不同網(wǎng)頁進(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)頁導(dǎo)航。
app網(wǎng)站制作注意可用的原型
在設(shè)計(jì)原型的時(shí)候，我的目標(biāo)是創(chuàng)造一個(gè)響應(yīng)快速而簡短、可交互的原型，確保它在開發(fā)人員那邊看起來也是可行的：
APP制作最終的思考
這并不是一個(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ā)。深圳網(wǎng)站制作博納網(wǎng)絡(luò)編輯整理。
