魔扣科技

面包屑是我们熟知的一种导航工具，它们往往出现在页面内容的上方，告知你所处的位置。它小巧，方便，常见，且简单。可是即便是这样的UI控件，在设计上同样是有讲究的，今天咱们就来聊聊面包屑吧~

作为一种辅助导航系统，面包屑能够帮助用户清晰的定位到自己所在网站的位置。这个词源自于童话中跟着面包屑回到自己家的孩子，而网页中的面包屑也是帮助用户找到自己位置的UI控件。

面包屑通过路径展示告知用户他们所处的位置，而今天的这篇文章将会探讨一个可用的网页面包屑应当如何设计，通过最佳实践展示面包屑的正确用法。

面包屑导航提供可用性

作为一种视觉指引，面包屑为用户揭示出网页的层次结构，也正是因此，面包屑成为了用户了解网站背景信息的重要途径，帮助用户了解下列问题的答案：

·我在哪里?根据整个网站的层次，面包屑能让用户知道他们所处的位置。 ·我还能去哪里?面包屑提升了整个网站的可查找性，面包屑的存在揭示了整个网站的结构，用户也随之明白网站还有哪些其他的部分。 ·是否应当浏览更多?面包屑揭示出网站有更多值得探索的内容，鼓励用户浏览更多。反过来，面包屑的出现降低了网站的跳出率。

减少操作次数

从可用性的角度上来看，面包屑减少了用户跳转到高层级页面的操作数，这样避免了用户使用浏览器的返回按钮和翻找导航寻找上级页面的复杂交互。

占用空间小

面包屑这种设计元素在页面上占用的空间相当小，它基本都是以带链接的文本的形式存在的，并且通常只有一行。

面包屑不会给用户带来困扰

这个小小的设计元素占据的空间不大，但是给用户带来的便捷远远大于可能带来的问题和困扰。

什么时候使用面包屑?

是否要在网站中使用面包屑，主要取决于网站的结构。看看你的网站地图或者整体的结构图，分析使用面包屑能否提高用户在网站内部不同类别、目录下导航是否方便：

当你的网站内拥有分类明晰、组织明确的多层次线性结构的时候，你应当使用面包屑。比如一个拥有种类繁多产品的电子商务网站，面包屑就相当有用。 ·当网站不具备逻辑清晰的层次结构的时候，就不要使用面包屑。

女汉子

魔扣源码论坛谢谢朋友的精彩点评！谢谢您一直以来的支持和鼓励！您的每一次点评，哪怕是一个小图、几句短语，都让我激动万分，温暖全身！感谢网络为我们搭建了交流平台，架起一座交友金桥！让我们相识网络、从陌生到熟悉、到相识相知，成为好朋友。愿我们的友谊今世永存！

三A娱乐

看帖要回，回帖才健康，在踩踩，楼主辛苦了！

时间都去哪了

宝贝儿，只要你幸福，我就幸福，魔扣源码论坛不管你在谁身边。

hsqnslr

我也顶起出售广告位

JTzgaKja

太漂亮的源码了，非常感谢魔扣源码论坛

rfffshh

我相信，爱可以排除万难。只是，万难之后，又有万难，这是我更相信的。',

0uppxlm

垃圾内容，路过为证。