网页设计 & 灵感 » 2014网站导航设计趋势 使用垂直的导航菜单设计

2014网站导航设计趋势 使用垂直的导航菜单设计

发表于: 网页设计 & 灵感. 评论 (6)
Sponsor

每个网站都会有一个主要的网页菜单,用于引导用户浏览指定的栏目页面。以前我们的网站导航通常是横向(水平)的,但现在不同了,使用垂直的网页导航开始流行起来,上期设计达人网分享的《好用的侧边栏菜单/面板jQuery插件》就可实现一些侧边目录导航,而且效果也不错。

为了激发你在网页设计中获得网页菜单的制作灵感,这次我们整理了国外一些漂亮的创新的垂直网页菜单设计例子,有的在左边,有的加上滑动效果动画,有的在右上角点击展开菜单等等,希望这些能给你带来好的设计帮助,Enjoy!

BAD ASSEMBLY

网页菜单设计 badassembly.com - vertical navigation

Bad Assembly, 是一家数字广告设计机构,整个网站的设计非常有特色,设计师特意使用了触屏式设计,只有Logo和菜单是可以点击的,使用体验也很好。因为是单页网站,也许是为了让用户直接向下观看,不想太多干扰,设计师把菜单直接隐藏起来,当用户点击时,菜单以流畅的动画形式展示,想法十分不错。所以全屏式的网页设计可以考虑像Bad Assembly的方式来制作,我想用户看了后会很有新鲜感。

浏览网站

GOOGLE VENTURES

网页菜单设计 gv.com

Google Ventures 这个网站我很喜欢,整体梦幻般的干净、简洁,网站所有图片、文字、布局等排版非常成功,看上去十分舒适。

网页菜单导航使用左侧固定形式,图标类似iOS 7外描边风格,图标较大,但不显得笨重,整体菜单反而有优雅的感觉。当你点击其它页面,菜单会自动缩起来,把文字隐藏,只剩下图标,当你把鼠标移到菜单的时候就会慢慢滑动出来,这个想法也是挺有意思的。

如果你也喜欢外描边图标,请在设计达人网的搜索框输入”外描边”进行搜索就有很多相关的图标素材出来了。

浏览网站

KICK POINT

网页菜单设计 kickpoint.ca

Kick Point, 一家数字营销网站,菜单默认隐藏起来并且使用fixed方式固定在右上角,展示和第一个例子差不多,点击展示,用手机访问的时候也是一样效果,看来这种设计比较流行……

网站整体配色很喜欢,首页的内容不多,排版简约,推荐大家看看它的服务页,当我们向下浮动网页的时候,网页背景会自动变色!有空可以看看这种实现方式,引用到你新的设计项目上。

浏览网站

DATAVEYES

网页菜单设计 dataveyes.com

Dataveyes 网站使用了视差滚动,菜单设计比较丰富多彩,主要是运用了扁平化设计配色方案,所以配色很好看啊。

推荐一些扁平化配色相关的文章和工具:《扁平化设计的流行配色方案》、《流行的扁平化设计Photoshop色板(配色库)》不要错过哦!

浏览网站

JONATHAN DA COSTA

网页菜单设计 www.jonathandacosta.com

Jonathan 的个人网站,他是一位设计师兼总监,整个网站设计也是Very的简约,好喜欢啊…… 空间排版掌握得很好。Jonathan的网站菜单设计算是横向加侧栏式展示,这种方式用于个人网站还是不错的。

浏览网站

ARBOUR

网页菜单设计 arbor-restaurant.co.uk

Arbour 是一家餐饮美食网站,餐厅除了食物好吃外,还有个主要的就是清洁卫生。这个美食网站的菜单设计就十分优雅和简约了。

浏览网站

PAULINE OSMOT

网页菜单设计 paulineosmont.com

Pauline Osmont 是法国的插画家,当你点击这个网站菜单后,内容展示的交互效果做得很好,流畅、优雅,当然你不要用过时的IE浏览器去浏览哦……

浏览网站

JASON JAMES

网页菜单设计 jasonjam.es

这个网站菜单看起来比较容易忽略,但当你滑动网页的时候,我想你就会发现右上角还有个东东在的……

浏览网站

MAMMOTH MEDIA

网页菜单设计 mammothmedia.tv

Mammoth Media’s 网站的响应式网页设计做得很好,非常难得,什么时候我也这么细节就好了,菜单采用侧边栏方式,还加了个浅色的暗淡的背景,与首页对应。

浏览网站

Flirty HTML网站模板

网页菜单设计 fluirty themeforest

Flirty 是一个单页的HTML模板,价格非常使用,但却拥有流行的网页技术,喜欢的可以 点击这里 购买使用,只需要$11美元哦,网站整体设计简洁,排版也非常不错,用来作为个人网站或作品集展示够用了。

浏览网站

 总结

垂直菜单确实给我们带来一些新鲜感,但我觉得它比较适合创意类的设计工作室、企业网站或个人博客网站,如果用于大型的门户网站、电子商务网站侧要考虑清楚再设计。

好了这些创新的垂直网页菜单设计后,你现在有没有灵感了呢?去掉以往的水平菜单设计,尝鲜垂直式的网页菜单,给国内的用户来点新鲜感吧!

如果你有更好的设计例子,欢迎在下方留言处分享给大家,感谢阅读。

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论6 Responses to “2014网站导航设计趋势 使用垂直的导航菜单设计”

  1. 骏骐互动 - 回复

    http://www.johnkee.com 也有很多好的设计

  2. andward - 回复

    http://andward.github.io/

  3. Fogust - 回复

    小编说话好可爱啊~~~~~~~~~

  4. 地底人 - 回复

    错别字很多呢

  5. 周誉 - 回复

    人都是比较容易视觉疲劳,改变一下就公有新鲜感。

  6. Jason - 回复

    很有新鮮感的設計,但同時也要好好考慮使用者群的取向呢!


{ 发表评论 }