交互思考:淺析iPhoneX移動(dòng)端網(wǎng)頁(yè)導(dǎo)航上的存在問(wèn)題

1 評(píng)論 5022 瀏覽 17 收藏 7 分鐘

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

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

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

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

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

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

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

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

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

可問(wèn)題在于,在iPhone X上,即使是這樣設(shè)計(jì)的導(dǎo)航,可用性依然存在問(wèn)題,承載瀏覽器主要交互的按鈕又需要從界面頂部觸發(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è)固定位置的懸浮按鈕居中靠下,無(wú)論是左手握持還是右手握持都能正好點(diǎn)擊得到。為了不受到iPhoneX 屏幕邊緣圓角的影響,也盡量不影響內(nèi)置的導(dǎo)航工具欄,我決定讓這個(gè)按鈕點(diǎn)擊觸發(fā)之后,展開(kāi)是一個(gè)橫跨屏幕的菜單欄。按鈕的位置靠近底部但是不靠近邊緣,不會(huì)遮蓋到iPhoneX 的Home鍵。位置的選取并不難。

點(diǎn)擊懸浮按鈕之后,網(wǎng)頁(yè)菜單展開(kāi),也會(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)行操作。

不過(guò),這個(gè)解決方案還不是完美的。在iOS的 Safari 瀏覽器上,點(diǎn)擊屏幕底部的任何元素,第一次點(diǎn)擊會(huì)觸發(fā)Safari 瀏覽器內(nèi)置的菜單欄,第二下才會(huì)真正觸發(fā)這個(gè)懸浮的網(wǎng)站導(dǎo)航欄。不過(guò)開(kāi)發(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)短、可交互的原型,確保它在開(kāi)發(fā)人員那邊看起來(lái)也是可行的:

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)。不過(guò),它還能繼續(xù)深入地探索下去,比如,它在iPad Pro 的瀏覽器當(dāng)中,這個(gè)導(dǎo)航按鈕放置在哪個(gè)位置更合適呢?設(shè)計(jì)師還可以仔細(xì)衡量這個(gè)按鈕是否要在滾動(dòng)瀏覽的時(shí)候隱藏起來(lái),怎么隱藏,何時(shí)觸發(fā)。

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

 

原文作者:Daniel Korpai

原文地址:https://medium.muz.li/iphone-x-web-navigation-concept-c06efc0e0c50

譯者:陳子木

譯者地址:優(yōu)設(shè)網(wǎng)

本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!