网站面包屑 提升用户体验， 鼓励用户更深入地了解您网站的层次结构，同时还告诉游客正是他们任何给定的页面上。谷歌的 面包屑模式 是另一个有价值的理由设置面包屑。但设计因素始终是棘手的，因此有助于学习的例子和收集意见。
这些都是我最喜欢的面包屑的风格，他们应该提供新的设计项目的一个很好的起点。
1. WAYFAIR
Wayfair的网站上做了很多的权利，他们的整个UX是惊人的一页一页。有一件事我真的很喜欢是他们的面包屑的风格，因为它不是太大，但也不能太小，不突兀无论是。
你会发现在商品页面上，并且这些屑 类别页面 ，使他们跟着你整个网站的周围。这使您可以从任何详细页面跳了两个类别。
而面包屑酒吧里用不同的背景色导航下自己的小部分。不碍眼，但不难发现无论是。一个伟大的设计风格和我个人的最爱之一。
网站制作
2.谷歌支持
另一个明显的一提的是谷歌，因为他们太出名了 令人难以置信的工作UX。你会发现大多数谷歌的产品与面包屑页面分层和最好的之一是 谷歌的支持 网站。
他们的支持页面上的一切，从架构分析和搜索控制台工具提供建议。每一页都有面包屑和面包屑，这些占据了类似的空间作为页面标题所以他们清晰可见。
同样注意到这些链接是如何很好地融合在一起，而不跳下页。他们觉得在设计上非常自然，这应该永远是你的面包屑的目标。
网站制作
3. MSDN文档
有一个在一个真正独特的面包屑功能 MSDN文档 ，我真的很喜欢。它具有所有典型的设计功能，如箭头图标和分类链接，但在链中的最后一个环节有额外的页面定制的下拉菜单。
我从来没见过这种在任何痕迹的设计，但它给用户非常有价值的。通常它会需要其他的导航菜单来访问这些链接，但与像微软网站有这么多的网页经过。
且不说文档可以是相当复杂的，所以它不是为创建路径最简单的东西。这种技术是辉煌的，非常值得使用，如果您有您的网站上复杂的层次结构。
网站制作
4.苹果
在苹果网站上我见过吨的面包屑的跨多页这样的网店页面和产品页面。但是，这引起了我的眼睛一个小细节是 页脚链接区域 具有高于其底部链接一个小面包屑。
苹果是一个巨大的公司，拥有大量的页面和资源。这面包屑会是值得加入对页面的顶部太多，但它肯定不会伤害到正在接近底部。
我会鼓励设计师尝试了这一点，看看它是如何工作的。页脚面包屑肯定不是常态，但他们与视觉导航帮助。
网站制作
5. TECHRADAR
我发现大部分的面包屑通常是在公司网站或电子商务商店。但是，博客往往有自己的面包屑也和一个很好的例子是 TECHRADAR文章页面。
每个路径是非常小的特色，直接链接到头部类别和文章的标题的副本。对于这种类型的博客这是艰难的，因为没有太多层次的证明面包屑。
但这个效果很好，如果你没有其他地方加入文章的类别到页面上。
网站制作
6. TUTS加
对于更详细的面包屑设计检查出 TutsPlus博客。每篇文章还提供包括初级和次级的类别页面的最顶部小面包屑。
我喜欢这样的设计很多，因为它自然地融合到页面的标题。因此，不是在面包屑，并在标题标签复制标题的，所以<H1>航向是面包屑的一部分此结合它全部为一个元件。
请注意，这并不正确使用谷歌的模式，因此不会在搜索面包屑出现。但考虑到几乎没有影响CTR我很看重设计和页面易用性远远超过搜索引擎优化的好处（或缺乏）。
网站制作
7. COOLSPOTTERS
传统的面包通常坚持使用，如斜线或右箭头支架几个文字符号（>）。这些工作，因为他们已经使用了几十年和用户都熟悉他们。
但是，我总是喜欢看其他的面包屑设计趋势像 Coolspotters。他们使用的是具有内置的链接元素箭头定制面包屑链接。
你可以找到大量的 开源面包屑风格 就像这些为自己的网站。这是一个伟大的方式来爵士乐这个非常传统的页面元素。
网站制作
8.市场观察
返朴归真是在线新闻网站 市场观察。他们的所有的 内部岗位 配备面包屑资产净值右箭头图标非常小的文本。
在这种情况下，我认为，小文效果很好。这不正是 难以 用面包屑，但他们不觉得小，比页面的其余部分不太显著。
博客和新闻网站与小面包更好的工作，因为真正的重点是内容。不过这是很好的适合他们的地方，这设计是一个很好的例子。
网站制作
9.亚马逊
每个人都喜欢亚马逊自己庞大的库存和免费送货。但他们也有一个梦幻般的网站，有没有办法，我能越过他们的面包屑设计。
许多 产品的网页 有近十分顶部导航一组面包屑。这始终是超长的，因为亚马逊的类别为深。这是有价值的，让消费者了解哪些类别可能是值得浏览，极具设计/站长学习亚马逊的庞大的产品结构。
但是，如果你的每个产品页面上向下滚动，你会发现一个“产品信息”或畅销书目录“产品的详细信息”一节。
此功能使用面包屑链接，以显示该产品已经销售最好的，并鼓励参观者通过点击这些相关的类别。
亚马逊的面包屑是令人钦佩的冗长所以他们值得我们学习的，如果你有一个非常深层次的站点。
10. ETSY的
大量的在线DIY /工艺品电子商务网站Etsy的不断推进自己的设计。它始建于2005年，并期待在现场，现在你可以看到他们已经取得了过去10多年的一些大的变化。
如果检查出任何 分类页面 ，你会发现在左上角的小面包。这些都不是身份显赫相比，侧栏导航这真的感觉就像是主要的搜索方式。
但是一个很好的补充作用是总项目的类别内上市。Etsy的列举了许多项目总如何在每个SUBCAT销售为你深入挖掘现场。
有一件事我会抱怨是缺乏在产品页面上的面包屑。这似乎是一个真正监督到UI，我希望他们补充说向前发展。
11.还将继续
这面包屑设计不是特别漂亮，但它确实有一个特点，抓住了我的注意。
你会发现每一个附近的顶部“下一篇文章”链接 ，还将继续交。所以感觉就像导航的一部分。这似乎直接旁边的面包屑。
谁与面包屑交互的用户通常希望使这个额外的链接是有道理的这些类别的面包屑四周挖。任何有兴趣的Linux软件可能想直接跳到该类别中的下一篇文章。
网站面包屑 提升用户体验， 鼓励用户更深入地了解您网站的层次结构，同时还告诉游客正是他们任何给定的页面上。谷歌的 面包屑模式 是另一个有价值的理由设置面包屑。但设计因素始终是棘手的，因此有助于学习的例子和收集意见。
这些都是我最喜欢的面包屑的风格，他们应该提供新的设计项目的一个很好的起点。
1. WAYFAIR
Wayfair的网站上做了很多的权利，他们的整个UX是惊人的一页一页。有一件事我真的很喜欢是他们的面包屑的风格，因为它不是太大，但也不能太小，不突兀无论是。
你会发现在商品页面上，并且这些屑 类别页面 ，使他们跟着你整个网站的周围。这使您可以从任何详细页面跳了两个类别。
而面包屑酒吧里用不同的背景色导航下自己的小部分。不碍眼，但不难发现无论是。一个伟大的设计风格和我个人的最爱之一。
网站制作
2.谷歌支持
另一个明显的一提的是谷歌，因为他们太出名了 令人难以置信的工作UX。你会发现大多数谷歌的产品与面包屑页面分层和最好的之一是 谷歌的支持 网站。
他们的支持页面上的一切，从架构分析和搜索控制台工具提供建议。每一页都有面包屑和面包屑，这些占据了类似的空间作为页面标题所以他们清晰可见。
同样注意到这些链接是如何很好地融合在一起，而不跳下页。他们觉得在设计上非常自然，这应该永远是你的面包屑的目标。
网站制作
3. MSDN文档
有一个在一个真正独特的面包屑功能 MSDN文档 ，我真的很喜欢。它具有所有典型的设计功能，如箭头图标和分类链接，但在链中的最后一个环节有额外的页面定制的下拉菜单。
我从来没见过这种在任何痕迹的设计，但它给用户非常有价值的。通常它会需要其他的导航菜单来访问这些链接，但与像微软网站有这么多的网页经过。
且不说文档可以是相当复杂的，所以它不是为创建路径最简单的东西。这种技术是辉煌的，非常值得使用，如果您有您的网站上复杂的层次结构。
网站制作
4.苹果
在苹果网站上我见过吨的面包屑的跨多页这样的网店页面和产品页面。但是，这引起了我的眼睛一个小细节是 页脚链接区域 具有高于其底部链接一个小面包屑。
苹果是一个巨大的公司，拥有大量的页面和资源。这面包屑会是值得加入对页面的顶部太多，但它肯定不会伤害到正在接近底部。
我会鼓励设计师尝试了这一点，看看它是如何工作的。页脚面包屑肯定不是常态，但他们与视觉导航帮助。
网站制作
5. TECHRADAR
我发现大部分的面包屑通常是在公司网站或电子商务商店。但是，博客往往有自己的面包屑也和一个很好的例子是 TECHRADAR文章页面。
每个路径是非常小的特色，直接链接到头部类别和文章的标题的副本。对于这种类型的博客这是艰难的，因为没有太多层次的证明面包屑。
但这个效果很好，如果你没有其他地方加入文章的类别到页面上。
网站制作
6. TUTS加
对于更详细的面包屑设计检查出 TutsPlus博客。每篇文章还提供包括初级和次级的类别页面的最顶部小面包屑。
我喜欢这样的设计很多，因为它自然地融合到页面的标题。因此，不是在面包屑，并在标题标签复制标题的，所以<H1>航向是面包屑的一部分此结合它全部为一个元件。
请注意，这并不正确使用谷歌的模式，因此不会在搜索面包屑出现。但考虑到几乎没有影响CTR我很看重设计和页面易用性远远超过搜索引擎优化的好处（或缺乏）。
网站制作
7. COOLSPOTTERS
传统的面包通常坚持使用，如斜线或右箭头支架几个文字符号（>）。这些工作，因为他们已经使用了几十年和用户都熟悉他们。
但是，我总是喜欢看其他的面包屑设计趋势像 Coolspotters。他们使用的是具有内置的链接元素箭头定制面包屑链接。
你可以找到大量的 开源面包屑风格 就像这些为自己的网站。这是一个伟大的方式来爵士乐这个非常传统的页面元素。
网站制作
8.市场观察
返朴归真是在线新闻网站 市场观察。他们的所有的 内部岗位 配备面包屑资产净值右箭头图标非常小的文本。
在这种情况下，我认为，小文效果很好。这不正是 难以 用面包屑，但他们不觉得小，比页面的其余部分不太显著。
博客和新闻网站与小面包更好的工作，因为真正的重点是内容。不过这是很好的适合他们的地方，这设计是一个很好的例子。
网站制作
9.亚马逊
每个人都喜欢亚马逊自己庞大的库存和免费送货。但他们也有一个梦幻般的网站，有没有办法，我能越过他们的面包屑设计。
许多 产品的网页 有近十分顶部导航一组面包屑。这始终是超长的，因为亚马逊的类别为深。这是有价值的，让消费者了解哪些类别可能是值得浏览，极具设计/站长学习亚马逊的庞大的产品结构。
但是，如果你的每个产品页面上向下滚动，你会发现一个“产品信息”或畅销书目录“产品的详细信息”一节。
此功能使用面包屑链接，以显示该产品已经销售最好的，并鼓励参观者通过点击这些相关的类别。
亚马逊的面包屑是令人钦佩的冗长所以他们值得我们学习的，如果你有一个非常深层次的站点。
10. ETSY的
大量的在线DIY /工艺品电子商务网站Etsy的不断推进自己的设计。它始建于2005年，并期待在现场，现在你可以看到他们已经取得了过去10多年的一些大的变化。
如果检查出任何 分类页面 ，你会发现在左上角的小面包。这些都不是身份显赫相比，侧栏导航这真的感觉就像是主要的搜索方式。
但是一个很好的补充作用是总项目的类别内上市。Etsy的列举了许多项目总如何在每个SUBCAT销售为你深入挖掘现场。
有一件事我会抱怨是缺乏在产品页面上的面包屑。这似乎是一个真正监督到UI，我希望他们补充说向前发展。
11.还将继续
这面包屑设计不是特别漂亮，但它确实有一个特点，抓住了我的注意。
你会发现每一个附近的顶部“下一篇文章”链接 ，还将继续交。所以感觉就像导航的一部分。这似乎直接旁边的面包屑。
谁与面包屑交互的用户通常希望使这个额外的链接是有道理的这些类别的面包屑四周挖。任何有兴趣的Linux软件可能想直接跳到该类别中的下一篇文章。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/260846.html