對于設(shè)計師而言，移動端設(shè)備屏幕上的每一寸空間都是寶貴的資源。為了在小屏幕上做更多的事情，設(shè)計師在設(shè)計導(dǎo)航系統(tǒng)的時候，通常需要花費更多的時間來打磨。漢堡圖標(biāo)在過去幾年當(dāng)中，是最常見的一種設(shè)計策略，導(dǎo)航和選項被隱藏在這個小小的圖標(biāo)之后，但是實際上，雖然大眾已經(jīng)習(xí)慣了它的存在，但是它并不是最佳的導(dǎo)航設(shè)計方案。

在今天的文章當(dāng)中，我們會探討為什么漢堡菜單這樣的隱藏式導(dǎo)航影響用戶體驗，以及可用性更強的替代方案。

為何漢堡圖標(biāo)會破壞用戶體驗

在移動端設(shè)備上，我們看到的可見式導(dǎo)航其實比漢堡圖標(biāo)這樣的隱藏式導(dǎo)航更多，前者大概是后者的2.5倍。

如果你仔細(xì)鉆研過漢堡圖標(biāo)和用戶體驗設(shè)計相關(guān)的文章的話，可能看到過不少這樣的討論，對于漢堡圖標(biāo)和用戶體驗上的沖突有所了解。漢堡圖標(biāo)本身最大的問題在于可發(fā)現(xiàn)性很低，而這確實是有數(shù)據(jù)支持的。在定性研究中，NNGroup 發(fā)現(xiàn)這種隱藏式的導(dǎo)航設(shè)計比顯性的導(dǎo)航更難于發(fā)現(xiàn)，這意味著用戶不太可能發(fā)現(xiàn)和使用它們。換句話來說，漢堡圖標(biāo)降低了用戶的參與度，提升APP對于探索性的要求，并且有可能讓用戶感到迷惑。

漢堡圖標(biāo)的替代方案

雖然在移動端APP和網(wǎng)站設(shè)計上并沒有強制性的要求，但是最好還是采用顯性的導(dǎo)航設(shè)計，至少要確保主要的導(dǎo)航類目是用戶可見的，強化導(dǎo)航的可發(fā)現(xiàn)性。

1、標(biāo)簽式導(dǎo)航欄

如果你的網(wǎng)站或者APP的導(dǎo)航條目數(shù)量相對而言比較有限，并且大都比較常用，那么這個時候可以選擇標(biāo)簽式的導(dǎo)航。無論這個標(biāo)簽式的導(dǎo)航是在頁面的頂部還是底部，對于用戶而言都是一目了然的。

標(biāo)簽式的導(dǎo)航似乎是最簡單的導(dǎo)航模式。但是即便如此，在使用的時候也需要注意下面的幾個常見的問題：

·標(biāo)簽式的導(dǎo)航通常只能顯示不超過5個標(biāo)簽
·標(biāo)簽式導(dǎo)航在使用的時候，至少有一個標(biāo)簽是始終處于活動狀態(tài)，并且通過色彩對比，將活動狀態(tài)的標(biāo)簽突出顯示出來
·而第一個標(biāo)簽頁通常是作為主頁存在的，選項卡中的內(nèi)容排列順序應(yīng)該按照用戶使用的優(yōu)先級來排列
·在導(dǎo)航標(biāo)簽頁當(dāng)中，最好是使用圖標(biāo)+文本的方式來呈現(xiàn)，而諸如搜索應(yīng)用中的搜索按鈕，Instagram 中的拍攝按鈕，這樣常用且用戶熟知的操作，則只需要通過圖標(biāo)來展示就可以了。

小貼士：為了節(jié)省空間，導(dǎo)航欄可以在滾動翻頁過程中隱藏，而當(dāng)頁面靜止的時候顯現(xiàn)。

2、標(biāo)簽欄+“更多”選項

