底部导航系统

底部导航系统 是做什么的？

目的

底部导航系统为移动网页界面和渐进式网页应用（PWA）中的底部导航栏、标签栏和持久操作坞提供了标准化的移动优先设计框架。 现代大宽高比的移动设备将顶部页眉置于舒适的"拇指区"之外，使得单手操作变得困难。 底部导航将主要应用目的地和关键转化操作直接锚定在用户拇指自然可及的范围内。

设计有效的底部导航系统需要平衡项目密度（3到5个）、激活/非激活状态视觉层次、触控目标尺寸、徽章指示器位置、视口安全区域内边距（env(safe-area-inset-bottom)）、浮动操作按钮集成以及无缝的桌面适配规则。 本技能将移动端UX设计和技术实施无缝衔接，并严格遵守WCAG AA无障碍标准。

使用场景

• 电商移动网页应用： 为首页、搜索/浏览、收藏夹、购物车（含物品数量徽章）和账户提供即时的单指拇指操控。
• SaaS移动网页应用及PWA： 为移动端生产力应用（如今日任务、动态、快速添加 [+]、消息、设置）构建主要导航结构。
• 社交与内容平台： 管理首页动态、探索、创建/上传、活动通知和用户个人资料之间的高频切换。
• 即时配送与物流网页服务： 在活动追踪过程中，将主要状态标签（订单、活动配送地图、收件箱、个人资料）保持在底部视口。
• 现场操作与检查表单： 在长移动表单底部固定持久操作按钮（保存草稿、上传照片、提交表单）。

何时不使用

• 桌面优先的企业级网页应用： 对于宽屏布局（>1024px），垂直侧边栏或顶部页眉栏提供更好的空间效率，请使用 sidebar-navigation-system 或 site-navigation-system。
• 页面内内容切换： 要在特定页面区域或卡片内切换视图或过滤内容，请使用 tab-ui-system 或 segmented-control-system。
• 上下文操作表与模态框： 对于覆盖在页面内容之上的临时、任务特定的叠加面板，请使用 accessible-bottom-sheet-implementation 或 overlay-and-dialog-system。
• 浮动次要操作触发器： 对于单个浮动帮助按钮、返回顶部按钮或聊天气泡，请使用 sticky-and-floating-ui-system。

输入

1. 信息架构分类法： 顶层主要目的地列表（最多3–5项）及其图标/标签元数据。
2. 通知与徽章需求： 未读指示器（点状徽章 vs. 数字计数徽章）的规格说明。
3. 主要操作高亮（可选）： 指定中间槽位是否需要提升式/浮动操作按钮用于主要的创建操作。
4. 设计令牌： 调色板、层级/阴影令牌、流动排版、图标集和间距变量（来自 accessible-color-system、elevation-and-depth-system 和 iconography-system）。
5. 响应式桌面策略： 桌面适配模式的选择（桌面端隐藏、停靠到侧边栏或转换为顶部页眉导航）。

输出

1. 底部导航栏结构规范： 详细布局蓝图，定义项目宽度、图标与标签垂直堆叠、排版令牌、徽章放置坐标以及包含安全区域内边距的高度计算。
2. 交互状态令牌映射： 默认/非激活、激活/选中、悬停、焦点可见和禁用项目的颜色对比度定义与视觉状态。
3. 拇指区无障碍映射： 空间放置规则，优化高频标签至中心拇指可及区域。
4. 安全区域与视口内边距指南： 使用 env(safe-area-inset-bottom) 处理无边框移动显示切口的CSS实现规则（iOS Home Indicator 和 Android 手势栏）。
5. 响应式断点与桌面过渡蓝图： 用于在平板和桌面屏幕上隐藏或过渡底部栏的响应式媒体查询和布局规则。

---

工作流

1. 确定项目数量与空间网格

将底部导航栏限制在3到5个顶层项目：

