紧跟趋势!20个使用隐藏式菜单导航的优秀网页设计 - 优设网 - UISDC

紧跟趋势!20个使用隐藏式菜单导航的优秀网页设计

2015/02/16 17267评论区

website-hidden-menus-navigation-1

Navicon,也就是汉堡图标,已经成为越来越多网页设计导航模块时的首选了。相比于传统的导航栏,隐藏式菜单导航在设计和用户体验上有着它独到的地方。作为一个随着移动端设计发展而崛起的网页设计元素,Navicon并没有减弱它引导用户的功能性,也没有丧失它作为基础网页组件的重要性,还为设计师和开发者提供了更大的创作空间。

如何正确使用Navicon取决于项目的实际状况,相对保守的站点可能不会考虑这个选择,而不少追求时尚简约、多平台体验统一的新兴网站可能会更加青睐Navicon,因为作为导航接口的它小巧而讨喜,轻松配合大图和时尚的网页设计,并且隐藏起复杂的、零碎的导航内容菜单。

Navicon很单调么?并非如此。借助额外的打开过程动效和抓人眼球的细节效果,Navicon拥有非常大的提升空间和设计可能性以及良好的用户体验。更重要的是,它适用于各类导航:不仅可以清楚的传达信息,而且有助于解决响应速度方面的问题,并且能够促进网页在多平台设计上的统一。

如何设计一个靠谱的Navicon:《数据告诉你真相!汉堡图标并非最佳菜单方案》
深入了解不同的导航模式:《交互基础知识科普!带你认识最热门的12种导航模式》

接下来,我们通过一系列的网页设计,来深入了解Navicon和隐藏式菜单导航的魅力。

eWebDesign

大图背景和视差特效强化了网站视觉,Navicon菜单按钮在右上角,点击打开你会看到一个设计非常细致的导航菜单。

Sampedro

时尚的照片放置与网页的页头,配合着时髦的Slogan吸引着用户全部的吸引力。隐藏的导航栏是个理想的解决方案,它让用户将注意力从复杂的导航转移到内容上。

Chapoleone

细腻而对称的图片背景让网页拥有着别样的美感,如果加上导航栏会破坏这样的美感,所以设计师将Navicon放在左上角。符合习惯,安静自然。

Maecia

文字与帅气的视频背景融为一体,底部动态的箭头指引用户向下浏览,常驻右上角的Navicon借助黑白强对比彰显存在感,不影响视觉,也不会从你视野中消失。当鼠标移上去的时候,黑底会变成红色。

We are Empire

经典的色彩和简约的设计可见设计师的别出心裁,隐藏式的菜单栏令整个页面保持安静。即使鼠标移动上去的时候,动效也非常柔和,黑色变为红色,底部的短横缓慢伸长,动静之间,味道悠长。

Brand Junkie

华丽的圆形复古图章占据了页面中央,前景后景对比强烈。右上角的Navicon融入度高,但是相应的,用户也不容易发现。

Intelart

虽然网站整体呈现暗色调,但是前景后景之间的对比度颇为理想。Navicon和网页整体风格相互呼应,点击之后可以看到复杂的导航。

Monograph

和普通的汉堡图标不一样,Monograph的Navicon是参考网页的风格单独定制的,稍有不同但是一眼可以看出来。位置优越,使用便捷,风格统一。

Camp David Film

虽然网页在头部使用了相对传统的导航,但是设计团队巧妙地使用了文本替代按钮,并且将其他的部分隐藏在Navicon之后,这样的分段式导航兼顾到了不同用户的需求,呈现了一部分重要的内容,还兼顾到了漂亮的背景和视觉的统一。

Michael Villeneuve

Michael Villeneuve采用了更为简约的设计,漂亮的线框图标和文字结合在一起,在深色背景下对比明显。左上角的Navicon也是如此。

Exit Film

网站集中式的内容布置非常独特,对称的布局使网页看起来非常整齐。Navicon没有置于顶部,而是在左边中央位置。

La Ligne Rouge

在这里,Navicon的作用是补充设计并强化网站特色。菜单按钮和中间的曲棍球图标保持样式上的一致性,确保了识别性又保留了网页的性格。

Xander

如画的照片,雅致的字体,隐藏式菜单果然是首选。

Tannbach

主流的设计固然不错,别出机杼的设计更能令人难忘。Tannbach的导航菜单使用了下拉式的面板,不缺乏互动性,也足够精致。

Cofa Media

网页使用视频背景展现了机构的工作流程,点击Navicon之后,导航菜单会占据整个屏幕,这和移动端的设计高度一致,值得参考学习哦~

Alt_Cph14

Alt_Cph14 所使用的蓝色绝对令你印象深刻,它的灵感应该是来自于早期的数字界面设计。在这种色调之下,Navicon清晰而明显。

Ball&Claw

Ball&Claw 网站使用精致的排版和优雅的配色方案营造雅致的氛围,Navicon与整个氛围相得益彰。

Hooch Creative

去掉传统的导航栏之后整个页面清爽了起来,亮色调的网站名称,大字体标题,两者以不同的方式吸引用户注意,而Navicon则在右上角平衡了网页的视觉。

Sam Dallyn

作为产品展示类的网页,Sam Dallyn这个网站的页面布局非常出色,精致、复杂,但又泾渭分明。微小的Navicon在左侧无干扰地常驻,如果你真的需要借助导航来做什么的话,也不难找到。

The First 50 Years of Bose

整个网页被设计师从中间一分为二,鼠标移动到某一侧的时候,中间的隔线会移动到另一侧,激活所在区域,借助动效和声音吸引你。常驻右侧的Navicon与其他功能构成了侧边栏,便于操作。

Demodern

黑色底的Navicon 在浅色底背景上看起来颇为显眼。点击Navicon会呈现出黑色底的导航内容,菜单出现时候的动效具有令人难忘的几何质感。

结语

Navicon和许多不同类型的网站都能完美的适配,这中间可选择的余地非常之大,你所需要的是仔细的分析的大胆的想象。

【那些充满异域风情的优秀网页设计】

风情法兰西:
《时尚雅致!25个来自法国最优秀的网页设计》

严谨日耳曼:
《严谨而浪漫!20个来自德国最优秀的网页设计》

热情西班牙:
《情迷西班牙!20个来自西班牙最优秀的网页设计》

原文地址:designmodo
优设网译者:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量90万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
官方微信:想在手机上、被窝里获取设计教程和各种意想不到的”福利”吗?添加优设哥微信号:youshege

chat-yinliu-pic

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/website-hidden-menus-navigation

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 界面设计 版式设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 动效设计 平面设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里