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

1、簡(jiǎn)單選項(xiàng)卡

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

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

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

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

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

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

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

6）>查看更多注意事項(xiàng)。

案例：LinkedIn 、 Google Photos

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

2、包含“更多”選項(xiàng)的選項(xiàng)卡

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

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

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

實(shí)例：Facebook

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

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

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

實(shí)例：BBC

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

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

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

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

實(shí)例： Medium 、 Google

5、下拉菜單

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

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

實(shí)例： Barnes&Noble 、Duolingo

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

雖然對(duì)于大多數(shù)用戶來(lái)說(shuō)不是一個(gè)常見(jiàn)的交互，Duolingo允許用戶下拉快速切換語(yǔ)言

然而有時(shí)，漢堡包式菜單可能依舊是一個(gè)不錯(cuò)的選擇。

因?yàn)闈h堡包菜單的主要缺點(diǎn)就是其可見(jiàn)性不足，以往的設(shè)計(jì)準(zhǔn)則往往建議我們?cè)谠O(shè)計(jì)主體導(dǎo)航時(shí)采用其他替代方案。不過(guò)，當(dāng)設(shè)計(jì)次級(jí)導(dǎo)航項(xiàng)時(shí)，或許可以考慮這種方案。 

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

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

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

Google Translate 也類似：

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

總結(jié)

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

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