設(shè)計完美的移動導(dǎo)航用戶體驗

時間：2024-05-13 12:30:02 | 來源：建站知識

時間：2024-05-13 12:30:02 來源：建站知識

當(dāng)涉及到移動設(shè)備上的復(fù)雜導(dǎo)航時，我們經(jīng)常想到漢堡菜單、整頁疊加、動畫滑入菜單和各種嵌套手風(fēng)琴。并非所有這些選項都表現(xiàn)良好，并且有一些值得探索的替代設(shè)計模式。讓我們開始吧！

1. 避免導(dǎo)航中有太多路標(biāo)

在移動設(shè)備上導(dǎo)航最常見的策略之一是使用好的手風(fēng)琴。事實上，手風(fēng)琴非常適合多級導(dǎo)航，通常比滑入式菜單更好。但是，由于我們打開和折疊菜單，因此還需要用圖標(biāo)指示它。這通常會導(dǎo)致太多的跡象將用戶的注意力吸引到太多的方向上。



在上面的例子中，沃達(dá)豐使用了3個不同的圖標(biāo)，指向底部（手風(fēng)琴折疊），頂部（手風(fēng)琴打開）或右側(cè)。后者表示選擇是一個鏈接，將用戶引導(dǎo)至類別頁面。然而，這并不明顯。



另一種 - 也許是一種稍微明顯的方式 - 是在鏈接中添加鏈接下劃線并完全刪除它們旁邊的圖標(biāo)。作為副作用，如果我們最終不得不混合可折疊的菜單和類別鏈接，那么哪個是哪個可能會更明顯一些。



通常，通常不需要將用戶指向太多方向。您很可能只需兩個圖標(biāo)即可獲得更好的結(jié)果，指示手風(fēng)琴是否打開。例如，這就是在瑞士電信（如上圖所示）上的做法。

最好避免過多的圖標(biāo)將用戶引導(dǎo)到太多方向。如果我們可以在沒有它們的情況下逃脫，那么測試一下如果我們這樣做會發(fā)生什么是個好主意。

2. 不要使用多個操作使導(dǎo)航過載

有時，導(dǎo)航菜單在一個導(dǎo)航欄中組合了兩個不同的功能。例如，如果您有要直接鏈接到的類別，但隨后還希望允許快速跳轉(zhuǎn)到子菜單項，該怎么辦?

通常，這意味著向同一導(dǎo)航欄添加兩個不同的操作。點擊類別的標(biāo)題將指向該類別;點擊該圖標(biāo)將打開手風(fēng)琴或提示單獨的視圖。為了使這種差異更加明顯，我們經(jīng)常添加一個垂直分隔符。不幸的是，在實踐中，這并不奏效。



在上面哥本哈根蒂沃利花園的示例中，每個部分標(biāo)題都鏈接到一個獨立的類別頁面。但是，點擊右側(cè)的圖標(biāo)會打開一個單獨的子導(dǎo)航。事實上，垂直分隔符確實有助于區(qū)分這兩個動作，但它仍然會導(dǎo)致很多錯誤。.

有時用戶只想一目了然地評估導(dǎo)航，他們還沒有承諾轉(zhuǎn)到專用頁面。然而，他們在這里，在他們根本沒有準(zhǔn)備好去那里的時候被推向一個頁面。一旦他們這樣做了，他們就必須回到上一頁并重新開始。理想情況下，我們會完全避免這個問題。



在猛犸象上，整個導(dǎo)航欄將用戶驅(qū)動到第二級導(dǎo)航。他們的用戶可以移動以發(fā)現(xiàn)類別中的所有項目或跳轉(zhuǎn)到子類別。問題解決了。我們可以幫助用戶自信而舒適地前進(jìn)，并完全防止錯誤，而不是使用分隔符和單獨的操作使導(dǎo)航欄過載。下一個操作始終只需輕點一下即可。

始終考慮在展開的折疊項或單獨的視圖中添加指向類別頁面的鏈接，并且只為整個欄分配一個單一函數(shù) — 打開該視圖。

3. 使用廣告牌模式完成首要任務(wù)

并非每個導(dǎo)航項都同樣重要。有些項目更常用，它們可能值得在導(dǎo)航中得到更多的關(guān)注。事實上，如果某些項目比其他項目更重要，我們可以使用廣告牌圖案并在導(dǎo)航上方更突出地顯示它們。



在上面的例子中——Otto、韓國郵政和德國郵政——我們更突出地顯示最重要的主題或功能，而導(dǎo)航的其余部分可用，但位置稍微不那么突出。



4. 嵌套手風(fēng)琴適用于專家用戶#

