界面图鉴
导航栏Navbar
你可能会问
导航栏到底是什么？页面顶上那一条到底该放什么、不该放什么？
简单来说
固定在页面顶部的横条，放站点标志和主要入口，负责「你在哪、能去哪」。
01 · 拆开看看
这一块由什么组成
它几乎出现在每个页面的同一个位置。这份稳定感正是它的价值：无论你在哪一页，抬头就能找到路。它通常由这几部分组成：
站点标志Logo
站点的名字或图标，习惯上点它回首页。
导航链接Links
三五个主要入口，再多就该收进菜单。
行动按钮Action
最想让用户做的事，比如登录或「开始使用」。
汉堡菜单Hamburger
窄屏时链接收进这三条杠里，点开再展开。
02 · 常见变体
同一个零件，几种摆法
Logo 在左、链接随后、按钮收尾，最通用。
链接居中排布，品牌感强，内容站常用。
窄屏形态：只留 Logo 和菜单按钮。
03 · 火眼金睛
这个页面里，哪一块是导航栏？
下面这个页面的每一块都能点。注意：放链接的地方可不止一处。
点一块试试，看看它叫什么
导航栏Navbar
就是它！常驻顶部、全站一致，负责「你在哪、能去哪」。
Hero 区Hero
不是它。Hero 是开场白，负责说清价值，不负责带路。
标签页Tabs
不是它。标签页只在当前内容区里切换视图，管不到全站。
页脚Footer
不是它。页脚也放链接，但它在底部做收尾和兜底。
04 · 用与不用
什么时候该上它
适合
- 几乎所有多页面的站点
- 用户需要随时跳转主要板块
- 需要常驻的登录、注册入口
先别用
- 单屏落地页——一个锚点菜单就够了
- 沉浸式阅读或全屏工具——顶条会一直抢注意力
- 入口超过七个还不收纳的时候
05 · 想一想
一道题，检查眼力
站点有 12 个页面入口，导航栏放不下了。怎么办最合理？
对。导航栏是精选入口，不是站点地图——收纳和分组是它的基本功。
不行。挤下了也没人看得清，窄屏上更是直接爆掉。
太狠了。搜索是补充，常用入口还是要一抬头就能点到。
06 · 说给 AI 听
让 AI 改它时，这样说
说清「加在哪个入口旁边」，AI 就不会打乱你原本的顺序。
导航栏加一个「定价」入口，放在「文档」后面
导航栏滚动时固定在页面顶部，加一点淡淡的阴影
手机上导航栏收成汉堡菜单
导航栏右侧的登录按钮换成头像加下拉菜单
最容易踩的坑
导航栏是全站的承诺：每一页都长一样、都在老地方。单独给某一页改导航，用户会以为自己跳到了别的网站。