• 3个项目： 等宽弹性分布（width: 33.33%）。适用于具有不同核心视图的紧凑型网页应用。
• 4个项目： 等宽弹性分布（width: 25%）。电商和SaaS移动应用的理想平衡点。
• 5个项目： 等宽弹性分布（width: 20%）。移动屏幕宽度（320px–430px）推荐的最高限制。
• 5项原则： 永远不要超过5个项目。如果有6个或更多目的地，将次要页面归入"更多"或"账户"菜单选项卡，或将低优先级的链接移到侧边抽屉中。

2. 定义垂直结构与高度令牌

构建一个固定在视口底部的容器：

• 容器定位： 使用 position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;。
• 基础高度： 为标准标签栏设置 56px 到 64px 的基础内容高度，加上 padding-bottom: env(safe-area-inset-bottom, 0px) 以防止被iOS主屏幕指示器或Android手势条遮挡触摸。
• 项目堆叠布局：
  • 图标尺寸： 标准化为 24x24px 的SVG图标（来自 iconography-system）。
  • 标签排版： 使用 11px 到 12px 字号（font-size: 0.75rem; font-weight: 500; line-height: 1.2）。
  • 垂直间距： 图标位于顶部（顶部内边距4px），图标与标签之间2px间隙，底部内边距4px。
  • 触摸目标底线： 确保每个选项卡项提供全高、全宽的触摸区域（min-height: 48px、min-width: 48px）。

3. 建立激活与非激活状态层次

强制活动选项卡与非活动选项卡之间具有强烈的视觉对比：

