浅谈网站建设中面包屑导航的运用
发布日期：[2016/12/26] 编辑：奇亿广州网站建设
面包屑导航在网站建设中的作用即跟我们日常生活中的导航系统有着共性，所谓的面包屑导航一词来自汉赛尔与格莱特（又译糖果屋）童话故事中，主人公沿路丢下面包屑，形成一条小径，从而指引其回到自己的家中。因此，运用在网站建设中，可以更好地指引用户在网站上浏览内容，提高用户体验。
其实，和童话故事主人公一样，网站用户也需要知道其在网站层次结构中的位置，以使其在需要的情况下能直接浏览上一级页面。
奇亿网络将和大家讨论面包屑导航应用及其最佳实践：什么是面包屑导航（What）、什么时候使用面包屑导航（When）和如何设计面包屑导航（How）。
一、面包屑导航有什么用？
面包屑导航作为有效的视觉辅助，能告诉用户其在网站层次结构中的位置。这种特性对用户来说是上下文信息的重要来源，可以帮助用户找到以下问题的答案：
我在哪里？告诉用户其在整个网站层次结构中的位置。
我能去哪里？用户更能找到相关网站栏目和页面。相比菜单栏，用户通过清晰直观的面包屑导航，更容易熟悉和了解网站结构。
我该去那里吗？面包屑导航体现了网站的内容价值，能鼓励用户继续浏览网站。比如，用户打开电商网站某产品页面时，该产品可能不是他想要的产品，但用户也许想浏览其他同类产品。通过面包屑导航，就能相应地减少网站的总体跳出率。
1. 减少用户行为次数
就适用性而言，面包屑导航减少了用户访问上一级页面本应产生的行为次数。除了使用浏览器「后退」按钮或网站主导航回到上一级页面，用户也可以使用面包屑导航。
2. 占用最少页面空间
紧凑的结构，不占用过多页面空间，面包屑导航是一条横向文字连接。好处在于，如有内容过载的情况，其带来的负面影响微乎其微。
3. 面包屑导航为用户带来零烦恼
人们可能没有在意这个小小的设计元素，但没人不明白面包屑导航，也没人不会使用面包屑导航。
二、什么时候该用面包屑导航？
测试网站是否会得益于面包屑导航，有种好方法是构建网站导航结构的网站地图或图表，再分析面包屑导航是否能帮助用户，提高其在同类或不同目录下的导航能力。
你应该使用面包屑导航的前提是，有大量内容存在于有线性或层次结构的网站分类目录中。所谓分类目录，是指网站内容可以分类呈现，这些类别还可以继续分为更多细分类别。典型例子正如将大量产品合理地进行分类的电商网站。
对于层次单一、没有合理架构或分类的网站，则不推荐使用面包屑导航。
三、面包屑导航的分类
面包屑导航可以按位置、路径和属性分为3类。
1. 位置面包屑
位置面包屑导航体现的是网站结构。其能辅助用户了解网站层次结构，并在有多层级（通常大于两级）网站中导航。若用户从别处链接（比如搜索引擎结果）进入网站深层次页面，这对用户来说非常有用。
2. 路径面包屑
路径面包屑（也称「历史痕迹」）显示用户浏览至某特定页面的所有页面路径。这类面包屑导航链接通常是动态产生的。
有时，路径面包屑很有用，但大多时候会令人困惑——因为用户浏览网站可能会从一个页面突然跳到另一个页面，非常地随意。
这类无规律的浏览路径并不能为用户提供太大帮助，但倒可以用浏览器「后退」按钮来轻松取代。此外，若用户直接进入某网站深层次页面，那路径面包屑也毫无用处。
3. 属性面包屑
属性面包屑对电商网站非常有用，其通过特定页面或更常见的按产品类别将大量页面进行分类。这类面包屑导航可以帮助用户了解各类产品之间的关系，也提供了另外一种导航方式。
4. 层次结构还是浏览记录？
面包屑导航的经验法则是要展示网站层次结构，而不是用户浏览记录。因此，推荐使用位置面包屑导航或属性面包屑导航，而不用路径面包屑导航。
四、面包屑导航设计的最佳实践
当设计面包屑导航时，要切记以下几点：
1. 不要用面包屑导航替换主导航
面包屑导航应作为一项额外功能，其不能直接替换原本有用的主导航菜单。要切记，面包屑导航是一项便捷功能，是辅助导航手段，是网站导航的另一种方法。
2. 当前页面的面包屑导航无须添加链接
面包屑导航（用户当前位置）最后一项不一定要显示——如果你想让它显示，务必保证其无法点击或操作。由于用户已经在当前页面，在面包屑导航中再添加链接就显得多此一举了。
3. 使用分隔符
分隔面包屑导航各级文字链接最醒目的符号是「大于号（>）」。
通常，大于号（>）用来指代层次结构，就像父目录>子目录这类格式。其他可以使用的符号有右箭头（→）、双书名号（»）以及斜杠（/）。具体选择哪个符号取决于网站设计美学和已使用的面包屑导航类型。
4. 选择恰当的尺寸和内边距
在设计时要仔细考虑目标尺寸和内边距。面包屑导航各级文字间应该留有足够空间，否则用户可能会觉得不好用。同时，面包屑导航不能在页面中起支配作用，因此其不能比主导航菜单更显著。
5. 不要让其成为设计焦点
不要使用花哨的字体或绚丽的颜色，因为这样会喧宾夺主，毕竟面包屑导航其主要目的不在于此。
当确定面包屑导航的大小和风格时，经验法则是要保证用户进入页面后的第一关注点不是面包屑导航。
6. 手机设备上不要使用面包屑导航
若你在手机设备上需要通过面包屑导航，也许你会发现会出现故障。就手机上使用面包屑导航和相应运行环境而言，其可能的原因在于网站的过度复杂（网站层次结构太深）。为解决这个问题，应该先思考如何简化，然后你就不需要面包屑导航了。
总结：对于网站建设中整体架构复杂，内容层次多的情况下，设置一个面包屑导航是极其有必要的，它能够帮助用户更加快捷精准找到自己所在的网站位置，快速的浏览所需的内容，提高网站适用性以及体验舒适度。
本文由奇亿网站建设原创，原文地址：http://www.gzqiyi.cn/news/1694.html，转摘请保留版权，谢谢。
从搜索引擎推广现状分析其2017年的发展趋势 高颜值网站建设需要满足的三个点 商城网站建设不用模板网站的三大理由 三方面解决网络负面消息问题 百度最新算法下的网站优化良方 APP运营如何利用消息推送功能？ 网站建设中容易犯的十大错误 网站优化有效的外链渠道有哪些？ 网站推广没效果的五种解决思路 做不好微商，你可能忽略了五个问题 你做网站SEO为什么失败？ 以黄色作主色调搭配的网站建设方法 B2B与B2C网站设计的五个不同点 如何运用自媒体做SEO？ 一个seoer的自助建站经验 “蓝天算法”下的网站索引变化分析 六种不同类型的社交网站建设分析 网站关键词热度及对应的优化周期分析 创业型网站建设公司有哪些不足之处？ 理清供给关系是生鲜电商发展的突破口
