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

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

為何漢堡圖標(biāo)會(huì)破壞用戶(hù)體驗(yàn)

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

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

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

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

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

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

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

·標(biāo)簽式的導(dǎo)航通常只能顯示不超過(guò)5個(gè)標(biāo)簽

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

·而第一個(gè)標(biāo)簽頁(yè)通常是作為主頁(yè)存在的，選項(xiàng)卡中的內(nèi)容排列順序應(yīng)該按照用戶(hù)使用的優(yōu)先級(jí)來(lái)排列

·在導(dǎo)航標(biāo)簽頁(yè)當(dāng)中，最好是使用圖標(biāo)+文本的方式來(lái)呈現(xiàn)，而諸如搜索應(yīng)用中的搜索按鈕，Instagram 中的拍攝按鈕，這樣常用且用戶(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āng)你的導(dǎo)航欄類(lèi)目太多，但是你依然想采用標(biāo)簽式導(dǎo)航的時(shí)候，你可以在標(biāo)簽欄中顯示優(yōu)先級(jí)高的4個(gè)選項(xiàng)，而最后一個(gè)選項(xiàng)則使用“更多(More)”按鈕，點(diǎn)擊之后顯示更多的優(yōu)先級(jí)更低的隱藏選項(xiàng)。這樣的設(shè)計(jì)依然比漢堡菜單要優(yōu)秀，雖然它依然隱藏了部分選項(xiàng)，但是絕大多數(shù)的重要選項(xiàng)依然被顯示了出來(lái)?！案唷边x項(xiàng)的按鈕觸發(fā)之后，可以設(shè)計(jì)成為下拉菜單，也可以鏈接到獨(dú)立的菜單頁(yè)面，具體的設(shè)計(jì)策略可以根據(jù)實(shí)際情況來(lái)靈活處理。

3、漸進(jìn)收縮式菜單

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

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

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

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

5、全屏導(dǎo)航

前面的4種設(shè)計(jì)方案的基本思路，是盡可能小地?cái)D占屏幕空間，而全屏式導(dǎo)航則采用了完全相反的策略。這種設(shè)計(jì)方法，會(huì)將主頁(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)站和APP，尤其適合于那種用戶(hù)任務(wù)會(huì)固定在特定的類(lèi)別當(dāng)中的應(yīng)用和網(wǎng)站。這種結(jié)構(gòu)明確的網(wǎng)站和APP，對(duì)于他們的固定用戶(hù)而言，是非常的清晰、明確的，一方面可以讓網(wǎng)站的設(shè)計(jì)和優(yōu)化更加便捷，對(duì)于用戶(hù)而言也更加好用，也更易于專(zhuān)注。

Yelp 的全屏導(dǎo)航

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

結(jié)語(yǔ)

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

新聞標(biāo)題：app移動(dòng)端導(dǎo)航之漢堡圖標(biāo)設(shè)計(jì)
分享地址：http://www.rwnh.cn/news15/162065.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、虛擬主機(jī)、手機(jī)網(wǎng)站建設(shè)、建站公司、商城網(wǎng)站、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)