Four navigation forms
Navigation is not where you innovate. Four mature patterns cover almost every case. Pick the right one and users do not have to learn it; pick the wrong one and no amount of tweaking makes it feel right.
What you'll run into
- 导航项塞不下了，只好把常用功能藏进二级
- 左边一套导航右边一套标签，用户不知道该看哪个
- 让 AI 做后台，它默认给个左侧导航，但你的模块其实是并列的几个系统
How to choose
| 形式 | 适合什么 | 判断依据 |
|---|---|---|
| 仅左侧一级 | 文档、笔记、单一系统 | 模块少（五到九个），内容都属于同一件事 |
| 仅顶部一级 | 官网、电商、内容站 | 内容型为主，一级入口不多，页面要留给内容 |
| 左一级 顶二级 | 模块多的管理后台 | 一级超过九个，每个一级下面还有好几个二级 |
| 顶一级 左二级 | 门户加多个子系统 | 顶部切换的是几个相对独立的系统，不是同一系统的分类 |
Four general rules
- Keep the top-level menu between five and nine items. That's roughly how many chunks short-term memory handles at once. Past nine, group them; under five, you probably don't need this layer.
- Don't bury nav deeper than two levels. Past level three, users rarely get there. Either promote the content or admit it's low-frequency and move it to settings.
- The current location needs a clear visual cue. Highlight the selected item, pair it with breadcrumbs. The user should always be able to answer "where am I?"
- Keep the nav structure consistent across all pages. One page suddenly swaps the nav and the user's mental map breaks.
Order matters too: put the most-used item in the most visible spot. The first item in a left nav and the leftmost item in a top nav get the most clicks in the entire navigation.
How it changes on mobile
| 桌面形式 | 手机上的对应做法 |
|---|---|
| 仅左侧一级 | 底部标签栏，超出的收进「我的」 |
| 仅顶部一级 | 底部标签栏，或者汉堡菜单（内容站可以接受） |
| 左一级 顶二级 | 底部标签放一级，进去之后顶部分段控件放二级 |
| 顶一级 左二级 | 通常要拆成几个独立入口，或者做一个系统切换页 |