这批笔记回答一个核心问题:用户怎么在你的产品里"找到东西"——靠导航走过去,还是靠搜索查出来。两条腿:
(1) 导航 Navigation = 用户顺着你预设的结构(菜单、面包屑、标签页、页脚)一步步走到目标。好导航像逛熟悉的超市:不用想就知道往哪走。
(2) 搜索 Search = 用户绕过结构,直接打字查。好搜索像有个店员秒答你"在 3 号货架"。
全文 7 块,从"全局怎么定位"到"局部怎么组织内容"再到"搜索怎么做",最后是"怎么评估导航好不好(树测试)": ①全局导航与空间定向 → ②菜单的几种形态(汉堡/上下文/搜索图标/菜单清单)→ ③页内内容组织(标签页·手风琴·页内链接·目录)→ ④全局结构元素(页脚·粘性头·移动子导航)→ ⑤用户的搜索行为(关键词探寻·搜索引擎如何塑造注视)→ ⑥搜索结果页与功能(SERP)→ ⑦筛选、分页与导航评估(树测试)。
贯穿全篇的两个底层概念,先记住:信息架构 IA(Information Architecture)= 你把内容分了多少层、每层叫什么名字的那套骨架;交互成本(Interaction Cost)= 用户为达目的要付出的点击/滚动/思考/等待,所有"好导航"本质都是在压低它。
一、全局导航与空间定向:你在哪、能去哪
这一块讲"用户在网站这张大地图上怎么知道自己在哪、周围有什么"。三个工具各管一段:全局导航(顶层、永远在,不在本批笔记重点)、本地导航(看周边)、面包屑(看来路);空间记忆是它们能起作用的认知地基。
1.1 本地导航 Local Navigation:看清"我这一片"
心法:本地导航是相对当前页的上下文导航,显示同级页面(同一分类下的兄弟页)+ 子级页面,等于地图上的"你在这里"+ 周边街区。它和全局导航的关系像"伦敦全城图 vs 布里克斯顿社区图"——全局图帮你从大英博物馆走到白金汉宫(跨大区),社区图帮你找附近吃饭的地方(看周边)。
Why:深层页面内容很具体,用户从搜索引擎一头扎进来时容易"不知身在何处";本地导航既给定位感,又给低成本横向探索的入口(不用退回顶层菜单)。
| 维度 | 要点 |
|---|---|
| 何时用 | ①用户爱在同分类下逛多页(电商比货、大学比专业)②要整合/比较多页信息(对比产品规格)③用户常从内页进站 |
| 何时不用 | IA 太浅页面太少;IA 太深导航占屏过多(改用面包屑或上下文链接) |
| 布局 | 水平(全局导航下方,适合窄顶级分类)/ 垂直(左侧,与全局导航组成倒"L",适合深 IA);别过度缩进 |
| 显示深度 | 浅层全显当前分类+子类;超 2-3 层切面包屑(Prudential:三级显完整本地导航,四级切面包屑) |
| 视觉层级 | 易发现但别比全局导航更显眼(Generac 旧版本地导航太抢眼,用户忽略全局导航);The New School 靠颜色背景对比平衡两者 |
| 交互成本 | 始终可见、无需悬停;长会话深挖时可做粘性(RISD 给每个学位课程粘性本地导航) |
反例:把本地导航做得比全局导航还抢眼 → 用户误把局部当全局,迷失分类。
1.2 面包屑 Breadcrumbs:看清"我的来路"(11 条指南)
心法:面包屑是一串链接,表示当前页及其祖先页面的层级路径(首页 > 探索 > 行程 > 文化沉浸),通常在全局导航下方、用 ">" 分隔。它反映的是页面在 IA 里的层级位置,不是用户的浏览历史。
Why:用户从搜索引擎直接落到深层页时,面包屑一眼告诉他"这页属于哪个大类",并给"往上一层看更宽内容"的快捷入口。
| # | 桌面端指南 | 关键点 |
|---|---|---|
| 1 | 补充而非替代其他导航 | 别让面包屑兼任本地导航(Travelsouthdakota 把父级做成同级下拉,混淆两种导航目的) |
| 2 | 显层级结构,非会话路径 | 不是浏览器后退按钮;会话路径又长又重复 |
| 3 | 多父级页面选单一"规范路径" | 别同时显示多条路径 |
| 4 | 当前页作末项但不可点,且视觉区分 | British Red Cross 链接与非链接没区分,困惑 |
| 5 | 只含实际页面,不含逻辑分类 | Newegg"商业网络"无独立页 → 不进面包屑 |
| 6 | 扁平/线性站点不用 | MIT 层级浅、NPR 线性专题,面包屑无价值 |
| 7 | 路径从首页开始 | 但别在全局导航和面包屑里重复首页链接,二选一(俄勒冈州政府省略面包屑首页 OK,因全局导航有) |
| # | 移动端指南 | 关键点 |
|---|---|---|
| 1 | 避免多行换行 | REI 移动端面包屑占太多空间,把产品标题挤到折叠线下 |
| 2 | 别过小过密 | 触控目标 ≥ 1cm × 1cm |
| 3 | 考虑缩短路径 | 移动端只留直接父级链接即可(Bestbuy 移动端只显父分类,桌面端显完整路径) |
1.3 空间记忆 Spatial Memory:为什么"位置稳定"这么重要
心法:空间记忆 = 通过反复交互记住"东西在哪"的能力。位置稳定 + 反复使用,用户就能把"找按钮"这件事自动化,省下每次的视觉搜索成本。
Why:研究发现人的空间记忆基于边界和地标(像在地图上靠塞纳河定位巴黎),且大多是模糊的——分两级:街区级记忆(记得大概在哪个区)对多数对象就够,只有高频对象才升到门牌号级记忆(精确位置)。能力还因人而异。
| 设计建议 | 做法 |
|---|---|
| 避免自适应界面(Adaptive UI) | 别按用户行为动态挪元素;要做"常用项/最近项"就额外加一块、保留原位(Word 字体菜单顶部"最近使用字体"+ 下方完整列表里原位也保留) |
| 清晰视觉+文字线索 | 图标配文字标签;颜色高亮区分相似元素但别造视觉噪声 |
| 宽而浅的层级 | 一屏看到更多选项,加快定位、少点击展开 |
| 信息空间概览 | 迷你地图(代码编辑器 Atom)、缩略图视图(Preview 文档)、概览↔细节切换用缩放动画 |
| 人工地标 | 已访问链接变色、书页折角式标记,帮用户回溯 |
反例:macOS Finder 调整窗口大小时自动重排"应用程序"图标 → 空间位置没保留,用户得重新找。
二、菜单的几种形态:汉堡 / 上下文 / 搜索图标 / 17 条总清单
2.1 汉堡菜单 Hamburger Menu:从"降可用性"到"已被识别但仍有代价"
心法:三横线图标 ≡。早(2015-2016)研究判定:隐藏导航 → 点击少、任务成功率降、耗时增、满意度降,桌面端尤其糟。如今(新研究):多数用户能正确识别它是"主菜单",尤其当它在左上角 + 经典三横线时——但这只证明"认得",没测任务完成率/时间,所以"隐藏导航多一步成本"的老问题没被推翻。
Why:移动优先普及后,用户对图标的心智模型成熟了;但"熟悉"≠"无代价",隐藏始终比常显多一步。
| 设计建议(11 条精选) | 要点 |
|---|---|
| 标准三横线 + 左上角 | 别创新样式、别放别处 |
| 避免边框装饰 | Toms 加边框被误认"文档"图标 |
| 加 "Menu" 文字标签 | 给新用户/非常规布局兜底 |
| 防视觉混淆 | 其他三横线类图标别放左上角(Apple Notes 列表视图图标被误当导航;YouTube 筛选器图标被误当分类列表) |
| 配合其他导航 | 页内链接、页脚导航、搜索一起上 |
反例:大屏桌面端用汉堡藏导航(Metropolitan Opera、Ideo 全屏菜单)——明明有空间却隐藏,适得其反。判定:空间受限的小屏可用,大屏别用。
2.2 上下文菜单 Contextual Menus:贴着对象的"右键小菜单"
心法:上下文菜单 = 按需弹出、只含与"某个对象/区域"相关的一小组操作(像 ChatGPT 每条对话右侧三个点里的 Archive/Report/Delete)。入口图标两种:kebab 竖三点 ⋮ / meatball 横三点 ⋯,多数用户理解为"更多相关操作"。触发方式:桌面右键/Ctrl+点击/双指点;移动长按/滑动/轻触。
Why:把"只在此处成立"的操作收进按需菜单,降界面杂乱和认知负担;但天生有不确定性——用户点开前看不出里面有什么。
| # | 设计原则(合并两篇精华) | 要点 / 反例 |
|---|---|---|
| 1 | 只放次要、非关键操作 | ❌ 客服窗把"End Chat"(关键动作)藏进菜单;❌ 把全局命令混进来 |
| 2 | 贴近它作用的内容 | 用户靠"空间距离"判断控件管谁;离太远关联模糊 |
| 3 | 主菜单里也要能访问同样命令 | 没发现上下文菜单的用户仍找得到(Photoshop 图层操作主菜单也有) |
| 4 | 足够尺寸+对比 | ❌ 过小/低对比/只 hover 才现;✅ Rippling 三点加边框更醒目 |
| 5 | 操作要彼此相关、围绕同一对象 | ✅ Slack 消息菜单只含针对这条消息的操作 |
| 6 | 表现与行为一致 | ❌ Google 竖三点在不同位置弹完全不同的东西(广告中心模态/侧边面板),用户失去信任 |
| 7 | 用 tooltip/标签减歧义 | ✅ Notion 悬停显"Style, Export, and more…";❌ tooltip 只写"Ellipses"无信息 |
| 8 | 图标用于"操作"非"内容展开" | ❌ Etsy 用三点展开完整评论;✅ Google 直接用文字"Read more" |
| 9 | 别为 1 个/极少操作建菜单 | ❌ 天气站点开菜单只有"Delete";✅ Pinterest 悬停直接显保存/分享 |
| 10 | 别用汉堡图标触发上下文操作 | 三横线 = 全局导航,不是对象级操作入口 |
| 11 | 键盘可达 + 屏幕阅读器可识别 | 不能只服务鼠标/触控 |
其余实操:按使用频率排序、显示快捷键(PowerPoint)、限制子菜单层级(Google Sheets 特殊粘贴子菜单难选)、≤10-12 项(Zillow 9 项)、不可用项置灰别隐藏(Evernote"全部笔记")。
2.3 放大镜图标 Magnifying-Glass:省空间还是降可发现性?
心法:🔍 几乎人人认得是"搜索"。但只放图标 = 搜索变得不易发现,因为图标占地小、不显眼,还逼用户多点一次才出输入框。
Why:移动端寸土寸金,只放图标合理;桌面端有空间,藏起来反而增加交互成本。
| 端 | 建议 |
|---|---|
| 桌面/平板 | 保留可见文本输入框(不只图标);放右上角(用户习惯);图标简洁、够大、高对比;回车 + 点击图标都能提交;固定框宽 ≥ 27 个字符 |
| 仅图标时 | 别被其他图标淹没;别孤立放置(违反格式塔接近性);点击后文本框出现在图标附近;单击即可输入(别要点两次) |
| 移动/小屏 | 可隐藏文本框、点图标才展开,但展开后自动激活光标;用平滑动画、别遮关键内容 |
旁注:大多数其他图标(三线菜单、地图标记)用户还没完全熟,桌面端仍建议配文字标签——放大镜是少数能脱标签的例外。
2.4 菜单设计清单:17 条 UX 指南(总纲)
心法:菜单是用户找内容、用功能的总枢纽。17 条分四组——让导航可见 / 显示当前位置 / 展示可用选项 / 易操作。
| 组 | # | 指南 | 反例 / 正例 |
|---|---|---|---|
| 可见 | 1 | 大屏显导航(别用汉堡藏) | ❌ Metropolitan Opera 桌面用汉堡 |
| 2 | 放用户期望的位置 | 主导航顶部(应用左侧)、辅助导航在主导航上、局部导航桌面左侧、页脚菜单底部 | |
| 3 | 链接文字高对比 | ❌ Gus Modern 透明导航条在轮播图上看不清 | |
| 4 | 大屏避免菜单覆盖全屏 | ❌ Ideo 全屏菜单致短暂迷失 | |
| 当前位置 | 5 | 明确标注当前页 | 加粗/下划线/变色;❌ Anthropic 不标位置;✅ Whirlpool 用面包屑 |
| 6 | 为相关内容提供局部导航 | ✅ NYC 规划部门左侧局部导航 | |
| 可用选项 | 7 | 标签清晰具体、用户熟悉 | 避免内部术语/抽象分类 |
| 8 | 提升可扫描性 | 左对齐垂直菜单、前置关键词 | |
| 9 | 大站用子菜单显多层 | ✅ Toyota 移动端序列菜单配图 | |
| 10 | 视觉线索助浏览长菜单 | 图标/颜色辅助,但保留文字标签保可访问性 | |
| 易操作 | 11 | 链接够大易点/触 | ❌ Teenage Engineering 链接过小过密 |
| 12 | 用箭头标示可展开子菜单 | ✅ Stanford 用插入符号 | |
| 13 | 点击激活优于悬停 | 悬停不适触屏、易误触 | |
| 14 | 避免多级级联,改巨型菜单/中转页 | ❌ R Studio 多级下拉难操作 | |
| 15 | 长页考虑固定菜单 | 减滚动成本,移动端尤甚 | |
| 16 | 优化物理便捷 | 常用项靠近触发区,减移动距离 | |
| 17 | 别过度创新花哨 | ❌ Adobe CXM 点式导航难懂 |
三、页内内容组织:标签页 · 手风琴 · 页内链接 · 目录
这一块讲"一个长页面里,怎么把一堆内容收纳得用户既看得到全貌、又不被淹没"。四个工具,核心抉择是"要不要默认隐藏内容"和"用户要不要同时看多块"。
3.1 标签页 Tabs:同一上下文里的平行分组
心法:标签页让用户在一组平行内容里一次只看一个面板(像文件柜分隔标签)。四要素:标签列表、标签文字、面板、选中指示器。
Why:隐藏未选内容 → 简化界面、提升导航效率;但代价是用户没法同时看多块。
关键区分:导航标签页 vs 页内标签页(别混用!)
| 特性 | 导航标签页 Navigation Tabs | 页内标签页 In-page Tabs |
|---|---|---|
| 内容 | 范围广、不相关、各自独立页 | 范围窄、相关联、内容相似 |
| 位置 | 视口顶/侧(移动端底) | 嵌在页面布局内 |
| 滚动 | 常固定 | 很少固定 |
| 用户期待 | 跳转新页、可能有加载延迟 | 留在当前页、即时切换 |
| 默认 | 默认选一个(可能有例外) | 必须选一个 |
反例:San Diego Wildlife / Behance 把两类标签混在一组里——多数标签留在当前页,唯独一个跳新页/新网站,用户预期被打破。
| 视觉最佳实践 | 内容最佳实践 |
|---|---|
| 选中态清晰(背景/下划线/字体;❌ CNN 加粗太细微) | 按使用频率排,高频放首位并默认选中(✅ SpotHero"即将到来"在首位) |
| 未选标签也要清晰可见(❌ MongoDB 低对比被当不可选) | 逻辑分组 |
| 标签连面板(邻近感;❌ Panera 配送标签与面板脱节) | 命名描述性强(❌ Variety"Legit"品牌词信息气味弱) |
| 避免多行标签列表(❌ 2000 年亚马逊堆叠标签) | 简洁 1-2 词、别全大写 |
| 标签列表放面板上方(❌ Okta 放右侧还自动轮播) | 让标签功能可发现(键盘导航/ARIA;✅ Sheets 拆分按钮) |
何时用:内容分组清晰、分组数少、重要性不均(默认标签得更多注意)、能简短命名、无需同时看多块。
3.2 手风琴 Accordions:可点标题 + 折叠面板
心法:手风琴 = 可点击标题 + 默认隐藏的面板,属于渐进式披露 Progressive Disclosure(让用户按需展开,给控制感)。
Why:减杂乱、缩页长、给页面概览(像目录)、提升可扫描、直达内容。但有代价。
| 优点 | 可用性问题 |
|---|---|
| 减页面杂乱(TurboTax 分段表单) | 信息访问碎片化:要看多块就得逐个展开;自动折叠妨碍对比(ACL) |
| 缩短页面(Logitech 产品页) | 增交互成本(USDA 把简短的口罩指南藏起来,该直接显示) |
| 给概览(Codecademy 课程大纲) | 降可发现性(标题不吸引就被忽略) |
| 提升扫描(USCIS 分步) | 可访问性:标题须作按钮、状态变化须被朗读 |
| 直达内容(Google"人们也问") | 打印不便:得逐个展开 |
| 何时用 | 何时别用 |
|---|---|
| 用户只需少量信息(Delta FAQ) | 用户需看所有内容(Northeastern 申请要求,该全显) |
| 逻辑性分步流程(Sephora 结账逐步展开) | 页面内容本就很少(显得空旷,误以为没价值) |
| 内容相互独立 | 内容层级深(嵌套手风琴易迷失,改垂直导航/标签页) |
| 长页 + 窗口小(尤其移动端) | 内容难总结成简洁标题(烂番茄推荐语) |
| 需连续阅读(长文章,该可滚动呈现,Vox) |
实施注意:标题准确反映内容、明确可点击性(加号/箭头)、提供"全部展开/折叠"、别藏关键信息。
3.3 Tabs vs Accordions:一张表选型
心法:两者都把大量内容压缩进小空间、减视觉杂乱,但取向不同。
| 维度 | Tabs 标签页 | Accordions 手风琴 |
|---|---|---|
| 排列 | 水平 | 垂直(展开把下方内容推走) |
| 内容长度容忍度 | 适合少而长的分块 | 适合多而短的分块 |
| 标题长度 | 须短(单行) | 可长、甚至多句短语 |
| 典型场景 | 平行主题(项目信息子主题) | FAQ、移动端长页 |
| 共同短板 | 都不适合跨块对比内容;都需逻辑清晰的分块 |
3.4 页内链接 In-Page Links:页面内的"电梯"
心法:页内链接(锚链接/跳转链接)= 点一下直接跳到本页某一节(像电梯直达某楼层),常装在页顶的目录里。
Why:跳过不感兴趣内容、减滚动;页顶目录还给用户页面全貌、帮建心智模型。但用户偶尔会误以为它跳别的页(Phone Arena 案例)——清楚标"目录"/"本页内容"可避免。
何时用:页面够长才值(短页加目录反而推高关键内容);先想能不能精简内容;多主题超长页考虑拆多页(单长页加载慢、移动端不友好);内容须能逻辑分块(连贯访谈类难切就别用)。
替代方案对比(目录 vs 折叠面板 vs 标签页):
| 页内链接 | 折叠面板 | 标签页 | |
|---|---|---|---|
| 功能 | 导航 | 内容结构化 | 内容结构化 |
| 页面长度 | 增加 | 减少 | 减少 |
| 默认隐藏内容 | 否 | 是 | 是 |
| 访问多块 | 是 | 是(若可多开) | 否 |
| 主要用途 | 目录 | 多短段格式化 | 平行内容 |
3.5 目录 Table of Contents:终极设计指南(决策树)
心法:目录 = 有序、可点的标题列表,对应页面各节,支持直接跳转。优势:页面概览、直达任意节、提升底部内容可见性、便于分享特定节(URL 片段标识符 #)、提升 SERP 可见性(搜索引擎能识别目录标题、生成子链接)。
Why:好目录要在"布局 + 样式"两个维度做选择,核心权衡是可发现性 vs 占空间 vs 不被误当广告/外链。
| 决策维度 | 选项与建议 |
|---|---|
| 位置:主体 vs 侧栏 | 主体最通用、移动端最佳;左侧栏适合多栏大屏、视觉分离好但移动端不可用;右侧栏少见、易被忽略(右栏盲视) |
| 粘性 vs 非粘性 | 粘性适合侧栏、滚动时随时掌握位置(Time 滚到哪节哪节加粗);非粘性适合主体、避免与全局导航冲突 |
| 顶部 vs 内容中部 | 页顶最佳(标题/概述下方);放正文中间降可发现性、易与其他链接混淆 |
| 样式:垂直/水平/多列 | 垂直最常见、适合长标题易扫描;水平省垂直空间但适合短标题、难扫描;多列适合长列表、省空间易扫描 |
最佳实践:用明确标签("目录"/"本页内容"/"ON THIS PAGE";❌ Robinhood"告诉我更多…"被误当外链)、链接标签与章节标题一致(❌ ready.gov 标签"提前准备"对不上章节"事件发生前")、标题简洁易扫描、不含外部链接(用户期望全是页内跳转)、别跳过折叠线上方内容、含"返回顶部"链接、全站样式一致(❌ FDA 相邻页 4 种样式)。反例:WebMD 把目录做成 chip 样式(那是筛选器/标签的惯用样式)、Wirecutter 链接不着色只 hover 才有下划线导致没人交互。
四、全局结构元素:页脚 · 粘性头 · 移动端子导航
4.1 页脚 Footers 101:被低估的"最后一站"(7 类组件)
心法:页脚是页面底部的"无害但有益"区域——成本低、不干扰主内容,却服务两类用户:没找到内容的人(给重新吸引的入口)和直奔页脚找特定信息的人(联系方式/公司信息/社媒)。
| # | 组件 | 适用场景 |
|---|---|---|
| 1 | 工具链接 Utility Links(地址/电话/隐私政策/条款) | 所有网站(即便顶部有也要在页脚重复) |
| 2 | 门垫导航 Doormat(重复顶部全局导航) | 长页面、或移动端底部无全局导航 |
| 3 | 次要任务 Secondary Tasks(招聘/媒体包/投资者) | 多用户群的多用途网站 |
| 4 | 网站地图 Site Map(顶级+下级分类) | 信息层级深的大站(CNN) |
| 5 | 用户见证/奖项 | 品牌知名度低的新公司/初创(适量,过多显不成熟) |
| 6 | 子品牌展示 | 多子品牌的大企业(Walmart 列 Hayneedle/Jet) |
| 7 | 用户互动(邮件订阅/社媒/嵌动态) | 所有网站可放社媒;视觉品牌可嵌动态(The Good Trade) |
两种变体:①无限滚动 → 传统页脚消失,改迷你页脚(LinkedIn 右侧栏)或把内容上提到全局导航(Barstool);②上下文页脚——按用户角色定制(Medium 给未登录者强调会员权益)。
常见坑 → 解法:信息层级过多 → 限 1-2 级、优先重要内容;链接名模糊("资源"/"帮助")→ 用明确术语("联系我们"/"客户支持");结构混乱 → 分组+视觉层级;隐藏/难读(小字体、折叠手风琴页脚,Reserved.com)→ 字体色彩清晰、别折叠页脚。
4.2 粘性头 Sticky Headers:滚动时一直跟着的头部(5 招)
心法:粘性头 = 滚动时固定在屏幕顶部的头部(导航/搜索)。两类:完全粘性(永远固定)、部分粘性(向上滚才出现、向下滚隐藏)。好处是导航随时可用,设计不当则烦人、挤内容。
| # | 优化方法 | 要点 |
|---|---|---|
| 1 | 最大化内容占比 Content-to-Chrome Ratio | 头部小而实用:点击区 ≥ 1cm×1cm、文字 ~16pt;别为放大 Logo 浪费高度(The New Yorker iPhone 上 13:1) |
| 2 | 足够对比度 | 用不透明背景、与内容高对比;避免半透明;展开菜单加分隔线 |
| 3 | 动画最小化、自然、快速 | 多数情况固定即可;必要动画简洁;避免 stalker menu(延迟夸张地跟随滚动);缩小速度跟手 |
| 4 | 考虑部分粘性 | 向上滚才滑入,动画 300-400ms、滑几像素后触发,别过敏感或延迟(CB2) |
| 5 | 评估是否真需要 | 做成本收益分析——若用户不常切类别/用头部元素,粘性头价值有限,别白占屏 |
4.3 移动端子导航 Mobile Subnavigation:小屏怎么放下层?
心法:移动端要把 IA 更低层级塞进小屏,有四种实现。设计目标:最小化交互成本 + 支持典型导航路径 + 提高可发现性(用户得能区分主导航和子导航)。
| 类型 | 怎么用 | 优 / 缺 |
|---|---|---|
| 折叠面板 Accordions(主菜单内) | 主分类折叠,点开显子分类 | ✅ 低交互成本、支持多路径;❌ 子类多(>6)主菜单过长(SBNation 超 3 屏高) |
| 顺序菜单 Sequential | 选主分类后菜单整体替换为子分类,靠菜单内"返回" | ✅ 适合多分类+小屏;❌ 易迷失方向;❌ 物理返回键陷阱(HIV.gov:按系统返回键跳回上一网页而非上层菜单);❌ 不支持频繁跨版块(Macys/Mayoclinic) |
| 章节菜单 Section Menus | 章节首页放独立菜单 | ✅ 容纳较多子类、适合久留单章节;❌ 跨章节低效;❌ 与主导航撞 UI 易混淆(Breastcancer.org 复用"菜单"按钮) |
| 分类着陆页 Category Landing | 着陆页列全部子分类链接当枢纽 | ✅ 适合子类极多/IA 极复杂(Stanford 招生 6+ 屏);❌ 每次切换都要返回着陆页重载、交互成本高 |
选型决策算法:每个主分类子类 < 6 → 折叠面板/子菜单;部分主分类 6-15 → 章节菜单;每个主分类 > 15 → 分类着陆页。
五、用户的搜索行为:关键词探寻 · 搜索引擎如何塑造注视
5.1 关键词探寻 Keyword Foraging:"搜索前的搜索"
心法:用户常常不知道要找的东西叫什么名字,于是先用模糊查询试探、找到对的术语,再去精确搜——这个前置过程就是关键词探寻。
Why:在电商里,"找不到的商品 = 卖不出的商品"。四种典型情境:①知道长相不知道名(尖头鞋 = "wingtip")②知道问题不知道工具名("格栅装饰条")③曾知道现忘了("机库 hangar" → 搜"飞机棚")④只熟一种语言的叫法("spring onions" vs 美式"scallions")。
怎么帮用户(5 条):①识别用户在该领域不熟(护肤/汽车零件/家装高发);②提供分面系统/筛选器逐步明确需求并借此教用户术语(Home Depot 筛选器);③图像搜索潜力(但多数站达不到 Google 水准);④查站内搜索日志、关注用户真实用词、支持模糊查询;⑤别造不必要的品牌新术语("自清洁"改叫"SmartClean Technology"会让人搜不到)——必须造就在站内补通俗替代词(兼顾 SEO + 教育用户)。
反例:研究能力低的用户去巴黎前搜"巴黎购物"想查货币 → 得到购物区推荐而非货币信息,探寻失败。
5.2 搜索引擎如何塑造注视:Google vs 百度
心法:SERP 从"简单有机结果列表"演变成"知识面板 + 图片包 + 视频包 + 用户还问"的复杂页,布局直接塑造用户的眼动模式。Google 倾向在主区放内容,百度倾向在右侧栏放推荐。
Why:百度右侧栏内容相关性低(广告/热门搜索),久而久之训练出用户对右栏的横幅盲视 Banner Blindness——即便偶尔放相关内容也被习惯性忽略(搜"上海博物馆"右栏有相关推荐但被上方广告遮,直接跳过)。Google 用知识面板(高相关:诊所评分/地址/评价)改写了用户对右栏的心智模型,反而吸引注意。
关键教训:①优化内容相关性(高相关的推广内容也能被接受,百度满足"颐和园玩什么"时也成功推广了自家百科/知道/地图);②多样化内容形式(文/图/视频);③避免低相关内容(会训练用户忽视该区域、加剧盲视);④借鉴特色摘要等 SERP 功能用于站内搜索;⑤扭转用户已形成的负面预期需要很久(某研究里新设计被接受要约 1 年才稳定)。
六、搜索结果页与功能:弹球模式 · 三大 SERP 功能 · 富建议 · 企业内搜
6.1 复杂 SERP 改变搜索行为:弹球模式 Pinball Pattern
心法:过去 SERP 是"10 个蓝色链接",用户从上往下逐行看(线性扫描)。如今图片/视频/交互功能多了,用户视线像弹球一样在视觉突出的元素和关键词之间跳跃。
Why:各元素的视觉权重决定扫描路径——突出元素(特色摘要、购物广告、知识面板)附近视线更易跳跃;连自然结果也更复杂了(带子链接、站内搜索框),吸引更多目光。
关键数据(反"不是第一就是最后"的旧 SEO 教条):
| 指标 | 数据 |
|---|---|
| 首位结果点击占比 | 2006 年 51% → 2016-2018 年 28%(近腰斩) |
| 前三位点击占比 | 仍 59% |
| 第六位获关注 | 36% 的情况下(2010 年:59% 用户不看第三个以下) |
| 特色摘要被关注 | 74% 的情况下 |
| 第二页点击 | 仅 2% 的查询 |
| 折叠线下方点击 | 简单/事实查找任务 5% vs 研究型任务 20% |
| 前五名 | 点击率 ~10-20%,被关注率 40-80% |
落地教训:①不必总排第一,但必须上首页(二页仅 2%);②任务越复杂用户越愿往下翻;③即使不点,被"瞥见"也提升品牌认知、利于未来点击;④复杂任务用户会"持续浏览"——点了不满意会回 SERP 选之前关注过的另一个结果;⑤简单需求常在 SERP 直接被满足(无点击),挑战传统流量模型。
6.2 三大 SERP 功能:特色摘要 · 用户还问 · 知识面板
心法:这三个功能强烈影响用户行为,站内搜索可借鉴。
| 功能 | 是什么 | 作用 |
|---|---|---|
| 特色摘要 Featured Snippets | 对查询答案的简要卡片(段落/列表/表格/视频),部分可交互(点标签换关键词加载新摘要) | 直接给答案;教用户更精确的术语("清洁大理石"→提示"抛光大理石") |
| 用户还问 People Also Ask | 相关问题的折叠列表,点开显特色摘要并加载更多 | 像并行搜索预览,无需离开 SERP |
| 知识面板 Knowledge Panels | 右栏实体信息(人/地/组织:照片/定义/地址/电话/CEO/股价) | 研究新公司/机构时依赖的高层概览 |
四大角色:①路标 Signpost(图片缩略图帮快速验证查询对不对——搜"copperhead"看到蛇图立刻意识到错了,加"s"得到内战政治派别);②吸引注意(视觉突出 + 交互成本低,造就弹球式跳跃);③调整查询/任务(查"Botox 价格"在"用户还问"里看到"Botox 是否安全?"进而转向非侵入疗法——Google 重定向了用户);④给快答(简单问题不必点链接,实现良性"任务终止")。
站内搜索应用:打不过 Google 就学它——模仿特色摘要把常见查询的首选结果做成摘要(《大英百科》已这么做);避免横幅盲视:有用户跳过类广告的特色摘要,但同样内容同时作为传统文本结果出现时仍会被点;复制 Google 视觉设计能借用用户已有的心智模型(罕见的"可合理模仿大站"的机会)。
6.3 富搜索建议 Enriched Suggestions:理论很美,实际少用
心法:富建议 = 在用户输入时除文本自动补全外,还展示热门搜索/最近浏览/推荐产品/图文卡片。听起来有用,但电商研究中用户 60 次里只用了 7 次。
Why(四大失效原因):①与"搜索"心态错位——搜索时用户有明确目标想绕过浏览(像超市直奔某食材),与查询无关的推荐被当干扰;②加载慢——含图片时跟不上输入速度,内容跳动、滞后(saksoff5th 搜"男士羊绒衫",相关结果在按回车后才出现,太晚);③横幅盲视——广告样式 + 远离搜索栏的布局,连直接匹配的产品图都被无视(找 PS5 的用户没注意到右栏的 PS5 图,以为是"热门搜索");④被误认促销内容——缺标签或无展示理由时被当"搭售"忽略。
建议:保留简单文本自动补全(用得多);限制图形/动态内容(减加载+缓解盲视);清晰标记建议类型(热销/推荐/最近浏览);内容类型位置固定;别假设用户会随时间习惯。
6.4 企业内部搜索 Intranet-Search:高期望、低信任
心法:员工期望内网搜索像 Google,实际常失效 → 失去信任 → 改用导航(更慢)→ 削弱对整个内网的信心。设计 + 流程缺一不可。
| 设计实践(11 条) | 要点 |
|---|---|
| 用搜索框非仅图标 | 右上角放可见搜索框 |
| 整合成单一搜索框 | 一个框搜内容/人员/工具,别分散多框;尽量索引全系统 |
| 有效占位符文本 | 说明可搜范围、简洁;输入时消失、删除后重现 |
| 快速相关的输入建议 | 快、自动、非侵入;别因建议慢导致误选;允许直接搜原词 |
| 结果页简洁分列 | 内容/人员/工具分列;人员含姓名/职位/联系方式 |
| 清晰元数据 | 一致的标题/描述/标签 |
| 显示日期 | 发布/更新日期帮评估时效;定期清过时内容 |
| 排序+筛选 | 左侧默认显筛选器、多选、显各项结果数;右上角排序(最新/最旧) |
| 突出重要结果 | 固定结果(pinning)把关键内容置顶,换词也能找到 |
| 拼写建议 | "是否意指"、同义词/多拼写/多义词匹配 |
| 分页非无限滚动 | 保可访问性 + 用户对结果数的控制感 |
流程实践:定期可用性测试 + 看搜索日志、监控高频词与无结果查询、提供反馈表单出月报、主动宣传搜索改进(宣传后员工信心显著提升)。
七、筛选、分页与导航评估:筛选类别 · 分页替代 · 树测试
7.1 筛选类别与值 Filter Categories:好用筛选器的四特点
心法:筛选器由两部分组成——过滤类别 Filter Category(属性,如"颜色""价格")+ 过滤值 Filter Value(具体值,如"红色""低于 100 美元")。好筛选器给用户面对海量选择时的掌控感。
Why:四特点缺一不可——
| 特点 | 含义 | 反例 / 正例 |
|---|---|---|
| 合适 Appropriate | 覆盖用户最在意的维度;通用类别(品牌/材质/颜色/评分/价格/尺寸/库存)不够,要按品类定制(洗衣机要"容量"、洗碗机要"水耗")、国际化货币单位 | ❌ Nordstrom 促销鞋缺"尺寸"筛选 |
| 可预测 Predictable | 用户能大致猜到每个类别里有什么值、各类别有何区别(移动端折叠值列表更考验这点) | ❌ DSW 用"商品类型"模糊标签,"风格"里是"罗马鞋"非通用"凉鞋";✅ 改分层过滤(亚马逊式) |
| 无行话 Free of Jargon | 标签/值用大白话,不用内部代码 | ❌ SPCA 用"紫色/橙色/绿色"做行为筛选(内部代码无意义);✅ Best Buy"处理器型号"旁加工具提示("电脑的大脑") |
| 按优先级排序 Prioritized | 最常用通用类别(品牌/价格/评分)置顶,技术规格置底;数字值小→大或大→小,文本值按字母序(除非有明确用户优先级) | 例外:洗衣机"容量"影响大就该优先 |
7.2 分页替代方案 Alternatives to Pagination:无限加载 vs 显示更多
心法:电商列表页除了传统分页(下一页/页码),还有两种替代——无限加载 Infinite Loading(滚到底自动加载)和显示更多 Show More(点按钮加载)。选哪个取决于产品数量。
Why:无限加载对大规模产品有两个硬伤——①不断把页脚推远(用户够不到退货政策等),②用户失去进度感、易迷失。所以亚马逊那种海量产品仍用传统分页(精确控制、防过载)。
| 方案 | 适用 | 关键要求 |
|---|---|---|
| 无限加载 | 产品少(< 40 项/页)、有好筛选、显总数 | 加载要快(用户能接受的底线);显总数 + 进度感(Ann Taylor 用变粗的边框圈当进度指示器) |
| 显示更多 | 移动端、用户想控制是否加载更多 | 避免页脚障碍(要点击才加载);显总数 + 已加载 + 剩余(Lululemon"查看 333 个中的 40 个",加载完按钮消失) |
通用要求:记住用户位置(bounce back)——从列表页进详情页再返回,要回到原滚动位置,别让用户重滚(Christian Louboutin 无限滚动 + 记住位置,对移动端尤其重要,因移动端开新标签更麻烦)。采用任一替代方案都应做可用性测试。
7.3 树测试 Tree Testing:不画一个像素就评估导航好坏
心法:树测试 = 基于任务的研究法,把 IA 抽成纯文字的可点击菜单(树),让用户在没有视觉设计/内容/搜索/下拉的"裸骨架"上找指定资源——专门检验分类标签和层级清不清楚。只需两件准备:树状结构(整理成电子表格,顶级在第一列、子级向右延伸,Treejack/UserZoom 自动转成可点菜单)+ 测试任务。
Why:无需开发就能快速迭代 IA;通常无主持、可大样本拿量化数据。但缺上下文,要配少量主持研究 + 测后调查补质性洞察;答案常只能选叶节点;不适合评巨型菜单这类复杂导航。
关键指标 + 解读:
| 指标 | 含义 | 标准(Albert & Tullis) |
|---|---|---|
| 成功率 Success Rate | 找到正确类别的用户比例 | <40% 差 / 41-60% 尚可 / 61-80% 良好 / 81-90% 非常好 / >90% 优秀(关键任务目标 >90%) |
| 直接性 Directness | 一次性进对类别(无回退)的比例 | 成功率 74% 但只 50% 直接 → 标签不够清晰 |
| 用时 Time Spent | 平均完成时间 | 即便成功,耗时长 = 任务太复杂 |
| 路径数据 Pathways | 各类别选择频率、首次点击、最终选择 | 首次点击常定成败 |
任务设计:别用标签名直接暴露答案(❌"找'启动业务'信息" → ✅"你计划开草坪护理公司,看有无资源帮你启动业务");任务类型含资源查找/问题探测/对比测试/热身任务。
数据转行动:①首次点击分散 → 重组架构或加多重分类 Polyhierarchy(同一资源挂多个父类,解决不同心智模型;但过度用会乱——若某正确路径几乎无人走就不必保留);②首次点击对但成功率低 → 优化子类标签(子类重叠过多,如"艺术与文化""探索迷人之地"都被选);③用时长/路径复杂 → 简化层级。多树对比用分组实验(每人测一棵)+ 手动算显著性(二元成功率用 N-1 二比例检验、用时用 t 检验/ANOVA)。
vs 卡片分类:卡片分类生成分类(看用户怎么自然组织内容,反映心智模型)→ 树测试验证现有层级(用户能否找到目标)。常见顺序:卡片分类生成方案 → 树测试验证 → 设计开发。
源自 NNGroup Topics / Design Patterns - 设计模式(导航与搜索子集,25 个模式)。可用性测试与十大启发式见 NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估);表单与输入类模式见 NNGroup 交互模式·表单与输入控件(19 个模式 · 表单校验/复选框/日期/步进器/参数控件/列表框vs下拉/开关/拆分按钮/取消vs关闭/链接标签/无密码登录/向导/拖放/加速器/计算器测验);反馈与对话框类模式见 NNGroup 交互模式·反馈·对话框·通知·加载·提示·空状态·数据呈现(15 个模式 · 何时用/怎么选/反例);用户研究方法见 NNGroup UX 研究方法选型(23 法速查/四象限定位/按问题-阶段-预算选/定性探索·定量验证·专家评估·IA·行为分析五大族)。图片/原档(含眼动轨迹图、决策树图、各站点截图与视频)保留在 sources。
来源与关联资料
- NNGroup 交互模式·表单与输入控件(19 个模式 · 表单校验/复选框/日期/步进器/参数控件/列表框vs下拉/开关/拆分按钮/取消vs关闭/链接标签/无密码登录/向导/拖放/加速器/计算器测验)
- NNGroup 交互模式·反馈·对话框·通知·加载·提示·空状态·数据呈现(15 个模式 · 何时用/怎么选/反例)
- NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估)
- NNGroup UX 研究方法选型(23 法速查/四象限定位/按问题-阶段-预算选/定性探索·定量验证·专家评估·IA·行为分析五大族)