幸運的是，越來越多的網(wǎng)絡(luò)站點和應(yīng)用程序都開始采用更有效的設(shè)計方案來替代這種傳統(tǒng)方法。本文就將例舉其中的幾種方案，不過這些方案并不見得就比其他尚未提到的要更好，它們的可行性可實際表現(xiàn)顯然要視其具體場景而定。

1、簡單選項卡

如果在你的站點/應(yīng)用程序中獨立部分為數(shù)不多，又要保證用戶能在不同部分間實現(xiàn)快速切換，那么選項卡式導(dǎo)航或許就是最合適的解決方案。

雖然這一方案看上去可能是最簡單的導(dǎo)航模式，但是，在設(shè)計過程中你仍然需要考慮到至少以下幾個方面：

1）標(biāo)簽數(shù)量不超過5個；

2）總有一個標(biāo)簽處于活躍狀態(tài)并在視覺上凸顯出來；

3）第一個標(biāo)簽應(yīng)該對應(yīng)程序中的首頁，并且所有的標(biāo)簽項的位置遵從它們的優(yōu)先級或邏輯性放置；

4）這些標(biāo)簽可以或放置在屏幕頂部或置于底部，這要看具體的設(shè)計場景和平臺（Android系統(tǒng)中將其放在底部）；

5）如果不使用文本標(biāo)簽，一定要保證那些標(biāo)簽圖標(biāo)是用戶所熟知的；

6）>查看更多注意事項。

案例：LinkedIn 、 Google Photos

LinkedIn中僅使用圖標(biāo)，Google Photos則使用圖標(biāo)和標(biāo)簽

2、包含“更多”選項的選項卡

當(dāng)標(biāo)簽數(shù)量超過5個時，不妨考慮把最優(yōu)先的前4個標(biāo)簽顯示出來，而多出來的其它標(biāo)簽則統(tǒng)一放置到”更多“選項下。

采用這種設(shè)計時要遵循的設(shè)計準(zhǔn)則基本同”簡單的選項卡“，”更多“選項則可以或鏈接向一個新的導(dǎo)航頁面或作為一個下拉菜單項。

你可能會爭論說這種使用”更多“標(biāo)簽的方法并不比傳統(tǒng)的漢堡包式菜單好，但是，如果你能依照正確的優(yōu)先級來顯示這些標(biāo)簽，那么大部分用戶就都會自然而然的將重點放在顯示的4個標(biāo)簽上，而于多出來的其他選項又不會明顯的打擾到他們。

實例：Facebook

3、適應(yīng)屏幕寬度的菜單

針對上述【包含“更多”選項的選項卡】方案，一個更精致的做法是使菜單選項適應(yīng)屏幕寬度來顯示，盡可能顯示更多的選項，多余的部分則放到一個“更多”選項下。

這意味著在分辨率越低的屏幕上，”更多“菜單下會包含更多的選項。這種做法顯然要比上述【包含“更多”選項的選項卡】更加靈活，尤其在屏幕尺寸不大不小的時候。

實例：BBC

4、可滾動導(dǎo)航 

如果程序中有不少導(dǎo)航項，而各項之間的優(yōu)先級卻并沒有大的差別，此時使用”更多“選項的做法就不再合適了，一個取代的方法是使用一個可滾動的視圖將所有導(dǎo)航項顯示出來。

這種方法的缺點是在不滾動的情況下用戶依然只能看到前面幾項，其他項還處于隱藏狀態(tài)，然而，在某些場景下，這依然是不失為一種可接受的方法。比如在一個網(wǎng)絡(luò)商店或資訊目錄下，用戶會自然地預(yù)期看到更多的內(nèi)容。

需要注意的是，在視覺設(shè)計上，你需要確保能提供足夠的視覺線索來引導(dǎo)用戶橫向滾動后還能看到更多的元素。

實例： Medium 、 Google

5、下拉菜單

還有一種不常見但挺有意思的設(shè)計，就是在其它選項的可見性和可達(dá)性都不那么至關(guān)重要時使用下拉菜單。

下拉菜單在這種情況下，實際上有雙重的作：其一，它充當(dāng)了一個頁面標(biāo)題，而向下箭頭則提示用戶從這里可能快速的切換選項部分。其二，雖然這里的選項被隱藏了起來，但是這種下拉的設(shè)計能有效的表明其列表項或指向當(dāng)前頁的同級頁或指向當(dāng)前頁的子頁面。

實例： Barnes&Noble 、Duolingo

當(dāng)瀏覽書籍時，當(dāng)前的分類總是顯示在頂部

雖然對于大多數(shù)用戶來說不是一個常見的交互，Duolingo允許用戶下拉快速切換語言

然而有時，漢堡包式菜單可能依舊是一個不錯的選擇。

因為漢堡包菜單的主要缺點就是其可見性不足，以往的設(shè)計準(zhǔn)則往往建議我們在設(shè)計主體導(dǎo)航時采用其他替代方案。不過，當(dāng)設(shè)計次級導(dǎo)航項時，或許可以考慮這種方案。 

如果主導(dǎo)航項能夠在屏幕上如操作按鈕一樣設(shè)計醒目可見，那么漢堡菜單似乎可以作為所有次級導(dǎo)航的好去處：

當(dāng)主導(dǎo)航是圍繞用戶流設(shè)計，且相關(guān)選項清晰可見時不妨考慮這種模式。Uber就是一個不錯的實例：

主屏幕上的所有選項都是為了叫車而設(shè)計，而其他的諸如歷史行程和設(shè)置這樣的次級項都統(tǒng)一放置到漢堡包菜單下

Google Translate 也類似：

主要功能就是切換語言并輸入文本進(jìn)行翻譯，而其他的諸如幫助和社區(qū)這樣的次級項就放到漢堡包菜單中去

總結(jié)

就移動端的導(dǎo)航結(jié)構(gòu)來講，并沒有一個放之四海而皆準(zhǔn)的解決方案，具體的設(shè)計往往要依賴于你的產(chǎn)品、用戶及場景。好比一些適用于其他人的東西并不見得也對你有用，反之亦然。然而，對每一個設(shè)計良好的導(dǎo)航結(jié)構(gòu)而言，其基礎(chǔ)在于整個信息架構(gòu)的合理性——清晰的結(jié)構(gòu)、優(yōu)先級以及根據(jù)用戶需求而定的標(biāo)簽等等。為什么不從今天起開始尋找最適用于你的產(chǎn)品的導(dǎo)航結(jié)構(gòu)呢？

譯自：https://medium.com/@kollinz/hamburger-menu-alternatives-for-mobile-navigation-a3a3beb555b8#.cmnh1w9dk