域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

網(wǎng)站上的空間十分寶貴，特別是對(duì)移動(dòng)端設(shè)備而言。如何充分利用網(wǎng)站上的空間，提高網(wǎng)站內(nèi)容的可讀性，正確引導(dǎo)用戶(hù)進(jìn)行瀏覽，是站長(zhǎng)們面對(duì)的共同難題。一些設(shè)計(jì)師認(rèn)為通過(guò)使用隱藏式菜單(最典型的要數(shù)漢堡圖標(biāo))可以有效解決這個(gè)問(wèn)題。不過(guò)，研究表明漢堡圖標(biāo)這樣的隱藏式導(dǎo)航菜單雖然在節(jié)省網(wǎng)站空間上是一把好手，但在某種程度上卻會(huì)影響用戶(hù)體驗(yàn)。如果漢堡圖標(biāo)不是"良藥"，又有哪些"妙方"呢?在今天這篇文章中，小飛就帶大家看一下為什么漢堡圖標(biāo)會(huì)妨礙用戶(hù)體驗(yàn)，以及可替代漢堡圖標(biāo)的幾種導(dǎo)航菜單樣式。

為什么漢堡圖標(biāo)會(huì)妨礙用戶(hù)體驗(yàn)?

首先小飛要澄清一個(gè)事實(shí)：在移動(dòng)設(shè)備上，可見(jiàn)式導(dǎo)航其實(shí)比漢堡圖標(biāo)等隱藏式菜單使用得更為廣泛，前者大概是后者的2.5倍。很多人可能對(duì)這一數(shù)據(jù)感到吃驚，但這是真實(shí)的數(shù)據(jù)調(diào)查結(jié)果。如果你有仔細(xì)研究過(guò)漢堡圖標(biāo)和用戶(hù)體驗(yàn)設(shè)計(jì)相關(guān)的文章，你應(yīng)該更能理解隱藏式菜單和用戶(hù)體驗(yàn)的沖突所在。漢堡圖標(biāo)等隱藏式菜單最大的問(wèn)題就在于可見(jiàn)性很低，與可見(jiàn)式或部分可見(jiàn)式導(dǎo)航相比，在網(wǎng)站中它更難被用戶(hù)發(fā)現(xiàn)，更談不上使用了。換句話(huà)說(shuō)，在網(wǎng)站中使用漢堡圖標(biāo)等隱藏式菜單，對(duì)用戶(hù)來(lái)說(shuō)是一個(gè)挑戰(zhàn)，是一種有障礙的用戶(hù)互動(dòng)形式，用戶(hù)很可能會(huì)在瀏覽過(guò)程中感到困惑和迷茫，這樣的用戶(hù)體驗(yàn)還會(huì)好嗎?

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

雖然說(shuō)在移動(dòng)網(wǎng)站中使用哪種形式的導(dǎo)航菜單沒(méi)有強(qiáng)制性的要求，但最好還是采取顯性的導(dǎo)航菜單設(shè)計(jì)，保證主要的導(dǎo)航菜單項(xiàng)都是可見(jiàn)的，避免用戶(hù)迷失的狀況，確保良好順暢的瀏覽體驗(yàn)。下面是幾種可見(jiàn)性較強(qiáng)的導(dǎo)航菜單樣式：

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

如果你網(wǎng)站的導(dǎo)航菜單項(xiàng)數(shù)量相對(duì)不多，且比較常用，這時(shí)你可以選擇標(biāo)簽式導(dǎo)航。不管你準(zhǔn)備將這個(gè)標(biāo)簽式導(dǎo)航放在頁(yè)面上方還是下方，一定要確保用戶(hù)能一眼就看見(jiàn)它，確保菜單內(nèi)容是一目了然的。雖然標(biāo)簽式菜單算是導(dǎo)航菜單設(shè)計(jì)中最簡(jiǎn)單的一種樣式了，但在網(wǎng)頁(yè)中使用這種形式的菜單時(shí)還是要注意以下幾點(diǎn)：

使用標(biāo)簽式導(dǎo)航時(shí)，菜單項(xiàng)最好不超過(guò)5個(gè);

標(biāo)簽式導(dǎo)航在使用時(shí)，至少應(yīng)有一個(gè)標(biāo)簽始終處于活動(dòng)狀態(tài)，且通過(guò)色彩對(duì)比，將活動(dòng)狀態(tài)的標(biāo)簽突出顯示出來(lái);

通常第一個(gè)標(biāo)簽應(yīng)設(shè)置為主頁(yè)，標(biāo)簽欄順序按照用戶(hù)使用的優(yōu)先級(jí)來(lái)排列;

在導(dǎo)航標(biāo)簽當(dāng)中，最好使用"圖標(biāo)+文本"的方式來(lái)呈現(xiàn)，而諸如搜索應(yīng)用中的搜索按鈕這樣常用且用戶(hù)熟知的操作，則只需要通過(guò)圖標(biāo)來(lái)展示;