就像我們可能有太多的圖標(biāo)一樣，我們最終可能會得到太多嵌套的導(dǎo)航級別，整齊地打包在嵌套的手風(fēng)琴中。對于復(fù)雜的網(wǎng)站，它似乎是在網(wǎng)站上提供大量導(dǎo)航的少數(shù)選擇之一。事實上，我們可以爭辯說，通過允許用戶從任何頁面跳轉(zhuǎn)到第 4 級甚至第 5 級導(dǎo)航的任何頁面，我們可以大大加快他們的旅程。



令人驚訝的是，這似乎是正確的。專家用戶通常不會遇到多個嵌套手風(fēng)琴的大量可用性問題。但是，不經(jīng)常使用的用戶通常很難找到他們需要的信息，因為他們不了解信息的組織方式。

在復(fù)雜的環(huán)境中，導(dǎo)航通常反映了組織內(nèi)部的結(jié)構(gòu)方式，如果沒有這種先驗知識，找到通往正確頁面的正確路線充其量是困難的。在這種情況下，一旦用戶正在尋找非常具體的東西，他們似乎就會使用搜索，而不是上下遍歷導(dǎo)航樹。當(dāng)水平之間的對比不明顯時，例如在世衛(wèi)組織（如下圖所示），這一點變得很明顯。



如果我們需要在嵌套手風(fēng)琴中包含多個級別的導(dǎo)航，最好在菜單上只閃爍一點點排版和視覺對比，以便每個級別的導(dǎo)航都清晰不同，并且當(dāng)指向?qū)嶋H頁面的鏈接開始出現(xiàn)時也很明顯。比較下面的快速模型。



指示多個嵌套級別的另一種方法是添加不同類型的圖標(biāo)，以使其更明顯地顯示用戶當(dāng)前所在的位置。斯德哥爾摩大學(xué)網(wǎng)站上就是這樣完成的。就個人而言，我無法驗證這種設(shè)計模式的效果如何，但是當(dāng)與更好的排版對比度相結(jié)合時，這可能會表現(xiàn)得更好，絕對值得測試。



來自丹麥的公共交通網(wǎng)站。+跨多個級別的圖標(biāo)，用于嵌套手風(fēng)琴。當(dāng) V 形位于左側(cè)時，+始終位于右側(cè)。因此，它們顯示帶有嵌套手風(fēng)琴的四個導(dǎo)航級別。也許導(dǎo)航有點太多了，但它似乎運行良好。



另一方面，可能根本不需要它。安聯(lián)僥幸使用單個圖標(biāo)（上下 V 形），但每個導(dǎo)航級別都有明顯不同的設(shè)計。第一級在藍(lán)色背景上用白色文本突出顯示;第二層以粗體設(shè)計;第三級是純文本（當(dāng)然，也可以是鏈接）。

另外，不是同時顯示所有項目，而是首先只顯示四個最重要的項目，其他項目在單獨的頁面上可用。這是一個很好的例子，值得牢記。



嵌套手風(fēng)琴可以在每個級別之間具有足夠的對比度。但是，如果您有三個以上的導(dǎo)航級別，則使其使用一些縮進(jìn)和各種排版樣式將變得非常困難。

5. 滑入式菜單表現(xiàn)不佳

誠然，移動設(shè)備上的許多導(dǎo)航菜單都不是手風(fēng)琴。由于每個導(dǎo)航部分可能包含數(shù)十個子導(dǎo)航項，因此通常會看到所謂的滑入式菜單，導(dǎo)航項水平滑入，并向用戶顯示該級別上所有可用選項的綜合菜單。

在這種模式下，從一個級別快速跳到另一個級別是不可能的，因為用戶總是必須回到上一個級別才能前進(jìn)。



聯(lián)合利華一次只顯示一個級別的導(dǎo)航。當(dāng)用戶進(jìn)一步向下導(dǎo)航兔子洞時，他們一次只能看到一個級別。這確實可以很好地適應(yīng)組織可能需要的所有項目和所有級別。但是，如果用戶不太確定要去哪里，則內(nèi)容的發(fā)現(xiàn)速度往往會變慢。此外，不一定清楚“后退”按鈕將轉(zhuǎn)到何處。



如果我們確實使用滑入式菜單，最好將通用的“后退”按鈕替換為更具上下文的標(biāo)簽，向用戶解釋他們將返回的確切位置。德國郵政（如上圖所示）就是這樣做的。另請注意，菜單的主頁除了滑入式菜單外，還包含網(wǎng)站上的一些主要任務(wù)。

此外，《新英格蘭醫(yī)學(xué)雜志》為每個部分添加了一些排版對比，因此立即打開另一個部分的內(nèi)容以及指向新頁面的鏈接會更加明顯。事實上，只要再次使鏈接更加明顯，我們就可以走得更遠(yuǎn)，如下面的ADAC示例所示。



