Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

层级导航结构

Hierarchical Navigation Structure

加入比较 +

把内容组织成由父子分区构成的一棵树,用户从顶层类别逐级下钻到子类和具体条目,并通过面包屑或返回控件回到上层;NN/g 指出面包屑展示的是站点的层级结构而非浏览历史,并说明层级在宽与深之间需要权衡——扁平结构让内容更易被发现,过深的结构则要求点击太多层、每层的类别也更笼统。

示意图 · 编辑插画,尚无可操作示例
一个虚构的 FIELDNOTES 移动端界面:顶部标题栏左侧有返回箭头,下方是三级面包屑,末级以陶土色高亮;再往下是一列带右向箭头的子分区行,整体为奶油、陶土、鼠尾草绿的扁平配色。
一个虚构的 FIELDNOTES 移动端界面:顶部标题栏左侧有返回箭头,下方是三级面包屑,末级以陶土色高亮;再往下是一列带右向箭头的子分区行,整体为奶油、陶土、鼠尾草绿的扁平配色。

识别特征

  • 顶层是少量彼此互斥的类别,每一层的项目打开下一层,直到具体条目
  • 每一层都显示当前位置及其祖先路径:面包屑,或带上级标题的返回控件
  • 同一层的兄弟项目共用一致的标签体系与样式,层级越深页面标题越具体

概念边界

层级导航结构是信息架构层面的组织方式,指一棵父子分区树以及沿树上下移动的导航关系,而不是某个具体的界面部件。侧栏布局是它的一种页面呈现(侧栏分组常映射树的前一两层),面包屑则是它的位置指示器。它不同于轮辐式结构(从一个中心页出发、每次回到中心再去别处)和线性流程(按固定顺序前进);这两者尚无独立词条,此处仅作边界说明。它可以与渐进披露组合——子层按需展开而不是一次全部摊开。主从布局能承载只有两层的树,但主从强调选择驱动详情,而非逐级下钻。

什么时候考虑它

  • 内容数量大,能按稳定的分类体系归入互斥类别,且用户可以预测某个项目属于哪一类
  • 用户以浏览为主而非精确查找,需要在逐层缩小范围时保持方向感
  • 移动端等空间受限的场景,无法同时摊开所有分区,只能一次展示一层

什么时候慎用

  • 层级只有一两层,或内容本身是顺序流程,面包屑与逐级下钻只会增加步骤
  • 大量条目同时属于多个类别,硬塞进单一父节点会让用户在顶层反复猜测
  • 用户已经知道目标的名称,直接搜索或扁平列表更快,逐层点击只是障碍

取舍

每层选择少、结构可预测、位置感清晰;但层数越深,到达目标的点击越多、上层类别越笼统,而且兄弟分区之间的横向移动需要额外的捷径或路径导航,否则用户只能反复回到根节点。

条件规则 · 编辑建议

当用户位于树中除根以外的任何一层必须显示当前位置及其路径——桌面端用面包屑(当前页为最后一项、不做链接),移动端至少用带上级标题的返回控件;不要只靠浏览器后退。
当规划层级的宽度与深度建议让深度保持足够浅,使每一层的类别彼此互斥、标签具体可预测;宁可顶层多几个明确的类别,也不要为了减少选项而把内容藏到笼统的多层之下。
当用户需要在同一层的兄弟分区之间移动建议提供横向捷径(可点击的面包屑父级、兄弟切换或侧栏),不要强迫用户先回到根节点再重新下钻。

相关词条

侧栏布局 ↗具体体现 · 桌面端需要把树的前一两层持久地摊开供随时切换

侧栏是层级结构最常见的页面呈现之一,分组标题对应父类、组内行对应子类;但同一棵树也可以用逐页下钻或顶部菜单来呈现。

渐进披露 ↗可以配合 · 树较深或某些分支很少被访问

把下层分支折叠起来按需展开,可以在保持结构完整的同时减少每次看到的选项数量;但折叠后仍要有可识别的入口。

主从布局 ↗可以配合 · 树的最后两层是"列表加详情"的关系

层级的叶子层常用主从布局承载:左列是兄弟条目,右侧是所选条目的内容,用户不必回到上层就能在兄弟之间切换。

搜索与筛选 ↗条件替代 · 用户已知目标名称或属性,或者条目难以归入互斥类别

搜索与筛选绕过逐级下钻直接到达条目;NN/g 也主张结构与搜索应相互整合,而非二选一。

识别优于回忆 ↗提供解释 · 为每一层设计路径指示与标签

面包屑和带上级标题的返回控件把"我在哪里、从哪里来"变成可识别的信息,而不是要求用户回忆点击过的路径。

来源与支持范围

Nielsen Norman Group · Breadcrumbs: 11 Design Guidelines for Desktop and Mobile ↗

说明面包屑用于展示站点的层级结构(当前页及其父级、祖父级直到首页),而不是会话中的浏览历史;面包屑只是对主导航的补充而非替代;应把当前页作为面包屑的最后一项但不做成链接;对只有一两层的扁平结构或线性结构的站点,面包屑没有必要也没有用处。

检索日期:2026-09-15 · 存档于 2026-09-16
Nielsen Norman Group · Flat vs. Deep Website Hierarchies ↗

把扁平层级描述为"宽而浅"、深层级描述为"高而窄",指出扁平结构的内容不会被多层中间页面掩埋、更易被发现,而深层级每层类别少、标签更笼统也更容易混淆,让用户逐层点击通常效果不好;同时强调没有唯一正确答案,走向任一极端都会适得其反,扁平结构适合明确可辨的类别,深层站点应提供直达下层的捷径并使用面包屑,并通过可用性测试、分析与搜索日志观察用户来决定结构。

检索日期:2026-09-15 · 存档于 2026-09-16
Nielsen Norman Group · Top 10 Information Architecture Mistakes ↗

列出的信息架构错误包括:没有组织原则的"一片沼泽"式无结构;用大量弱类别并把条目重复放在多处的极端多重层级,使用户在顶层类别上耗费过多时间且更难前进;缺少类别落地页导致用户误解站点范围;看不见的导航几乎等同于没有导航;以及选项忽隐忽现的不一致导航让用户失去控制感;并主张结构与导航必须相互支撑并与搜索整合。

检索日期:2026-09-15 · 存档于 2026-09-16

定义参考以上来源;数字界面示例、选择建议、条件关系及配方由本样例编辑,尚未经用户研究验证。

类型扩展与实现说明

尚无可操作的样本;插图为编辑示意。落地到产品时仍须验证:每一层是否都能看到当前位置与路径、面包屑当前项是否不可点击且带 aria-current、返回控件是否有文字名称、类别是否真正互斥(用卡片分类或树测试检验)、以及兄弟分区之间是否有不经根节点的横向通路。

{
  "states": [
    "root",
    "branch",
    "leaf"
  ],
  "a11y": [
    "面包屑放在带名称的 navigation 地标内,当前项以 aria-current=\"page\" 标记且不是链接",
    "返回控件有指向上级的文字名称,可键盘操作,不只是一个无名图标",
    "下钻到新一层时页面标题随之更新,供屏幕阅读器播报当前位置"
  ],
  "motion": "下钻与返回可用方向一致的短促过渡表达层级方向,并尊重减少动态偏好"
}

打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段,并附上来源、存档与编辑声明。