如何解決情侶睡衣網(wǎng)站面包屑導(dǎo)航圖標(biāo)問題

網(wǎng)站面包屑導(dǎo)航圖標(biāo)（三個小條用來指示菜單鏈接）是目前網(wǎng)絡(luò)上最具爭議的技術(shù)之一。有人告訴設(shè)計(jì)師，所有人都討厭它。客戶，我們告訴所有人，也討厭它。那為什么到處都是呢？

漢堡包圖標(biāo)易于縮放，可完美地放置在像素網(wǎng)格中。它最初是一個列表圖標(biāo)，已經(jīng)被壓成其當(dāng)前角色，但是由于菜單只是選項(xiàng)列表，因此以這種方式使用列表項(xiàng)在語義上是正確的。

圍繞該主題進(jìn)行了大量的辯論，A / B測試，博客評論和用戶研究，但這些研究幾乎始終專注于應(yīng)用程序設(shè)計(jì)。在網(wǎng)頁設(shè)計(jì)中使用漢堡包圖標(biāo)時(shí)，它表示一個嚴(yán)重得多的問題。

網(wǎng)站面包屑導(dǎo)航圖標(biāo)出現(xiàn)問題

有很多設(shè)計(jì)師質(zhì)疑漢堡包圖標(biāo)本身的價(jià)值。即使在蘋果采用它之前就以這種方式使用它，也經(jīng)常將其視為iOS風(fēng)格的圖標(biāo)。

實(shí)際上，關(guān)于漢堡包圖標(biāo)是否可以用作菜單指示，有大量相互矛盾的證據(jù)。一些設(shè)計(jì)師認(rèn)為，圖標(biāo)很容易被年輕的人群識別，而另一些設(shè)計(jì)師則認(rèn)為，年齡較大的人群如果具備網(wǎng)絡(luò)知識就可以識別它。我們真正可以從這一證據(jù)中得出的唯一結(jié)論是，可用性測試已被證明是不確定的，并行測試通常會返回相互矛盾的結(jié)果。

普遍接受的是，用戶不會將漢堡包圖標(biāo)識別為單個鏈接-可能是因?yàn)樗辉O(shè)計(jì)為看起來像一組鏈接，而不是單個鏈接。支持的方法是在漢堡圖標(biāo)周圍加上邊框或?yàn)槠涮峁┍尘埃允蛊淇雌饋砀癜粹o（敢于說，更像擬），將帶來更多點(diǎn)擊。

網(wǎng)站面包屑導(dǎo)航圖標(biāo)出現(xiàn)更多問題

除了圖標(biāo)本身的設(shè)計(jì)之外，使用漢堡包圖標(biāo)的方法還存在很多問題。

首先，也許也是最重要的是，漢堡包圖標(biāo)為您的導(dǎo)航添加了額外的功能；現(xiàn)在只需單擊一次即可到達(dá)特定頁面，而現(xiàn)在只需兩次。網(wǎng)頁設(shè)計(jì)師的經(jīng)驗(yàn)法則一直是最多單擊三下（盡可能），到目前為止，漢堡圖標(biāo)技術(shù)并不能解決導(dǎo)航問題，而只是將一個問題換成另一個。當(dāng)然，這不僅是漢堡包圖標(biāo)的問題，還是任何以這種方式進(jìn)行布局的導(dǎo)航的問題。您可以使用“菜單”一詞代替漢堡包圖標(biāo)，并且會遇到相同的障礙，不同之處在于，不能以其他任何方式使用漢堡包圖標(biāo)。

漢堡包技術(shù)也隱藏了它的內(nèi)容。從UX的角度來看，用戶不必為了發(fā)現(xiàn)自己可以采取的措施而采取措施。當(dāng)這些選項(xiàng)不在您面前時(shí)，就很容易忘記“在Twitter上共享”或“轉(zhuǎn)到Checkout”。用戶根本不會去尋找他們不知道存在的鏈接。

最后，漢堡圖標(biāo)技術(shù)隱藏了您網(wǎng)站的當(dāng)前狀態(tài)以及用戶在其中的位置。菜單中的按下狀態(tài)向用戶提供漢堡圖標(biāo)技術(shù)難以理解的上下文信息。

網(wǎng)站面包屑導(dǎo)航圖標(biāo)做得好嗎？

考慮到漢堡圖標(biāo)普遍受到憎恨并導(dǎo)致一系列問題，為什么在各處都使用它？

