术语图鉴/UI/UX 设计/导航栏设计
←→切换Esc返回

导航栏设计 Navigation Bar

你可能会说

帮我设计一个导航栏:Logo 在左、菜单居中、登录按钮在右。

页面顶部(或侧边)的菜单栏,放着去往各个页面的链接。

页面顶部(或侧边)的菜单栏,放着去往各个页面的链接。是网站的「地图」,用户靠它找到想去的地方。

也常被叫作Navigation Bar

生活类比

像商场的楼层指引牌——告诉你一楼化妆品、二楼女装,想去哪看牌子就行。

🎮 动手试试

LogoMenu
选择题选择一个你认为最合适的答案

关于「导航栏」,以下哪个描述最准确?

你可以这样告诉 AI

帮我设计一个顶部导航栏:左侧 Logo、中间五个菜单项、右侧登录按钮,滚动时吸顶并加底部阴影。

容易混淆?这样区分

导航栏设计 Navigation Bar≠
标签页 Tabs

导航栏用于在不同页面之间跳转,标签页用于在同一页面内切换不同内容区块。

什么时候用

多页面网站导航

网站有多个页面需要让用户在各页面之间跳转时,用导航栏在顶部或侧边提供清晰的菜单入口,减少用户迷路。

和 AI 协作时

想让 AI 做导航栏时,说「顶部导航:左 Logo、中五个菜单项、右登录按钮、滚动吸顶」,AI 会生成完整代码。

什么时候不用

单页无跳转场景

如果整个网站只有一个页面(如个人简历、产品落地页),不需要导航栏——用户没有别的地方可去。

与纯 API 后台无关

REST API、数据库管理等没有前端界面的后端系统,导航栏完全没有应用场景。

组成结构 · Anatomy

1
核心概念Core

页面顶部(或侧边)的菜单栏,放着去往各个页面的链接。是网站的「地图」,用户靠它找到想去的地方。

2
实际表现In Practice

像商场的楼层指引牌——告诉你一楼化妆品、二楼女装,想去哪看牌子就行。

3
与 AI 的关联AI Context

和 AI 沟通时提到「导航栏加个「博客」入口」,就是在菜单栏加链接。

典型使用场景

设计顶部导航
告诉 AI「导航栏左 Logo、中菜单、右登录按钮,滚动超过 80px 吸顶并加阴影,当前页高亮」
想弄懂概念时
告诉 AI「用大白话给我解释什么是导航栏,举个生活中的例子」

延伸阅读