值得注意的是，對于經(jīng)常使用導(dǎo)航的人來說，動畫滑入可能會非常迷失方向、分散注意力和煩人。再加上內(nèi)容發(fā)現(xiàn)速度慢，圖標(biāo)太多，項目之間的對比度太小，你就有了災(zāi)難的秘訣。

滑入式菜單是一種選擇，但很少是最好的。它的表現(xiàn)肯定不如手風(fēng)琴，在手風(fēng)琴中，關(guān)卡之間的跳躍速度更快，而且很少需要回去.然而，手風(fēng)琴并不是我們唯一的選擇 - 特別是當(dāng)我們想要幫助用戶更快而不是更慢地在關(guān)卡之間導(dǎo)航時。

6. 導(dǎo)航堆棧適用于快速跳轉(zhuǎn)

當(dāng)我們將用戶從一個級別移動到另一個級別時，我們還需要為他們提供一種向后移動的方法。但是，我們不僅可以顯示“后退”按鈕，還可以像面包屑一樣將所有先前的部分堆疊在一起。所以我們得到了一個導(dǎo)航堆棧.



在荷蘭零售商Coolblue上，隨著用戶不斷探索更深層次的導(dǎo)航，他們總是可以一直回到他們之前的水平。這允許在級別之間更快地跳躍，并且在將用戶從一個頁面覆蓋層驅(qū)動到另一個頁面疊加層時絕對是一個好主意。

7. 使用窗簾圖案顯示多個級別的導(dǎo)航

當(dāng)我們立即顯示導(dǎo)航選項時，導(dǎo)航速度達(dá)到最大應(yīng)該不是一個很大的啟示。這就是為什么我們看到大按鈕顯示為大的可點擊卡片、過濾器和底頁。但是，我們?nèi)绾卧趲缀鯖]有任何地方的導(dǎo)航菜單中使用它？



LCFC將頁面分為兩部分，每個導(dǎo)航級別一個。

我們可以更好地利用可用空間。例如，如果垂直分割屏幕，在每個屏幕上顯示一個導(dǎo)航級別怎么辦？非常像我們拉到窗戶一側(cè)的窗簾。這就是LCFC（如上圖所示）所做的。要在關(guān)卡之間移動，我們根本不需要關(guān)閉任何菜單或返回 - 相反，我們單擊大面積區(qū)域，向前移動并探索。

如果您需要為冗長的導(dǎo)航標(biāo)簽提供更多空間怎么辦？好吧，標(biāo)簽可以換行到多行，或者我們可以通過用圖標(biāo)替換文本標(biāo)簽來減小寬度（只要它們是明確的）。它可能不適用于每個項目，但它似乎適用于Playstation（如下圖所示）。

整個第一級導(dǎo)航折疊為選項卡；然而，從一個級別移動到另一個級別并不需要任何跳回去。您可能想知道三條垂直線代表什么 - 理想情況下，可以拖走窗格，但不幸的是，它似乎沒有按預(yù)期工作。



ESPN使用非常相似的方法，但將第一級的空間量減少到最低限度。為了防止誤擊，它可以大一點，但想法幾乎相同：同時顯示兩個級別的導(dǎo)航.

我們可以在其他上下文中使用相同的方法，例如過濾。我們在左側(cè)顯示所有篩選器屬性，并允許用戶在第二個垂直窗格中選擇這些篩選器的特定值。這就是下圖所示的印度電子商務(wù)零售商Myntra上的過濾體驗。



如果某些篩選器不適合右窗格，用戶可以滾動以瀏覽更多篩選器，甚至可以在選擇中搜索特定篩選器。當(dāng)然，“應(yīng)用”按鈕必須保持浮動。很高興看到該按鈕上的結(jié)果總數(shù)。

不過，我們可以更進(jìn)一步。例如，有時用戶需要選擇與其相關(guān)的篩選器，并在下一步中定義其值。在這種情況下，我們將所有過濾器分組為幾個類別（甚至子類別），然后將所有類別和過濾器并排顯示為子類別。



例如，使用FT Screener，用戶可以通過同時探索多個級別來添加或更改條件 - 包括組的標(biāo)簽和這些組中的過濾器。選擇篩選器后，該篩選器將添加到頂部的概述中。這是一個簡單的篩選器構(gòu)造函數(shù)，用于在移動設(shè)備上進(jìn)行復(fù)雜的篩選。

垂直拆分可用于快速選擇一個重要的禮物或做出單一選擇。例如，語言選擇器就是這種情況。我們可以將所有支持的國家和語言組織為卡片或手風(fēng)琴，但它們也可以作為垂直選項卡工作，就像在 Oracle 的頁腳中所做的那樣。.



