交互设计模式：导航-面包屑

image.png

问题场景

在层级结构中，用户需要知道他所处的位置，以及能够返回上一级

解决方法

使用面包屑，展示出各个级别（从顶级到当前级），并允许对每一级进行点击跳转

适用场景

• 网站有多层级结构（不少于3级）；
• 中型到大型的网站，如电商、产品目录、入口网站（如网址导航）、企业网站；
• 配合主导航，主导航允许用户跨越不同分支；
• 需要一次性回退多个层级，而非逐级回退；
• 用户不熟悉网站的层级；

设计要点

• 路径显示当前页面所在的层级结构；每一层级使用一个标签，做成可点击的链接；
• 当面页面的标签要突出标注，并且不可点击（以便让用户知道所处的位置）；
• 不要用当前页的标签，做为本页面的唯一标题，需要单独再放置一个标题；
• 层级间使用/或>进行区隔；
• 如果路径很长，中间可以使用省略号...隐藏部分内容；
• 路径单独放置在一块区域中，占据整个内容页面的宽度
• 放置在靠近内容的区域，建议在内容之上，内容标题之下；

利弊分析

• 面包屑可以告诉用户所在的位置，并展示出网站的层级，方便用户认知；
• 占据空间小，能够留更多空间给内容；
• 使用链接式标签，使用户可以层级间跳跃浏览；
• 面包屑不做为主导航，需要配合主导航使用；
• 用户测试显示面包屑很少出现麻烦，总会有部分用户使用，因此可以说有益无害；

创意改进

面包屑结合飞出菜单，用来展示标签下的次级导航；