网页设计中面包屑的终极指南

一个优秀的用户体验能够引导访问者达到他们的目标。这可以是购买产品,阅读文章,或在社交网站上给某人发信息。

改善用户体验的最佳方式是通过清晰的导航。您还可以通过在页面中添加面包屑来改进导航。

这些“面包屑”可以帮助您定义页面的内容层次结构,并鼓励访问者更深入地了解您的站点。无论这个网站是一个电子商务商店还是一个在线博客,让访问者深入挖掘总是一件好事。

让我们深入研究一下breadcrumb,看看如何在web上使用它们。我将分享我最喜欢的例子以及一些为设计师和开发人员提供的免费资源。

介绍面包屑

通常使用面包屑来表示内容中的层次结构。这些可以让你的读者确切地知道他们在你的网站上的位置,以及每个页面在整体结构中的位置。

这层面包屑导航适合多层次的网站类别。但是您也可以使用breadcrumb来组织其他特性,如标记、归档,甚至多页文章。

详细的面包屑总是有用的,因为它们鼓励用户深入网站。电子商务商店以详细的面包屑而臭名昭著,因为它们通常可以有3或4层的类别(或更多!)

亚马逊是你能找到的最大的电子商务商店,他们的面包屑非常详细。

亚马逊面包屑

如果你有一个详细的网站层次结构的大量的子类别,那么面包屑实际上是不需要动脑筋的。

它们不占用太多空间,但确实提高了用户的参与度。甚至可以将模式代码添加到面包屑中,以获得谷歌获取的丰富数据片段。

一般来说,这些不会做太多的serp,但你可以得到明显的面包屑功能在谷歌。

谷歌搜索页面面包屑

事实上,大多数谷歌的网站使用这些面包屑是有意义的。

以他们的网站管理员支持页面为例,该页面为网站所有者提供了数百种资源。有这么多的导游,会让人感到难以承受。你如何让它变得更简单?

明确的内容层次结构。面包屑只是设计这个层次结构以获得最佳用户体验的一部分。

谷歌支持面包屑

不是每个网站都需要面包屑,所以这些都不是关键的页面元素。我写这篇文章的目的是想告诉大家哪些类型的内容最适合使用breadcrumb,以及如何在自己的网站上使用它们。

博客布局中的碎屑

博客很少使用超过2或3个子类别的类别。这意味着博客/新闻站点breadcrumb通常非常简单。

但即使是一个简单的面包屑路径也可以鼓励更多的点击,假设面包屑是显而易见的,易于使用。

我更喜欢在页面标题和清晰的视图中看到面包屑。他们应该定义这一页是关于什么的并包括相关类别的链接。

ubuntu手册面包屑

上面来自Ubuntu手册的例子非常适合模仿任何简单的设置。它只提供主主页链接、内部类别和当前页面。

很少有博客会比这更复杂,但它显示了面包屑如何在正确的设置工作。另外,如果用户有兴趣阅读更多内容,他们可以快速访问其他how-to文章。

但是我最喜欢的一个面包屑设计是TutsPlus布局,它将面包屑元素添加到主页头。

将面包屑

请注意类别碎屑如何进入主标题文本。这使它看起来像一个大的页面元素,其中面包屑是标题的前身。

由于TutsPlus使用一个大的下拉菜单来导航,所以很难深入到类别中去。但这些面包屑链接提供了一键访问的类别,用户可能感兴趣的基础上,无论他们读什么。

遵循最适合你的博客的技巧。你不需要面包屑来显示华而不实或细节;他们只需要工作。

电子商务面包屑路径设计

面包屑的另一个流行用法是与电子商务商店。这些网站通常有很多类别,有很多层次可供浏览。

我总是建议电子商务商店使用面包屑,因为它们对最终用户非常有用。产品页面没有博客那么多的内容,所以访问者不会停留太久。

如果访问者想找到相关产品,那么面包屑链接是完美的解决方案。

wayfair面包屑酒吧

Wayfair的设计非常棒,他们的面包屑导航棒极了。如果你浏览一下这个网站,你会发现他们的很多产品都有5-6级的分类。

对于这种类型的电子商务商店,导航是必不可少的。它允许用户在一个页面中任意跳跃多个类别级别。

我还喜欢分类页面本身包含面包屑的方式。主面包屑条基本上在每个页面上都可见,所以它是Wayfair购物者的一致导航。

你会在沃尔玛的网站上找到类似的设计,尽管他们的面包屑导航更小,更微妙。

沃尔玛面包屑链接

沃尔玛还保持这个面包屑导航在每个页面可见,包括类别页面。这些产品本身具有更大的页面标题,因此面包屑可以被忽略。

但是小链接的好处是它们不会超过页面。您在屏幕上为产品价格和结帐功能节省了更多空间。

没有正确或错误的方式做电子商务面包屑。关键是要确保你有地方在用户可以看到和使用它们的页面上。

网页设计免费赠品

与其设计自己的breadcrumb ui,为什么不重新设计一个现有的?在网上有大量的免费psd提供了令人难以置信的面包屑。

这些都是我的首选,因为它们很容易下载,可以放在任何网站上。

