如何打造完美的网站导航系统？

如何设计面包屑导航？面包屑导航是网站建设中一个重要的技术，一般具有两个好处，第一个优势是用户在访问网站时，具有面包屑导航的网站，用户不容易迷路，而另一个好处就是，面包屑导航能够很好的引导搜索引擎对网站的搜索，从而利于网站的优化推广，这里为大家分析一下如何设计面包屑导航。

如何设计面包屑导航首选精准用字，绝不含糊。面包屑的文本链接必须保持一致，避免使用模糊、重复的字，保证每个分类都清晰明了，这样用户才能精准的进行搜索使用。

其次，要注重细节，正确分类。在产品分类时候一定要高度进行概括，如果导航设计分类过多，容易让用户浏览产生疲劳，甚至会放弃浏览，因此在对面包屑导航设计时候一定要精简，做好用户体验。

最后，大小适中、摆放合理。一个面包屑导航的尺寸大小，只需可以传到足够的信息给用户足以，因此可以很小，或者比主导航小一些。面包屑导航通常显示在页面的上半部分，如果导航菜单使用的是水平方向的话可以放在主导航菜单下方。

在网站建设技术不断发展的今天，满足绝大多数的用户体验才是最为正确的方向，有一些网站设计者，故意把面包屑导航复杂化，以此来显示自己网站建设技术的高超，这种做法对于移动互联网来说，并不会给用户带来更好的良性体验，尤其是在移动互联网，怎样让用户用最少的步数达看到自己需要的内容，这是一个很关键的技术。

如何设计面包屑导航？用户每多点击一次，给用户多设计一个障碍，就意味了一部分用户会选择离开，所以，面包屑导航发展到今天，不是复杂化，而是越来越简化，才符合当下网站的发展趋势。

网页中面包屑的正确使用方法是什么了解网站运营的人都知道，有时候我们会为了平衡网站权重或其他目的进行面包屑的使用，那么你知道面包屑用多少是合适的吗？这里不二网小编与你聊一下网页中面包屑的正确使用方法。

面包屑是我们熟知的一种导航工具，它们往往出现在页面内容的上方，告知你所处的位置。它小巧，方便，常见，且简单。可是即便是这样的UI控件，在设计上同样是有讲究的，今天咱们就来聊聊面包屑吧。

作为一种辅助导航系统，面包屑能够帮助用户清晰的定位到自己所在网站的位置。这个词源自于童话中跟着面包屑回到自己家的孩子，而网页中的面包屑也是帮助用户找到自己位置的UI控件。

面包屑通过路径展示告知用户他们所处的位置，而今天的这篇文章将会探讨一个可用的网页面包屑应当如何设计，通过最佳实践展示面包屑的正确用法。

面包屑导航提供可用性

作为一种视觉指引，面包屑为用户揭示出网页的层次结构，也正是因此，面包屑成为了用户了解网站背景信息的重要途径，帮助用户了解下列问题的答案：

我在哪里根据整个网站的层次，面包屑能让用户知道他们所处的位置。·我还能去哪里面包屑提升了整个网站的可查找性，面包屑的存在揭示了整个网站的结构，用户也随之明白网站还有哪些其他的部分。·是否应当浏览更多面包屑揭示出网站有更多值得探索的内容，鼓励用户浏览更多。反过来，面包屑的出现降低了网站的跳出率。

网页中面包屑的正确使用方法是什么看过了以上文章的描述，你是否对于网页中面包屑的正确使用方法有了一些了解呢？

清晰的网站导航，是网站设计中一个重要的组成部分，可以更好的降低网站跳出率，使访问网站的用户更完整的了解网站结构。那么，如何打造完美的网站导航系统，本文从网站优化的角度，描述网站导航设计的五个要点。

第一、导航使用文字编辑

分析：导航栏使用文字编辑，一个最主要的目的就是可以让搜索引擎蜘蛛更容易爬行，使其更清楚的明白网站的结构，及当前所处的位置。

还有一个导航坚持使用文字编辑的原因是，加快网页加载速度，很多网站，为了美观或者其他一些原因，喜欢使用、Flash、Javascript生成导航系统，其实使用CSS完全可以实现各种视觉效果，如背景、文字颜色变化、下沙菜单等

第二、缩短内页与首页的距离

