學起來!大牌網站是如何設計Mega menu 菜單

Mega menu(大幅網頁菜單)是在網頁界面設計中非常常見的元素之一,用於引導用戶進入下級頁面。但是,正因爲mega menu十分常見,所以如果總是一成不變的設計,就容易顯得乏味。

 

本文收集了一些優秀的大牌網站mega menu設計案例,有的設計細節到位美觀,有的動效細膩流暢,相當值得參考!下面一起來欣賞吧,Enjoy!

 

Moosejaw

Moosejaw的大幅菜單頁面

 

Moosejaw.com是一家在線實體零售商,專門從事戶外休閒服裝和滑雪板、攀巖、遠足和露營裝備。該網站的mega menu裏儘可能全面地羅列了網站的各分類,二級分類下分別又以首字母、性別、年齡、商品登進行劃分,十分地詳細,是非常經典的電商菜單。

 

Estee Lauder

 

Estee Lauder大幅菜單頁面

雅詩蘭黛是一家非常出名的化妝品品牌,旗下的各種化妝品和護膚品非常受歡迎。整個網站採用了黑白主色+大圖的設計風格。mega menu設計也十分地簡潔,統一採用黑色字體,僅通過加粗、字母大寫來強調層級。

 

Envelopes

 

Envelopes網站mega menu設計

Envelopes是一家銷售各種信封和郵寄材料的網站。網站的mega menu中,產品根據顏色、尺寸、樣式和紙張紋理排序,劃分詳細,提高搜索效率,幫助用戶快速找到最佳解決方案。每種顏色前面還有色卡,非常貼心了。

 

Quiksilver

 

Quiksilver網站的mega menu設計

 

 

Quiksilver的(Boardriders公司)是澳大利亞零售運動品牌,是世界上最大的衝浪服和其他與運動相關的設備品牌之一。其網站採用了黑白主色+大圖的設計風格。mega menu同樣配合這樣的極簡風格,整體居中,留有大面積空白。統一採用黑色字體,僅通過加粗、字母大寫來強調層級。採用Hover到文字上時置灰的交互方式,顯得非常靈敏。

 

FAO Schwarz

FAO Schwarz的網站mega menu設計

 

FAO Schwarz是一家美國玩具品牌,以其高端玩具、真人大小的毛絨動物、互動體驗、品牌整合和遊戲而聞名。網站的mega menu採用了上下漸入、先左後右的動效,顯得動態十足,非常有趣。

 

Bras N Things

 

Bras N Things的網站大幅菜單設計

 

Bras N Things是一家賣女性內衣的電商網站。網站的mega menu動效細膩流暢,二級菜單採用了純文字和文字搭配小圖這兩種設計佈局。

 

The Sak

The Sak網站的mega menu設計

 

The Sak是一家賣包的電商網站。網站的mega menu總體採用了上下談出、交替出現的動效,鼠標Hover選項時出現伸縮的下劃線,交互效果流暢。

 

Piano

 

Piano網站的大幅菜單設計

Piano是一家專門幫助媒體公司和內容運營公司成長的團隊。網站首屏有一個動效炫酷的轉動的地球,除此之外網站的設計較爲扁平,其mega menu採用最簡單隱藏交互動效,且僅有兩個層級。

 

Evernote

 

Evernote網站的大幅菜單設計

Evernote是一款出名的電子筆記資料管理軟件。網站整體採用了綠色,色調十分統一。mega menu中,鼠標Hover至二級菜單選項時,整個選項板塊即會變成綠色。

 

Beyond Trust

 

Beyond Trust的網站mega menu設計

BeyondTrust是一家爲UNIX/Linux/Windows/Mac OS操作系統提供權限管理的美國公司。網站mega menu二級菜單間採用橫向排列的佈局,二級菜單下的選項採用縱向排列的佈局,層級清晰,一目瞭然。鼠標Hover至選項時,文字變成系統紅色。

 

Mega menu原型設計:

讓我們看看在Mockplus中的mega menu設計:

 

EDX (點擊預覽)

 

mockplus 原型例子-edx網站的mega menu

 

Rodd & Gunn(點擊預覽

 

mockplus 原型例子-網站的mega menu

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章