本文主要分析了在APP導(dǎo)航欄設(shè)計(jì)中常犯的六個(gè)錯(cuò)誤，還分析3個(gè)成功的案例。牢記這些將幫助您從別人的錯(cuò)誤中學(xué)習(xí)，吸取經(jīng)驗(yàn)教訓(xùn)。同時(shí)，也可以幫您改善導(dǎo)航設(shè)計(jì)，讓用戶在您的應(yīng)用里運(yùn)用自如。

所有應(yīng)用程序都有著屬于它們自己的小世界，它們擁有大山般龐大的各種微觀交互，大海般的汪洋數(shù)據(jù)以及來自各個(gè)城市各行各業(yè)的用戶。應(yīng)用程序設(shè)計(jì)師有能力構(gòu)建這些世界，并將它們打磨到完美，為用戶提供輕松易用的導(dǎo)航并為用戶敞開歡迎的大門。

每當(dāng)一個(gè)用戶啟動(dòng)應(yīng)用程序時(shí)，他們最先要做的就是導(dǎo)航游覽。當(dāng)這條道路走到分岔路口時(shí)，還有什么能比給用戶提供一張簡(jiǎn)而易懂的地圖更好呢？

在本文中，您將看到用戶體驗(yàn)UX和UI界面設(shè)計(jì)人員所犯的一些最常見的導(dǎo)航錯(cuò)誤，以及為什么這些錯(cuò)誤會(huì)讓用戶倉(cāng)皇而逃。牢記這些將幫助您從別人的錯(cuò)誤中學(xué)習(xí)，吸取經(jīng)驗(yàn)教訓(xùn)。同時(shí)，也可以幫您改善導(dǎo)航設(shè)計(jì)，讓用戶在您的應(yīng)用里運(yùn)用自如。

一、您的菜單選項(xiàng)太多

您有沒有過這樣的經(jīng)歷，當(dāng)您在一個(gè)餐廳坐下來，接過菜單一看，感覺要花整個(gè)世紀(jì)才能把它看完？當(dāng)您有太多的選擇的時(shí)候，往往很難做出決定，而且會(huì)讓您感到困惑和不知所措。

應(yīng)用App也不例外!

如果用戶需要花很長(zhǎng)的時(shí)間來查看選項(xiàng)列表，很難快速地進(jìn)行選擇，他們多半會(huì)直接放棄該菜單。因此，最好讓列表盡量短一些以便用戶快速查閱。

?？硕墒谴_保您不會(huì)提供太多選擇的絕佳方式。

二、您的菜單沒有足夠的選項(xiàng)

另一方面，有些菜單包含很少的選項(xiàng)，用戶很難理解在哪里可以找到相關(guān)功能。在用戶體驗(yàn)設(shè)計(jì)中爭(zhēng)取簡(jiǎn)約主義通常是明智之舉，特別是對(duì)于手機(jī)的小屏幕而言存在一個(gè)隱藏顯示的問題。如果您為了在一個(gè)菜單上，顯示三個(gè)圖標(biāo)而嘗試在每個(gè)類別下設(shè)置太多選項(xiàng)，用戶還得猜測(cè)到底該去哪里選擇。

這樣的話，用戶尋找他們想要的界面或功能可能需要長(zhǎng)時(shí)間的點(diǎn)擊和嘗試。例如：他們會(huì)嘗試猜測(cè)“我的朋友列表”是否位于“個(gè)人資料”下還是“設(shè)置”下，他們會(huì)徘徊于“店鋪位置” 會(huì)顯示在“聯(lián)系我們”界面還是“主頁(yè)”界面等。

您應(yīng)用的主要目的如果不是用于“發(fā)現(xiàn)”，那恐怕糟糕的是，當(dāng)用戶沒有找到他們想要的東西時(shí)，用戶多半就會(huì)失去耐心并去嘗試您競(jìng)爭(zhēng)對(duì)手的類似應(yīng)用了。

三、您的菜單不可見

有關(guān)漢堡包圖標(biāo)的文章已經(jīng)寫得很多，有些人認(rèn)為它是應(yīng)用程序設(shè)計(jì)的必要組成部分，有些人甚至稱其為應(yīng)用程序圖標(biāo)之王。

