151-3895-5886

网站设计中面包屑导航有什么用处

2019年09月24日 维尼网络
面包屑导航在做网站中的作用即跟我们日常生活中的导航系统有着共性,所谓的面包屑导航一词来自汉赛尔与格莱特(又译糖果屋)童话故事中,主人公沿路丢下面包屑,形成一条小径,从而指引其回到自己的家中。因此,运用在做网站中,可以更好地指引用户在网站上浏览内容,提高用户体验。
其实,和童话故事主人公一样,网站用户也需要知道其在网站层次结构中的位置,以使其在需要的情况下能直接浏览上一级页面。
下面力我们将和大家讨论面包屑导航应用及其最佳实践:什么是面包屑导航(What)、什么时候使用面包屑导航(When)和怎么设计面包屑导航(How)。

一、面包屑导航有什么用?
面包屑导航作为有效的视觉辅助,能告诉用户其在网站层次结构中的位置。这种特性对用户来说是上下文信息的重要来源,可以帮助用户找到以下问题的答案:
我在哪里?告诉用户其在整个网站层次结构中的位置。
我能去哪里?用户更能找到相关网站栏目和页面。相比菜单栏,用户通过清楚直观的面包屑导航,更容易熟悉和了解网站结构。
我该去那里吗?面包屑导航体现了网站的内容价值,能鼓励用户继续浏览网站。比如,用户打开电子商务网站某产品页面时,该产品可能不是他想要的产品,但用户也许想浏览其他同类产品。通过面包屑导航,就能相应地减少网站的总体跳出率。
1. 减少用户行为次数

就适用性而言,面包屑导航减少了用户访问上一级页面本应产生的行为次数。除了使用浏览器「后退」按钮或网站主导航回到上一级页面,用户也可以使用面包屑导航。


2. 占用最少页面空间

紧凑的结构,不占用过多页面空间,面包屑导航是一条横向文字连接。好处在于,如有内容过载的情况,其带来的负面影响微乎其微。


3. 面包屑导航为用户带来零烦恼
人们可能没有在意这个小小的设计元素,但没人不明白面包屑导航,也没人不会使用面包屑导航。

二、什么时候该用面包屑导航?
测试网站是否会得益于面包屑导航,有种好办法是构建网站导航结构的网站地图或图表,再分析面包屑导航是否能帮助用户,提高其在同类或不同目录下的导航能力。
你需要使用面包屑导航的前提是,有大量内容存在于有线性或层次结构的网站分类目录中。所谓分类目录,是指网站内容可以分类呈现,这些类别还可以继续分为更多细分类别。典型例子正如将大量产品合理地进行分类的电子商务网站。
对于层次单一、没有合理架构或分类的网站,则不推荐使用面包屑导航。

三、面包屑导航的分类
面包屑导航可以按位置、路径和属性分为3类。
1. 位置面包屑
位置面包屑导航体现的是网站结构。其能辅助用户了解网站层次结构,并在有多层级(通常大于两级)网站中导航。若用户从别处链接(比如搜索引擎结果)进入网站深层次页面,这对用户来说特别有用。
2. 路径面包屑
路径面包屑(也称「历史痕迹」)显示用户浏览至某特定页面的所有页面路径。这类面包屑导航链接通常是动态产生的。
有时,路径面包屑很有用,但大多时候会令人困惑——因为用户浏览网站可能会从一个页面突然跳到另一个页面,特别地随意。
这类无规律的浏览路径并不能为用户提供太大帮助,但倒可以用浏览器「后退」按钮来轻松取代。此外,若用户直接进入某网站深层次页面,那路径面包屑也毫无用处。
3. 属性面包屑
属性面包屑对电子商务网站特别有用,其通过特定页面或更常见的按产品类别将大量页面进行分类。这类面包屑导航可以帮助用户了解各类产品之间的关系,也提供了另外一种导航方式。
4. 层次结构还是浏览记录?
面包屑导航的经验法则是要展示网站层次结构,而不是用户浏览记录。因此,推荐使用位置面包屑导航或属性面包屑导航,而不用路径面包屑导航。

四、面包屑导航设计的最佳实践
当设计面包屑导航时,要切记以下几点:
1. 不要用面包屑导航替换主导航

面包屑导航应作为一项额外功能,其不能直接替换原本有用的主导航菜单。要切记,面包屑导航是一项便捷功能,是辅助导航手段,是网站导航的另一种办法。


2. 当前页面的面包屑导航无须添加链接
阅读更多内容
上一篇做网站中容易犯错的几个地方
下一篇关于公司网站改版的一些建议

声明:本页内容由郑州维尼网络收集编辑所得,所有资料仅供用户参考,转载请保留此链接http://www.zzwn.cn/website/4530.html

本文标签:

 

相关资讯 Related Info
相关分类 News Classification
解决方案 Solutions
相关热点 Hot spot
新建网站怎么让网站原创内容来源 新建网站怎么让网站原创内容来源
  1. 我们的承诺
  2. 我们的实力
  3. 我们的未来
郑州做网站咨询电话 建站咨询

151-3895-5886

网站备案安全放心网站

地址:郑州市上街区和昌都汇广场 / 电话:151-3895-5886
客服QQ: 7758021 / 邮箱:admin@zzwn.cn
Copyright © 2010-2019 郑州融科网络 版权所有