為了節(jié)省空間，導(dǎo)航欄可以在滾動(dòng)翻頁(yè)過(guò)程中隱藏，而當(dāng)頁(yè)面靜止的時(shí)候顯現(xiàn);

2. 標(biāo)簽欄+"更多"選項(xiàng)

如果你的導(dǎo)航菜單項(xiàng)數(shù)量比較多，你可以選擇"標(biāo)簽欄+更多"的菜單設(shè)計(jì)方式：將4個(gè)比較主要的菜單項(xiàng)以標(biāo)簽樣式展示出來(lái)，剩下的菜單項(xiàng)則出現(xiàn)在"更多"選項(xiàng)中。這種設(shè)計(jì)方式的原理其實(shí)和標(biāo)簽式導(dǎo)航?jīng)]有多大區(qū)別，只是多了一個(gè)"更多"選項(xiàng)。不過(guò)，這種導(dǎo)航菜單樣式比隱藏式菜單更加優(yōu)秀，一方面，雖然它同樣隱藏了內(nèi)容，但是絕大多數(shù)的重要選項(xiàng)已經(jīng)被展示出來(lái)了，可見(jiàn)性還是比較強(qiáng)的。另一方面，"更多"選項(xiàng)按鈕既可以出現(xiàn)下拉菜單，也可以鏈接到獨(dú)立的菜單頁(yè)面，具體的設(shè)計(jì)策略能夠根據(jù)網(wǎng)站實(shí)際狀況靈活處理。

3. 漸進(jìn)收縮式導(dǎo)航

漸進(jìn)收縮式導(dǎo)航菜單，也被稱(chēng)為"優(yōu)先級(jí)+"菜單，是一種符合響應(yīng)式設(shè)計(jì)規(guī)則的菜單設(shè)計(jì)，它會(huì)根據(jù)屏幕寬度和大小，盡可能多的顯示優(yōu)先級(jí)菜單項(xiàng)，而那些無(wú)法顯示出來(lái)的菜單項(xiàng)則會(huì)被收納到"更多"按鈕中，當(dāng)然"更多"按鈕中能夠菜單項(xiàng)的多少也取決于屏幕的寬度。這種設(shè)計(jì)方案比靜態(tài)的標(biāo)簽式+更多的按鈕更加靈活自然，更能給用戶(hù)提供較好的體驗(yàn)，當(dāng)然在設(shè)計(jì)方面也要復(fù)雜不少。

4. 滾動(dòng)式導(dǎo)航菜單

和前兩種設(shè)計(jì)方案一樣，滾動(dòng)式菜單也是針對(duì)較多菜單項(xiàng)的一種解決方法。如果你的網(wǎng)站有許多菜單項(xiàng)，且菜單項(xiàng)之間沒(méi)有優(yōu)先級(jí)順序，你可以將所有的條目列在可滾動(dòng)查看的范圍內(nèi)，讓用戶(hù)自行查看。不過(guò)滾動(dòng)式菜單的弊端在于當(dāng)頁(yè)面沒(méi)被滾動(dòng)時(shí)，只有主菜單呈現(xiàn)，剩下的菜單項(xiàng)都是難以看見(jiàn)的。

5. 全屏導(dǎo)航

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

這種設(shè)計(jì)模式通常適用于目標(biāo)任務(wù)比較明確的網(wǎng)站，尤其適合于那種用戶(hù)任務(wù)會(huì)固定在特定的類(lèi)別當(dāng)中的應(yīng)用和網(wǎng)站。這種結(jié)構(gòu)明確的網(wǎng)站，對(duì)于他們的固定用戶(hù)而言，是非常的清晰、明確的，一方面可以讓網(wǎng)站的設(shè)計(jì)和優(yōu)化更加便捷，另一方面對(duì)用戶(hù)而言更加好用，更容易集中注意力。Yelp網(wǎng)站就使用全屏導(dǎo)航讓設(shè)計(jì)以更加一致的方式來(lái)組織導(dǎo)航內(nèi)容，更有針對(duì)性的展示信息。

最后，小飛還是要說(shuō)，在移動(dòng)端的導(dǎo)航設(shè)計(jì)中，想要找到一個(gè)萬(wàn)能的解決方案是不現(xiàn)實(shí)的，網(wǎng)站應(yīng)該采用什么樣的導(dǎo)航始終取決于你的產(chǎn)品、用戶(hù)喜好以及所處情境。所以，設(shè)計(jì)導(dǎo)航菜單時(shí)一定要基于網(wǎng)站和網(wǎng)站本身的信息架構(gòu)，并且參考用戶(hù)需求，來(lái)定制合理的結(jié)構(gòu)、優(yōu)先級(jí)和標(biāo)簽內(nèi)容，幫助用戶(hù)更好的瀏覽信息。只要做到這點(diǎn)，小飛相信你的網(wǎng)站導(dǎo)航就是清晰易懂的，網(wǎng)站用戶(hù)體驗(yàn)就是極佳的。

快來(lái)起飛頁(yè)自助建站平臺(tái)（http://www.qifeiye.com/?t_wd=a5）做一個(gè)響應(yīng)式網(wǎng)站吧!

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！