分析：我们说，用户从首先进入任何一个内页，点击不超过3-5次，被认为是最合理的。但是，随着网站内容的增多，用户要进入页面的距离也就随之加长，我们可以观察一下，淘宝、京东的页面分类，和内容数量。

要改变这种情况，缩短内页和首页的距离，最好的方式就是拥有一个合理的导航，只有在导航页面，做好合理的分配，通过导航，用户可以在最短的距离内，随心所欲的进入想要进入的页面。

当然，还有一个原因就是，缩短内页和首页的距离，可以使内容获得更好的权重。一般而言，首页的权重是最高的，然后依次传递，只有缩短内页和首页的距离，内页才能获得更多的排名的机会。

第三、导航文字中包含关键词

分析：无论是首页还是栏目页，我们说，在拥有数量众多的内容页时，导航中关于首页、栏目页的链接是获得内部链接最重要的来源。由于内页数量多，锚文本指向首页和栏目页，所传递的权重也就相应越高。

这也是为什么，我们在构建网站时，需要对核心关键词，进行定位、分类，在栏目名称中包含核心关键词，这样一个可以很好的对网站进行分类，知道用户喜欢什么样的内容，还有一个原因，就是可以很好的宣传核心关键词。这个可以参考Q猪博客中，对于分类的规划：网站建设、SEO优化，就是Q猪博客最核心的两个主题。

第四、使用面包屑导航

分析：面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回，我们在浏览网页时，经常可以看到“您当前的位置是。。。”，这就是面包屑导航，可以说，一个结构清晰的网站，都会拥有一个面包屑导航，在内容页面众多的大型网站，尤其需要注意，对面包屑导航的合理使用。

第五、底部避免关键词堆积

分析：很多网站，为了提高关键词的密度，及宣传核心关键词，都喜欢在网站的底部，加上一串关键词。其实，这种底部添加关键词的做法，一方面，有堆积关键词的嫌疑，一方面，对关键词的提权来说，也没有太大的帮助，随着百度算法的不断调整，底部关键词堆积的这种现象也得到了很好的发展。

清晰的网站导航，作为用户进入网站后的GPS系统，可以很清楚的告诉你，你现在处于什么位置，将要去哪一个地方。无论对用户还是对搜索引擎，都可以帮助他们，很好的理解网站的结构

网站结构中面包屑导航怎样设计？做网站的朋友都知道网站结构对于网站优化和网站收益都是非常重要的，面包屑导航是非常有效的帮助用户搜索到想要的服务的功能，这里跟大家具体聊一聊网站结构中面包屑导航怎样设计。

小编在这里相信大家都接触过这关的导航，面包屑导航可以体现网站的架构层级，从而帮助用户快速学习和了解网站内容和组织方式，从而形成很好的位置感。面包屑导航还可以降低跳出率，面包屑路径会是一个诱惑首次访问者在进入一个页面后去浏览这个网站的非常好的方法。比如说，一个用户通过百度搜索到一个页面，然后看到一个面包屑路径，这将会诱使用户点击上一级页面去浏览感兴趣的相关主题。这样，从而，可以降低网站的总体跳出率。并且面包屑导航非常有利于百度蜘蛛对网站的抓取，蜘蛛直接沿着那个链走就可以了，很方便。最后一个就是面包屑有利于网站内链的建设，用面包屑大大增加了网站的内部连接。

关于一个网站的结构，不管我们对网站有着多么长期一个规划，我们都需要将网站的结构做到精简，适合用户群，只有这样子才能够使用户依赖我们的网站，不要为了优化网站而去做优化，我们是为了帮助用户得到更好的体验而建站，只有迎合了用户，了解到用户相关信息，我们才能够使网站后期得到更好更持久的发展。

网站结构中面包屑导航怎样设计？看过了以上这么大段内容，你都学会了吗？如果你还有什么不懂的话可以直接联系小编为你答疑解惑，希望这篇文章能够对你进行网站设计有所帮助。

在我们的站点中都有很多的页面，利用面包屑路径能够极大的增强用户寻找路径的能力。从易用性上来讲，面包屑路径减少了用户回到更高级目录时所需要的操作，并且增强了网站各个单元的可寻性。面包屑路径还可以提供有效地视觉帮助来知道用户了解自己目前所处与网站中的等级，让他们能够更容易的找到他们的开始页。

什么是面包屑路径？

