术语 · 界面图鉴
面包屑
Breadcrumb
一行层级路径,显示你在站点的第几层,每一层都能点回去。
这一块由什么组成
名字来自《糖果屋》:一路撒面包屑,随时找得到回去的路。它显示你在站点层级里的位置,每一层都能点回去。组成:
层级链接Trail
从首页到当前的每一层,都可以点。
分隔符Separator
斜杠或小箭头,把层级隔开。
当前页Current
最后一项是你所在的页面,通常不可点、颜色更深。
同一个零件,几种摆法
首页 / 分类 / 当前,最经典。
用 › 分隔,方向感更强。
层级太深时中段收成 …。
这个文档站里,哪一块是面包屑?
四个都在帮你找路,分工完全不同。
点一块试试,看看它叫什么
导航栏Navbar
不是它。顶部那条管全站大板块,是导航栏。
侧边栏Sidebar
不是它。左侧竖排的目录是侧边栏,管板块内部的层级。
面包屑Breadcrumb
就是它!一行层级路径,标记你在第几层,每层可点回去。
分页Pagination
不是它。底部的页码是分页,翻的是同层内容,不改变层级。
什么时候该上它
适合
- 层级三层以上的站点
- 用户常从搜索、分享空降深层页
- 需要快速跳回上层时
先别用
- 只有一两层的小站
- 流程式向导——用步骤条
- 首页本身——它没有上层
想一想
什么样的站点最需要面包屑?
对。用户常从搜索直接空降到第四层——面包屑让他知道自己在哪、怎么上去。
一两层的小站加面包屑只是仪式感,「首页 / 关于」帮不上任何忙。
落地页只有一层,没有「层级位置」可标。
让 AI 改它时,这样说
面包屑反映层级、不反映历史——让 AI 按站点结构生成,别按浏览记录。
详情页加面包屑:首页 / 分类 / 当前文章
面包屑分隔符换成小箭头
层级太深时中间折叠成省略号
面包屑最后一项不可点,颜色加深
最容易踩的坑
面包屑显示的是「你在哪」,不是「你来时的路」——它不是浏览器的后退按钮。