漢堡三線圖標是表現菜單的最佳形式嗎？

12-24

由 http://Time.com 的改版引出的問題。

相關資源：
Don"t Make These Mobile Menu Mistakes
Exquisite Tweets from @lukew.
Killing Off the Global Navigation: One Trend to Avoid
The Ambiguous Hamburger Icon: Is The Icon Mystery Meat To Users?
Do Users Understand Mobile Menu Icons?
Mobile Menu AB Tested: Hamburger Not the Best Choice?

為什麼大家都覺得這是個粗暴的符號圖標？我一直認為這是對應了實物的，非常形象的圖標啊啊啊！

首先請大家看張圖

是的，我一直認為這種三線圖標代表的就是【抽屜】。
而說到抽屜，想到的當然就是【裡面藏著東西，能夠拉開】、【拉開就能看到這些東西】咯～

您若覺得這只是我一人的猜測和無理取鬧，我來舉幾個例子。先讓我們來看下 Android 罷。
安卓的側邊欄被親切地稱作 Navigation Drawer （導航抽屜）。而私以為安卓是把這三線圖標用地最好最貼切的。

分析：點擊圖標，在內容視圖之上划出側邊。不管是「滑出」還是右圖的列表樣式，都非常還原了現實的「抽屜」。而咱們仔細點看還能發現，操作欄左上角的三線圖標猥瑣地向更左邊伸進去了，和下面的側邊此起彼伏，妙不可言啊-v-另外，圖標一直是靠著屏幕左邊的，暗示了左邊有東西（快來點我&>w&<快來點我&>w&<）。
當然，咱們平時用的話哪會在意這麼多（不認同的同學，你當我是浮誇吧＝-＝）。

接下來看看iOS。

分析：這兩種用法在 iOS 上應該是最常見的了。 path 是側邊，微博是菜單，然後就沒有然後了。

最後再讓我們看個應用， tidy 。

分析： tidy 是一款整理相冊的 app ，視覺和交互上還原了許多抽屜的樣子和效果。大家看它的 icon 應該就能看出來，而它也是將抽屜簡化成了三條杠。各位有興趣的話可以下載玩玩看。內心OS：其實這貨動畫有點過了，邏輯和層級也不夠清晰，玩玩可以，但不實用。（本文純屬作者腦洞）

問這個問題那天看到 http://Time.com 的改版，訪問時會出現一個浮層提示這裡是菜單。Jared Spool 隨後在 Twitter 上發了一條 Tweet 評論 http://Time.com 的改版：

If you have to tell me where you』ve hidden all my 「favorite sections,」 maybe your nav is broken.

之前有看過很多關於漢堡 / 三線 icon 的討論，大致觀點分為兩派：Facebook、Path 等熱門 App 已經教育了用戶，不論對錯我們跟著一起用至少是安全的；另一種觀點是這類 icon 會造成誤解，做出良好的實現非常不易，很容易出現可用性的問題（Don"t Make These Mobile Menu Mistakes）。

我個人的感覺是這個 icon 在各種地方和各種場景下都在被使用，我們為這個 icon 引入了「上下文」的概念。相比其他的 icon（垃圾桶、叉子、氣泡、旗子……），漢堡 / 三線 icon 在不同的場景下作用是非常不一樣的：

在 iOS 的列表編輯界面下，漢堡 / 三線菜單的作用是拖用排序，主要設計移動似乎可能大概來自下圖中的拖動開關。當然這只是原生配置，也有不少 App 不再遵循這個設定（Mailbox），而使用直接拖動的設計。

在 iOS 原生設計之後，Path、Facebook 的 Left Nav 菜單 icon 也使用了這個樣式，雖說這兩個設計的用途不一樣，但還是依舊保持了共同點：拖動。這種全新的設計模式被採用之後很多 App 跟進使用了這種方式，導致大家都覺得這類漢堡 icon 背後都藏著一個菜單。

可是隨著移動設備的越來越多，導致「Mobile First」的觀點和 RWD 的深入人心，Desktop Web 端設計也逐漸偏向 App，我們會使用很多 App 上經常使用的 icon 和布局形式。