Breadcrumb (Breadcrumb trail)，中文成为“面包屑路径”是应用于网站或者网络程序上的，帮助用户找到自身位置的二级导航标记。他起源于Hansel and Gretel的传说，孩子们为了能够找到回家的路，将面包屑撒在路上，并顺着找到了家。和传说中一致，面包屑路径在现实中也帮助我们找到自己的起始页。

Delicious的路径。

在存在大量的分级内容的网站上我们经常能够看到面包屑路径的使用，在一些引导性的网络应用上也能够见到，他们的作用就像一个进度条，指引着用户当前的进度。面包屑路径最简单的形式是水平排列的文字链接，之间用大于号隔开，每个链接表示与这个级别相关的页面链接。

何时使用面包屑路径？

大型网站，特别是那种页面按照层级结构组织的网站比较适合使用面包屑路径。一个最好的例子就是商务网站，拥有大量的商品分门别类的存放着。

在那种没有逻辑的层级关系或者分组的单级网站上不适合使用面包屑路径。一个决定是否使用面包屑路径的很好的办法是规划一个站点地图或者表示网站导航结构的图表，然后再来决定面包屑路径是否能够改善用户在栏目内和不同栏目间的导航体验。

面包屑路径往往是一个网站的额外的特点，他不应该取代菜单导航，而且往往应该作为菜单导航的一种辅助和补充。它是一种次级的、很舒服的特性，帮助用户确定自己的位置，并且作为菜单导航的一个有效补充。

面包屑路径的类型：

面包屑路径主要有三种形式。

基于位置的面包屑：

位置面包屑是静态的，显示了当前页面在网站中所处的等级。链接中的每一项都能够导向一个更高一级的页面，这种形势特别适合有很多级别的网站（大于2级）；

基于属性的面包屑：

属性面包屑给出了当前页面所属类别的信息，下图的面包屑更接近与一个混合形式的面包屑，路径中包含了对结果的筛选条件描述；

路径：路径形式的面包屑是动态的路径，经常用来指引用户进行某种操作，比如“注册”流程，他动态的显示用户完成注册所需要的过程；

使用面包屑路径的好处

方便用户：面包屑路径的目的就是为用户提供一种辅助的导航方式，在具有多层级的网站上浏览时，面包屑路径可以帮助用户更容易的找到想要的位置；

减少返回高级别页面的点击次数：用户不需要通过多次点击“返回”来到自己之前的位置，而只需要在面包屑路径上点击一次；

不会占用过多的空间（hog screen space）：面包屑路径多数采用普通的水平排布的文字链接，所以不会占用过多的页面空间，恰当的运用，能够带来足够的好处。

减少跳出率（bounce rates）：面包屑路径能够诱初次访问页面的用户在完成初始页的浏览后浏览其他页面。例如，通过搜索引擎来到的用户，看完文章后，很容易点击上一级页面的导航来了解更多的相关内容，这样就减少了站点整体的跳出率。

使用中的错误

在不必要的地方使用：

上图的导航就会让用户感到迷惑，太多的导航了而且排布的非常集中，有点重复；

用面包屑路径作为主导航：

面包屑路径只是一种导航的辅助手段，任何时候都不应该取代导航菜单。上图中就是一个例子，由于只使用了面包屑路径，当用户想跳转到站点的其他栏目时，很难容易的到达。

当页面含有多重栏目时，使用面包屑路径：面包屑路径具有线性的结构，如果你的页面不能够很清楚的分类，那就很难用面包屑路径来表示，这其实是在网站设计初期，要为站点制定明确的组织结构。

在设计中应该考虑的问题

使用什么符号来分隔？最常用的分隔符是大于号（>），表示“父目录>子目录”，其他的符号还包括：箭头、右引号(>>)、斜线(/)。

应该设计成多大？

面包屑路径只是一个辅助的导航工具，所以谁都不希望他占据巨大的页面空间，他应该尽量的小，但是要能够方便访问，向用户传达出这种辅助的设计意图。一个原则就是，用户浏览页面时，不能第一眼就被面包屑路径所吸引。

应该放在什么地方？面包屑路径通常放置在页面的中上部，如果是水平导航，一般放在主菜单的下边。

我们在浏览网站时经常会有这样的经历，就是经常点进一个页面之后看完或者是对页面的内容不感兴趣，会想返回到上一页面或是上两个页面，这时只能通过浏览器的后退按钮去寻找刚才的页面在哪里，但这样一来就是浪费掉不少的时间，对于这种在访问网站时出现的迷路现象可以采用面包屑导航来解决，企业制作网站通过加入面包屑导航使访客无论处于哪个页面，都能看到来时的路径，为访客指明方向，从而可以有选择性的返回到某一页面。

