@十萬(wàn)個(gè)為什麼 ：漢堡圖標(biāo)，也就是三條小橫線，一直以來(lái)被用于表示指向菜單的鏈接，是當(dāng)今網(wǎng)頁(yè)中最具爭(zhēng)議的技巧之一。據(jù)說(shuō)設(shè)計(jì)師們都討厭它；客戶(hù)們也恨之入骨。那為什么它卻無(wú)所不在？

漢堡圖標(biāo)可以輕易縮放，它可以精確吻合像素網(wǎng)格。它原本是表達(dá)列表的圖標(biāo)，被強(qiáng)行冠上了如今的角色，但既然菜單就是一列選項(xiàng)，這樣使用它從含以上來(lái)說(shuō)是正確的。

在這個(gè)課題上，有數(shù)不盡的爭(zhēng)論、A/B型測(cè)試、博客宣泄、用戶(hù)研究，但這些研究幾乎都在關(guān)注app設(shè)計(jì)。當(dāng)漢堡圖標(biāo)用于網(wǎng)頁(yè)設(shè)計(jì)時(shí)，它表現(xiàn)出了更大的問(wèn)題。

漢堡圖標(biāo)的問(wèn)題

有很多設(shè)計(jì)師質(zhì)疑漢堡圖標(biāo)本身的價(jià)值。它頻繁作為iOS風(fēng)格圖標(biāo)出現(xiàn)，雖然在Apple采用它之前，就已經(jīng)被這么用了。

World-of-swiss

Hugeinc

事實(shí)上，關(guān)于它是不是可用的菜單圖標(biāo)，有大量相互矛盾的證據(jù)。有些設(shè)計(jì)師主張，年輕人能輕松認(rèn)出這個(gè)圖標(biāo)，其他人則表示年紀(jì)大的若有上網(wǎng)經(jīng)歷，也可以辨認(rèn)出來(lái)。這項(xiàng)證據(jù)中，我們只能得出唯一一個(gè)結(jié)論，可用性測(cè)試結(jié)果是不確定的，相似的測(cè)試常常得出相互矛盾的結(jié)果。

大家普遍接受一點(diǎn)，用戶(hù)不會(huì)把漢堡圖標(biāo)當(dāng)作單一鏈接，很可能是因?yàn)樗辉O(shè)計(jì)成一組鏈接，而非單個(gè)鏈接的樣子。支撐它的是環(huán)繞周?chē)倪吙颍蚴且粔K背景色，使它看起來(lái)更像一個(gè)按鈕，我敢說(shuō)，再擬物一些可以增加點(diǎn)擊量。

Futureinsightslive

漢堡圖標(biāo)還有更多問(wèn)題

除卻圖標(biāo)本身不說(shuō)，使用它的方式也充斥著問(wèn)題。

首先，可能也是最明顯的，漢堡圖標(biāo)給導(dǎo)航增加了額外的操作；原本一次點(diǎn)擊就可以到達(dá)具體頁(yè)面，現(xiàn)在需要兩次。根據(jù)網(wǎng)頁(yè)設(shè)計(jì)師的經(jīng)驗(yàn)，3次點(diǎn)擊要能抵達(dá)（任何地方），目前為止，導(dǎo)航問(wèn)題并沒(méi)有解決，漢堡圖標(biāo)這種技巧，只是把一個(gè)問(wèn)題變成了另一個(gè)問(wèn)題。當(dāng)然，這不僅僅是漢堡圖標(biāo)的問(wèn)題，它也是所有這種風(fēng)格導(dǎo)航的問(wèn)題。你可以用“菜單”兩字代替漢堡圖標(biāo)，阻礙仍然存在，區(qū)別只是漢堡圖標(biāo)沒(méi)法用在其他地方。

Middle-earth.thehobbit

Jam3

漢堡圖標(biāo)同時(shí)也隱藏了它的內(nèi)容。從用戶(hù)體驗(yàn)的觀點(diǎn)來(lái)看，用戶(hù)不應(yīng)該為了解自己能做什么，而做出任何動(dòng)作?！胺窒淼絋witter”或“付款”這些操作若不是近在眼前，太容易被用戶(hù)忽略。用戶(hù)根本不會(huì)去找他們不知道的鏈接。

最后，漢堡圖標(biāo)隱藏了網(wǎng)站的當(dāng)前狀態(tài)，還有用戶(hù)所在的位置。菜單中的按下?tīng)顟B(tài)為用戶(hù)提供了前后關(guān)聯(lián)信息，而漢堡圖標(biāo)則使它變得隱晦。

London-se

漢堡圖標(biāo)能做好什么？

鑒于漢堡圖標(biāo)被普遍厭惡，還導(dǎo)致一連串問(wèn)題，為何它還隨處可見(jiàn)呢？

以我的經(jīng)驗(yàn)，原因當(dāng)然在特定的年齡層里，漢堡圖標(biāo)近年來(lái)已經(jīng)深得辨識(shí)度的精髓。駁斥它的研究往往是一年前或更早的，而一年對(duì)于互聯(lián)網(wǎng)來(lái)說(shuō)可是很長(zhǎng)時(shí)間。