現在來看我認為三線 icon 在未來的 Desktop Web 上將越來越不是問題，但前提是我們做出的頁面設計更加 Content First，將內容放在更加重要的位置。在混亂排版和布局中的三線菜單會帶來更多的可用性問題，致使我們也會做出 http://Time.com 一樣的提示來告訴用戶。

Mobile 和 Desktop 也許會加速融合，在 App 中看到的設計將會更多的出現在 Desktop Web 上。

將會逐漸是。

多年以後，面對巨無霸漢堡，奧雷良諾·布恩地亞上校將會回想起 Chrome 把小扳手改為三線圖標的那個遙遠的下午。

我這樣理解設計的基本任務：通過設計出的系統表象，把設計者所理解的設計模型傳達給用戶，使用戶建立起自己的用戶模型，從而讓用戶理解這個圖標（在本題的語境下）有著什麼功能。

簡單地說，設計即溝通。我們想要用戶接受一個設計模型，就要讓圖標與用戶平時所接觸的類似功能的東西有某種聯繫。

比如 Gmail 的信件，比如鬧鈴類應用常用的兩腳鬧鐘，比如音樂應用常用的唱片。

而菜單圖標的聯繫有兩條路子：關注現實世界中的對應物；關注功能本身的概念特點。

前者的範例是扳手與齒輪，它們在現實生活中意味著修改與設置；後者的範例是三線圖標，它則模擬了菜單本身的橫條形模樣。

在信息時代的初期，這時圖標設計剛從現實生活中分娩而出，不宜太過脫離母體本身。這個時候，越擬物的便越是最佳形式，所以扳手與齒輪會在以往的日子裡大行其道。

而隨著信息時代逐漸成熟，已全面佔據人們生活的時候，圖標設計會逐漸形成全新的品味。這個時候，關注功能本身的概念特點，會比單純擬物更能表達設計者的意圖。

因為兩腳鬧鐘已經沒人使用；因為知音少，唱片有誰聽；因為扳手與齒輪也早已落架生塵。

並且，這個改變很可能是無法逆轉的：越多設計者使用，就會有越多的用戶認同，從而有越多的設計者使用。這是一條有著強大正反饋的路徑。

所以，扳手齒輪曾經是表現菜單的最佳形式，而三線圖標將會逐漸是表現菜單的最佳形式。

幾乎已經是了。一個符號不斷的被強化，本身就會變成一種公有知識和 Pattern.

在 iOS 里和 Android 上略有不同，Android 上越來越多的應用用被啃過的三線來表示側邊欄~

好的設計產生高效溝通，設計師有自己的設計模型，用戶有自己的用戶模型，兩者通過系統表象進行匹配。

這裡的表象即圖標，圖標具有隱喻，而用戶會借用外界事物信息來更好的理解這種隱喻。所以扳手可隱喻修正／設置，而三橫線可隱喻實物菜單／抽屜分類。

此設計合情合理。

我個人覺得漢堡包圖標並不會造成一些使用上的錯誤，但它絕對不是表現『菜單』的最佳形式。

從符號學的觀點上，一個符號使用得比較久，已經被大家所廣泛認可了，例如男女廁所的性別分類標誌，還有垃圾回收的標誌。當初這些符號的誕生，也是經過周密考慮所產生的結果。而後的廣泛推廣，是經歷了符號世界裡的演化和優勝劣汰，才成為了今天我們所見的樣子。

「三」這個數字，隱含了多的意味。我們也看過微信等產品上的變體（以點代替線），但本質沒有變。接近1X1的正方形比例，符合當下的審美趨勢。

這個時候，追求創新創意，所帶來的效果不一定比沿用傳統好。不過，對這個符號的認知，漸漸是成人世界的規範，放在幼齡兒童上，肯定有更好的設計方法。

P.S. 我不喜歡TIME的這個變化，人對符號的閱讀效率要更高一些，而且三根線襯著右邊的字，本身就有一種美感在裡面。