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

image.png

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