image.png
问题场景
在层级结构中，用户需要知道他所处的位置，以及能够返回上一级
解决方法
使用面包屑，展示出各个级别（从顶级到当前级），并允许对每一级进行点击跳转
适用场景
- 网站有多层级结构（不少于3级）；
- 中型到大型的网站，如电商、产品目录、入口网站（如网址导航）、企业网站；
- 配合主导航，主导航允许用户跨越不同分支；
- 需要一次性回退多个层级，而非逐级回退；
- 用户不熟悉网站的层级；
设计要点
- 路径显示当前页面所在的层级结构；每一层级使用一个标签，做成可点击的链接；
- 当面页面的标签要突出标注，并且不可点击（以便让用户知道所处的位置）；
- 不要用当前页的标签，做为本页面的唯一标题，需要单独再放置一个标题；
- 层级间使用/或>进行区隔；
- 如果路径很长，中间可以使用省略号...隐藏部分内容；
- 路径单独放置在一块区域中，占据整个内容页面的宽度
- 放置在靠近内容的区域，建议在内容之上，内容标题之下；
利弊分析
- 面包屑可以告诉用户所在的位置，并展示出网站的层级，方便用户认知；
- 占据空间小，能够留更多空间给内容；
- 使用链接式标签，使用户可以层级间跳跃浏览；
- 面包屑不做为主导航，需要配合主导航使用；
- 用户测试显示面包屑很少出现麻烦，总会有部分用户使用，因此可以说有益无害；
创意改进
面包屑结合飞出菜单，用来展示标签下的次级导航；
