無(wú)論您是想構(gòu)建一個(gè)在桌面和移動(dòng)設(shè)備上看起來(lái)都很棒的網(wǎng)站，還是打算加入 48% 擁有自己應(yīng)用程序的小型企業(yè)，為用戶(hù)提供輕松的移動(dòng)瀏覽體驗(yàn)都保證為您的品牌帶來(lái)新的機(jī)會(huì)。
移動(dòng)導(dǎo)航是指用戶(hù)可以在任何移動(dòng)設(shè)備上瀏覽網(wǎng)站或應(yīng)用程序并與之交互的方式。在制作這些資產(chǎn)時(shí)，有效的移動(dòng)導(dǎo)航對(duì)于提供無(wú)縫的 UX 設(shè)計(jì)至關(guān)重要，并且可以影響它們的整體成功。
在本文中，我們將討論移動(dòng)導(dǎo)航的含義，并探索當(dāng)今流行的移動(dòng)導(dǎo)航模式，以及如何使它們變得用戶(hù)友好。
什么是移動(dòng)導(dǎo)航？
在移動(dòng)設(shè)備上瀏覽時(shí)，網(wǎng)站導(dǎo)航是用戶(hù)體驗(yàn)的核心。移動(dòng)導(dǎo)航是通知和引導(dǎo)訪(fǎng)客瀏覽應(yīng)用程序或移動(dòng)網(wǎng)站的功能，包括痕跡導(dǎo)航（和痕跡導(dǎo)航）和錨鏈接等功能。與桌面導(dǎo)航相比，由于空間限制，移動(dòng)導(dǎo)航往往面臨更多挑戰(zhàn)。
自從移動(dòng)使用量增加以來(lái)，UX 和 UI 設(shè)計(jì)師多年來(lái)通過(guò)進(jìn)行 UX 研究和測(cè)試不同的移動(dòng)模式，將移動(dòng)導(dǎo)航變成了一種藝術(shù)形式。移動(dòng)網(wǎng)站導(dǎo)航和移動(dòng)應(yīng)用程序?qū)Ш蕉际谴藢?duì)話(huà)的一部分，調(diào)查用戶(hù)使用移動(dòng)設(shè)備的行為方式，以更好地了解在較小規(guī)模上交付內(nèi)容的最有效方法。
良好的移動(dòng)導(dǎo)航不僅僅是為用戶(hù)找到從 A 點(diǎn)到 B 點(diǎn)的最快方式。它有助于實(shí)現(xiàn)合乎邏輯的用戶(hù)旅程，防止用戶(hù)感到沮喪，并允許他們通過(guò)您的移動(dòng)網(wǎng)站或應(yīng)用程序發(fā)現(xiàn)有關(guān)您的品牌和產(chǎn)品的更多信息。
5種基本的移動(dòng)導(dǎo)航模式
了解最常用的移動(dòng)導(dǎo)航模式和網(wǎng)站菜單是制作讓用戶(hù)滿(mǎn)意的應(yīng)用程序或移動(dòng)網(wǎng)站的重要第一步。
最適合移動(dòng)網(wǎng)站和大型應(yīng)用程序：漢堡菜單
到目前為止，構(gòu)成經(jīng)典漢堡菜單的三條水平線(xiàn) 在移動(dòng)網(wǎng)站設(shè)計(jì)領(lǐng)域無(wú)處不在。小圖標(biāo)會(huì)隱藏菜單，直到用戶(hù)單擊它，漢堡菜單在移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)中比在移動(dòng)應(yīng)用程序中更常見(jiàn)?！?
由于漢堡圖標(biāo)在主頁(yè)上隱藏了菜單，因此設(shè)計(jì)人員可以提供更多菜單項(xiàng)或使標(biāo)題更長(zhǎng)，而不會(huì)使頁(yè)面擁擠。如果您選擇底部導(dǎo)航，您將被限制為五個(gè)項(xiàng)目，因?yàn)樗娴暮苄。枰訉?zhuān)注。
最適合簡(jiǎn)化用戶(hù)旅程：Tab 欄
“標(biāo)簽欄是當(dāng)今移動(dòng)應(yīng)用程序中最常見(jiàn)的導(dǎo)航模式，它位于屏幕底部，是一種更注重設(shè)計(jì)的導(dǎo)航模式，很容易被發(fā)現(xiàn)。通常，選項(xiàng)卡欄包含提供直接訪(fǎng)問(wèn)導(dǎo)航項(xiàng)的圖標(biāo)。它的交互性質(zhì)和在 Thumb 區(qū)域中的位置使其成為一種特別舒適的導(dǎo)航模式。
與漢堡菜單相比，選項(xiàng)卡欄在您可以顯示的項(xiàng)目數(shù)量方面存在更多限制。由于操作系統(tǒng)指南允許您一次最多包含五個(gè)項(xiàng)目，因此作為所有者，您需要選擇要在主導(dǎo)航上顯示的最重要的內(nèi)容。
最適合文本密集型應(yīng)用程序和移動(dòng)網(wǎng)站：基于網(wǎng)格的導(dǎo)航
基于網(wǎng)格的導(dǎo)航是一種全屏移動(dòng)模式，它直接在移動(dòng)應(yīng)用程序的主屏幕上包含大多數(shù)菜單項(xiàng)。與漢堡菜單類(lèi)似，您可以使用基于網(wǎng)格的導(dǎo)航來(lái)容納任意數(shù)量的項(xiàng)目，因此它用途廣泛，在設(shè)計(jì)方面有很多選擇。
類(lèi)似于 iPhone 和 Android 的移動(dòng)導(dǎo)航模式，它是我們?cè)S多人都熟悉的用戶(hù)界面。但正如 Gertman 指出的那樣，它正變得越來(lái)越過(guò)時(shí)，需要這種布局的用戶(hù)類(lèi)型是瀏覽教育或社區(qū)應(yīng)用程序以及包含大量閱讀內(nèi)容的網(wǎng)站。
最適合輔助導(dǎo)航功能：抽屜式導(dǎo)航
顧名思義，抽屜式導(dǎo)航是一種移動(dòng)導(dǎo)航模式，其中大部分導(dǎo)航內(nèi)容都包含在選項(xiàng)卡或側(cè)邊欄菜單后面。使用與漢堡菜單類(lèi)似的概念，抽屜式導(dǎo)航欄可以隱藏許多菜單項(xiàng)。雖然菜單項(xiàng)是隱藏的，但如果沒(méi)有明確的組織，導(dǎo)航系統(tǒng)將無(wú)法正常運(yùn)行?！叭绻阌泻芏鄡?nèi)容想包含在抽屜里，你需要確保它被組織起來(lái)并分為幾類(lèi)，這樣用戶(hù)就可以在眾多選項(xiàng)中找到他們正在尋找的內(nèi)容?！?/span>
最適合優(yōu)化空間利用率：下拉菜單
下拉菜單提供了另一種通用的移動(dòng)導(dǎo)航方法。只需輕輕一按，用戶(hù)就可以展開(kāi)選項(xiàng)列表，從而輕松發(fā)現(xiàn)更多選項(xiàng)，而不會(huì)使界面變得混亂。下拉列表對(duì)于表單或當(dāng)您需要提供一系列選擇而不會(huì)讓用戶(hù)不知所措時(shí)特別有用。請(qǐng)記住，將您的下拉選項(xiàng)設(shè)置得足夠大，以便在移動(dòng)屏幕上輕松點(diǎn)擊，從而確保用戶(hù)友好的體驗(yàn)。
最佳 Web 設(shè)計(jì)實(shí)踐
以下是設(shè)計(jì)移動(dòng)導(dǎo)航時(shí)要記住的一些最佳實(shí)踐：
確保您的內(nèi)容清晰易讀
由于移動(dòng)屏幕較小，確保用戶(hù)可以輕松閱讀您的內(nèi)容非常重要。注意字體大小和樣式，當(dāng)它們被打包到小屏幕上時(shí)可能會(huì)讓人不知所措，并盡可能減少書(shū)面內(nèi)容的數(shù)量。
在導(dǎo)航菜單中包含基本項(xiàng)目
如果您使用的移動(dòng)導(dǎo)航模式限制了您可以包含的菜單項(xiàng)的數(shù)量，請(qǐng)從戰(zhàn)略上考慮只包含對(duì)用戶(hù)最重要的頁(yè)面。盡管基于網(wǎng)格和漢堡菜單移動(dòng)導(dǎo)航允許更多選項(xiàng)，但您仍然應(yīng)該意識(shí)到它們是否過(guò)載。
使用基于手勢(shì)的導(dǎo)航來(lái)吸引查看者
基于手勢(shì)的導(dǎo)航是指使用手勢(shì)來(lái)控制和導(dǎo)航移動(dòng)網(wǎng)站或應(yīng)用程序的用戶(hù)界面。您可以使用它來(lái)增強(qiáng)導(dǎo)航模式，允許用戶(hù)在其設(shè)備上執(zhí)行操作，例如向左或向右滑動(dòng)、在屏幕之間移動(dòng)或捏合和展開(kāi)手指以放大和縮小。通常，手勢(shì)交互提供了一種更自然、更直觀(guān)的與電子設(shè)備交互的方式。
使用浮動(dòng)操作按鈕
浮動(dòng)操作按鈕 （FAB） 是顯示在用戶(hù)界面頂部的圓形按鈕，按下該按鈕時(shí)會(huì)觸發(fā)主要操作。設(shè)計(jì)師通常將其放置在屏幕的角落并使其突出以吸引用戶(hù)的注意力。FAB 提供對(duì)導(dǎo)航抽屜等基本功能的快速輕松訪(fǎng)問(wèn)。
應(yīng)用單手導(dǎo)航原則
單手導(dǎo)航使用戶(hù)只需用一只手即可在移動(dòng)設(shè)備上執(zhí)行常見(jiàn)任務(wù)。以下是單手導(dǎo)航的幾個(gè)關(guān)鍵原則：
將最常用的元素保持在 Thumb 區(qū)域內(nèi)
使用滑動(dòng)等手勢(shì)而不是按鈕
提供視覺(jué)提示以指導(dǎo)用戶(hù)的手
使用戶(hù)能夠根據(jù)自己的喜好自定義布局