幫助

為了讓 iPhone X 更好瀏覽網(wǎng)頁,我給網(wǎng)頁加了個導(dǎo)航按鈕

2018-04-27 11:07 優(yōu)化推廣

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

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

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

關(guān)鍵的痛點

 

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

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

面對的挑戰(zhàn)

面對這種痛點,UI和UX設(shè)計師們并沒有忽略。有不少設(shè)計師會和開發(fā)者協(xié)同,在網(wǎng)站界面的底部放置一個小尺寸的固定導(dǎo)航欄。在桌面端上瀏覽的時候,它看起來是懸浮在頁頭的導(dǎo)航,在移動端上,它是懸浮固定在頁面底部的快速訪問式的小的導(dǎo)航按鈕組合。隨后,這種嘗試逐步演變成了靠近漢堡圖標的一系列快速訪問功能按鈕,這些按鈕代表著這個網(wǎng)站的重要、常用的功能元素,可能是導(dǎo)航、電話、特定頁面的鏈接等等。


相關(guān)推薦

QQ在線咨詢