當前位置:首頁 >  站長 >  建站經驗 >  正文

如果你不喜歡折疊手機菜單,我們幫您找了5種其它解決方案

 2018-01-23 16:22  來源: A5企業(yè)專欄   我來投稿 撤稿糾錯

  域名預訂/競價,好“米”不錯過

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

為什么漢堡圖標會妨礙用戶體驗?

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

 

undefined

 

漢堡圖標的替代方案:

雖然說在移動網站中使用哪種形式的導航菜單沒有強制性的要求,但最好還是采取顯性的導航菜單設計,保證主要的導航菜單項都是可見的,避免用戶迷失的狀況,確保良好順暢的瀏覽體驗。下面是幾種可見性較強的導航菜單樣式:

1. 標簽式導航

如果你網站的導航菜單項數量相對不多,且比較常用,這時你可以選擇標簽式導航。不管你準備將這個標簽式導航放在頁面上方還是下方,一定要確保用戶能一眼就看見它,確保菜單內容是一目了然的。雖然標簽式菜單算是導航菜單設計中最簡單的一種樣式了,但在網頁中使用這種形式的菜單時還是要注意以下幾點:

使用標簽式導航時,菜單項最好不超過5個;

標簽式導航在使用時,至少應有一個標簽始終處于活動狀態(tài),且通過色彩對比,將活動狀態(tài)的標簽突出顯示出來;

通常第一個標簽應設置為主頁,標簽欄順序按照用戶使用的優(yōu)先級來排列;

在導航標簽當中,最好使用"圖標+文本"的方式來呈現,而諸如搜索應用中的搜索按鈕這樣常用且用戶熟知的操作,則只需要通過圖標來展示;

為了節(jié)省空間,導航欄可以在滾動翻頁過程中隱藏,而當頁面靜止的時候顯現;

 

undefined

 

2. 標簽欄+"更多"選項

如果你的導航菜單項數量比較多,你可以選擇"標簽欄+更多"的菜單設計方式:將4個比較主要的菜單項以標簽樣式展示出來,剩下的菜單項則出現在"更多"選項中。這種設計方式的原理其實和標簽式導航沒有多大區(qū)別,只是多了一個"更多"選項。不過,這種導航菜單樣式比隱藏式菜單更加優(yōu)秀,一方面,雖然它同樣隱藏了內容,但是絕大多數的重要選項已經被展示出來了,可見性還是比較強的。另一方面,"更多"選項按鈕既可以出現下拉菜單,也可以鏈接到獨立的菜單頁面,具體的設計策略能夠根據網站實際狀況靈活處理。

 

undefined

 

3. 漸進收縮式導航

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

 

undefined

 

4. 滾動式導航菜單

和前兩種設計方案一樣,滾動式菜單也是針對較多菜單項的一種解決方法。如果你的網站有許多菜單項,且菜單項之間沒有優(yōu)先級順序,你可以將所有的條目列在可滾動查看的范圍內,讓用戶自行查看。不過滾動式菜單的弊端在于當頁面沒被滾動時,只有主菜單呈現,剩下的菜單項都是難以看見的。

 

undefined

 

5. 全屏導航

前面的4種設計方案的基本思路,都是盡可能的少占據屏幕空間,而全屏式導航則采用了完全相反的策略。這種設計方法,直接將主頁做成導航,用戶打開首頁之后,可以上下滾動瀏覽導航類目,根據需求來點擊不同的導航,尋找自己想要的內容。

這種設計模式通常適用于目標任務比較明確的網站,尤其適合于那種用戶任務會固定在特定的類別當中的應用和網站。這種結構明確的網站,對于他們的固定用戶而言,是非常的清晰、明確的,一方面可以讓網站的設計和優(yōu)化更加便捷,另一方面對用戶而言更加好用,更容易集中注意力。Yelp網站就使用全屏導航讓設計以更加一致的方式來組織導航內容,更有針對性的展示信息。

 

undefined

 

最后,小飛還是要說,在移動端的導航設計中,想要找到一個萬能的解決方案是不現實的,網站應該采用什么樣的導航始終取決于你的產品、用戶喜好以及所處情境。所以,設計導航菜單時一定要基于網站和網站本身的信息架構,并且參考用戶需求,來定制合理的結構、優(yōu)先級和標簽內容,幫助用戶更好的瀏覽信息。只要做到這點,小飛相信你的網站導航就是清晰易懂的,網站用戶體驗就是極佳的。

快來起飛頁自助建站平臺(http://www.qifeiye.com/?t_wd=a5)做一個響應式網站吧!

申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!

相關文章

  • 神馬搜索移動網站優(yōu)化指南

    神馬搜索是真正的移動搜索,在發(fā)布至今短短幾月內在國內移動搜索引擎市場滲透率已超過20%,位居市場第二位。本文提供神馬搜索在網站收錄、優(yōu)化上的官方說法,幫助站長合理、持續(xù)的優(yōu)化網站,共同促進移動搜索的發(fā)展。

  • 移動商城網站在建設時必須要了解的一些事項

    隨著移動互聯網的不斷發(fā)展,越來越多的人可以使用手機達到絕大多數的上網的需求,網購自然也包含在內。在都市白領快節(jié)奏的生活催動下,越來越多的移動商城上線,使這些用戶可以輕松的使用手機在互聯網進行購物,于是建設移動商城的企業(yè)和個人也越來越多。那么,在進行移動商城系統的建設時,有哪些必須要了解的問題呢?

  • APP設計:游戲APP的運營淺析

    iOS成為大家爭先恐后爭奪的一塊大蛋糕。比如刷榜,沖榜,ASO,熱搜等等。蘋果對待所有設計者一視同仁,Appstore把棋牌手游定位在casino,默認守則就是不推廣棋牌手游。對于系統榜單排行不做干預,(國內國外都存在刷榜行為),對于侵權和違規(guī)手游有下架處理。

  • 移動網頁速度慢怎么解決?

    如果您的分數很低,您可以做一些事情,而無需重新設計您的網站。您一直在做正確的事:保持您的內容新鮮,并增加您的反向鏈接。然而,你仍然看到自然流量的穩(wěn)步下降。如果這聽起來很熟悉,那么就該檢查你的移動頁面速度了。

  • app設計之教育類app該如何推廣?

    將APP市場推廣渠道分為付費渠道,贊助渠道,自媒體渠道,口碑渠道,贊助渠道。針對教育類APP運營推廣,選擇適當的APP推廣渠道,這個時候就需要APP運營人員對于APP如何推廣有深入的了解,真正做到隨手拿來就可以做推廣,所以教育類APP的推廣,需要踏實,還要善于發(fā)現,在很多時候認識一個APP產品,比做

    標簽:
    app推廣
    app設計

熱門排行

信息推薦