导航选型
给 AI 的 Markdown用户要"做个导航""菜单太乱""手机上不好找""列表太长"时，按这份挑。导航的目标只有一个：用户随时知道自己在哪、下一步去哪，而且不用想。
AI 做导航最常见的毛病，是电脑和手机用同一套：电脑上把入口全塞进汉堡菜单，手机上把一整排菜单硬挤在顶部；或者长列表一律无限滚动，用户想回头找刚才那个商品，再也找不到。导航选对了，页面不用加任何动效就顺。
先记住三句话
- 电脑和手机分开配。 电脑地方够，主要入口直接摆出来；手机放不下，收进 汉堡菜单 Hamburger Menu 或放到底部 底部标签栏 Tab Bar。同一个网站两套都要有，按屏幕宽度切换。
- 前台和后台分开配。 给顾客看的前台用顶部导航（顶部导航栏 Navbar）；天天在用的后台用左边的 侧边栏 Sidebar。
- 一个页面只有一套主导航。 面包屑、标签页、步骤条都是辅助，不能代替主导航。
第一步：看清项目
- 什么网站？ 官网、本地小店、电商、作品集、SaaS、后台、内容站、活动页。
- 入口有多少？ 主入口几个（5 个以内、5 到 8 个、更多），每个入口下面有没有很多子分类，层级有几层。
- 手机还是电脑？ 手机为主的项目先想底部标签栏或汉堡菜单，再想电脑版。
- 列表多长？ 有没有要翻很多页的列表（商品、文章、表格），用户是"随便刷"还是"要找、要比"。
能看项目文件就自己看，看不出来的才问，最多三个问题，没回答就按常见情况假设、写出来、接着做。
第二步：按网站类型配
| 网站 | 电脑上 | 手机上 | 再加 |
|---|---|---|---|
| 官网 | 顶部导航栏 Navbar，内容长就做成 吸顶导航 Sticky Header | 汉堡菜单 Hamburger Menu | 长页面加 返回顶部 Back to Top |
| 本地小店 | 顶部导航栏 Navbar，入口 3 到 5 个（菜单、关于、到店、预约） | 汉堡菜单 Hamburger Menu；常用的预约、导航按钮直接摆在外面 | 预约流程加 步骤条 Steps |
| 电商 | 顶部导航栏 Navbar + 超级菜单 Mega Menu（分类多时）+ 吸顶导航 Sticky Header | 底部标签栏 Tab Bar（首页、分类、购物车、我的）+ 汉堡菜单 Hamburger Menu 放分类 | 商品页加 面包屑 Breadcrumb、详情用 标签页 Tabs；搜索结果用 分页 Pagination；下单用 步骤条 Steps |
| 作品集 | 顶部导航栏 Navbar，入口少；个人主页可以用 Dock 放大 Dock Magnification 做底部入口 | 汉堡菜单 Hamburger Menu | 作品列表用 加载更多 Load More |
| SaaS 介绍页 | 顶部导航栏 Navbar + 吸顶导航 Sticky Header，功能多时用 超级菜单 Mega Menu | 汉堡菜单 Hamburger Menu | 文档、长介绍页加 锚点导航 Anchor |
| 后台 | 侧边栏 Sidebar（分组、可折叠）+ 顶部 面包屑 Breadcrumb | 汉堡菜单 Hamburger Menu 打开侧边栏 | 表格用 分页 Pagination；同一条记录的几组信息用 标签页 Tabs |
| 内容站 | 顶部导航栏 Navbar + 吸顶导航 Sticky Header | 汉堡菜单 Hamburger Menu，手机为主的资讯类可以用 底部标签栏 Tab Bar | 长文章加 锚点导航 Anchor 和 返回顶部 Back to Top；文章列表用 加载更多 Load More 或 无限滚动 Infinite Scroll |
| 活动页 | 一屏一屏往下讲，导航越少越好；要导航就用 锚点导航 Anchor 跳到各段 | 不放主导航，报名按钮常驻 | — |
第三步：列表太长，怎么翻
| 用户在做什么 | 用这个 | 为什么 |
|---|---|---|
| 要找、要比、要回头（商品、搜索结果、后台表格） | 分页 Pagination | 记得住"在第 3 页"，能分享链接，能回去找 |
| 拿不准 | 加载更多 Load More | 用户自己决定要不要看更多，页脚也到得了 |
| 随便刷着看（灵感图、动态、短内容），手机为主 | 无限滚动 Infinite Scroll | 不用停下来点，刷得最顺 |
- 页面底部有重要内容（联系方式、备案、下载）时不要用 无限滚动 Infinite Scroll，页脚永远到不了。
- 列表很长时，不管用哪种，都加 返回顶部 Back to Top。
容易混的几对
- 去另一个页面用导航；同一个东西的几份内容（详情、评价、参数）用 标签页 Tabs。
- 分类五六个以内用普通下拉菜单；十几个子分类、要一眼看全才用 超级菜单 Mega Menu。
- 手机上 3 到 5 个最常用的入口用 底部标签栏 Tab Bar；入口多、不常用的放进 汉堡菜单 Hamburger Menu。两个可以一起用。
- 告诉用户"现在在第几层"用 面包屑 Breadcrumb；告诉用户"流程走到第几步"用 步骤条 Steps。
- 长页面里跳到某一节用 锚点导航 Anchor；回到最上面用 返回顶部 Back to Top。
交付
告诉用户：电脑上用了什么、手机上用了什么、为什么；哪些入口放在外面、哪些收进了菜单。
交之前核对：
- 当前在哪一页（哪一项）有明确的选中样式。
- 手机上每个能点的入口不小于 44px，菜单能用 Esc 或点遮罩关掉。
- 用键盘 Tab 能走到每个入口，焦点框看得见。
- 吸顶导航没有挡住锚点跳过去的标题（锚点的偏移量等于导航高度）。