1. 什么是面包屑?

 

　　面包屑这个词来源于童话故事《Hansel and Gretel》，故事中两个孩子用面包屑组成了一条回家的路。在数字世界中，面包屑为您的站点的用户提供了追溯到原始登录站点的能力。因此，在外行人的语言，“面包屑”是导航的辅助，帮助您的用户快速通过您的网站/应用程序。

　　面包屑是一个水平排列的文本链接，通常由符号上方的(>)分隔，引导您浏览页面的层次结构。

　　当然，面包屑是很好的，但不是对所有的网站，它应该避免从单一层的网站。一个内容丰富的网站需要一些“面包屑”，通常可以在电子商务平台网站或web应用程序中找到一些步骤。您可以简单地绘制一个网站的架构图，并进一步分析它，以确定它是否需要一个面包屑轨迹。

　　与此功能同样重要的是，要记住它是一个附加功能，应该将其视为主导航菜单。当然，主要方面是设计一艘大型船舶时主要考虑的问题。尽管如此，像面包屑路径这样的小事情对你的访客有一个无缝的体验同样重要。

　　好的，我们将深入研究面包屑设计，但在此之前，让我们看看为什么要使用它。

　　2. 为什么要用面包屑?

 

　　面包屑是一种有效的视觉辅助，因为它们表明了用户在站点层次结构中的位置。因此，这使得用户很容易理解他们在哪里，以及他们可以导航到哪里。

　　除了用户视图，breadcrumb对seo也非常有用，因为它很容易通过你的网站和你的弹跳率大幅下降。

　　此外，您希望更小化用户操作的数量，并为它们提供无缝体验。一项研究表明，使用面包屑导航的用户完成网站任务的速度比不使用的用户快得多。

　　3.面包屑的种类:

 

　　在我们深入研究面包屑设计之前，这里有几种类型的面包屑是你应该知道的。

　　1.路径:

　　顾名思义，基于路径的crumb显示用户到当前页面的路径。这种类型的crumb提供了类似于前进和后退按钮的功能，所以它是更少使用的。

　　2.地点:

　　基于位置的面包屑指示当前页面在站点层次结构中的位置。

　　3.属性:

　　基于属性的面包屑根据网站的属性或类别对用户进行引导，这种类型的面包屑在电子商务平台上更常用。

　　因为面包屑几乎不占任何空间，而且不会伤害用户，所以尝试一下也没有害处，对吗?你确定要在设计中加入面包屑吗?以下是设计面包屑时需要记住的一些基本内容!

　　4. 面包屑设计基础:

　　1.不是主导航：

　　需要考虑的基本问题是，导航条不是主要的导航;它是一个次要的功能，仅仅支持用户的导航。你的主页不需要面包屑。用户的旅程从主页开始，所以它需要它。

　　2.链接是正确的：

　　不要使用用户的/当前页面作为链接。因为您的用户已经在那个页面上了，所以他们不需要相同的链接。相反，如果它指向不同的页面或相同的页面，用户可能会感到困惑。

 

　　3.不要太eye-catchy：

　　我们一直重复面包屑不是主要元素。因此，它们不应该被设计成一种吸引任何注意的方式。简单地说，他们不应该是你设计的。过于引人注目的设计会分散访问者对主导航的注意力。

　　4.风格是正确的：

　　应该对这个元素进行样式设置和大小调整，使其与页面的其他部分完全匹配。它应该是你的用户在访问你的网站时注意到的件事。不要让你的设计过于突兀或难以找到。

　　5.位置是关键：

　　这是正确的。你的主导航应该在页面的顶部，因为面包屑是次要导航，它应该在你的主导航之下，但是在页面内容之上。

　　6.安排跟踪：

　　开始是正确的，因为主页是起点，所以你应该从这里开始。

　　提供到主页的链接具有链接和锚定的效果，使用户更容易使用。

　　更终的目标应该是用一种自然的方式将这些链接粘合在一起。它应该是无缝的。谷歌是更好的例子之一，因为谷歌产品有足够的内容。

　　7.让它熟悉的：

　　因为在你的网站的每个页面上都有面包屑，确保它们以相同的方式放置并占据相似的空间。

　　8.所有关于符号：

　　传统上，面包屑通常与一些文本符号一起放置，如正斜杠或右箭头括号(>)。这些方法之所以有效，是因为它们已经使用了几十年，并且为用户所熟悉。但不要害怕尝试。你总是可以定制你的面包屑，并提出一个新的设计。

　　大于符号(>)是用于分隔链接的常用符号。高于符号有助于表示层次结构。例如，父类>子类。

　　就像向右的箭头(→)一样，引号(?)符号，如和斜杠(/)也可以用作分隔符。它们的符号使用户更容易理解使用的层次结构是箭头。选择取决于网站的美学价值和面包屑的类型。建议使用箭头而不是斜线作为分隔符。

　　9.显示必要的路径：

　　始终显示整个路径，在使用它时，确保显示整个路径，以避免任何类型的混淆。让你的用户知道他们在你的网站上的位置。

　　高亮显示更后一项，由于文本将会突出显示，用户将更容易知道他们在站点设计的层次结构中的位置。

　　在breadcrumb中使用全页标题是一个聪明的想法，可以帮助用户准确地理解每个超链接的位置。更改标题会引起进一步的混乱。

　　10.使用椭圆：

　　如果很长一段时间或者其他什么事情阻碍了你，你可以考虑使用椭圆(…)删除标题。省略号是一个三个点的标点符号，当您想要从引用的文本中删除某些内容时可以使用它。

　　将页面URL和面包屑架构放在一起是很重要的。如果不是，用户可能会得到不一致的消息，从这两个网址和面包屑，并可能混淆。

　　11.考虑可读性：

　　当涉及到内容时，可读性是一个基本因素。尽量不要忽视它。克里斯蒂安·霍尔斯特表示，如果文字太长，用户的眼睛很难聚焦。这条线的长度使人很难分辨它的起点和终点。此外，大段文字会使你很难继续阅读正确的行。短行也是如此。非常短的行会给用户带来很大的压力。他们可能会在通读当前行之前跳到下一行，漏掉一些可能很重要的内容。可能的?rd页面是个好主意。

　　正如我们上面所建议的，把你的文本放在页面的三分之一是一个好主意，即使是折叠或展开的面包屑。

　　当你感觉太多的时候，把面包屑折叠起来。只需确保您为用户提供了一个遍历整个路径的选项。可单击的省略号是一个很好的实践。

　　我们希望我们已经涵盖了所有的基础，所以你可以开始在你的网站设计面包屑。这是如何使你的访客停留在你的网站上更长的时间和更有效率。假设你的网站上有很多内容，如果使用得当，这个简单的功能会很有趣。设计的这个方面是增强用户体验和可用性的众多特性之一。这是济南网站建设公司网站设计的更基本的方面，你需要考虑，以获得更大的这个程序!