干货丨2017网页导航设计10大趋势，简洁清晰是王道！

1.固定的导航栏

 US Magazine网站截图

http://www.usmagazine.com/

导航栏的作用就是“导航”，帮助用户在网站内便捷地找到目标内容，因此将导航栏位置固定可以方便用户随时查找。这一点在CSS和jQuery插件的帮助下已经很容易实现，也得到了越来越多网站的认可，可以说成为了网页设计的一条准则。

对于移动端用户来说，方便的导航功能就更为重要了。移动设备屏幕小，一屏能展示的内容也很有限，固定的导航栏可以避免频繁地上下翻动，优化用户的阅读体验。

Final Fantasy XV网站的导航栏设计在顶部融入背景，向下拖动则会显示出边框。

http://www.finalfantasyxv.com/

>>>要点总结

更好的浏览体验

更长的停留时间：如果一个网站有较为复杂的结构，导航栏位置固定而且醒目，那么访问者可能会通过导航栏在多个网页间跳跃浏览，因此会停留更长的时间

2. 大面积块状菜单

Relevant Magazine网站应用了整行的下拉菜单作为导航栏

http://www.relevantmagazine.com/

这种大面积的块状菜单是随着杂志风格网站的应用流行起来的，不同于简单的下拉菜单，这种“超级下拉菜单”的扩展面积更大，而且内部还包含多列内容。在上图的例子中，Relevant Magazine网站将不同栏目和相关链接填充进了下拉菜单中，呈现出了较为舒适的比例。

不过这种导航栏也不能滥用，只有内容尤其是图片充实且摆放恰当时，才会呈现较为美观的状态。这也解释了为什么这种菜单多用于杂志风格的网站中。

Walker 艺术中心的网站将地图放入导航栏，并用黑底突出了相关链接

http://www.walkerart.org/

>>>要点总结

更多的展示空间：“大号”的导航栏不仅承载了结构展示的功能，还有更多的空余位置来介绍网站，这样可以给访问者留下更深刻的第一印象。

风格更现代化

注意：移动端不适用

3. 通用导航栏

在迪士尼旗下的各个网站都有同一个导航栏，将看似没什么联系的几个网站关联在一起。

http://frozen.disney.com/

很多企业都拥有多个品牌，这些品牌之间的相关程度可能很低，没什么理由把它们硬扯到一起，这种情况下就可以使用将不同风格的网站联系在一起的通用导航栏。

迪士尼涉及主题公园、游戏、电影、电视等多个领域，在这些分别的网站中都设置了同一个导航栏，将公司旗下的不同产品相互关联，这样当用户浏览任一网站时，都有可能同时关注到其他产品。

另外，这种导航栏不仅限于大型企业，对于有多种产品的媒体网站来说，也是十分适用的。

http://www.vulture.com/

>>>要点总结

整合多领域用户：这种相互连接的导航栏对于业务结构复杂的企业来说尤为重要，别看只是一个小小的链接，说不定能让不同领域用户碰撞出意想不到的火花。

4. 垂直滚动导航栏

http://awardonline.com/

相比于顶部横向的导航栏，使用垂直导航栏的网站并不多，但是一旦用好效果出人意料。

这种导航栏多见于设计类的网站，上面这个例子awardonline网站，使用了左边垂直隐藏式导航栏，并且使用了三条横线的图标加以提示，最近几年更多网站也开始采用这种形式。 http://www.1bite2go.com/en/

>>>要点总结

新颖：用得少就容易让用户感到新奇

设计难度较大：如果想从头开发这种垂直式导航栏难度不小，再加上一些响应式设计就会更麻烦。想要用好这种垂直式导航栏不是一件容易的事情。

5. 全局隐藏式菜单

Computerworld网站采用了全隐藏式导航栏，在完全“不缺地方”的电脑网页上也隐藏了全部导航栏

http://www.computerworld.com/

任何一个网页设计师对于三条横线的“汉堡图标”，以及它在响应式设计中的作用都不陌生，它一般表示指向菜单的链接，因此使用也十分普遍。

不过最近似乎出现了一种趋势，就是将导航栏始终隐藏起来。这种做法听起来有些奇怪，因为并不利于访问者快速找到链接，但隐藏式的导航栏的确节省了不少地方。

有很多研究都发现，大量用户在寻找隐藏式导航栏时，都花费不小的功夫。不过随着人们在智能手机上花费时间的增加，对于“汉堡图标”也会更加熟悉，始终隐藏的导航栏也将成为网页设计师默认的标准。

