文韬互联：网站设计之导航栏目如何划分？

文韬互联：网站设计之导航栏目如何划分？

前言：

本文原本计划于昨日发布，只是小程序是1月9日上线，算是为了追一个热点，写就一篇文章《文韬互联：探讨微信小程序以及我们该如何认识它》，谈了下文韬互联对微信小程序的一点感受。今天还是回到我们的计划，主题是关于网站在设计过程中，导航地方该如何设计与操作，所以，今天我们的标题就叫《文韬互联：网站设计之导航栏目如何划分?》

(正文开始，请君阅读)

在我们了解了服务器、域名、首页设计布局以及url的层次和结构知识后，今天我们回到网站设计方面的导航设计。通常一个网站首页的导航，应包括如下2方面：

顶部导航栏

尾部导航栏

有的响应式网站，为提高用户的体验，会设计一些面包屑导航，让用户能更清晰的理解网站的结构，达到目的地。那么，今天也把面包屑导航加入到我们的网站导航设计里面。

所以，我们今天要谈的内容就是三方面：

顶部导航、尾部导航、面包屑导航

通常一个大气的网站，肯定会有通栏的导航或类通栏的导航，也就说顶部会专门划一个区域给导航，以显得高端大气上档次。当一个企业门户或资讯门户网站，也几乎是百分百会给自己一个通栏的导航。顶部导航需要注意4点：

1、导航栏目需要突出重点。用户访问一个网站，如果几秒钟内看不到他想看的，或找不到网站重点想表达的东西，就会走。那么，我们就应当给用户一个信息，我们将重要的版块、重要的信息，优先呈现在他的面前。对于一个制造型企业来讲，产品是重点;对于一个服务型企业来讲，服务是它的产品，就是重点。此外，在某些方面，公司的通告、动态，行业的动态等，也是重点(这里要区分一下，并不是任何企业的动态是用户和消费者所关心的，只有某些大型企业或某类企业，提前预知企业动态能给自己未来的操作防患于未然者才有必要挂出来，也就是说企业动态能影响用户的消费或其他动作时，这样的信息也是非常重要的。)

通常我们会在企业网站的导航栏菜单里，设置首页、产品、动态(或企业新闻)、行业新闻等几个类别。当然，也包括联系我们与关于我们等了解企业信息的栏目设置。这是一般网站的选择点。当然，我们更要从用户需求的角度来判断，是否有必要放这些信息。

2、栏目词汇设置需要关键词。这是从优化角度上来讲的，SEO里面有一个关键词密度，关键词密度合适的页面，搜索引擎会让它优先展示在靠前的位置。当然，

并不是说一定这样设置了，就肯定会有百分百的效果，这也未必，优化是一个系统且长期的工程，搜索引擎考虑页面质量因素，并不仅仅是考虑的关键词密度这一项，但我们这样设置了，总比不设置要好。

3、导航的设置，可以是文字导航，也可以是图片导航。当然，最好是文字导航。毕竟搜索引擎是不认识图片的，只能根据前后的文字或图片的alt描述来判断这张图片的干嘛的。而且文字导航栏，有利于搜索引擎优化，用户复制导航词时也方便操作。一般的用户是不会右键查看源代码的。

4、导航栏一般为增加用户体验，会用“伪类”hover代码，比如鼠标放上去，显示和其他地方的颜色不一样等，或有其他的特效。有些导航菜单下面会有子菜单，鼠标放上去，就自动显示下面的子菜单内容，这也是可行的。同时，最好是能加上_target等代码。让窗口能用新一页的形式进行打开。至于其他的，关于首页的顶部菜单，也就没有特别注意事项了。如有遇到不懂的问题，可以在下面的评论区进行评论。

再来看看尾部菜单。

简单的尾部菜单，会将版权等信息进行罗列;复杂的尾部菜单，在版权信息这一区域的上面，将网站的重点再复制一次;再复杂的尾部菜单，会将每一个栏目和子栏目都加一个超链接显示。我们这里要注意，在网站设计这一层面上，要考虑排版的美观，要考虑实用性。

可以注意两点：

第一：去掉实在没必要的链接，把重点再突出来，同时，进行弥补顶部菜单没放内容的缺陷。

第二：对没必要的版块添加nofollow属性，意即让搜索引擎不再抓取，到此为止。这个代码的意义在于，制衡了权重。不让权重过于分散。同时，不要可以的添加关键词，形成恶意的关键词堆砌。以前文韬互联也做过这种事，尽管网站设计人员没有在页面上添加关键词堆砌的设计，但对于懂一点代码的文韬互联来讲，可能就会做一次关键词堆砌的添加，当然，这也是要分情况来看，记住：不要刻意添加。

面包屑导航

面包屑导航对于扁平化管理来讲，是非常必要的。面包屑导航，可以设置页面为详情页，可以设置为聚合内容的列表页，但需与导航菜单不一样，不然都重复了。面包屑导航，建议不要添加H1-H6的代码，主要起到了辅助导航的功能。