其實(shí)，問題不在于圖標(biāo)本身，而在于將菜單隱藏在另一個(gè)點(diǎn)擊后面的這種做法。更明智的方法是，讓用戶能夠在最少的點(diǎn)擊情況下，訪問到最多的應(yīng)用程序內(nèi)容。

隱藏菜單可能導(dǎo)致用戶迷失方向而無法找到他們想要的東西，當(dāng)用戶無法找到他們想要的菜單或界面時(shí)，他們會(huì)開始胡亂點(diǎn)擊或滑動(dòng)，因此很快就會(huì)感到煩躁。確定用戶遇到導(dǎo)航錯(cuò)誤的具體位置（例如：無響應(yīng)的手勢(shì)）可能非常具有挑戰(zhàn)性，但觸摸熱圖可以幫助您將問題區(qū)域可視化，為您提供一看就懂的數(shù)據(jù)并助您改善導(dǎo)航功能。

觸摸熱圖的圖片示例由Appsee提供

四、您正試圖重制導(dǎo)航規(guī)則

負(fù)責(zé)界面設(shè)計(jì)的人員一般都很有創(chuàng)新精神，但也很容易過分忠于這份熱情。在移動(dòng)應(yīng)用行業(yè)不斷變革的時(shí)代，毫無疑問這樣的創(chuàng)新精神自然會(huì)創(chuàng)造出好的結(jié)果。但這有發(fā)揮它的專屬時(shí)間和地點(diǎn)，而不是發(fā)揮在您的應(yīng)用導(dǎo)航設(shè)計(jì)中。

不尋常的導(dǎo)航規(guī)則可能看起來很有創(chuàng)意，但最終對(duì)用戶來說并不直觀，這就可能會(huì)對(duì)應(yīng)用程序的成功產(chǎn)生嚴(yán)重影響。

在移動(dòng)應(yīng)用的廣泛使用中，大多數(shù)用戶已經(jīng)習(xí)慣于某些地方的某些元素。他們的眼睛會(huì)掃到界面底部去尋找底部的導(dǎo)航菜單，或者到左上角看看是否有“退回”按鈕。除非他們非常有冒險(xiǎn)精神和耐心，否則他們不會(huì)希望像淘金一樣慢慢花時(shí)間去尋找他們需要的界面。

最好的方法是為每個(gè)圖標(biāo)設(shè)置一個(gè)位置，并將每個(gè)圖標(biāo)保留在固定的位置。請(qǐng)把那些創(chuàng)意另作它用吧，比如：在應(yīng)用程序的其它功能上去發(fā)揮您的創(chuàng)意特長(zhǎng)。

五、您正在使用不熟悉的圖標(biāo)

正如用戶習(xí)慣于傳統(tǒng)的菜單一樣，他們也習(xí)慣于特定的圖標(biāo)設(shè)計(jì)。不清楚或不熟悉的圖標(biāo)設(shè)計(jì)是最糟糕的UX設(shè)計(jì)。比如：使用公司圖標(biāo)而不是心形，星號(hào)或書簽圖標(biāo)，或者使用任何其它圖標(biāo)而不用相機(jī)圖標(biāo)去表示攝像頭功能等。

這些變化似乎是可以接受的，甚至是具有創(chuàng)造性的，但它們會(huì)讓用戶覺得他們像身處異國(guó)他鄉(xiāng)一樣不自在。這是導(dǎo)致導(dǎo)航困難的一個(gè)非常常見的錯(cuò)誤。

這篇文章給出了一些可以幫助解決這個(gè)圖標(biāo)設(shè)計(jì)的技巧，其中還包括5秒規(guī)則：

“如果花費(fèi)超過5秒的時(shí)間考慮一個(gè)合適的圖標(biāo)，則這個(gè)圖標(biāo)不可能有效地傳達(dá)您想要它傳達(dá)的含義?！?/p>

六、您沒向用戶顯示他們的當(dāng)前位置

這是移動(dòng)應(yīng)用設(shè)計(jì)中常見的錯(cuò)誤。正如使用一個(gè)導(dǎo)航應(yīng)用程序時(shí)，跟著那個(gè)指路的小箭頭/小圓點(diǎn)那樣至關(guān)重要，在使用應(yīng)用程序時(shí)讓用戶了解其具體位置也非常重要。通過向用戶顯示他們正在查看的界面（例如：突出顯示所選圖標(biāo)），有助于保持導(dǎo)航清晰明了、不復(fù)雜，并避免了使用應(yīng)用程序的一些不必要的猜測(cè)。

