iPhoneX網頁導航概念

2017-11-22 15:10:11 來源：揚州市新竹網絡科技有限公司

這個概念使得單手操作，即使在大型移動設備上也能輕松實現(xiàn)網站導航。

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

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

　　確定關鍵的用戶痛點

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

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

　　挑戰(zhàn)

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

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

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

　　執(zhí)行：設計

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

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

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

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

　　執(zhí)行：原型

　　在原型開發(fā)過程中，我的目標是創(chuàng)建一個快速，簡短和響應式的交互，同時確保從開發(fā)人員的角度來看也是可行的原型。