四种导航形式
导航形式不用创新。四种成熟做法覆盖了绝大多数情况,选对了用户不用学,选错了怎么调都别扭。
你会遇到的现象
- 导航项塞不下了,只好把常用功能藏进二级
- 左边一套导航右边一套标签,用户不知道该看哪个
- 让 AI 做后台,它默认给个左侧导航,但你的模块其实是并列的几个系统
怎么选
| 形式 | 适合什么 | 判断依据 |
|---|---|---|
| 仅左侧一级 | 文档、笔记、单一系统 | 模块少(五到九个),内容都属于同一件事 |
| 仅顶部一级 | 官网、电商、内容站 | 内容型为主,一级入口不多,页面要留给内容 |
| 左一级 顶二级 | 模块多的管理后台 | 一级超过九个,每个一级下面还有好几个二级 |
| 顶一级 左二级 | 门户加多个子系统 | 顶部切换的是几个相对独立的系统,不是同一系统的分类 |
四条通用规矩
- 一级菜单控制在五到九项。人的短期记忆一次能处理的信息大约是这个量。超过九个就该分组,少于五个说明可能不需要这一层。
- 导航别藏超过两级。第三级往下用户基本走不到。要么把内容提上来,要么承认它是低频功能,放进设置里。
- 当前位置要有明确的视觉提示。高亮选中项,配合面包屑。用户随时要能回答「我在哪」。
- 导航结构在所有页面保持一致。某个页面突然换了导航,用户建立的空间感就断了。
顺序也有讲究:最常用的放最显眼的位置。左侧导航的第一项、顶部导航的最左边,是整个导航里点击率最高的地方。
到手机上怎么变
| 桌面形式 | 手机上的对应做法 |
|---|---|
| 仅左侧一级 | 底部标签栏,超出的收进「我的」 |
| 仅顶部一级 | 底部标签栏,或者汉堡菜单(内容站可以接受) |
| 左一级 顶二级 | 底部标签放一级,进去之后顶部分段控件放二级 |
| 顶一级 左二级 | 通常要拆成几个独立入口,或者做一个系统切换页 |
