# 导航选型

用户要"做个导航""菜单太乱""手机上不好找""列表太长"时，按这份挑。导航的目标只有一个：用户随时知道自己在哪、下一步去哪，而且不用想。

AI 做导航最常见的毛病，是电脑和手机用同一套：电脑上把入口全塞进汉堡菜单，手机上把一整排菜单硬挤在顶部；或者长列表一律无限滚动，用户想回头找刚才那个商品，再也找不到。导航选对了，页面不用加任何动效就顺。

## 先记住三句话

1. **电脑和手机分开配。** 电脑地方够，主要入口直接摆出来；手机放不下，收进 [汉堡菜单 Hamburger Menu](https://www.dachuiai.com/c/hamburger-menu.md) 或放到底部 [底部标签栏 Tab Bar](https://www.dachuiai.com/c/tab-bar.md)。同一个网站两套都要有，按屏幕宽度切换。
2. **前台和后台分开配。** 给顾客看的前台用顶部导航（[顶部导航栏 Navbar](https://www.dachuiai.com/c/navbar.md)）；天天在用的后台用左边的 [侧边栏 Sidebar](https://www.dachuiai.com/c/sidebar.md)。
3. **一个页面只有一套主导航。** 面包屑、标签页、步骤条都是辅助，不能代替主导航。

## 第一步：看清项目

- **什么网站？** 官网、本地小店、电商、作品集、SaaS、后台、内容站、活动页。
- **入口有多少？** 主入口几个（5 个以内、5 到 8 个、更多），每个入口下面有没有很多子分类，层级有几层。
- **手机还是电脑？** 手机为主的项目先想底部标签栏或汉堡菜单，再想电脑版。
- **列表多长？** 有没有要翻很多页的列表（商品、文章、表格），用户是"随便刷"还是"要找、要比"。

能看项目文件就自己看，看不出来的才问，最多三个问题，没回答就按常见情况假设、写出来、接着做。

## 第二步：按网站类型配

| 网站 | 电脑上 | 手机上 | 再加 |
| --- | --- | --- | --- |
| 官网 | [顶部导航栏 Navbar](https://www.dachuiai.com/c/navbar.md)，内容长就做成 [吸顶导航 Sticky Header](https://www.dachuiai.com/c/sticky-header.md) | [汉堡菜单 Hamburger Menu](https://www.dachuiai.com/c/hamburger-menu.md) | 长页面加 [返回顶部 Back to Top](https://www.dachuiai.com/c/back-to-top.md) |
| 本地小店 | [顶部导航栏 Navbar](https://www.dachuiai.com/c/navbar.md)，入口 3 到 5 个（菜单、关于、到店、预约） | [汉堡菜单 Hamburger Menu](https://www.dachuiai.com/c/hamburger-menu.md)；常用的预约、导航按钮直接摆在外面 | 预约流程加 [步骤条 Steps](https://www.dachuiai.com/c/steps.md) |
| 电商 | [顶部导航栏 Navbar](https://www.dachuiai.com/c/navbar.md) + [超级菜单 Mega Menu](https://www.dachuiai.com/c/mega-menu.md)（分类多时）+ [吸顶导航 Sticky Header](https://www.dachuiai.com/c/sticky-header.md) | [底部标签栏 Tab Bar](https://www.dachuiai.com/c/tab-bar.md)（首页、分类、购物车、我的）+ [汉堡菜单 Hamburger Menu](https://www.dachuiai.com/c/hamburger-menu.md) 放分类 | 商品页加 [面包屑 Breadcrumb](https://www.dachuiai.com/c/breadcrumb.md)、详情用 [标签页 Tabs](https://www.dachuiai.com/c/tabs.md)；搜索结果用 [分页 Pagination](https://www.dachuiai.com/c/pagination.md)；下单用 [步骤条 Steps](https://www.dachuiai.com/c/steps.md) |
| 作品集 | [顶部导航栏 Navbar](https://www.dachuiai.com/c/navbar.md)，入口少；个人主页可以用 [Dock 放大 Dock Magnification](https://www.dachuiai.com/c/dock.md) 做底部入口 | [汉堡菜单 Hamburger Menu](https://www.dachuiai.com/c/hamburger-menu.md) | 作品列表用 [加载更多 Load More](https://www.dachuiai.com/c/load-more.md) |
| SaaS 介绍页 | [顶部导航栏 Navbar](https://www.dachuiai.com/c/navbar.md) + [吸顶导航 Sticky Header](https://www.dachuiai.com/c/sticky-header.md)，功能多时用 [超级菜单 Mega Menu](https://www.dachuiai.com/c/mega-menu.md) | [汉堡菜单 Hamburger Menu](https://www.dachuiai.com/c/hamburger-menu.md) | 文档、长介绍页加 [锚点导航 Anchor](https://www.dachuiai.com/c/anchor-nav.md) |
| 后台 | [侧边栏 Sidebar](https://www.dachuiai.com/c/sidebar.md)（分组、可折叠）+ 顶部 [面包屑 Breadcrumb](https://www.dachuiai.com/c/breadcrumb.md) | [汉堡菜单 Hamburger Menu](https://www.dachuiai.com/c/hamburger-menu.md) 打开侧边栏 | 表格用 [分页 Pagination](https://www.dachuiai.com/c/pagination.md)；同一条记录的几组信息用 [标签页 Tabs](https://www.dachuiai.com/c/tabs.md) |
| 内容站 | [顶部导航栏 Navbar](https://www.dachuiai.com/c/navbar.md) + [吸顶导航 Sticky Header](https://www.dachuiai.com/c/sticky-header.md) | [汉堡菜单 Hamburger Menu](https://www.dachuiai.com/c/hamburger-menu.md)，手机为主的资讯类可以用 [底部标签栏 Tab Bar](https://www.dachuiai.com/c/tab-bar.md) | 长文章加 [锚点导航 Anchor](https://www.dachuiai.com/c/anchor-nav.md) 和 [返回顶部 Back to Top](https://www.dachuiai.com/c/back-to-top.md)；文章列表用 [加载更多 Load More](https://www.dachuiai.com/c/load-more.md) 或 [无限滚动 Infinite Scroll](https://www.dachuiai.com/c/infinite-scroll.md) |
| 活动页 | 一屏一屏往下讲，导航越少越好；要导航就用 [锚点导航 Anchor](https://www.dachuiai.com/c/anchor-nav.md) 跳到各段 | 不放主导航，报名按钮常驻 | — |

## 第三步：列表太长，怎么翻

| 用户在做什么 | 用这个 | 为什么 |
| --- | --- | --- |
| 要找、要比、要回头（商品、搜索结果、后台表格） | [分页 Pagination](https://www.dachuiai.com/c/pagination.md) | 记得住"在第 3 页"，能分享链接，能回去找 |
| 拿不准 | [加载更多 Load More](https://www.dachuiai.com/c/load-more.md) | 用户自己决定要不要看更多，页脚也到得了 |
| 随便刷着看（灵感图、动态、短内容），手机为主 | [无限滚动 Infinite Scroll](https://www.dachuiai.com/c/infinite-scroll.md) | 不用停下来点，刷得最顺 |

- 页面底部有重要内容（联系方式、备案、下载）时不要用 [无限滚动 Infinite Scroll](https://www.dachuiai.com/c/infinite-scroll.md)，页脚永远到不了。
- 列表很长时，不管用哪种，都加 [返回顶部 Back to Top](https://www.dachuiai.com/c/back-to-top.md)。

## 容易混的几对

- 去另一个页面用导航；同一个东西的几份内容（详情、评价、参数）用 [标签页 Tabs](https://www.dachuiai.com/c/tabs.md)。
- 分类五六个以内用普通下拉菜单；十几个子分类、要一眼看全才用 [超级菜单 Mega Menu](https://www.dachuiai.com/c/mega-menu.md)。
- 手机上 3 到 5 个最常用的入口用 [底部标签栏 Tab Bar](https://www.dachuiai.com/c/tab-bar.md)；入口多、不常用的放进 [汉堡菜单 Hamburger Menu](https://www.dachuiai.com/c/hamburger-menu.md)。两个可以一起用。
- 告诉用户"现在在第几层"用 [面包屑 Breadcrumb](https://www.dachuiai.com/c/breadcrumb.md)；告诉用户"流程走到第几步"用 [步骤条 Steps](https://www.dachuiai.com/c/steps.md)。
- 长页面里跳到某一节用 [锚点导航 Anchor](https://www.dachuiai.com/c/anchor-nav.md)；回到最上面用 [返回顶部 Back to Top](https://www.dachuiai.com/c/back-to-top.md)。

## 交付

告诉用户：电脑上用了什么、手机上用了什么、为什么；哪些入口放在外面、哪些收进了菜单。

交之前核对：

- 当前在哪一页（哪一项）有明确的选中样式。
- 手机上每个能点的入口不小于 44px，菜单能用 Esc 或点遮罩关掉。
- 用键盘 Tab 能走到每个入口，焦点框看得见。
- 吸顶导航没有挡住锚点跳过去的标题（锚点的偏移量等于导航高度）。

[全部组件和流程](https://www.dachuiai.com/llms.txt)