編者(zhe)按：iPhoneX 發(fa)布(bu)之(zhi)后，全(quan)新的(de)屏幕和為之(zhi)適(shi)配的(de)iOS系統，為我(wo)們(men)呈現出(chu)全(quan)新的(de)交互。之(zhi)前我(wo)們(men)習慣了的(de)交互，在這塊(kuai)帶(dai)著劉海的(de)屏幕上，不再完(wan)全(quan)相同，之(zhi)前恰(qia)到好處的(de)設計，在這塊(kuai)屏幕上似乎也沒(mei)法完(wan)美(mei)的(de)運(yun)作(zuo)了。產品設計師Daniel Korpai 發(fa)現了在iPhoneX移動端網頁導(dao)航(hang)上存在的(de)交互上的(de)問題，并撰寫此文。
使(shi)用漢堡菜(cai)單還是使(shi)用標(biao)簽式導航，是移動(dong)端(duan)UI設計師(shi)常常會糾結的(de)問題。就目(mu)前(qian)來看，隨(sui)著手機(ji)屏幕尺寸不可控制的(de)逐步(bu)膨脹，標(biao)簽式導航似(si)乎越(yue)(yue)來越(yue)(yue)受歡迎。
不(bu)過值(zhi)得注意(yi)的(de)(de)是，在(zai)移(yi)動端(duan)上APP會(hui)更加傾向于使(shi)用(yong)標(biao)簽頁導(dao)航(hang)(hang)，而絕(jue)大(da)多數的(de)(de)移(yi)動端(duan)網站仍(reng)然會(hui)使(shi)用(yong)漢(han)堡菜單作為主(zhu)要的(de)(de)導(dao)航(hang)(hang)工具。值(zhi)得注意(yi)的(de)(de)是，漢(han)堡菜單這種設計在(zai)目前越來越大(da)的(de)(de)手(shou)機屏(ping)幕上，可用(yong)性(xing)正在(zai)逐(zhu)漸(jian)降低。
絕(jue)大(da)多數的時候，我(wo)(wo)們(men)會在行進中(zhong)使用(yong)手(shou)機，在地鐵上，超(chao)市里(li)，在下班路上，這個時候我(wo)(wo)們(men)常(chang)常(chang)無法雙手(shou)操作，手(shou)上提(ti)著袋(dai)子，或者拿著一杯咖啡(fei)，或者握著地鐵上的扶(fu)手(shou)。但是往往這個時候，我(wo)(wo)們(men)更需要同界面進行快速的交互。
多數傳(chuan)統的移動端(duan)網(wang)(wang)站(zhan)導航，要么在頁面的最頂端(duan)，要么在最底端(duan)，可是(shi)問題在于，手機屏幕太大了。網(wang)(wang)頁的漢堡菜單圖標(biao)卻常常位于手機的左上角或者右上角，恰好是(shi)距離拇指最遠(yuan)的位置。
面對(dui)這種痛點，UI和UX設計(ji)(ji)師們并沒(mei)有(you)(you)忽(hu)略。有(you)(you)不少設計(ji)(ji)師會和開(kai)發者協同，在網站界(jie)面的(de)(de)底部放置一個小尺寸的(de)(de)固定(ding)導(dao)(dao)航(hang)欄。在桌面端(duan)上瀏覽(lan)的(de)(de)時候(hou)，它看起(qi)來是懸浮在頁頭(tou)的(de)(de)導(dao)(dao)航(hang)，在移動端(duan)上，它是懸浮固定(ding)在頁面底部的(de)(de)快速訪(fang)問(wen)式(shi)的(de)(de)小的(de)(de)導(dao)(dao)航(hang)按鈕組合。隨后，這種嘗試逐步演變成了靠近漢堡(bao)圖(tu)標的(de)一系列快速(su)訪問功(gong)能(neng)(neng)按鈕(niu)，這些(xie)按鈕(niu)代(dai)表著這個網(wang)站的(de)重要、常用的(de)功(gong)能(neng)(neng)元素，可(ke)能(neng)(neng)是導航、電話、特定頁面的(de)鏈接(jie)等(deng)等(deng)。
