Mega menu(大幅網頁菜單)是在網頁界面設計中非常常見的元素之一,用於引導用戶進入下級頁面。但是,正因爲mega menu十分常見,所以如果總是一成不變的設計,就容易顯得乏味。
本文收集了一些優秀的大牌網站mega menu設計案例,有的設計細節到位美觀,有的動效細膩流暢,相當值得參考!下面一起來欣賞吧,Enjoy!
Moosejaw
Moosejaw.com是一家在線實體零售商,專門從事戶外休閒服裝和滑雪板、攀巖、遠足和露營裝備。該網站的mega menu裏儘可能全面地羅列了網站的各分類,二級分類下分別又以首字母、性別、年齡、商品登進行劃分,十分地詳細,是非常經典的電商菜單。
Estee Lauder
雅詩蘭黛是一家非常出名的化妝品品牌,旗下的各種化妝品和護膚品非常受歡迎。整個網站採用了黑白主色+大圖的設計風格。mega menu設計也十分地簡潔,統一採用黑色字體,僅通過加粗、字母大寫來強調層級。
Envelopes
Envelopes是一家銷售各種信封和郵寄材料的網站。網站的mega menu中,產品根據顏色、尺寸、樣式和紙張紋理排序,劃分詳細,提高搜索效率,幫助用戶快速找到最佳解決方案。每種顏色前面還有色卡,非常貼心了。
Quiksilver
Quiksilver的(Boardriders公司)是澳大利亞零售運動品牌,是世界上最大的衝浪服和其他與運動相關的設備品牌之一。其網站採用了黑白主色+大圖的設計風格。mega menu同樣配合這樣的極簡風格,整體居中,留有大面積空白。統一採用黑色字體,僅通過加粗、字母大寫來強調層級。採用Hover到文字上時置灰的交互方式,顯得非常靈敏。
FAO Schwarz
FAO Schwarz是一家美國玩具品牌,以其高端玩具、真人大小的毛絨動物、互動體驗、品牌整合和遊戲而聞名。網站的mega menu採用了上下漸入、先左後右的動效,顯得動態十足,非常有趣。
Bras N Things
Bras N Things是一家賣女性內衣的電商網站。網站的mega menu動效細膩流暢,二級菜單採用了純文字和文字搭配小圖這兩種設計佈局。
The Sak
The Sak是一家賣包的電商網站。網站的mega menu總體採用了上下談出、交替出現的動效,鼠標Hover選項時出現伸縮的下劃線,交互效果流暢。
Piano
Piano是一家專門幫助媒體公司和內容運營公司成長的團隊。網站首屏有一個動效炫酷的轉動的地球,除此之外網站的設計較爲扁平,其mega menu採用最簡單隱藏交互動效,且僅有兩個層級。
Evernote
Evernote是一款出名的電子筆記資料管理軟件。網站整體採用了綠色,色調十分統一。mega menu中,鼠標Hover至二級菜單選項時,整個選項板塊即會變成綠色。
Beyond Trust
BeyondTrust是一家爲UNIX/Linux/Windows/Mac OS操作系統提供權限管理的美國公司。網站mega menu二級菜單間採用橫向排列的佈局,二級菜單下的選項採用縱向排列的佈局,層級清晰,一目瞭然。鼠標Hover至選項時,文字變成系統紅色。
Mega menu原型設計:
讓我們看看在Mockplus中的mega menu設計:
EDX (點擊預覽)
Rodd & Gunn(點擊預覽)