iPhone X 網頁導航概念

 如下內容由Mockplus團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。

 

 

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

 

相比移動應用程序採用標籤欄導航，大多數網站仍然使用漢堡菜單按鈕做爲主要導航。雖然這種導航方法不能在較大的移動屏幕尺寸上用單手操做。

 

肯定關鍵的用戶痛點

 

大多數時候咱們會在很是忙的時候使用手機。如：在乘公交車上下班或是散步的時候，咱們但願可以與手機進行快速互動，甚至是單手操做。在這種狀況下，咱們的另外一隻手每每提着一個袋子，拿着一杯咖啡，或者是在公共汽車上拿着扶手。

 

單手使用傳統的網站導航，尤爲在較大的設備上使用時是個至關大的挑戰，由於漢堡按鈕始終位於屏幕的左上角或右角。

 

挑戰

 

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

 

 

以後，在漢堡菜單按鈕旁邊還出現了一些其它操做項目，例如電話，電子郵件和方向指示器，這使得用戶可以單手快速訪問網站中最重要的元素。

 

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

 

執行：設計

 

爲了建立一個易於使用的網站導航解決方案，使得包括iPhone X在內的全部移動設備上看起來都適用，我在屏幕底部建立了一個浮動菜單按鈕。

 

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

 

點擊浮動菜單按鈕後，用戶能夠徹底訪問網站導航，並可快速執行一些交互，諸如給公司致電，發送電子郵件或根據公司地址進行地圖導航等操做。

 

（這個解決方案惟一的缺點是，若是你想在iOS Safari上點擊屏幕底部的任何元素，在第一次點擊以後，只有Safari標籤欄會出現，第二次點擊後纔會激活網站導航。固然，爲了可以單手操做網頁，你須要權衡二者的利弊。若是浮動按鈕的位置正確，有可能會逃避iOS Safari的檢測，並在第一次點擊後當即啓動導航。）

 

執行：原型

 

在原型開發過程當中，個人目標是建立一個快速，簡短和響應式的交互，同時確保從開發人員的角度來看也是可行的原型。

 

 

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

 

思考

 

這個概念使得單手操做，即便在大型移動設備上也能輕鬆實現網站導航。

 

然而，這個概念仍是須要進行優化，好比屏幕底部始終可見的浮動導航按鈕（能夠以某種方式構建，只有當用戶開始向上滾動時纔可見，向下滾動時將消失）。

 

若是你有其它的使手機導航更好更易於使用的想法，請隨時與我分享！

 

原文做者：Daniel Korpai

 

原文地址：https://medium.muz.li/iphone-x-web-navigation-concept-c06efc0e0c50

 

 Mockplus作原型，更快更簡單，如今下載Mockplus，免費體驗暢快的原型設計之旅。