• 非激活状态：
  • 图标填充/描边：柔和的次要颜色（例如 var(--text-tertiary, #6B7280)）。
  • 标签颜色：次要文本颜色（var(--text-secondary, #4B5563)）。
  • 字重：常规或中等（400 或 500）。
• 激活/选中状态：
  • 图标填充/描边：品牌主色或高对比度强调色（var(--brand-primary, #2563EB)）。如果可用，使用填充图标变体。
  • 标签颜色：主要文本或品牌颜色（var(--text-primary, #111827) 或 var(--brand-primary)）。
  • 字重：半粗体（600）。
  • 激活指示器（可选）：3px 顶部边框或药丸指示器（background: var(--brand-primary)），或细微的背景胶囊填充（var(--brand-subtle, #EFF6FF)）。
• 对比度要求： 确保非激活文本和激活文本均通过 WCAG AA 最小对比度比率（与栏的背景色相比为4.5:1）。

4. 集成徽章与通知指示器

徽章通知用户关于未读消息、待处理操作或购物车商品数量：

• 徽章定位： 徽章相对于选项卡24x24px图标容器的右上角定位（position: absolute; top: -2px; right: -6px;）。
• 点状徽章（未读指示器）： 8x8px 实心圆点（background: var(--badge-danger, #EF4444)）。
• 数字徽章（计数指示器）： 药丸徽章（height: 16px; min-width: 16px; padding: 0 4px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #FFFFFF; background: var(--badge-danger);）。超过99的计数截断为 99+。
• 无障碍文本： 始终在徽章内部或旁边包含仅屏幕阅读器可访问的文本（<span class="sr-only">3条未读通知</span>）。

5. 处理视口安全区域与表面样式

确保底部导航表面在滚动内容上保持可读：

• 背景模糊与半透明： 应用半透明表面背景及背景过滤（background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border-top: 1px solid var(--border-subtle, #E5E7EB);）。深色模式下使用 background: rgba(17, 24, 39, 0.85)。
• 安全区域内边距规则： 使用 CSS：

  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--nav-bg);
    border-top: 1px solid var(--nav-border);
  }
  

• 页面底部间隙： 为主可滚动内容容器添加等于底部栏高度加上安全区域内边距的底部内边距（padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px))），以防止内容被固定栏截断。

6. 实现响应式桌面适配

底部导航栏针对触摸屏进行了优化，在宽桌面视口（>1024px）上横向拉伸显得不自然。

• 断点策略：
  • 移动端（<768px）： 渲染固定的底部导航栏。
  • 平板（768px – 1023px）： 要么保持底部栏居中/约束（max-width: 480px; margin: 0 auto; border-radius: 16px 16px 0 0;），要么转换为顶部页眉。
  • 桌面端（≥1024px）： 隐藏底部导航栏（display: none）。主要目的地过渡到顶部页眉（site-navigation-system）或垂直侧边栏（sidebar-navigation-system）。

---

决策规则

底部栏布局模式的选择

模式	项目结构	理想使用场景	关键交互
标准标签栏	3 到 5 个等宽项目，包含图标和文本标签。	电商、SaaS导航、内容门户。	一键即时视图导航。
中心FAB操作坞	4个标签 + 1个提升式中心操作按钮（例如 "+ 创建"）。	社交发帖、任务跟踪、媒体创作应用。	中央按钮打开创建模态框/面板；外部标签导航视图。
带标签图标栏	4–5 个项目，包含固定图标和可见的 11px 文本标签。	大多数移动网页应用的默认选项；最高可用性和清晰度。	无需猜测图标即可立即识别。
仅图标紧凑栏	4–5 个项目，仅包含图标（标签显示在 aria-label 中）。	高度熟悉的消费类应用（如类似 Instagram 的界面）。	谨慎使用： 仅当图标准确且通用识别度高时使用。

徽章样式选择

• 点状徽章（红色/强调色圆点）： 当用户只需要知道"有新活动"，但确切数量无关紧要时使用（例如，新博文可访问、系统更新）。
• 数字徽章（计数）： 当确切的项目数量直接影响用户操作时使用（例如，"购物车中有3件商品"、"5条未读消息"）。

---

约束

• 无障碍（WCAG 2.1 / 2.2 AA）：
  • SC 2.1.1 键盘无障碍： 底部导航选项卡必须使用标准 <nav> 搭配语义化的 <a> 链接或 <button role="tab"> 控件实现，可通过 Tab 键或 Arrow 键导航。
  • SC 2.4.7 焦点可见： 获得焦点的底部导航项必须显示未裁剪的焦点环，与背景的对比度至少为3:1。
  • SC 2.5.8 目标尺寸（最小）： 触摸目标必须至少 48x48px（或 24x24px，周围间距确保 48px 触摸区域）。
  • SC 1.4.3 视觉对比： 非活动选项卡标签和图标必须与背景填充保持至少 4.5:1 的对比度。
• 滚动行为： 底部导航栏必须在触摸惯性滚动期间可靠地固定（position: fixed），无闪烁或垂直抖动。
• 安全区域内边距： 必须包含 env(safe-area-inset-bottom)，以避免与基于手势的移动视口上的硬件主屏幕指示器重叠。

---

常见失败模式

• 缺少安全区域间隙： 未应用 env(safe-area-inset-bottom)，导致底部导航标签被iOS手势栏或屏幕切口重叠。
• 项目密度过高： 在底部栏中强制放置 6 或 7 个项目，将触摸目标压缩至 40px 以下，导致频繁的意外误触。
• 拉伸的桌面栏： 允许 4 个项目底部栏在桌面显示器上横跨 1920px 宽度，图标之间存在巨大空白间隙。
• 未标注的神秘图标： 为含义模糊的图标省略文本标签（例如，使用星形图标而不标注它是表示"收藏"、"评论"还是"奖励"）。
• 固定导航背后内容截断： 忘记为页面容器添加 padding-bottom，导致页脚内容和主要表单提交按钮被固定底部栏永久遮挡。

---

验证标准

• 底部导航包含 3 到 5 个主要目的地。
• 每个选项卡提供的触摸目标区域达到或超过 48x48px。
• 激活和非激活状态视觉上可区分，并通过 WCAG AA 4.5:1 对比度要求。
• CSS 包含 padding-bottom: env(safe-area-inset-bottom) 以支持安全区域内边距。
• 主页面内容容器包含底部内边距，确保页面内容永远不会被隐藏。
• 徽章包含仅屏幕阅读器可访问的文本（例如 sr-only）。
• 导航可通过键盘完全访问（Tab 和 Shift+Tab 或 Arrow 键，并带有清晰的 :focus-visible 指示器）。
• 在视口宽度 ≥1024px 时，底部栏干净地隐藏或过渡到桌面顶部页眉或侧边栏。