面包屑导航 Breadcrumbs Trail - 内容型网站的最强辅助导航

作者:jcmp      发布时间:2021-04-15      浏览量:0
最近开始使用 Notion 笔记应用做一

最近开始使用 Notion 笔记应用做一些个人事务管理,在用手机版时忽然间注意到了面包屑导航——一个广泛存在于 Web 站点设计中,却似乎已在移动环境中渐渐沉寂的交互组件。

面包屑导航是以主页为源头的一系列寻路链接序列,一般使用「>」或「/」连接,应用在树状层级结构的站点中。用户可以通过面包屑快速定位自己在系统中所处的位置,并在层级间便捷跳转。

面包屑与导航组件

在站点中,存在多种导航交互模式,更加引人注目的是选项卡导航和抽屉式导航。

相比于其他导航模式,面包屑显得更与众不同:

1. 面包屑导航的面积更小,目标面积占比更高,根据菲兹定律,在使用面包屑导航时的时间成本更小,更加方便便捷。

2. 轻量但一目了然。人们在认知面包屑导航时没有任何困难,以至于在满足用户浏览同类信息的非目的性需求时更加方便。

3. 占据了更少的资源。无论是开发还是屏幕内容占据比,它都几乎「没有成本」。

应该使用面包屑吗?

为了查看现在面包屑导航的使用情况,我们分别查看了中文环境下国内的4个网站与国外的4个代表性服务提供商网站。

查看了两者的网站结构发现,国内的几家网站二级分类页面并不实际存在,只存在于逻辑分类中。此时建议不使用面包屑导航,不需要为了使用而忽视可能的体验细节。

面包屑设计实践指南

著名交互设计组织 NN/g 从1995年开始推荐面包屑导航的使用。经过二十五年的发展,面包屑组件已经形成了成熟的设计原则。当然,在使用面包屑前,保证站点已经被整理岀清晰的层级结构。

Web中的面包屑

MWeb 中的面包屑

控制面包屑的面积:

相比于其他类型的跳转组件使用情况(40%的内嵌式导航,31%浏览器后退按钮,22%的顶部选项卡导航),面包屑导航的使用率只有6%。但如果你的网站具有复杂但清晰的结构,面包屑导航或许是个不错的小工具。

参考链接