大型网站面包屑设计101

当我们走进一个公园，看到一张导航图。
如何看懂这张导航图呢？有三点。第一点，找到自己的位置；第二点，找到曾经走过的位置；第三点，找到自己要去的位置。这就是面包屑设计的初衷。

什么是网站面包屑设计？

为什么要叫面包屑设计呢？这源于一个西方童话故事，故事中两个孩子用面包屑组成一条回家的路。在数字世界中，面包屑为您的站点用户提供了追溯到原始着陆点的功能。因此，在门外汉看来，“面包屑”是辅助导航，帮助您的用户通过您的网站/应用程序。
对于一些企业网站来说，其实并不需要面包屑设计，访客能够一眼即知，自己处于网站的何种位置。但是对于大型网站而言，如购物网站、门户网站，访客需要知道自己处于网站的哪个位置，这就需要面包屑设计。
 

面包屑设计的目的

面包屑是一个有效的视觉辅助，因为它表明了用户的位置在网站的层次结构。因此，这使得用户很容易理解他们所在的位置以及他们可以导航的其他位置。
除了用户的观点，面包屑也非常有用的搜索引擎优化，因为它很容易导航通过你的网站，你的弹跳率大幅下降。
此外，您还希望最小化用户的操作数量，并为他们提供无缝体验。一项研究显示，使用面包屑导航的用户完成网站任务的速度要比不使用面包屑导航的用户快得多。

面包屑设计三要素

在我们深入研究面包屑的设计方面之前，面包屑设计一般包括如下三个要素。
1. 路径:
顾名思义，基于路径的面包屑显示用户到达当前页面的路径。这种类型的面包屑提供了类似于前进和后退按钮的功能，因此它是最少使用的。
2. 地点:
基于位置的面包屑指示当前页面在网站层次结构中的位置。
3.属性:
基于属性的面包屑根据网站的属性或类别来指导用户。这种类型的面包屑更常用于电子商务网站。

面包屑设计原则

不是主导航。 面包屑不是主要的导航;它是一个次要的功能，只是为了支持用户的导航。你的主页不需要面包屑。
不要突出设计。 因此，它们不应该被设计成一种吸引任何注意力的方式。简单来说，它们不应该是你设计的中心。过于引人注目的设计可能会分散访问者对主要导航的注意力。
风格与页面匹配。元素的样式和大小调整应该使其与页面的其余部分完全结合在一起。它应该是你的用户在访问你的网站时注意到的第一件事。不要让你的设计太突兀，也不要设计得让人很难找到。
位置很关键。你的主导航应该在页面的顶部，因为面包屑是次要导航，它应该在你的主导航之下，但在页面内容之上。
相似性。 因为在你的网站的每个页面上都有面包屑，所以要确保它们以相同的方式放置，并占据相似的空间。
使用通用符号。一般的面包屑都是使用大于号，不要使用怪异或者不常见的符号。
避免在移动网站使用。 如果你觉得你的移动网站需要导航栏来导航用户，那么你的检查表上的第一件事应该是重新检查和分析你的设计。当涉及到移动站点时，面包屑甚至不应该出现在议程上。