事實(shí)上，鏈接圖標(biāo)遠(yuǎn)比“鏈接”或“分享”更易辨識(shí)，但決定性的形式尚未顯現(xiàn)出來(lái)。而漢堡圖標(biāo)卻在各種不同設(shè)計(jì)中都保持了統(tǒng)一。

最重要的是，漢堡圖標(biāo)保持了它的初衷：它為我們節(jié)省了大量寶貴的屏幕空間資源。假如客戶(hù)給你多如牛毛的東西，都要加到菜單中，那么把它們移除屏幕并給出鏈接，就是簡(jiǎn)單粗暴卻非常有效的辦法，可以為客戶(hù)同樣想要的內(nèi)容騰出空間。

我得說(shuō)漢堡圖標(biāo)在這個(gè)問(wèn)題上，比其他解決方案都好，但也不盡然。還是應(yīng)該說(shuō)，漢堡圖標(biāo)沒(méi)有其他解決方案那么糟糕。

問(wèn)題的根源

漢堡圖標(biāo)得到采用，還是因?yàn)樵O(shè)計(jì)師（更多時(shí)候是客戶(hù)）沒(méi)有完全遵循移動(dòng)優(yōu)先的設(shè)計(jì)方法。他們想要一個(gè)“常規(guī)”站點(diǎn)，卻把它硬塞進(jìn)外孫女的手機(jī)中。

漢堡圖標(biāo)的反對(duì)者往往用“菜單”二字代替它，他們這么做完全不得要領(lǐng)。不論是否形似，漢堡圖標(biāo)如今已經(jīng)達(dá)到了它的含義，但用戶(hù)理解這個(gè)按鈕是干什么的，并沒(méi)有解決最大的問(wèn)題，它隱藏了導(dǎo)航，隱藏了用戶(hù)的選擇，這是相當(dāng)嚴(yán)重的自殘。

簡(jiǎn)單說(shuō)，漢堡圖標(biāo)是一種象征，象征著我們?cè)谝恍囊灰馊轿粨肀б苿?dòng)優(yōu)先的道路上，集體失敗了。

Ponomusic

Mccollcenter

更好的解決辦法

為了解決漢堡圖標(biāo)的問(wèn)題，我們得接受一個(gè)現(xiàn)實(shí)，我們以往所知的網(wǎng)頁(yè)已經(jīng)不再管用了。移動(dòng)網(wǎng)頁(yè)的崛起，遠(yuǎn)非減少幾欄、去掉一些沉重的圖片文件這么簡(jiǎn)單。

不同于舊時(shí)代的網(wǎng)頁(yè)，移動(dòng)網(wǎng)頁(yè)采用了一種不同的方式。移動(dòng)網(wǎng)頁(yè)生在專(zhuān)注于app的環(huán)境中，用戶(hù)希望傳統(tǒng)網(wǎng)頁(yè)也有類(lèi)似的時(shí)尚體驗(yàn)。

很著名的例子，F(xiàn)acebook的app將他們的漢堡圖標(biāo)改成了標(biāo)簽欄，結(jié)果顯示轉(zhuǎn)化率得到了提升。然而Facebook除了更換菜單設(shè)計(jì)，還做了意義重大得多的事情。近來(lái)他們發(fā)布了Messenger，了不起的地方在于，他們已經(jīng)有了功能完善受人歡迎的app，他們本可以將信息功能整合進(jìn)去。Facebook卻拆分了這些功能，使每個(gè)app專(zhuān)注于自己的角色，便得到了兩個(gè)簡(jiǎn)單的app，而非一個(gè)復(fù)雜的app?？s減功能導(dǎo)致了菜單項(xiàng)的減少，就不那么需要漢堡菜單了。

優(yōu)秀的app都極為專(zhuān)注，他們通過(guò)遠(yuǎn)比網(wǎng)頁(yè)嚴(yán)苛的用戶(hù)測(cè)試進(jìn)化。要打造app一樣的體驗(yàn)，我們得簡(jiǎn)化網(wǎng)站，再簡(jiǎn)化，然后再多簡(jiǎn)化一點(diǎn)點(diǎn)。如果有必要，將建筑結(jié)構(gòu)打散成可管理的小片，近似于迷你站點(diǎn)。當(dāng)我們?yōu)橛脩?hù)展現(xiàn)一組簡(jiǎn)單的選擇，復(fù)雜菜單的問(wèn)題再也不會(huì)出現(xiàn)了。

使用漢堡圖標(biāo)就像在傷口上扎繃帶：雖然把它包起來(lái)了，下面的傷口仍在。

我們只有完全擁抱移動(dòng)優(yōu)先的方式，不僅將它用于設(shè)計(jì)，也用于我們的內(nèi)容和信息結(jié)構(gòu)，漢堡菜單才會(huì)成為歷史。

原文地址：webdesignerdepot
譯文地址：colachan
譯者：@十萬(wàn)個(gè)為什麼

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量72萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：