欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

网页中为你指路的面包屑到底应该如何使用?

发布时间:2017:11:28 14:05:27 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1426个文字,预计阅读时间4分钟
导语
面包屑是我们熟知的一种导航工具,它们往往出现在页面内容的上方,告知你所处的位置。它小巧,方便,常见,且简单。可是即便是这样的UI控件,在设计上同样是有讲究的,今天咱们

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

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

  

网页中为你指路的面包屑到底应该如何使用?

 

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

  面包屑导航提供可用性

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

  ·我在哪里?根据整个网站的层次,面包屑能让用户知道他们所处的位置。

  ·我还能去哪里?面包屑提升了整个网站的可查找性,面包屑的存在揭示了整个网站的结构,用户也随之明白网站还有哪些其他的部分。

  ·是否应当浏览更多?面包屑揭示出网站有更多值得探索的内容,鼓励用户浏览更多。反过来,面包屑的出现降低了网站的跳出率。

  减少操作次数

  从可用性的角度上来看,面包屑减少了用户跳转到高层级页面的操作数,这样避免了用户使用浏览器的返回按钮和翻找导航寻找上级页面的复杂交互。

  占用空间小

  面包屑这种设计元素在页面上占用的空间相当小,它基本都是以带链接的文本的形式存在的,并且通常只有一行。

  面包屑不会给用户带来困扰

  这个小小的设计元素占据的空间不大,但是给用户带来的便捷远远大于可能带来的问题和困扰。

  什么时候使用面包屑?

  是否要在网站中使用面包屑,主要取决于网站的结构。看看你的网站地图或者整体的结构图,,分析使用面包屑能否提高用户在网站内部不同类别、目录下导航是否方便:

  ·当你的网站内拥有分类明晰、组织明确的多层次线性结构的时候,你应当使用面包屑。比如一个拥有种类繁多产品的电子商务网站,面包屑就相当有用。

  ·当网站不具备逻辑清晰的层次结构的时候,就不要使用面包屑。

  面包屑的类型

  面包屑是基于网站的逻辑结构而存在的导航组件,它可以基于位置、路径来展示,也可以基于属性而存在。

  基于位置的面包屑

  基于位置的面包屑设计通常都能很好的反映网站的结构特征。它们直接将网站的层次结构展现在访客面前,其中包含多个层级(级别通常超过2层)。这种层级展示性的面包屑对于从外部来源(比如搜索引擎)进入网站的用户而言,具有明显的指引性作用。

  

网页中为你指路的面包屑到底应该如何使用?

 

  在下面 BestBuy 的页面中,面包屑将产品所在页面的层级关系展现了出来。

  

网页中为你指路的面包屑到底应该如何使用?

 

  基于路径的面包屑

  基于路径的面包屑通常也被称为“历史足迹”,它展现出来的并非是网站结构,而是访客抵达特定页面的完整路径。这种面包屑路径并非是静态的,而是动态生成的。基于路径的面包屑有时候会对用户有所帮助,但是有的时候还是会让用户感到迷惑——有的用户浏览网站的时候浏览路径过于天马行空,这种基于路径的面包屑会帮助他们记录,无需翻看历史,也不无需使用浏览器的返回按钮来返回特定位置。另外,这种基于路径的面包屑对于一次就抵达特定位置的用户而言毫无用处。

  下面就是使用基于路径面包屑来导航的案例和原理说明:

  

网页中为你指路的面包屑到底应该如何使用?

 

  基于属性的面包屑

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

  

网页中为你指路的面包屑到底应该如何使用?

 

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

  

网页中为你指路的面包屑到底应该如何使用?

 

  层级还是历史?

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:遇到瓶颈的UI 设计师,试试从这个角度学习

下一篇:网易设计师:推荐大家学习的通感设计方法

  • 18886 文章总数
  • 2254164访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信