這樣，我們僅顯示與用戶相關(guān)的選項。他們永遠(yuǎn)不必轉(zhuǎn)到不相關(guān)的部分或頁面，因為他們可以獲得預(yù)覽，并且可以快速離開它，如果他們愿意這樣做。

通常，幕布模式適用于相當(dāng)扁平的內(nèi)容體系結(jié)構(gòu)，但很難管理三個或更多級別。當(dāng)導(dǎo)航速度很重要以及用戶可能在部分之間跳轉(zhuǎn)時，它顯示了它的優(yōu)勢。

它比滑入式菜單快得多，但不如手風(fēng)琴靈活.盡管如此，要記住一個很好的幫手，以更好地利用移動設(shè)備上的可用空間。

8.您可能不需要3+級別的導(dǎo)航

窗簾模式適用于兩個級別的導(dǎo)航，但您可能還有更多級別。在這種情況下，測試它是否真的必須這樣可能是個好主意。如果您通過菜單抽屜僅顯示兩個或三個級別，但其余的將在獨立頁面上可用，該怎么辦？



安特衛(wèi)普大學(xué)在移動設(shè)備上只能獲得一級導(dǎo)航。所有子部分都作為卡片存在于獨立頁面上。事實上，每個頁面上都有幾十個鏈接，但只要導(dǎo)航很明顯，這可能正是您所需要的。



Gov.uk 并不是一個特別小的網(wǎng)站，但它只有兩個主要部分，在移動設(shè)備上的導(dǎo)航中有很多小節(jié)。但是，無法從菜單抽屜訪問第三級或第四級導(dǎo)航。其他所有內(nèi)容都可以通過單獨頁面上的鏈接和卡片訪問。



韓國郵政緊隨其后，對這個想法進(jìn)行了有趣的轉(zhuǎn)折。點擊菜單中，它會顯示第二層的所有項目，但也會自動顯示第三層的選項。此外，面包屑還包括下拉菜單，允許用戶在每個級別的兄弟姐妹之間快速跳轉(zhuǎn)。您可以在設(shè)計完美的面包屑UX中找到有關(guān)該模式（橫向面包屑）的更多信息.

是否需要顯示兩個以上的導(dǎo)航級別？也許這確實是必要的，但很有可能不是。因此，也許值得測試一個只有兩個級別的設(shè)計。此外，我們可以為其添加另一個功能，以使導(dǎo)航更快。

9. 使用導(dǎo)航查詢查詢用戶的意圖

除了搜索和導(dǎo)航之外，我們還可以研究一些最常訪問的頁面或一些最受歡迎的任務(wù)，并直接顯示它們，正如我們在前面的德國郵政示例中所看到的那樣。

我們還可以添加導(dǎo)航查詢來詢問用戶的意圖，并允許他們選擇與他們相關(guān)的主題。將其視為導(dǎo)航的迷你搜索引擎，旨在提供無縫的自動完成體驗。這將為用戶提供目標(biāo)的指導(dǎo)，并幫助他們更可靠地導(dǎo)航。



德國保險公司Cosmos Direkt具有<選擇>菜單，允許用戶選擇他們想要在網(wǎng)站上執(zhí)行的特定任務(wù)。這種類型的導(dǎo)航還存在于搜索和經(jīng)典導(dǎo)航菜單中，但顯著提高了相關(guān)性的速度。

總結(jié)

作為快速摘要，在處理復(fù)雜的多級導(dǎo)航時，請記住以下幾點：

• 手風(fēng)琴工作得很好，對于專家用戶，即使它們是嵌套的，它們也能工作。
• 刪除不需要的圖標(biāo)。避免圖標(biāo)指向兩個以上的方向。
• 使用廣告牌模式突出顯示用戶希望在網(wǎng)站上完成的首要任務(wù)。
• 對于嵌套導(dǎo)航級別，請確保每個級別都是不同的（縮進(jìn) + 文字樣式）。
• 盡可能通過下劃線使鏈接明顯。
• 滑入式菜單的性能不是很好;它們緩慢且分散注意力。手風(fēng)琴可能會表現(xiàn)得更好.
• 保留用戶瀏覽的關(guān)卡的導(dǎo)航堆棧，以便快速跳轉(zhuǎn)。
• 窗簾導(dǎo)航很快！當(dāng)您有兩個或最多三個級別的導(dǎo)航時，請考慮使用它。
• 也許我們不需要顯示所有級別的導(dǎo)航，而是可以將用戶帶到相關(guān)頁面以從那里導(dǎo)航。