NNGroup 交互模式·导航与搜索(25 个模式 · 全局导航/本地导航/面包屑/汉堡菜单/上下文菜单/菜单 17 条/标签页/手风琴/页脚/粘性头/目录/页内链接/空间记忆/站内搜索/SERP/筛选/分页/树测试)
Nielsen Norman Group 导航与搜索交互模式知识库,25 篇精华按主题聚类成 7 块,读者=产品经理,术语行内解释,决策导向(何时用/怎么选/反例)。①全局与定向导航:面包屑 Breadcrumbs(11 条指南·补充不替代·显层级非会话路径·末项不可点·扁平站点不用·桌面全路径移动端只留父级)/本地导航 Local Navigation(同级+子级·倒 L 布局·超 2-3 层切面包屑·别压过全局导航)/空间记忆 Spatial Memory(稳定布局+反复交互·街区级 vs 门牌号级·别用自适应界面·宽浅层级·迷你地图/缩略图概览)。②菜单形态:汉堡菜单 Hamburger(2015 旧判定降可用性→如今已被识别但仍多一步成本·标准三横线+左上角+加 Menu 标签·11 条)/上下文菜单 Contextual Menus(kebab 竖三点/meatball 横三点·只放次要非关键操作·贴近内容·≤10-12 项·禁齿轮禁汉堡触发·点前看不出内容用 tooltip)/放大镜图标 Magnifying-Glass(移动省空间桌面降可发现性·桌面保留文本框 ≥27 字符·右上角·回车+点击都能提交)/菜单设计清单 17 条 UX Guidelines(大屏显导航·当前位置·点击优于悬停·避免多级级联用巨型菜单·长页固定菜单)。③页内内容组织:标签页 Tabs(导航标签 vs 页内标签别混用·选中态清晰·标签列表在面板上方·1-2 词·按频率排默认首位)/手风琴 Accordions(渐进式披露·减杂乱缩页长·碎片化访问+可发现性差·FAQ/分步流程/移动端长页适用·需全看/短内容/深层级/连续阅读不用)/Tabs vs Accordions 抉择(少而长用 Tabs·多而短用 Accordions·都不适合跨块对比)/页内链接 In-Page Links(锚链接/跳转链接·长页才值·标'目录/本页内容'·折叠面板/标签页替代对比表)/目录 ToC(决策树:主体 vs 侧栏·粘性 vs 非粘性·垂直/水平/多列·明确标签·链接标签与章节标题一致·含返回顶部·提升 SERP 子链接)。④全局元素:页脚 Footers 101(7 类组件:工具链接/门垫导航/次要任务/网站地图/见证奖项/子品牌/用户互动+无限滚动迷你页脚+上下文页脚·层级 ≤2 级·别折叠手风琴页脚)/粘性头 Sticky Headers(完全粘性 vs 部分粘性·内容占比最大化 16pt/1cm·不透明高对比·动画 300-400ms 避免 stalker menu·评估是否真需要)/移动端子导航 Mobile Subnavigation(折叠面板<6 子类/章节菜单 6-15/分类着陆页>15·顺序菜单易迷失+物理返回键陷阱)。⑤搜索行为:关键词探寻 Keyword Foraging(搜索前的搜索·不知道术语名·分面系统教术语·别造品牌新词 SmartClean)/搜索引擎塑造注视 Google vs 百度(SERP 演变·百度右侧栏低相关致横幅盲视·改心智模型需~1 年)。⑥搜索结果与功能:复杂 SERP 弹球模式 Pinball Pattern(从线性扫描转跳跃·首位点击率 51%→28%·前三 59%·第六 36%·研究任务 20% 折叠下点击·二页仅 2%)/三大 SERP 功能 Featured Snippets+People Also Ask+Knowledge Panels(路标/吸睛/改查询/给快答·站内搜索可借鉴·特色摘要 74% 关注率)/富搜索建议 Enriched Suggestions(60 次仅用 7 次·与搜索心态错位·加载慢·横幅盲视·误为促销·保留纯文本自动补全)/企业内部搜索 Intranet-Search(高期望低信任·显式搜索框非图标·单一搜索框·分列结果·日期元数据·固定结果·分页非无限滚动·设计+流程并重)。⑦筛选与评估:筛选类别与值 Filter Categories(类别+值两组件·合适/可预测/无行话/按优先级·分层过滤·术语加工具提示)/分页替代 Alternatives to Pagination(无限加载 vs 显示更多·<40 项才用无限·显总数/已加载/剩余·记住位置 bounce back·亚马逊海量仍用传统分页)/树测试 Tree Testing(无主持任务测 IA 标签·成功率 <40 差/61-80 良/>90 优·直接性·首次点击·多重分类 Polyhierarchy·vs 卡片分类)。