给 AI 做界面动效时，只说一句“做个导航”远远不够。真正有用的是说清楚：用哪种组件、放在哪里、切换什么、怎么高亮。这篇文章用大白话拆解 7 种常见导航组件的切换范围和动效逻辑，并提供可以直接复制给 AI 的描述公式。

先分清切换范围

导航组件看起来都在帮用户“换位置”，但本质区别在于切换范围。切换范围决定了组件是切换一块内容、一个层级，还是整个页面。常见切换范围包括并列内容、父子层级、多步骤流程和主页面。

七种导航组件分别是 Tabs、Segmented Control、Breadcrumb、Pagination、Stepper、Sidebar、Bottom Navigation，分别对应不同的切换范围：有的切内容，有的返回层级，有的控制流程，还有的切整页。

七种导航组件详解

Tabs（标签页）

• 核心概念：在同一页面内切换几组并列内容。
• 使用场景：官网改版项目的概览、数据、成员页面；详情页、数据面板、内容分类。
• 动效描述：点击顶部标签，底部指示条滑到当前项，对应内容区同步切换；未选标签降低亮度。
• 关键特征：标签与内容一一对应，不离开当前页面。

Segmented Control（分段控件）

• 核心概念：在少量互斥状态间快速切换，选项更少、状态更紧凑。
• 使用场景：日/周/月视图切换、列表与卡片切换、排序模式切换。
• 动效描述：点击“周”后，选中背景块从“日”平滑滑到“周”，文字颜色同步变化，并切换统计视图。
• 关键特征：通常 2 至 4 项，一次只选一个，常在两三个视图之间快速切换。

Breadcrumb（面包屑导航）

• 核心概念：用一条路径告诉用户当前所在层级，适合层级比较深的网站。
• 使用场景：多层网站、文件目录、后台详情页。
• 动效描述：显示“工作台/项目/页面详情”的路径；点击“项目”后淡出后续层级，内容回到项目列表。
• 关键特征：展示完整路径，可以返回上级。

Pagination（分页）

• 核心概念：内容太多放不下一页时，拆成多页浏览。
• 使用场景：搜索结果、商品列表、后台表格。
• 动效描述：点击页码 3 后，高亮块移动到 3，列表先淡出、替换为第三页内容，再自然淡入。
• 关键特征：页码前后翻，当前页持续高亮。

Stepper（步骤条）

• 核心概念：流程需要分几步完成时，用步骤条显示当前做到哪一步。
• 使用场景：注册、下单、支付、提交审核等有明确先后顺序的流程。
• 动效描述：点击“下一步”后，连接线长到下一节点；上一节点变对勾，当前节点放大并高亮。
• 关键特征：已完成步骤可回看，显示前面完成了什么、后面还剩什么。

Sidebar（侧边栏）

• 核心概念：适合功能和栏目比较多的后台或桌面端，把主要入口长期放在左侧。
• 使用场景：后台系统、桌面应用、功能较多的网站。
• 动效描述：点击“项目”后，高亮背景块滑到项目入口，右侧主内容切换，左侧导航保持不动。
• 关键特征：入口固定在左侧，当前页面持续高亮。

Bottom Navigation（底部导航）

• 核心概念：更适合手机端，把三到五个最常用入口固定在底部。
• 使用场景：首页、发现、消息、个人中心。
• 动效描述：点击“消息”后，图标轻微上浮并点亮，底部高亮移到消息项，主页面切换到消息列表。
• 关键特征：点击图标就切换主页面，控制在 3 至 5 项。

选择导航组件的四个维度

判断用哪种导航组件，可以从四个维度入手：切换范围、内容层级、设备、流程顺序。

• 切换范围：切一块内容、一个层级，还是整个页面。
• 内容层级：并列内容、父子路径，还是自由跳转。
• 设备：桌面后台长期展示，还是手机底部固定入口。
• 流程顺序：可以随意跳转，还是必须按步骤向前推进。

如何向AI描述导航动效

别再只说“做个导航”，把以下信息一起告诉 AI：

• 组件名称：Tabs / Stepper / Sidebar 等。
• 放在哪里：顶部 / 左侧 / 底部 / 内容区。
• 切换什么：内容 / 层级 / 步骤 / 主页面。
• 怎么高亮：指示条 / 背景块 / 图标 / 节点。

知识小结

七种导航组件对比