iPhoneX網(wǎng)頁(yè)導航概念

這個(gè)概念使得單手操作，即使在大型移動(dòng)設備上也能輕松實(shí)現網(wǎng)站導航。

　　在移動(dòng)應用程序設計中，選擇漢堡菜單按鈕還是標簽欄作為導航一直是個(gè)古老的爭論話(huà)題。目前看來(lái)，由于手機屏幕尺寸越來(lái)越大，標簽欄導航功能越來(lái)越受用戶(hù)歡迎。

　　相比移動(dòng)應用程序采用標簽欄導航，大多數網(wǎng)站仍然使用漢堡菜單按鈕作為主要導航。雖然這種導航方法不能在較大的移動(dòng)屏幕尺寸上用單手操作。

　　確定關(guān)鍵的用戶(hù)痛點(diǎn)

　　大多數時(shí)候我們會(huì )在非常忙的時(shí)候使用手機。如：在乘公交車(chē)上下班或是散步的時(shí)候，我們希望能夠與手機進(jìn)行快速互動(dòng)，甚至是單手操作。在這種情況下，我們的另一只手往往提著(zhù)一個(gè)袋子，拿著(zhù)一杯咖啡，或者是在公共汽車(chē)上拿著(zhù)扶手。

　　單手使用傳統的網(wǎng)站導航，尤其在較大的設備上使用時(shí)是個(gè)相當大的挑戰，因為漢堡按鈕始終位于屏幕的左上角或右角。

　　挑戰

　　多年來(lái)，越來(lái)越多的設計師和開(kāi)發(fā)者決定在網(wǎng)站的底部放置一個(gè)固定的導航欄。這在桌面視圖的情況下表現得像一個(gè)固定的標題導航，但是在移動(dòng)設備上，它被粘在屏幕的底部而不是頂部。

　　之后，在漢堡菜單按鈕旁邊還出現了一些其它操作項目，例如電話(huà)，電子郵件和方向指示器，這使得用戶(hù)能夠單手快速訪(fǎng)問(wèn)網(wǎng)站中重要的元素。

　　然而，在iPhone X上，這個(gè)解決方案已經(jīng)不再可用，因為訪(fǎng)問(wèn)主屏幕的指示器總是位于網(wǎng)頁(yè)內容的頂部，這使得所有的底部定位導航容易被人遺忘。

　　執行：設計

　　為了創(chuàng )建一個(gè)易于使用的網(wǎng)站導航解決方案，使得包括iPhone X在內的所有移動(dòng)設備上看起來(lái)都適用，我在屏幕底部創(chuàng )建了一個(gè)浮動(dòng)菜單按鈕。

　　無(wú)論用戶(hù)是用右手還是左手操作，都可以很好的與這個(gè)固定位置的浮動(dòng)菜單按鈕進(jìn)行交互。為了制定一個(gè)解決方案，使之不受到圓角屏幕或重疊的主屏幕指示器的影響，我決定附屬一個(gè)按鈕，而不是一個(gè)與屏幕同寬度的導航欄。我將這個(gè)快捷菜單按鈕放置在屏幕底部附近，但不會(huì )太靠近屏幕邊緣。這種方式讓用戶(hù)很容易接觸，而且不受重疊UI元素或圓角屏幕的影響。

　　點(diǎn)擊浮動(dòng)菜單按鈕后，用戶(hù)可以完全訪(fǎng)問(wèn)網(wǎng)站導航，并可快速執行一些交互，諸如給公司致電，發(fā)送電子郵件或根據公司地址進(jìn)行地圖導航等操作。

　　(這個(gè)解決方案一個(gè)的缺點(diǎn)是，如果你想在iOS Safari上點(diǎn)擊屏幕底部的任何元素，在一次點(diǎn)擊之后，只有Safari標簽欄會(huì )出現，第二次點(diǎn)擊后才會(huì )激活網(wǎng)站導航。當然，為了能夠單手操作網(wǎng)頁(yè)，你需要權衡兩者的利弊。如果浮動(dòng)按鈕的位置正確，有可能會(huì )逃避iOS Safari的檢測，并在一次點(diǎn)擊后立即啟動(dòng)導航。)

　　執行：原型

　　在原型開(kāi)發(fā)過(guò)程中，我的目標是創(chuàng )建一個(gè)快速，簡(jiǎn)短和響應式的交互，同時(shí)確保從開(kāi)發(fā)人員的角度來(lái)看也是可行的原型。

　　https://dribbble.com/shots/3851367-iPhone-X-Web-Navigation-Idea

　　思考

　　這個(gè)概念使得單手操作，即使在大型移動(dòng)設備上也能輕松實(shí)現網(wǎng)站導航。

　　然而，這個(gè)概念還是需要進(jìn)行優(yōu)化，比如屏幕底部始終可見(jiàn)的浮動(dòng)導航按鈕(可以以某種方式構建，只有當用戶(hù)開(kāi)始向上滾動(dòng)時(shí)才可見(jiàn)，向下滾動(dòng)時(shí)將消失)。

　　如果你有其它的使手機導航更好更易于使用的想法，請隨時(shí)與我分享!