網(wǎng)站的空間都十分珍貴，對(duì)于屏幕空間十分有限的移動(dòng)端網(wǎng)站來(lái)說(shuō)，更是如此。所以，為了能在一屏之內(nèi)盡可能的多加入內(nèi)容，很多設(shè)計(jì)師會(huì)在移動(dòng)端的網(wǎng)站中選擇隱藏式菜單，這其中最為常見(jiàn)的就是漢堡圖標(biāo)。但是，有一項(xiàng)調(diào)查結(jié)果表明，雖然漢堡圖標(biāo)有效的節(jié)省了網(wǎng)站的空間，但是卻會(huì)影響到用戶的體驗(yàn)。

為什么漢堡突變會(huì)影響用戶的使用體驗(yàn)？

其實(shí)，在移動(dòng)網(wǎng)站中，可見(jiàn)式的導(dǎo)航欄比隱藏式菜單的使用更為普遍，可見(jiàn)式導(dǎo)航欄的使用率大概為后者的2.5倍，但事實(shí)上人們總是對(duì)隱藏式菜單的記憶更加深刻，造成這一現(xiàn)象的一個(gè)原因大概就是隱藏起來(lái)的菜單欄總是需要用戶進(jìn)行額外的操作并在屏幕中搜尋它的位置。

隱藏式菜單欄，尤其是漢堡圖標(biāo)在網(wǎng)站中的可見(jiàn)性一般較低，所以用戶也較難發(fā)現(xiàn)他們的存在。所以說(shuō)，以漢堡圖標(biāo)為代表的隱藏式導(dǎo)航欄其實(shí)是一種阻礙互動(dòng)的方式，也會(huì)在一定程度上影響用戶的使用體驗(yàn)。

如果不想使用漢堡圖標(biāo)的話，有幾種可見(jiàn)式菜單欄的性能較強(qiáng)，可以作為完美的替代。

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

說(shuō)起標(biāo)簽式導(dǎo)航欄可能很多人都沒(méi)有什么概念，但是我舉一個(gè)簡(jiǎn)單的例子大家就可以理解——微信的底部菜單就是一種標(biāo)簽式導(dǎo)航欄。

即，如果網(wǎng)站的導(dǎo)航菜單數(shù)量并不多，且都比較常用的話，就可以使用這種模式進(jìn)行導(dǎo)航欄的設(shè)計(jì)，一般更多的用戶比較習(xí)慣于底部的位置。但不管你把標(biāo)簽式導(dǎo)航欄放置在什么地方，都要保證它可以一眼就被用戶看見(jiàn)，且足夠清晰。在標(biāo)簽式導(dǎo)航欄的設(shè)計(jì)中，有幾點(diǎn)需要注意。

使用標(biāo)簽式導(dǎo)航欄時(shí)，菜單項(xiàng)不要超過(guò)五個(gè)；導(dǎo)航欄在使用過(guò)程中，請(qǐng)盡量保證其中始終有一個(gè)標(biāo)簽處于激活狀態(tài)，并可通過(guò)顏色、形狀等變化來(lái)提示用戶當(dāng)前處在的位置；一般來(lái)講，標(biāo)簽式導(dǎo)航欄的第一個(gè)標(biāo)簽設(shè)置為主頁(yè)，其他標(biāo)簽按照重要程度排序；導(dǎo)航欄的展現(xiàn)形式盡量設(shè)計(jì)為圖標(biāo)+文字。

標(biāo)簽式導(dǎo)航欄+更多選項(xiàng)

如果你需要使用的標(biāo)簽數(shù)量超過(guò)5個(gè)，那么就無(wú)法使用標(biāo)簽式導(dǎo)航欄了嗎？其實(shí)也仍有其他的解決辦法，就是將較為重要的標(biāo)簽直接展示給用戶，將功能性較低而用戶又有需求的標(biāo)簽合并為“更多”進(jìn)行隱藏，這其實(shí)也是一種標(biāo)簽式導(dǎo)航欄和隱藏式菜單的結(jié)合產(chǎn)物。

雖然隱藏了一些內(nèi)容，但是這種方式確保了用戶不必在頁(yè)面中尋找菜單欄處在的位置，并且大部分主要功能沒(méi)有被隱藏，用戶仍然可以非常方便的使用。并且，“更多”按鈕也可以與獨(dú)立的菜單頁(yè)面相鏈接，這樣就可以展現(xiàn)給用戶比“更多”更多的內(nèi)容。

全屏式導(dǎo)航

以上兩種設(shè)計(jì)方法，包括漢堡圖標(biāo)都是為了節(jié)省網(wǎng)站空間的菜單欄設(shè)計(jì)，而全屏式導(dǎo)航可以說(shuō)是反其道而行之。這些網(wǎng)站直接將首頁(yè)做成導(dǎo)航，在用戶進(jìn)入網(wǎng)站的時(shí)候，就可以直接根據(jù)導(dǎo)航來(lái)選擇自己想要瀏覽的內(nèi)容。

當(dāng)然，這種設(shè)計(jì)并不適用與所有網(wǎng)站，而是更加適合被一些目標(biāo)明確的網(wǎng)站中。這種結(jié)構(gòu)分明的網(wǎng)站對(duì)于了解網(wǎng)站相關(guān)行業(yè)信息的用戶來(lái)說(shuō)顯然更加清晰，也節(jié)省了他們尋找內(nèi)容所花費(fèi)的時(shí)間。

其實(shí)導(dǎo)航欄的設(shè)計(jì)也需要做出取舍，如想要讓導(dǎo)航欄顯示出更多的內(nèi)容就無(wú)法避免其占用屏幕的空間，而如果想要讓導(dǎo)航欄節(jié)省屏幕的空間的話就只能縮減導(dǎo)航欄的內(nèi)容，所以，導(dǎo)航欄究竟該如何設(shè)計(jì)，還需要站長(zhǎng)通過(guò)網(wǎng)站的定位來(lái)進(jìn)行一個(gè)合理的判斷，當(dāng)然，導(dǎo)航欄的設(shè)計(jì)，還是首先要從用戶的使用體驗(yàn)出發(fā)。

作者: https://www.haotuiwang.cn/ 平頭哥SEO，原創(chuàng)不易，轉(zhuǎn)載時(shí)必須以鏈接形式注明作者和原始出處及本聲明。

我們專注高端建站，小程序開(kāi)發(fā)、軟件系統(tǒng)定制開(kāi)發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開(kāi)發(fā)、各類API接口對(duì)接開(kāi)發(fā)等。十余年開(kāi)發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！