面包屑可用的网页面包屑应当如何设计,通过最佳实践展示面包屑的正确用法

作为一种辅助导航系统,面包屑能够帮助用户清晰的定位到自己所在网站的位置。从可用性的角度上来看,面包屑减少了用户跳转到高层级页面的操作数,这样避免了用户使用浏览器的返回按钮和翻找导航寻找上级页面的复杂交互。面包屑是基于网站的逻辑结构而存在的导航组件,它可以基于位置、路径来展示,也可以基于属性而存在。1、不要使用面包屑来替代网页主要的导航系统面包屑只是一个辅助导航系统,它无法替代主要的导航系统。

面包屑是一种众所周知的导航工具,它显示在页面内容的上方,告诉您您在哪里。它小巧、方便、通用且简单。但即使是这样的 UI 控件在设计上也很精致。今天就来说说面包屑吧~

作为导航辅助,面包屑可以帮助用户清楚地找到他们的网站。这个词来自于孩子们跟随面包屑回家的童话故事,而网页中的面包屑也是帮助用户找到位置的 UI 控件。

面包屑通过路径显示告知用户他们在哪里,今天的文章将探讨如何设计一个可用的网络面包屑,并通过最佳实践演示面包屑的正确用法。

面包屑提供可用性

面包屑作为一种视觉指南,为用户揭示了网页的层次结构,这也是为什么面包屑成为用户了解网站背景信息和帮助用户理解以下问题答案的重要途径:

我在哪里?面包屑让用户根据整个站点的层次结构知道他们在哪里。我还能去哪里?面包屑可提高整个网站的可查找性。面包屑的存在揭示了整个站点的结构,用户也了解站点的其他部分是什么。 • 您应该浏览更多吗?面包屑显示网站上有更多内容可供探索,鼓励用户浏览更多内容。反过来,面包屑的存在会降低网站的跳出率。

减少操作次数

从可用性的角度来看,面包屑减少了用户跳转到上一级页面的操作次数,从而避免了用户使用浏览器的返回按钮和导航查找上一级页面的复杂交互.

占地面积小

面包屑是在页面上占用空间相对较小的设计元素,主要是链接文本,通常在一行中。

面包屑不会打扰用户

这个小小的设计元素占用的空间很小,但它给用户带来的方便却远远超过了可能出现的问题和麻烦。

什么时候应该使用面包屑?

您是否要在网站中使用面包屑导航很大程度上取决于您网站的结构。查看您的站点地图或整体结构图,并分析使用面包屑导航是否可以改善您网站内不同类别和类别的用户导航:

·当您的站点具有良好分类、组织良好、多层次的线性结构时,您应该使用面包屑导航。例如,具有多种产品的电子商务网站,面包屑可能非常有用。 · 当网站没有逻辑清晰的层次结构时,不要使用面包屑。

面包屑的类型

面包屑是基于网站逻辑结构而存在的导航组件。它们可以根据位置、路径或属性显示。

基于位置的面包屑

基于位置的面包屑通常很好地反映了网站的结构特征。它们将网站的层次结构直接呈现在访问者面前,具有多个级别(通常超过 2 个级别)。这种面包屑的分层显示对于从外部来源(例如搜索引擎)进入网站的用户具有明确的指导作用。

1-6gxUFL4eX-BSrZeDpJRMKw

在下面的页面中,面包屑显示了产品所在页面的层次结构。

基于路径的面包屑

基于路径的面包屑(通常也称为“历史足迹”)显示的不是网站的结构,而是访问者到达特定页面的完整路径。这个面包屑路径不是静态的,而是动态生成的。基于路径的面包屑有时可以帮助用户,但有时仍然会迷惑用户——一些用户在浏览网站时浏览路径过于狂野,这种基于路径的面包屑将帮助他们记录,无需滚动浏览历史记录或使用浏览器的后退按钮返回特定位置。此外,这种基于路径的面包屑对于一次到达特定位置的用户来说毫无用处。

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

0-OdeO5BGJyLBI_uG2

基于属性的面包屑

这种类型的基于属性的面包屑在电子商务网站上很常见。产品通常根据类别和属性组织成不同的子类别。基于属性的分类使用户更容易理解产品与产品之间的关系。更多不同的浏览路径。

1--1wsiCtzi2A6rqYkjudzmQ

像TM的这个页面,面包屑显示特定页面对应的产品,产品按照一定的属性进行组织:

层次结构还是历史?

根据实际经验,在大多数情况下,面包屑仍然适合显示层次结构而不是浏览历史记录。因此,基于位置和基于属性的面包屑应用更为广泛,而基于路径的面包屑相对较少。

面包屑导航最佳实践

在您开始设计面包屑导航时,请牢记以下几点:

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

面包屑只是辅助导航系统,不能取代主导航系统。请记住,为了方便用户访问快速定位器链接系统的其他层,它只是次要选项。

1-VNOarWri41nTDPWkPNfJGQ

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

面包屑的最后一层是当前页面,这个item不应该在面包屑中链接,因为它只起到定位的作用,没有任何意义。

3、使用分隔符

在面包屑中,最常用的分隔不同层级的方式是大于号(>),常用作“父类>子类”。当然,分隔符的使用不限于此。有些使用箭头 (→),有些使用书名 (»),有些使用斜线 (//)。使用哪种分隔符通常取决于整体风格和设计师的偏好。

1-7QyzdCXPueprmhtxS-U_YA

1-75hWnw3mGUy1txgonPBKhw

4、选择合适的大小和间距

在设计时应仔细考虑大小和间距,不同面包屑级别之间应有足够的间距,以便用户可识别。当然,您不希望面包屑在页面上占用太多空间。如果面包屑比顶部导航大,看起来会很别扭。

5、不要让它成为视觉焦点

面包屑本身就是一个导航辅助工具,如果你使用太花哨的字体和粗体的颜色,它会显得过于强大和过于抢眼。它不应该是用户浏览时的视觉焦点。下面的面包屑设计还不错,但它非常抢眼,甚至比顶部导航更能吸引用户的注意力。

1-dHoggvnBN86uFDu3pxglag

面包屑设计不抢眼,但用户还是可以很好用的。

1-dfq7g_B36FOao0sF_Fqyww

6、不要在移动页面上使用面包屑

如果您认为要在移动网页上使用面包屑导航,则说明您的移动网页设计存在问题:可能该网站过于复杂(深度嵌套),在这种情况下,它不适合移动使用场景。为了解决问题,应该尽量简化整个系统,保证手机上不会出现面包屑。

结论

面包屑让用户更容易浏览整个网站、返回父页面和查找相关产品,它对网站的整体结构很有意义。它的功能并不复杂,增加易用性是它的主要作用,所以不要把面包屑复杂化。

免责声明:本文来自网络用户投稿,不代表本站观点和立场。如有侵权请发送邮件至tzanseo@163.com告知本站删除,本站不负任何责任及承诺。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

发表评论

登录后才能评论