根據(jù)我的經(jīng)驗(yàn)，當(dāng)然在某些人口統(tǒng)計(jì)中，漢堡包圖標(biāo)最近達(dá)到了易于識別的地步。在互聯(lián)網(wǎng)上，駁斥往往已經(jīng)超過一歲甚至一年的研究的時(shí)間很長。

實(shí)際上，鏈接圖標(biāo)比鏈接圖標(biāo)或共享圖標(biāo)更易于識別，后者的確定形式尚未出現(xiàn)。漢堡包圖標(biāo)在任何數(shù)量的不同設(shè)計(jì)中都是一致的。

最重要的是，漢堡包圖標(biāo)可以完成它打算做的事情：它為我們節(jié)省了大量的屏幕房地產(chǎn)。如果客戶向您提供必須添加到菜單中的大量物品列表，則將它們移出屏幕并鏈接到它們是一種粗略但有效的方式，可為客戶還希望的內(nèi)容騰出空間。

我想說的是，漢堡圖標(biāo)比其他解決方案更好地解決了問題，但這不是事實(shí)。相反，我要說的是，漢堡包圖標(biāo)比其他解決方案更能解決該問題。

問題的根源

之所以會使用漢堡包圖標(biāo)，是因?yàn)樵O(shè)計(jì)師（或更常見的是客戶）并未完全致力于移動優(yōu)先方法。他們想要一個“常規(guī)”站點(diǎn)，但被擠到孫女的電話上。

漢堡圖標(biāo)的反對者傾向于將其替換為“菜單”一詞，因?yàn)檫@樣做完全沒有意義。漢堡圖標(biāo)無論是否喜歡，現(xiàn)在都已獲得其含義，但是用戶了解按鈕的用途并不能解決最大的問題，即隱藏導(dǎo)航，隱藏用戶的選擇是一種可怕的自我行為-破壞。

簡而言之，漢堡包標(biāo)志是我們集體無法全心全意采用移動優(yōu)先方法的所有方面的癥狀。

更好的解決方案

為了解決漢堡包問題，我們必須接受眾所周知的Web無法正常工作。移動網(wǎng)絡(luò)的興起不僅意味著減少我們使用的列數(shù)并刪除一些較重的圖像文件，還遠(yuǎn)遠(yuǎn)不止這些。

移動網(wǎng)絡(luò)與舊網(wǎng)絡(luò)的使用方式不同。移動網(wǎng)絡(luò)存在于專用應(yīng)用程序的上下文中，用戶期望以類似的方式體驗(yàn)Web。

Facebook的應(yīng)用程序著名地將其漢堡包圖標(biāo)替換為標(biāo)簽欄，結(jié)果實(shí)現(xiàn)了更高的轉(zhuǎn)化率。但是，F(xiàn)acebook所做的事情比交換菜單設(shè)計(jì)要重要得多。最近，他們發(fā)布了Messenger應(yīng)用程序，最重要的是他們已經(jīng)擁有一個功能完善且受歡迎的應(yīng)用程序，可以將消息傳遞與之集成。通過將每個應(yīng)用程序的角色集中在Facebook上，F(xiàn)acebook劃分了其功能，他們開發(fā)了兩個簡單的應(yīng)用程序，而不是一個復(fù)雜的應(yīng)用程序。減少的功能導(dǎo)致減少的菜單選項(xiàng)集，并且減少了對漢堡菜單的需求。

優(yōu)秀的應(yīng)用程序具有高度的專注性，并且通過這種嚴(yán)格的用戶測試，它們已經(jīng)比Web經(jīng)受了更嚴(yán)格的測試。要創(chuàng)建應(yīng)用風(fēng)格的體驗(yàn)，我們需要簡化我們的網(wǎng)站，再次簡化，然后再簡化一點(diǎn)。如有必要，將您的體系結(jié)構(gòu)分解為可管理的，很小的站點(diǎn)，幾乎是微型站點(diǎn)。當(dāng)我們?yōu)橛脩籼峁┮唤M簡單的選項(xiàng)時(shí)，就不會出現(xiàn)復(fù)雜菜單的問題。

杭州網(wǎng)站建設(shè)漢堡包圖標(biāo)就像是在傷口上拍創(chuàng)可貼一樣：將它打補(bǔ)丁，但在下面仍然有些破損。

只有當(dāng)我們完全采用移動優(yōu)先的方法并將其不僅應(yīng)用于我們的設(shè)計(jì)，而且應(yīng)用于我們的內(nèi)容和信息架構(gòu)時(shí)，我們才會將漢堡菜單賦予歷史。

特色圖片/縮略圖， 通過Mononc'Paul 使用漢堡包圖片