22. 🧭 导航架构 Nav Gestures ★★★★☆ App 专属

🌏 Web 网页规范

  • 架构特征: 多级树形树状网格目录、无限展开的多级面包屑
  • 路由机制: 前端路由 History API 拦截,URL 哈希锚点
  • 后退体验: 浏览器自带“后退”按钮读取缓存页直接呈现
  • 切换过渡: 绝大多数直接重刷 DOM 树,较少路由物理平移动效

📱 App 移动端规范

  • 架构特征: 底部 3-5 栏扁平化 Tab 选项、三级内页堆栈推进
  • 路由机制: 原生导航堆栈 (Navigation Controller) 管理视图
  • 后退体验: 侧滑边缘手势跟手物理位移滑出当前内页
  • 切换过渡: 高性能的原生卡片滑入滑出转场,强调物理惯性规律

iOS边缘侧滑返回、层级堆栈与页面拉拽

iOS Swipe Back Gesture & View Stacks

移动端使用物理返回按键或左边缘手势侧滑返回(Swipe Back)。当前页面像卡片一样压在底层视图上。用户通过拖拽左边缘将其拉开,展示底层堆栈,确保导航退回的可预测性。

LIVE PLAYGROUND: iOS 边缘左拉滑页返回堆栈物理仿真 拖动页面左边缘,向右拉开卡片,模拟边缘返回手势
09:41
📶 🔋

⚙️ 系统设置 (底层堆栈)

这里是底层的视图堆栈。刚才顶层的“新建文章”被滑页退出并卸载后,您已自动退回到这里。

✍️ 新建文章 (顶层堆栈) 返回

按住左侧的极窄感应热区并向右滑拉,页面能像一张物理纸张一样被拉出,露出底下原先的设置页。

📋 大模型统一 Prompt (LLM Prompt)