如果你是一名合格的產(chǎn)品設(shè)計(jì)師，相信你已經(jīng)讀過了太多關(guān)于漢堡包導(dǎo)航是如何以其欠缺的可見性和低效率傷害用戶體驗(yàn)的文章。（感興趣的看這里：1，2，3，4）
幸運(yùn)的是，越來越多的網(wǎng)絡(luò)站點(diǎn)和應(yīng)用程序都開始采用更有效的設(shè)計(jì)方案來替代這種傳統(tǒng)方法。本文就將例舉其中的幾種方案，不過這些方案并不見得就比其他尚未提到的要更好，它們的可行性可實(shí)際表現(xiàn)顯然要視其具體場景而定。
1、簡單選項(xiàng)卡
如果在你的站點(diǎn)/應(yīng)用程序中獨(dú)立部分為數(shù)不多，又要保證用戶能在不同部分間實(shí)現(xiàn)快速切換，那么選項(xiàng)卡式導(dǎo)航或許就是最合適的解決方案。
雖然這一方案看上去可能是最簡單的導(dǎo)航模式，但是，在設(shè)計(jì)過程中你仍然需要考慮到至少以下幾個方面：
1）標(biāo)簽數(shù)量不超過5個；
2）總有一個標(biāo)簽處于活躍狀態(tài)并在視覺上凸顯出來；
3）第一個標(biāo)簽應(yīng)該對應(yīng)程序中的首頁，并且所有的標(biāo)簽項(xiàng)的位置遵從它們的優(yōu)先級或邏輯性放置；
4）這些標(biāo)簽可以或放置在屏幕頂部或置于底部，這要看具體的設(shè)計(jì)場景和平臺（Android系統(tǒng)中將其放在底部）；
5）如果不使用文本標(biāo)簽，一定要保證那些標(biāo)簽圖標(biāo)是用戶所熟知的；
案例：LinkedIn 、 Google Photos
2、包含“更多”選項(xiàng)的選項(xiàng)卡
當(dāng)標(biāo)簽數(shù)量超過5個時，不妨考慮把最優(yōu)先的前4個標(biāo)簽顯示出來，而多出來的其它標(biāo)簽則統(tǒng)一放置到”更多“選項(xiàng)下。
采用這種設(shè)計(jì)時要遵循的設(shè)計(jì)準(zhǔn)則基本同”簡單的選項(xiàng)卡“，”更多“選項(xiàng)則可以或鏈接向一個新的導(dǎo)航頁面或作為一個下拉菜單項(xiàng)。
你可能會爭論說這種使用”更多“標(biāo)簽的方法并不比傳統(tǒng)的漢堡包式菜單好，但是，如果你能依照正確的優(yōu)先級來顯示這些標(biāo)簽，那么大部分用戶就都會自然而然的將重點(diǎn)放在顯示的4個標(biāo)簽上，而于多出來的其他選項(xiàng)又不會明顯的打擾到他們。
實(shí)例：Facebook
3、適應(yīng)屏幕寬度的菜單
針對上述【包含“更多”選項(xiàng)的選項(xiàng)卡】方案，一個更精致的做法是使菜單選項(xiàng)適應(yīng)屏幕寬度來顯示，盡可能顯示更多的選項(xiàng)，多余的部分則放到一個“更多”選項(xiàng)下。
這意味著在分辨率越低的屏幕上，”更多“菜單下會包含更多的選項(xiàng)。這種做法顯然要比上述【包含“更多”選項(xiàng)的選項(xiàng)卡】更加靈活，尤其在屏幕尺寸不大不小的時候。
實(shí)例：BBC
4、可滾動導(dǎo)航?
如果程序中有不少導(dǎo)航項(xiàng)，而各項(xiàng)之間的優(yōu)先級卻并沒有大的差別，此時使用”更多“選項(xiàng)的做法就不再合適了，一個取代的方法是使用一個可滾動的視圖將所有導(dǎo)航項(xiàng)顯示出來。
這種方法的缺點(diǎn)是在不滾動的情況下用戶依然只能看到前面幾項(xiàng)，其他項(xiàng)還處于隱藏狀態(tài)，然而，在某些場景下，這依然是不失為一種可接受的方法。比如在一個網(wǎng)絡(luò)商店或資訊目錄下，用戶會自然地預(yù)期看到更多的內(nèi)容。
需要注意的是，在視覺設(shè)計(jì)上，你需要確保能提供足夠的視覺線索來引導(dǎo)用戶橫向滾動后還能看到更多的元素。
實(shí)例： Medium 、 Google
5、下拉菜單
還有一種不常見但挺有意思的設(shè)計(jì)，就是在其它選項(xiàng)的可見性和可達(dá)性都不那么至關(guān)重要時使用下拉菜單。
下拉菜單在這種情況下，實(shí)際上有雙重的作：其一，它充當(dāng)了一個頁面標(biāo)題，而向下箭頭則提示用戶從這里可能快速的切換選項(xiàng)部分。其二，雖然這里的選項(xiàng)被隱藏了起來，但是這種下拉的設(shè)計(jì)能有效的表明其列表項(xiàng)或指向當(dāng)前頁的同級頁或指向當(dāng)前頁的子頁面。
實(shí)例： Barnes&Noble 、Duolingo
然而有時，漢堡包式菜單可能依舊是一個不錯的選擇。
因?yàn)闈h堡包菜單的主要缺點(diǎn)就是其可見性不足，以往的設(shè)計(jì)準(zhǔn)則往往建議我們在設(shè)計(jì)主體導(dǎo)航時采用其他替代方案。不過，當(dāng)設(shè)計(jì)次級導(dǎo)航項(xiàng)時，或許可以考慮這種方案。?
如果主導(dǎo)航項(xiàng)能夠在屏幕上如操作按鈕一樣設(shè)計(jì)醒目可見，那么漢堡菜單似乎可以作為所有次級導(dǎo)航的好去處：
當(dāng)主導(dǎo)航是圍繞用戶流設(shè)計(jì)，且相關(guān)選項(xiàng)清晰可見時不妨考慮這種模式。Uber就是一個不錯的實(shí)例：
Google Translate 也類似：
總結(jié)
就移動端的導(dǎo)航結(jié)構(gòu)來講，并沒有一個放之四海而皆準(zhǔn)的解決方案，具體的設(shè)計(jì)往往要依賴于你的產(chǎn)品、用戶及場景。好比一些適用于其他人的東西并不見得也對你有用，反之亦然。然而，對每一個設(shè)計(jì)良好的導(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
如果喜歡我的文章，請點(diǎn)個??；如果有任何意見或看法，請留下您的評論。更歡迎各位持續(xù)的關(guān)注，謝謝！
