漢堡選單(Hamburger Menu))蔚為潮流,設計優缺點大分析

早期的手機網頁選單,必須要使用斗大的文字與圖示,正常的網頁內容受到了很大的擠壓。使用了漢堡選單的設計技術,可以讓正常的網頁訊息更容易曝光,用戶使用智慧手機瀏覽網站,可以看到的不再是斗大的選單與文字,而是接近一般電腦瀏覽器的畫面。

※「漢堡選單」按鈕的造型酷似漢堡因此得名,這個設計雖然對智慧手機的用戶可能很熟悉,但對於電腦瀏覽器的用戶卻十分的陌生。「漢堡選單」是使用智慧手機瀏覽網頁時,三條水平線構成的簡易按鈕圖示,點擊後就會顯示智慧手機的選單。除了最經典的三條水平橫線外,有時也會出現外框或是顏色變化。

傳統的智慧型手機網頁設計的思維,重要的訊息多半放在首頁,內頁不易曝光是一大限制。隨著新一代的響應式網頁設計已經成為主流,一旦偵測到用戶的使用裝置為手機,漢堡選單就會自動出現的設計也很普及。馬路科技認為點擊漢堡選單後,進入網站的內頁也變得比較容易,站長也可以將用戶比較喜愛的頁面連結拉到選單的頂端,便於用戶更了解網站的內容與服務。

優點:

網站是否能夠留住用戶,良好的導覽與豐富的資訊內容是關鍵。用戶如何順利的在網站找到想要的商品、需要的服務、實用的資訊…這個部分要仰賴網站的導覽介面設計品質,漢堡選單是一個很有潛力的主力/輔助導覽工具。好的用戶往往會樂於多逛逛你的網站,漢堡選單是一個非常不錯的開始。

使用電腦瀏覽器的人,可能從未看過漢堡選單的ICON,這個問題相當普遍。此外,漢堡選單的按鍵設計五花八門,馬路科技觀察漢堡選單較多用於英語系網站,對於非英語系的網站用戶來說相當陌生,也是一個問題。

缺點:

點擊漢堡選單才會彈跳出選單畫面,但如果沒有點擊呢? 點擊了選單之後,受到智慧手機的畫面限制,只能顯示有限數量的網頁。如何讓選單能夠出現搜尋介面,或是其他更有利的導覽機能,才能改善選單的缺失。很快的,人們就會習慣「漢堡選單」的意義與便利性,雖然文字選單還是直覺得多,但多了一個設計方向,設計趨勢也越來越不分電腦與手機,對網頁設計師來說是好的發展。