2014网站导航设计趋势 使用垂直的导航菜单设计
每个网站都会有一个主要的网页菜单，用于引导用户浏览指定的栏目页面。以前我们的网站导航通常是横向（水平）的，但现在不同了，使用垂直的网页导航开始流行起来，上期设计达人网分享的《好用的侧边栏菜单/面板jQuery插件》就可实现一些侧边目录导航，而且效果也不错。
为了激发你在网页设计中获得网页菜单的制作灵感，这次我们整理了国外一些漂亮的创新的垂直网页菜单设计例子，有的在左边，有的加上滑动效果动画，有的在右上角点击展开菜单等等，希望这些能给你带来好的设计帮助，Enjoy!
BAD ASSEMBLY
Bad Assembly, 是一家数字广告设计机构，整个网站的设计非常有特色，设计师特意使用了触屏式设计，只有Logo和菜单是可以点击的，使用体验也很好。因为是单页网站，也许是为了让用户直接向下观看，不想太多干扰，设计师把菜单直接隐藏起来，当用户点击时，菜单以流畅的动画形式展示，想法十分不错。所以全屏式的网页设计可以考虑像Bad Assembly的方式来制作，我想用户看了后会很有新鲜感。
GOOGLE VENTURES
Google Ventures 这个网站我很喜欢，整体梦幻般的干净、简洁，网站所有图片、文字、布局等排版非常成功，看上去十分舒适。
网页菜单导航使用左侧固定形式，图标类似iOS 7外描边风格，图标较大，但不显得笨重，整体菜单反而有优雅的感觉。当你点击其它页面，菜单会自动缩起来，把文字隐藏，只剩下图标，当你把鼠标移到菜单的时候就会慢慢滑动出来，这个想法也是挺有意思的。
如果你也喜欢外描边图标，请在设计达人网的搜索框输入”外描边”进行搜索就有很多相关的图标素材出来了。
KICK POINT
Kick Point, 一家数字营销网站，菜单默认隐藏起来并且使用fixed方式固定在右上角，展示和第一个例子差不多，点击展示，用手机访问的时候也是一样效果，看来这种设计比较流行……
网站整体配色很喜欢，首页的内容不多，排版简约，推荐大家看看它的服务页，当我们向下浮动网页的时候，网页背景会自动变色！有空可以看看这种实现方式，引用到你新的设计项目上。
DATAVEYES
Dataveyes 网站使用了视差滚动，菜单设计比较丰富多彩，主要是运用了扁平化设计配色方案，所以配色很好看啊。
推荐一些扁平化配色相关的文章和工具：《扁平化设计的流行配色方案》、《流行的扁平化设计Photoshop色板（配色库）》不要错过哦！
JONATHAN DA COSTA
Jonathan 的个人网站，他是一位设计师兼总监，整个网站设计也是Very的简约，好喜欢啊…… 空间排版掌握得很好。Jonathan的网站菜单设计算是横向加侧栏式展示，这种方式用于个人网站还是不错的。
ARBOUR
Arbour 是一家餐饮美食网站，餐厅除了食物好吃外，还有个主要的就是清洁卫生。这个美食网站的菜单设计就十分优雅和简约了。
PAULINE OSMOT
Pauline Osmont 是法国的插画家，当你点击这个网站菜单后，内容展示的交互效果做得很好，流畅、优雅，当然你不要用过时的IE浏览器去浏览哦……
JASON JAMES
这个网站菜单看起来比较容易忽略，但当你滑动网页的时候，我想你就会发现右上角还有个东东在的……
MAMMOTH MEDIA
Mammoth Media’s 网站的响应式网页设计做得很好，非常难得，什么时候我也这么细节就好了，菜单采用侧边栏方式，还加了个浅色的暗淡的背景，与首页对应。
Flirty HTML网站模板
Flirty 是一个单页的HTML模板，价格非常使用，但却拥有流行的网页技术，喜欢的可以 点击这里 购买使用，只需要$11美元哦，网站整体设计简洁，排版也非常不错，用来作为个人网站或作品集展示够用了。
总结
垂直菜单确实给我们带来一些新鲜感，但我觉得它比较适合创意类的设计工作室、企业网站或个人博客网站，如果用于大型的门户网站、电子商务网站侧要考虑清楚再设计。
好了这些创新的垂直网页菜单设计后，你现在有没有灵感了呢？去掉以往的水平菜单设计，尝鲜垂直式的网页菜单，给国内的用户来点新鲜感吧！
如果你有更好的设计例子，欢迎在下方留言处分享给大家，感谢阅读。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
+ 添加评论6 Responses to “2014网站导航设计趋势 使用垂直的导航菜单设计”
{ 发表评论 }
推荐书籍
-
艺术的故事艺术与审美入门之书 -
DON'T MAKE ME THINK设计师必看 -
《移动应用UI设计模式》手机APP设计 -
《设计心理学 全四册》高阶技能！ -
JavaScript权威指南(第5版)只能说牛X -
《见微知著》Web用户体验入门书籍
Archives
- 2023 年 4 月
- 2022 年 10 月
- 2022 年 9 月
- 2021 年 7 月
- 2021 年 6 月
- 2020 年 6 月
- 2020 年 5 月
- 2020 年 4 月
- 2020 年 3 月
- 2020 年 2 月
- 2020 年 1 月
- 2019 年 12 月
- 2019 年 11 月
- 2019 年 10 月
- 2019 年 9 月
- 2019 年 8 月
- 2019 年 7 月
- 2019 年 6 月
- 2019 年 5 月
- 2019 年 4 月
- 2019 年 3 月
- 2019 年 2 月
- 2019 年 1 月
- 2018 年 12 月
- 2018 年 11 月
- 2018 年 10 月
- 2018 年 9 月
- 2018 年 8 月
- 2018 年 7 月
- 2018 年 6 月
- 2018 年 5 月
- 2018 年 4 月
- 2018 年 3 月
- 2018 年 2 月
- 2018 年 1 月
- 2017 年 12 月
- 2017 年 11 月
- 2017 年 10 月
- 2017 年 9 月
- 2017 年 8 月
- 2017 年 7 月
- 2017 年 6 月
- 2017 年 5 月
- 2017 年 4 月
- 2017 年 3 月
- 2017 年 2 月
- 2017 年 1 月
- 2016 年 12 月
- 2016 年 11 月
- 2016 年 10 月
- 2016 年 9 月
- 2016 年 8 月
- 2016 年 7 月
- 2016 年 6 月
- 2016 年 5 月
- 2016 年 4 月
- 2016 年 3 月
- 2016 年 2 月
- 2016 年 1 月
- 2015 年 12 月
- 2015 年 11 月
- 2015 年 10 月
- 2015 年 9 月
- 2015 年 8 月
- 2015 年 7 月
- 2015 年 6 月
- 2015 年 5 月
- 2015 年 4 月
- 2015 年 3 月
- 2015 年 2 月
- 2015 年 1 月
- 2014 年 12 月
- 2014 年 11 月
- 2014 年 10 月
- 2014 年 9 月
- 2014 年 8 月
- 2014 年 7 月
- 2014 年 6 月
- 2014 年 5 月
- 2014 年 4 月
- 2014 年 3 月
- 2014 年 2 月
- 2014 年 1 月
- 2013 年 12 月
- 2013 年 11 月
- 2013 年 10 月
- 2013 年 9 月
- 2013 年 8 月
- 2013 年 7 月
- 2013 年 6 月
- 2013 年 5 月
- 2013 年 4 月
- 2013 年 3 月
- 2013 年 2 月
- 2013 年 1 月
- 2012 年 12 月
- 2012 年 11 月
- 2012 年 10 月
- 2012 年 9 月
- 2012 年 8 月
- 2012 年 7 月
- 2012 年 6 月
- 2012 年 5 月
- 2012 年 4 月
- 2012 年 3 月
- 2012 年 2 月
- 2012 年 1 月
- 2011 年 12 月
- 2011 年 11 月
- 2011 年 10 月
- 2011 年 9 月
- 2011 年 8 月
- 2011 年 7 月
- 2011 年 6 月
- 2011 年 5 月
- 2011 年 4 月
- 2011 年 3 月
- 2011 年 2 月
- 2011 年 1 月
- 2010 年 12 月
- 2010 年 11 月
http://www.johnkee.com 也有很多好的设计
http://andward.github.io/
小编说话好可爱啊~~~~~~~~~
错别字很多呢
人都是比较容易视觉疲劳，改变一下就公有新鲜感。
很有新鮮感的設計,但同時也要好好考慮使用者群的取向呢!