有时纯文本链接是好的,但如果你想要更多一点的面包屑,然后尝试重新工作这些免费赠品。

结算流程

检出碎屑psd

这个checkout breadcrumb实际上是一个进度步骤UI。但是您也可以重用这个相同的接口来创建面包屑。

两个进展步骤和面包屑看起来非常相似,但它们用于不同的目的。箭头形状引导访问者通过链接,每个“部分”都有明显的阴影。所以不管怎样,这个免费的东西对入门来说都很有用。

传统的面包屑

传统的面包屑psd

这里有一个更传统的面包屑条,在主页上有一个独特的转折。每个人都认识房子图标作为一个链接到主页,所以这削减了屏幕空间。

加上home链接颜色不同,它表示整个链中的根链接。同样,箭头表示一个清晰的层次结构,这对于任何面包屑设计都是完美的。

简单的导航

黑色和浅色的面包屑

提供了黑暗和光明的版本,这免费赠品应该适合几乎任何网页轻松。

如果你有时间,你甚至可以用基本的CSS3重建这个碎屑条。但是你也可以根据自己的配色方案调整图片的样式,然后直接从Photoshop中导出。

我喜欢这个免费的东西,因为它是极简主义布局的起点。

浅蓝色渐变

蓝色渐变面包屑

在CSS3中创建渐变非常简单,现在您可以使用这些breadcrumb将它们应用到页面中。

有直接从PSD文件中导出代码的Photoshop扩展。但我总是更喜欢硬编码,因为结果通常更简洁,而且这个面包屑真的不应该很难重建。

同样,它是完全免费的,所以你可以下载这个,并改变梯度颜色,以适应你的项目。

斯威夫特屑

斯威夫特面包屑免费赠品

SwiftPSD的团队发布了这些面包屑,提供了一种简单而优雅的方式,为您的页面添加清晰的面包屑。

它们分别位于带有清晰文本和经典侧箭头分隔符的渐变条元素之上。你可以用任何字体或任何配色方案,所以这是一个久经考验和真正的面包屑设计,将持续多年。

免费的面包屑和插件

一旦你有了一个设计风格,你可能想要把它编码。但如果你不是一个很好的程序员,你可以依赖代码片段甚至插件。

这些是快速添加面包屑到你的页面的一些最好的。如果你周围有谷歌,你可能会发现更多。

面包屑NavXT

面包屑navxt插件

考虑到WordPress的庞大的插件集合,有一个很棒的breadcrumb插件也就不足为奇了。

NavXT是完全免费的,它是在任何页面上添加面包屑的最简单方法。这个插件使用Schema.org代码创建seo友好的breadcrumb,谷歌将获取并显示在您的搜索排名。

它也有一个设置面板,所以你可以添加面包屑到你的主题没有任何编码。一个伟大的选择WP用户谁想要一个简单和容易的面包屑设置。

WP面包屑

wordpress插件面包屑

WordPress的另一个选择是更简单的Breadcrumb插件。这不会得到很多频繁的更新,但它仍然是一个稳定的插件,让你快速添加面包屑到你的网站。

这些面包屑大多通过短代码工作,但你可以改变设置,以运行面包屑在任何页面。

不幸的是,默认的设计是相当丑陋的,所以你会想要编辑的面包屑在CSS。如果你没有太多的编码知识,那么这个插件可能是一个比NavXT更困难的障碍。

jQuery rCrumbs

jquery rcrumbs插件

如果你搜索GitHub,你会发现大量免费的repos,每个元素都有代码片段和插件。jQuery rcrumb插件就是这样一个例子,它可以帮助您构建由jQuery支持的华丽的面包屑导航。

它是完全响应和工作的链接元素的任何列表。您只需使用ID之类的容器创建一个无序列表#面包屑将rcrumb函数指向这个列表。

这将自动将列表呈现为原始的breadcrumb,并带有可选的设置,如对长行使用省略号。一个很好的动态插件,程序员谁想要更多的控制他们的面包屑显示。

Bootsnipp面包屑

bootsnipp面包屑插件

如果你是Twitter引导库的粉丝,那么你一定会喜欢这些托管在Bootsnipp上的面包屑代码。

每个代码片段都是由其他人提交的,他们免费发布代码以供复制和修改。值得注意的是,所有这些都运行在最新版本的引导程序上,许多代码甚至支持BS4更新。

但是这些代码片段只对使用Bootstrap的开发人员有用。尽管如此,它们对于创建能够工作并符合Bootstrap响应样式的面包屑仍然是非常宝贵的。

CodePen片段

codepen面包屑路径搜索

您可以挖掘的另一个资源是CodePen。这个免费的浏览器IDE允许开发人员保存他们的代码片段并与世界共享。

如果你浏览breadcrumb标签,你会发现大量的CSS面包屑样式成熟的采摘。您甚至可以在CodePen中直接测试它们,并复制repo以保存更改。

前进

如果你的网站可以从面包屑中获益,我建议你测试一下。你不会失去很多东西,大多数用户都喜欢添加的导航。

但是一定要遵循本文示例中的一些最佳实践。一个困难的导航系统比什么都没有更糟糕。试着站在用户的角度,根据他们的需要设计面包屑。

2020-01-08 17:04
相关热门