如何解決漢堡表徵圖(三道杠)問題

來源:互聯網
上載者:User

 

  @十萬個為什麽 :漢堡表徵圖,也就是三條小橫線,一直以來被用於表示指向菜單的連結,是當今網頁中最具爭議的技巧之一。據說設計師們都討厭它;客戶們也恨之入骨。那為什麼它卻無所不在?

  漢堡表徵圖可以輕易縮放,它可以精確吻合像素網格。它原本是表達列表的表徵圖,被強行冠上了如今的角色,但既然菜單就是一列選項,這樣使用它從含以上來說是正確的。

  在這個課題上,有數不盡的爭論、A/B型測試、部落格宣洩、使用者研究,但這些研究幾乎都在關注app設計。當漢堡表徵圖用於網頁設計時,它表現出了更大的問題。

  漢堡表徵圖的問題

  有很多設計師質疑漢堡表徵圖本身的價值。它頻繁作為iOS風格表徵圖出現,雖然在Apple採用它之前,就已經被這麼用了。

  World-of-swiss

  Hugeinc

  事實上,關於它是不是可用的菜單表徵圖,有大量相互矛盾的證據。有些設計師主張,年輕人能輕鬆認出這個表徵圖,其他人則表示年紀大的若有上網經曆,也可以辨認出來。這項證據中,我們只能得出唯一一個結論,可用性測試結果是不確定的,相似的測試常常得出相互矛盾的結果。

  大家普遍接受一點,使用者不會把漢堡表徵圖當作單一連結,很可能是因為它被設計成一組連結,而非單個連結的樣子。支撐它的是環繞周圍的邊框,或是一塊背景色,使它看起來更像一個按鈕,我敢說,再擬物一些可以增加點擊量。

  Futureinsightslive

  漢堡表徵圖還有更多問題

  除卻表徵圖本身不說,使用它的方式也充斥著問題。

  首先,可能也是最明顯的,漢堡表徵圖給導航增加了額外的操作;原本一次點擊就可以到達具體頁面,現在需要兩次。根據網頁設計師的經驗,3次點擊要能抵達(任何地方),目前為止,導航問題並沒有解決,漢堡表徵圖這種技巧,只是把一個問題變成了另一個問題。當然,這不僅僅是漢堡表徵圖的問題,它也是所有這種風格導航的問題。你可以用“菜單”兩字代替漢堡表徵圖,阻礙仍然存在,區別只是漢堡表徵圖沒法用在其他地方。

  Middle-earth.thehobbit

  Jam3

  漢堡表徵圖同時也隱藏了它的內容。從使用者體驗的觀點來看,使用者不應該為瞭解自己能做什麼,而做出任何動作。“分享到Twitter”或“付款”這些操作若不是近在眼前,太容易被使用者忽略。使用者根本不會去找他們不知道的連結。

  最後,漢堡表徵圖隱藏了網站的目前狀態,還有使用者所在的位置。菜單中的按下狀態為使用者提供了前後關聯資訊,而漢堡表徵圖則使它變得隱晦。

  London-se

  漢堡表徵圖能做好什麼?

  鑒於漢堡表徵圖被普遍厭惡,還導致一連串問題,為何它還隨處可見呢?

  以我的經驗,原因當然在特定的年齡層裡,漢堡表徵圖近年來已經深得辨識度的精髓。駁斥它的研究往往是一年前或更早的,而一年對於互連網來說可是很長時間。

  事實上,連結表徵圖遠比“連結”或“分享”更易辨識,但決定性的形式尚未顯現出來。而漢堡表徵圖卻在各種不同設計中都保持了統一。

  最重要的是,漢堡表徵圖保持了它的初衷:它為我們節省了大量寶貴的螢幕空間資源。假如客戶給你多如牛毛的東西,都要加到菜單中,那麼把它們移除螢幕並給出連結,就是簡單粗暴卻非常有效辦法,可以為客戶同樣想要的內容騰出空間。

  我得說漢堡表徵圖在這個問題上,比其他解決方案都好,但也不盡然。還是應該說,漢堡表徵圖沒有其他解決方案那麼糟糕。

  問題的根源

  漢堡表徵圖得到採用,還是因為設計師(更多時候是客戶)沒有完全遵循移動優先的設計方法。他們想要一個“常規”網站,卻把它硬塞進外孫女的手機中。

  漢堡表徵圖的反對者往往用“菜單”二字代替它,他們這麼做完全不得要領。不論是否形似,漢堡表徵圖如今已經達到了它的含義,但使用者理解這個按鈕是幹什麼的,並沒有解決最大的問題,它隱藏了導航,隱藏了使用者的選擇,這是相當嚴重的自殘。

  簡單說,漢堡表徵圖是一種象徵,象徵著我們在一心一意全方位擁抱移動優先的道路上,集體失敗了。

  Ponomusic

  Mccollcenter

  更好的解決辦法

  為瞭解決漢堡表徵圖的問題,我們得接受一個現實,我們以往所知的網頁已經不再管用了。移動網頁的崛起,遠非減少幾欄、去掉一些沉重的圖片檔案這麼簡單。

  不同於舊時代的網頁,移動網頁採用了一種不同的方式。移動網頁生在專註於app的環境中,使用者希望傳統網頁也有類似的時尚體驗。

  很著名的例子,Facebook的app將他們的漢堡表徵圖改成了標籤欄,結果顯示轉化率得到了提升。然而Facebook除了更換菜單設計,還做了意義重大得多的事情。近來他們發布了Messenger,了不起的地方在於,他們已經有了功能完善受人歡迎的app,他們本可以將資訊功能整合進去。Facebook卻拆分了這些功能,使每個app專註於自己的角色,便得到了兩個簡單的app,而非一個複雜的app。縮減功能導致了功能表項目的減少,就不那麼需要漢堡菜單了。

  優秀的app都極為專註,他們通過遠比網頁嚴苛的使用者測試進化。要打造app一樣的體驗,我們得簡化網站,再簡化,然後再多簡化一點點。如果有必要,將建築結構打散成可管理的小片,近似於迷你網站。當我們為使用者展現一組簡單的選擇,複雜菜單的問題再也不會出現了。

  使用漢堡表徵圖就像在傷口上紮繃帶:雖然把它包起來了,下面的傷口仍在。

  我們只有完全擁抱移動優先的方式,不僅將它用於設計,也用於我們的內容和資訊結構,漢堡菜單才會成為曆史。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。