這個(gè)概念使得單手操作，即使在大型移動(dòng)設(shè)備上也能輕松實(shí)現(xiàn)網(wǎng)站導(dǎo)航。
在移動(dòng)應(yīng)用程序設(shè)計(jì)中，選擇漢堡菜單按鈕還是標(biāo)簽欄作為導(dǎo)航一直是個(gè)古老的爭論話題。目前看來，由于手機(jī)屏幕尺寸越來越大，標(biāo)簽欄導(dǎo)航功能越來越受用戶歡迎。
相比移動(dòng)應(yīng)用程序采用標(biāo)簽欄導(dǎo)航，大多數(shù)網(wǎng)站仍然使用漢堡菜單按鈕作為主要導(dǎo)航。雖然這種導(dǎo)航方法不能在較大的移動(dòng)屏幕尺寸上用單手操作。
確定關(guān)鍵的用戶痛點(diǎn)
大多數(shù)時(shí)候我們會(huì)在非常忙的時(shí)候使用手機(jī)。如：在乘公交車上下班或是散步的時(shí)候，我們希望能夠與手機(jī)進(jìn)行快速互動(dòng)，甚至是單手操作。在這種情況下，我們的另一只手往往提著一個(gè)袋子，拿著一杯咖啡，或者是在公共汽車上拿著扶手。
單手使用傳統(tǒng)的網(wǎng)站導(dǎo)航，尤其在較大的設(shè)備上使用時(shí)是個(gè)相當(dāng)大的挑戰(zhàn)，因?yàn)闈h堡按鈕始終位于屏幕的左上角或右角。
挑戰(zhàn)
多年來，越來越多的設(shè)計(jì)師和開發(fā)者決定在網(wǎng)站的底部放置一個(gè)固定的導(dǎo)航欄。這在桌面視圖的情況下表現(xiàn)得像一個(gè)固定的標(biāo)題導(dǎo)航，但是在移動(dòng)設(shè)備上，它被粘在屏幕的底部而不是頂部。
之后，在漢堡菜單按鈕旁邊還出現(xiàn)了一些其它操作項(xiàng)目，例如電話，電子郵件和方向指示器，這使得用戶能夠單手快速訪問網(wǎng)站中最重要的元素。
然而，在iPhone X上，這個(gè)解決方案已經(jīng)不再可用，因?yàn)樵L問主屏幕的指示器總是位于網(wǎng)頁內(nèi)容的頂部，這使得所有的底部定位導(dǎo)航容易被人遺忘。
執(zhí)行：設(shè)計(jì)
為了創(chuàng)建一個(gè)易于使用的網(wǎng)站導(dǎo)航解決方案，使得包括iPhone X在內(nèi)的所有移動(dòng)設(shè)備上看起來都適用，我在屏幕底部創(chuàng)建了一個(gè)浮動(dòng)菜單按鈕。
無論用戶是用右手還是左手操作，都可以很好的與這個(gè)固定位置的浮動(dòng)菜單按鈕進(jìn)行交互。為了制定一個(gè)解決方案，使之不受到圓角屏幕或重疊的主屏幕指示器的影響，我決定附屬一個(gè)按鈕，而不是一個(gè)與屏幕同寬度的導(dǎo)航欄。我將這個(gè)快捷菜單按鈕放置在屏幕底部附近，但不會(huì)太靠近屏幕邊緣。這種方式讓用戶很容易接觸，而且不受重疊UI元素或圓角屏幕的影響。
點(diǎn)擊浮動(dòng)菜單按鈕后，用戶可以完全訪問網(wǎng)站導(dǎo)航，并可快速執(zhí)行一些交互，諸如給公司致電，發(fā)送電子郵件或根據(jù)公司地址進(jìn)行地圖導(dǎo)航等操作。
(這個(gè)解決方案唯一的缺點(diǎn)是，如果你想在iOS Safari上點(diǎn)擊屏幕底部的任何元素，在第一次點(diǎn)擊之后，只有Safari標(biāo)簽欄會(huì)出現(xiàn)，第二次點(diǎn)擊后才會(huì)激活網(wǎng)站導(dǎo)航。當(dāng)然，為了能夠單手操作網(wǎng)頁，你需要權(quán)衡兩者的利弊。如果浮動(dòng)按鈕的位置正確，有可能會(huì)逃避iOS Safari的檢測，并在第一次點(diǎn)擊后立即啟動(dòng)導(dǎo)航。)
執(zhí)行：原型
在原型開發(fā)過程中，我的目標(biāo)是創(chuàng)建一個(gè)快速，簡短和響應(yīng)式的交互，同時(shí)確保從開發(fā)人員的角度來看也是可行的原型。
https://dribbble.com/shots/3851367-iPhone-X-Web-Navigation-Idea
思考
這個(gè)概念使得單手操作，即使在大型移動(dòng)設(shè)備上也能輕松實(shí)現(xiàn)網(wǎng)站導(dǎo)航。
然而，這個(gè)概念還是需要進(jìn)行優(yōu)化，比如屏幕底部始終可見的浮動(dòng)導(dǎo)航按鈕(可以以某種方式構(gòu)建，只有當(dāng)用戶開始向上滾動(dòng)時(shí)才可見，向下滾動(dòng)時(shí)將消失)。
如果你有其它的使手機(jī)導(dǎo)航更好更易于使用的想法，請隨時(shí)與我分享!
掃一掃關(guān)注微信公眾號
掃一掃訪問手機(jī)站
掃一掃打開小程序