面包屑的概念源于一个故事，故事中的一个人怕迷路，于是把面包的碎块在走路时留作记号，方便在回来时以面包屑为准找到回家的路，而在网站制作中面包屑所发挥的作用也正是如此，当访客点击进入到某个页面时，都可以通过面包屑进行定位，从而跳转到自己需要的页面，下面来看看关于面包屑在网站中的制作方式吧！

一、随着网站在访客体验方面的不断改进，面包屑也被开发出了多种用途，但主要的作用还是为访客标识出当前的位置，在制作时如果网站有三级的目录结构，那么除去首页，在第二级的页面中就要开始出现面包屑了，第二级页面的面包屑一般包括首页和当前页面，通常以文字锚文本的结构显示，但同时注意，当前页面则不用再加锚文本了，因为没有实际的意义，都已经在当前页面了，不需要再点击这个链接。如点击进入网站三级目录页面，就需要制作三级的面包屑导航了，与上一级的类似，当前页面不需要加锚文本链接，第二级的则需要加上链接了，以此类推，页面的结构越深，所产生的面包屑也就越长。但一般情况下不推荐这么深的目录结构。

另外还有历史记录式的面包屑，上面那种是以目录来给访客定位的，当换了个栏目访问时面包屑就会不一样了，而制作这种访问记录式的面包屑则不会，因为这是收集了访客访问所有页面的记录，只要访问了某个页面，哪怕是跳转到了首页或者其它目录，也会产生记录，访客可以点击这种面包屑在N个页面记录之间进行跳转，这种制作方式在体验方面无疑更胜一筹。

二、面包屑的表现形式，我们都知道如果只以锚文本的文字来将访客的路径进行排列，难免会造成阅读方面的困难，所以网站制作公司通常会在中间加上一些符号将这些锚文字链接相隔开来，一般为箭头形式，同时链接文字的颜色尽量采用淡一些颜色来制作，目地是要让用户在需要的时候再去寻找面包屑，在不注意的情况下是发现不了面包屑导航的存在的，这样有助于访客的体验，在需要时才会为访客指明方向，所以在网站中多采用灰色的小字号字体来制作。虽然能提升一定的用户体验，但面包屑导航却仅限于电脑版的网站，因为屏幕大小的原因，移动设备类的网站则不推荐制作面包屑。

网页中面包屑导航应该怎样设计？看过我文章的朋友都了解过面包屑的类型和面包屑的正确使用方法，接下来就是使用基于路径面包屑来导航的案例和原理来说明的网页中面包屑导航的设计技巧。

基于属性的面包屑

这类基于属性的面包屑常见于电子商务类网站，产品常常基于类别和属性而组织到不同的子目录中，基于属性的分类让用户更容易理解产品和产品之间的关系，提供了更多不同的浏览路径。

就像TMLewin的这个页面，面包屑展现出的是特定页面对应产品，而产品是按照某个属性来组织的：

层级还是历史

根据实际经验，绝大多数的情况下，面包屑还是适合展现层级机构而非浏览历史。因此，基于位置和属性的面包屑应用更加广泛，基于路径的面包屑相对少见的多。

面包屑导航最佳实践

当你开始设计面包屑导航的时候，应当谨记下面的事情：

1、不要使用面包屑来替代网页主要的导航系统

面包屑只是一个辅助导航系统，它无法替代主要的导航系统。请记住，它是仅仅是为了用户方便的次要选项，用来抵达其他层级的快速定位链接系统。

2、不要将当前页链接加到面包屑中

面包屑的最后一个层级是当前的页面，而这一项在面包屑中是不应该加上链接的，因为它只起到展示定位的作用，没有任何意义。

3、使用分隔符

在面包屑中，用来分隔不同层级最常见的是大于符号(>)，常见的使用方法是“父类别>子类别”。当然，分隔符的使用并不拘泥于这一种，有使用箭头(→)的，还有使用书名号()的，也有使用斜杠(//)的。使用哪种分隔符通常取决于整体风格和设计师的喜好。

网页中面包屑导航应该怎样设计？以上文章为大家介绍了三点网页中面包屑导航的设计技巧，这些你都学会了吗希望以上文章对你有所帮助。