傳統(tǒng)的漢堡包菜單有哪些替代設(shè)計(jì)普賢居素材網(wǎng)精選

這是一篇與漢堡包菜單,有關(guān)的設(shè)計(jì)作品。作品名為：傳統(tǒng)的漢堡包菜單有哪些替代設(shè)計(jì)普賢居素材網(wǎng)精選，來源于普賢居素材網(wǎng)，作者是三達(dá)不留點(diǎn)gpj。

如果你是一名合格的產(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ì)過程中你仍然需要考慮到至少以下幾個(gè)方面：

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

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

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

4）這些標(biāo)簽可以或放置在屏幕頂部或置于底部，這要看具體的設(shè)計(jì)場景和平臺(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ù)量超過5個(gè)時(shí)，不妨考慮把最優(yōu)先的前4個(gè)標(biāo)簽顯示出來，而多出來的其它標(biāo)簽則統(tǒng)一放置到”更多“選項(xiàng)下。

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

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

實(shí)例：Facebook

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

針對上述【包含“更多”選項(xiàng)的選項(xiàng)卡】方案，一個(gè)更精致的做法是使菜單選項(xiàng)適應(yīng)屏幕寬度來顯示，盡可能顯示更多的選項(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)先級卻并沒有大的差別，此時(shí)使用”更多“選項(xiàng)的做法就不再合適了，一個(gè)取代的方法是使用一個(gè)可滾動(dòng)的視圖將所有導(dǎo)航項(xiàng)顯示出來。

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

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

實(shí)例： Medium 、 Google

5、下拉菜單

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

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

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

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

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

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

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

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

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

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

Google Translate 也類似：

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

總結(jié)

就移動(dòng)端的導(dǎo)航結(jié)構(gòu)來講，并沒有一個(gè)放之四海而皆準(zhǔn)的解決方案，具體的設(shè)計(jì)往往要依賴于你的產(chǎn)品、用戶及場景。好比一些適用于其他人的東西并不見得也對你有用，反之亦然。然而，對每一個(gè)設(shè)計(jì)良好的導(dǎo)航結(jié)構(gòu)而言，其基礎(chǔ)在于整個(gè)信息架構(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

譯文鏈接：簡書
 

這篇設(shè)計(jì)欣賞到這里就結(jié)束了，感謝您的欣賞，希望對您的設(shè)計(jì)創(chuàng)作帶來了靈感。如果覺得文章不錯(cuò)，歡迎把普賢居素材網(wǎng)推薦給更多的設(shè)計(jì)達(dá)人。