mobile-navigation

# 移动端导航参考 > 导航模式、深度链接、返回处理以及选项卡/堆栈/抽屉决策。 > **导航是应用程序的骨架——如果做错了，一切都会感觉支离破碎。** --- ## 1. 导航选择决策树 应用类型？ │ ├── 3-5 个顶级部分（重要性相同） │ └── ✅ 选项卡栏 / 底部导航 │ 示例：社交、电商、工具类 │ ├── 深度层级内容（向下钻取） │ └── ✅ 堆栈导航 │ 示例：设置、电子邮件文件夹 │ ├── 多个目的地（>5 个顶级） │ └── ✅ 抽屉导航 │ 示例：Gmail、复杂的企业应用 │ ├── 单一线性流程 │ └── ✅ 仅堆栈（向导/引导页） │ 示例：结账、设置流程 │ └── 平板/折叠屏 └── ✅ 导航栏 + 列表-详情 示例：iPad 上的邮件、笔记 --- ## 2. 选项卡栏导航 ### 何时使用 ✅ 在以下情况使用选项卡栏： ├── 3-5 个顶级目的地 ├── 目的地重要性相同 ├── 用户频繁在它们之间切换 ├── 每个选项卡有独立的导航堆栈 └── 应用用于短会话 ❌ 在以下情况避免使用选项卡栏： ├── 超过 5 个目的地 ├── 目的地有明确的层级 ├── 选项卡使用频率极不均衡 └── 内容按顺序流动 ### 选项卡栏最佳实践 iOS 选项卡栏： ├── 高度：49pt（带主屏幕指示器为 83pt） ├── 最大项目数：5 ├── 图标：SF Symbols, 25×25pt ├── 标签：始终显示（可访问性） ├── 活动指示器：着色颜色 Android 底部导航： ├── 高度：80dp ├── 最大项目数：5（3-5 为佳） ├── 图标：Material Symbols, 24dp ├── 标签：始终显示 ├── 活动指示器：药丸形状 + 填充图标 ### 选项卡状态保持 规则：每个选项卡维护自己的导航堆栈。 用户旅程： 1. 主页选项卡 → 钻取到项目 → 加入购物车 2. 切换到个人资料选项卡 3. 切回主页选项卡 → 应返回“加入购物车”屏幕，而不是主页根目录 实现： ├── React Navigation：每个选项卡有自己的导航器 ├── Flutter：使用 IndexedStack 进行状态保持 └── 切换时永远不要重置选项卡堆栈 --- ## 3. 堆栈导航 ### 核心概念 堆栈隐喻：卡片一张叠在另一张上面 Push（入栈）：在顶部添加屏幕 Pop（出栈）：移除顶部屏幕（返回） Replace（替换）：交换当前屏幕 Reset（重置）：清除堆栈，设置新根目录 视觉效果：新屏幕从右侧滑入 (LTR) 返回