学起来!大牌网站是如何设计Mega menu 菜单

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(点击预览)

mockplus

作者:摹客Mockplus

mockplus
(0)

相关推荐

  • 网站导航全新形式:全屏菜单

    小编:网页导航我们普遍见到的是在顶部的导航条.最近流传一种新的导航形式,设计师们大胆的将导航布满整个页面. 与其他用户界面细节一样,菜单的设计也在随着当今的潮流改变.一些变化能带来积极的效果,改善用户 ...

  • 9款关于配色.PS和网站风格的设计工具

    关于配色 1.Colorfavs 网站地址:http://www.colorfavs.com Colorfavs主要用于上传图像并获取图像颜色,它界面设计简洁,可以浏览优秀颜色搭配,有收藏配色方案功能 ...

  • 学UI网力荐UI设计神书《高级UI设计师之路》

    学UI网虎哥:"近期各大设计群里的小伙伴都感受到找工作不像前2年那么容易了,UI行业经过5年的快速发展,整个产业里充斥着各种级别的UI设计师,但是大部分还是初中级水平,找工作不好找的也都是这 ...

  • 网站页脚设计小技巧

    编者按:评价一个网站好坏有众多因素,视觉设计.品牌一致性.网站易用性等,都会影响到访客的情绪,而今天我们要介绍的这个,是不起眼的网站页脚,然而正是这个很多设计师都忽略的部分,在网站中却有着至关重要的功 ...

  • 一图胜千言!八个小诀窍帮你玩转网站背景图设计

    @AnyForWeb_UED:几乎所有设计师都知道网页设计中用图的重要性,但在实际项目中,如何做好图片设计?本文将与大家分享如何通过"把握图片的意图"做好设计. 给设计师的建议:做 ...

  • 网站Logo的设计思路

    网站Logo是标识网站的重要部分.一般来说,好的Logo应该具备以下几个条件. 操作方法 01 1.符合国际标准    为了便于互联网上信息的传播以及网站的推广,长期以来网站Logo形成了一些国内外设 ...

  • 选好主板有依据 学看主板走线布局设计

    对于一块主板而言,除应在零部件用料(如采用优质电容、三相电源线路等)方面下功夫外,主板的走线和布局设计也是非常重要的。由于主板走线和布局设计的形式很多,技术性非常强,因此这也是优质主板与劣质主板的一大 ...

  • 网站图片导航设计制作全过程

    ​下面是我做的一个导航效果,当鼠标放到按钮上的时候就会变化一种颜色.做到这样的效果你需要两个软件第一个是photoshop,用于制作基本的按钮图片,第二个软件是dreamweaver,将图片做成导航栏 ...

  • Axure 8中如何设计三级折叠菜单

    Axure 8中如何设计三级折叠菜单