这个网页将导航菜单隐藏在了滑动的“汉堡图标”之后

http://www.papertelevision.com/

>>>要点总结

与用户达成默契：这种全局隐藏式菜单保留了功能但又完全节省了空间，对于未来“小屏为主”的使用方式来说是最佳的选择。网页设计师也会逐渐与用户达成这种默契，看到三条杠就知道是菜单键，就如同几乎所有手机正下方都是Home键一样。

6. 响应式子导航栏

http://www.cc.com/

有些网页设计师试图隐藏手机网页的某些内容，只有在电脑上才能看到网站的全貌，觉得那样可以节省空间，适应小屏幕。但是正如上面所说“汉堡图标”的作用终会成为人们常识的一部分，小屏幕上的响应式设计只会越来越多。

像上图网站中使用的响应式下拉菜单，用到了“汉堡图标”和“+”将大量内容隐藏起来，只有当用户自主点击时才会出现，既节省了空间又没有缩减内容。

点开Politico’s长长的下拉菜单，隐藏了大量内容

http://www.politico.com/

>>>要点总结

小屏幕也能装下海量内容：无论使用电脑还是手机，访问者都应该能看到网站的全貌，隐藏式子菜单就像一个收纳盒，把在电脑上摊开的内容叠起来，放进了小小的移动端屏幕中。

7. 文章摘要滚动条

纽约时报在网页顶端设置了一个区域用来滚动展示缩略的内容，点击进入可以查看完成整的文章 

https://www.nytimes.com/2016/12/14/technology/mario-nintendos-mustachioed-gaming-legend-arrives-on-iphones.html

文章摘要的展示类似一种变相的导航栏，在博客网站和大型媒体网站上非常常见，绝大多数内容聚合平台都会采取这种形式。通过滚筒播出的方式，每天成百上千条内容都可以展示在这里。

纽约时报网站顶端“滚动播出”的文章缩略内容不仅可以实时展示当前热度最高的文章，还可以给访问一种新鲜感，导航栏随时变动，快来点击，过期不候~

Vogue网站截图

http://www.vogue.co.uk/gallery/best-faux-fur-coats

>>>要点总结

延长滞留时间

节省空间，增加展示空间

8. 表格目录的运用

Ahrefs网站截图

https://ahrefs.com/blog/seo-tips/

谷歌好像特别喜欢长内容，鼓励作者把绍文字也写得很长，这样的风格会直接导致页面的冗长，不过幸好有目录。目录的运用在维基百科的页面中最为典型，在较长的文章顶部或者某个固定位置设置目录式导航栏，可以将文章结构提炼出来，点击链接就可以抵达相应的部分，再长的文章也不怕看得眼花啦。

Sweethome网站中简洁的表格式导航栏

http://thesweethome.com/reviews/best-school-supplies/

>>>要点总 结

解救长文章：快餐式阅读和深度约度在这里可以完美结合。

榜单类内容尤其适用

9. 使用全大写字母

Notarize网站的导航栏使用了全部大写的方式

https://notarize.com/

导航栏中的文字全部使用大写字母，这一个细节似乎在被越来越多的网站注意到并运用起来。因为全大写的方式在正文中很少出现，它蕴含了着重强调之意，更容易被用户注意到。在导航栏中使用的文字往往有这样的特点：

全大写

小号字体

无衬线字体

大间距

白色或浅色

这种字体显得干净、整洁、清晰，其实在网页内其他文字的设计上也越发流行。

http://inturn.co/

10. 单页设计，点点代替导航栏

http://sociuslive.com/

把导航栏简化到极致就成了几个点点，配合单页的网页结构，扁平化的设计趋势在这里体现得淋漓尽致。几个简单的点放置于页面的一侧或底端，每个点代表一个页面，即简洁又实现了导航的功能。这样的设计非常讨喜，但同时也有一个问题：用户无法通过几个一模一样的点大致了解页面的信息，只能一页一页翻看浏览。

>>>要点总结

极致简洁的设计：这样的设计当然应该配合较为扁平化的网站结构，页面太多结构太复杂的话，点点就无能为力了。

本文由百度新闻实验室（id：baidunewslab）独家编译，原文载于creativebloq.com，版权归原作者所有，转载请注明来源。

编译：刘建坤

编辑：邵琦