一个可用的网页面包屑应当如何设计？

编者按：面包屑是一种著名的导航工具，它们经常出现在页面内容的顶部，告诉你它们在哪里。它小巧、方便、常见、简单。然而，即使是这样的UI控制器在设计上也很精致。今天，让我们来谈谈面包屑。面包屑作为一种辅助导航系统，可以帮助用户清楚地定位自己网站的位置。这个词源于童话里跟着面包屑回家的孩子，网页上的面包屑也是帮助用户找到自己位置的UI控件。面包屑通过路径显示告诉用户他们的位置，今天的文章将讨论如何设计可用的网页面包屑，并通过最佳实践展示面包屑的正确使用。作为一种视觉指导，面包屑导航为用户揭示了网页的层次结构。因此，面包屑已成为用户了解网站背景信息的重要途径，帮助用户了解以下问题的答案：我在哪里？根据整个网站的层次，面包屑可以让用户知道他们在哪里。·我还能去哪里？面包屑提高了整个网站的可搜索性。面包屑的存在揭示了整个网站的结构，用户也了解了网站的其他部分。·你应该浏览更多吗？面包屑揭示了更多值得探索的内容，鼓励用户浏览更多。另一方面，面包屑的出现降低了网站的跳出率。从可用性的角度来看，面包屑减少了用户跳转到高级页面的操作数量，避免了用户使用浏览器返回按钮和搜索导航以寻找上级页面的复杂交互。占用空间小面包屑的设计元素在页面上占用的空间相当小。它基本上以链接文本的形式存在，通常只有一行。面包屑不会给用户带来麻烦。这个小的设计元素占用的空间很小，但它给用户带来的便利远远大于可能的问题和麻烦。什么时候用面包屑？是否在网站上使用面包屑主要取决于网站的结构。看看你的网站地图或整体结构图，分析使用面包屑是否可以改善用户在网站内部的不同类别和目录下的导航：·当你的网站有一个清晰的分类和组织的多层线性结构时，你应该使用面包屑。比如一个产品种类繁多的电商网站，面包屑就挺有用的。·当网站没有逻辑清晰的层次结构时，不要使用面包屑。面包屑的类型是基于网站逻辑结构的导航组件，可以根据位置、路径或属性来显示。基于位置的面包屑设计通常能很好地反映网站的结构特征。它们直接向访问者展示网站的层次结构，包括多个层次（通常超过2层）。这种层次的显示面包屑对从外部来源(如搜索引擎)进入网站的用户有明显的指导作用。在以下BestBuy页面中，面包屑显示了产品所在页面的层次关系。基于路径的面包屑通常被称为“历史足迹”，它不是网站结构，而是访问者到达特定页面的完整路径。这种面包屑路径不是静态的，而是动态的。基于路径的面包屑有时会帮助用户，但有时会让用户感到困惑——有些用户浏览网站浏览路径太不受约束，基于路径的面包屑会帮助他们记录，不需要看历史，也不需要使用浏览器返回按钮返回到特定的位置。此外，这种基于路径的面包屑对一次到达特定位置的用户毫无用处。以下是基于路径面包屑导航的案例和原理描述：基于属性的面包屑在电子商务网站上很常见，产品往往根据类别和属性组织到不同的子目录，基于属性的分类使用户更容易理解产品和产品之间的关系，提供更多不同的浏览路径。就像TMLewin的页面一样，面包屑显示了特定页面对应的产品，产品是根据一定的属性组织的:层次还是历史？根据实际经验，面包屑在大多数情况下仍然适合展示层级机构，而不是浏览历史。因此，基于位置和属性的面包屑被广泛使用，基于路径的面包屑相对罕见。当你开始设计面包屑导航时，你应该记住以下几点：1、不要用面包屑代替网页的主导航系统。面包屑只是辅助导航系统，不能代替主导航系统。请记住，它是一个快速定位链接系统，仅用于方便用户。2、不要将当前页面链接添加到面包屑中。面包屑的最后一个层次是当前页面，这个项目不应该添加到面包屑中，因为它只起到显示定位的作用，毫无意义。3、在面包屑中使用分隔符来分隔不同层次最常见的是大于符号(>)，常用的方法是“父类别”>子类别”。当然，使用分隔符并不局限于这一种，而是使用箭头(→)还有书名的使用(»)是的，也有斜杠(//)。使用哪种分隔符通常取决于设计师的整体风格和偏好。4、在选择合适的尺寸和间距时，应仔细考虑尺寸和间隔。不同面包屑级别之间应有足够的间距，以确保用户能够识别。当然，你不希望面包屑占据页面上太多的空间。如果面包屑比顶部导航大，看起来会很尴尬。5、不要让它成为视觉焦点。面包屑本身就是辅助导航。如果使用太花哨的字体和醒目的颜色，会让它看起来太抢眼。它不应该是用户在浏览过程中的视觉焦点。下面的面包屑设计还不错，但是太醒目了，甚至比顶部导航还能吸引用户的注意力。谷歌的面包屑设计并不引人注目，但用户仍然可以很好地使用它。6、不要在移动页面上使用面包屑。如果你认为你想在移动页面上使用面包屑，这意味着你的移动网页设计有问题：网站可能太复杂（嵌套级别太深），这不符合移动终端的使用场景。为了解决这个问题，你应该试着简化整个系统，以确保面包屑不会出现在手机上。结论面包屑让用户更容易浏览整个网站，追溯到上级页面，寻找相关产品，对整个网站结构有意义。它的功能并不复杂，增加易用性是它的主要功能，所以不要把面包屑复杂化。