3個(gè)把導(dǎo)航和菜單設(shè)計(jì)得很好的應(yīng)用程序

盡管很多應(yīng)用出現(xiàn)了這些常見的錯(cuò)誤，但還是有一些應(yīng)用程序能夠把導(dǎo)航和菜單設(shè)計(jì)得很優(yōu)秀。這里推薦參考這三個(gè)應(yīng)用程序:

1. Tastemade

這個(gè)美食視頻應(yīng)用，為我們提供了底部導(dǎo)航欄的一個(gè)很好的示例。這些圖標(biāo)都很容易識(shí)別：房屋式的主頁(yè)按鈕、形狀像放大鏡的搜索按鈕、以及經(jīng)典的書簽按鈕和個(gè)人資料按鈕。

一般推薦的圖標(biāo)是2-5個(gè)按鈕，這里的4個(gè)圖標(biāo)顯示出UI設(shè)計(jì)師完美地把控了平衡。這些熟悉的符號(hào)提供了一種簡(jiǎn)單快捷的入門，并確保了返回用戶會(huì)把時(shí)間著重花在使用應(yīng)用程序的主要功能上。

圖片來源:?Tastemade

2. 多鄰國(guó)

作為一個(gè)教育應(yīng)用，必須讓用戶易于發(fā)現(xiàn)和易于理解它的所有內(nèi)容及類別。盡管語(yǔ)言學(xué)習(xí)的應(yīng)用程序包含大量的內(nèi)容，但多鄰國(guó)這個(gè)應(yīng)用，仍然沒有在屏幕的左側(cè)或右側(cè)隱藏其菜單。

它采取的方式是在底部導(dǎo)航菜單設(shè)置5個(gè)灰色圖標(biāo)，當(dāng)選擇一個(gè)圖標(biāo)時(shí)，它將變成藍(lán)色，界面名稱則顯示在其下方。僅顯示突出顯示的圖標(biāo)名稱可以使界面保持簡(jiǎn)潔，同時(shí)又可以幫助新用戶了解應(yīng)用程序。 [額外福利：請(qǐng)參閱關(guān)于多鄰國(guó)應(yīng)用的UX案例分析！]

圖片來源:?Duolingo

3. 愛彼迎

愛彼迎（Airbnb）的應(yīng)用程序使用了適合各種機(jī)型（包括小型智能手機(jī)界面）的5個(gè)明顯易懂的圖標(biāo)，避免了用戶不得不打開數(shù)十個(gè)瀏覽器標(biāo)簽，來查看搜索結(jié)果和由此帶來的諸多不便。比如：當(dāng)在某一國(guó)家選擇住所時(shí)，愛彼迎的導(dǎo)航設(shè)計(jì)最明智的抉擇，是將整個(gè)用戶瀏覽軌跡分成幾個(gè)獨(dú)立的界面，然后以合理的順序顯示每個(gè)界面的圖標(biāo)。

用戶可以在房屋搜索結(jié)果之間切換，查看已經(jīng)保存的公寓，已經(jīng)預(yù)訂的公寓以及他們正在與之聯(lián)系的房東等。這使瀏覽過程和對(duì)決定去哪一家變得簡(jiǎn)單、方便又直觀。

圖片來源:?Airbnb

結(jié)束語(yǔ)

市場(chǎng)上的應(yīng)用數(shù)不勝數(shù)，競(jìng)爭(zhēng)相當(dāng)激烈。要開發(fā)一個(gè)牛B的應(yīng)用，同時(shí)還要讓新手入門簡(jiǎn)單有趣，請(qǐng)務(wù)必確保您的用戶能夠在您為其創(chuàng)建的移動(dòng)小世界里，輕松地點(diǎn)擊和滑動(dòng)。

要了解用戶對(duì)您應(yīng)用的導(dǎo)航設(shè)計(jì)體驗(yàn)如何，您必須先行千里路，做好各種準(zhǔn)備工作。比如：充分利用移動(dòng)應(yīng)用數(shù)據(jù)分析、用戶評(píng)論和測(cè)試等。此外，您還需要一點(diǎn)兒換位思考和用戶使用應(yīng)用的習(xí)慣常識(shí)。

本文由 @XXX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖作者提供