當(dāng)你的導(dǎo)航欄類目太多，但是你依然想采用標(biāo)簽式導(dǎo)航的時候，你可以在標(biāo)簽欄中顯示優(yōu)先級最高的4個選項，而最后一個選項則使用“更多（More）”按鈕，點擊之后顯示更多的優(yōu)先級更低的隱藏選項。這樣的設(shè)計依然比漢堡菜單要優(yōu)秀，雖然它依然隱藏了部分選項，但是絕大多數(shù)的重要選項依然被顯示了出來。“更多”選項的按鈕觸發(fā)之后，可以設(shè)計成為下拉菜單，也可以鏈接到獨立的菜單頁面，具體的設(shè)計策略可以根據(jù)實際情況來靈活處理。

3、漸進收縮式菜單

這種漸進收縮式菜單也被稱為“優(yōu)先級+”菜單，是一種符合響應(yīng)式設(shè)計規(guī)則的智能菜單設(shè)計，它會根據(jù)屏幕的寬度以及大小，盡可能多的顯示優(yōu)先級相對更高的導(dǎo)航項目，而無法顯示的內(nèi)容則會被收納到“更多”按鈕當(dāng)中。“更多”按鈕中能夠承載的條目的多寡，也取決于屏幕的寬度。這種解決方案的靈活性，比起相對固定的標(biāo)簽欄+“更多”按鈕，更加靈活自然，提供更好的體驗。

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

和前面兩種模式類似，滾動式導(dǎo)航是另外一種解決方案，如果你的導(dǎo)航中所包含的條目非常多，并且在優(yōu)先級上并沒有很大的差別，比如音樂流派分類，你可以使用滾動式的導(dǎo)航來呈現(xiàn)所有的類目。用戶可以通過滾動導(dǎo)航條目，點擊切換分類。

這個解決方案的缺陷在于，視野內(nèi)能顯示的條目還是有限，不滾動查看，其他的條目都在屏幕之外。用戶還是需要進行適當(dāng)?shù)奶剿鳎拍馨l(fā)現(xiàn)。但是總體上，這依然是比漢堡菜單更優(yōu)秀的導(dǎo)航設(shè)計方案。

5、全屏導(dǎo)航

前面的4種設(shè)計方案的基本思路，是盡可能小地擠占屏幕空間，而全屏式導(dǎo)航則采用了完全相反的策略。這種設(shè)計方法，會將主頁直接做成導(dǎo)航，用戶打開首頁之后，可以上下滾動瀏覽導(dǎo)航類目，并且根據(jù)需求來點擊不同的導(dǎo)航，尋找自己想要的內(nèi)容。

這種設(shè)計模式通常適用于目標(biāo)任務(wù)比較明確的網(wǎng)站和APP，尤其適合于那種用戶任務(wù)會固定在特定的類別當(dāng)中的應(yīng)用和網(wǎng)站。這種結(jié)構(gòu)明確的網(wǎng)站和APP，對于他們的固定用戶而言，是非常的清晰、明確的，一方面可以讓網(wǎng)站的設(shè)計和優(yōu)化更加便捷，對于用戶而言也更加好用，也更易于專注。

Yelp 的全屏導(dǎo)航

使用全屏導(dǎo)航能夠讓設(shè)計師以更加一致的方式來組織大塊的信息，有針對性的展示信息。

結(jié)語

在移動端導(dǎo)航設(shè)計上，想要找到一個萬能的解決方案是不可能的，采用什么樣的導(dǎo)航，始終還是取決于你的產(chǎn)品、用戶以及上下文背景。然而，每一個精心設(shè)計的導(dǎo)航，都應(yīng)該基于應(yīng)用和網(wǎng)站本身的信息架構(gòu)，并且參考用戶需求，來定制合理的結(jié)構(gòu)、優(yōu)先級和標(biāo)簽內(nèi)容。幫助用戶更好的瀏覽信息是每個設(shè)計師的首要任務(wù)。

【別錯過這些圖標(biāo)設(shè)計好文】

1. 《還有這種操作？這10個導(dǎo)航欄設(shè)計技巧別錯過了》
2. 《想劍走偏鋒？試試這6種實驗性的網(wǎng)頁導(dǎo)航模式》
3. 《并不簡單！網(wǎng)頁中為你指路的面包屑到底應(yīng)當(dāng)怎么使用？》
4. 《超實用干貨！聊聊底部導(dǎo)航設(shè)計的四個關(guān)鍵原則》

原文地址：webdesignerdepot
原文作者：Nick Babich
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：http://hao.uisdc.com